Skip to main content
1

Setting up Firebase

  1. First, in order to create authentication with Firebase you will need two things: first, a Firebase account and second, a Expo project.
Once you have your account you must:
  • Go to your console and create a new Firebase project.
  • Once you have a project, proceed to the Authentication section.
  • Click on the Sign in method tab and enable the Email/password sign-in method and click save.
  • Go to project settings, scroll and under your apps section click on the web app usually displayed with a </> icon.
  • Register your app and click save.
  1. Install the npm package in your project:
npm install firebase
On the Firebase Register web app page, you will also be provided something like this. Save it for later.
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "apikey",
  authDomain: "domain",
  projectId: "your-id",
  storageBucket: "storage-bucket",
  messagingSenderId: "000000",
  appId: "app-id"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
2

Create a Firebase Config file

  1. Create a file named firebase.ts with the following configuration:
import { initializeApp } from "firebase/app";
import { initializeAuth, getReactNativePersistence } from 'firebase/auth';
import ReactNativeAsyncStorage from '@react-native-async-storage/async-storage';
import { getFirestore } from "firebase/firestore";
import { getStorage } from 'firebase/storage';

const firebaseConfig = {
  apiKey: process.env.EXPO_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.EXPO_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.EXPO_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.EXPO_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.EXPO_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.EXPO_PUBLIC_FIREBASE_APP_ID,
};

// Initialize Firebase

export const firebaseApp = initializeApp(firebaseConfig)
export const auth = initializeAuth(firebaseApp, {
  persistence: getReactNativePersistence(ReactNativeAsyncStorage)
});
export const db = getFirestore(firebaseApp);
export const storage = getStorage(firebaseApp);
  1. Initialize metro config:
run the following command to initialize metro config
npx expo customize metro.config.js
  1. Edit your metro.config.js file
const { getDefaultConfig } = require('@expo/metro-config');

const defaultConfig = getDefaultConfig(__dirname);
defaultConfig.resolver.sourceExts.push('cjs');

module.exports = defaultConfig;
  1. Go to tsconfig.json and add to paths for typescript issues
{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "paths": {
      "@firebase/auth": ["./node_modules/@firebase/auth/dist/index.rn.d.ts"],
      "@/*": [
        "./*"
      ]
    }
  },
  "include": [
    "**/*.ts",
    "**/*.tsx",
    ".expo/types/**/*.ts",
    "expo-env.d.ts"
  ]
}
  1. If not already installed, install:
npm install @react-native-async-storage/async-storage
3

Install the Chipi SDK

Install the required packages:
# Install Chipi Pay SDK
npm install @chipi-stack/chipi-expo
4

Setup the Chipi SDK Provider

  1. In your .env file, add your Chipi API keys:
EXPO_PUBLIC_CHIPI_API_KEY=your_chipi_api_public_key
CHIPI_SECRET_KEY=your_chipi_api_secret_key
  1. Set up the Chipi Pay provider in your application:
// app/_layout.tsx

import { ChipiProvider } from "@chipi-stack/chipi-expo";

const API_PUBLIC_KEY = process.env.EXPO_PUBLIC_CHIPI_API_KEY;
if (!API_PUBLIC_KEY) throw new Error("EXPO_PUBLIC_CHIPI_API_KEY is not set");

export default function RootLayout() {
  // ...
  return (
    <ChipiProvider
      config={{
        apiPublicKey: API_PUBLIC_KEY,
      }}
    >
      <Stack />
    </ChipiProvider>
  );
}
5

Add Google's public keys endpoint to Chipi configuration🕺 !

Visit the dashboard JWKS and JWT configuration, select Firebase as your auth provider, and paste this under the JWKS Endpoint URL.
https://www.googleapis.com/identitytoolkit/v3/relyingparty/publicKeys
6

Follow the Firebase guides and begin your Journey !

Visit the Firebase Authentication guide to learn how to use createUserWithEmailAndPassword and create your sign up and login!
7

Using Firebase Auth with Chipi hooks 🕺 !

Below you will see a simple example of how you can get and pass your tokens to the different Chipi hooks:
import { useGetWallet } from "@chipi-stack/chipi-expo";
import { useEffect, useState } from "react";
import { View, Text, ActivityIndicator } from "react-native";
import { onAuthStateChanged } from "firebase/auth";
import { auth } from "@/utils/firebase";

export default function Home() {
  const [userId, setUserId] = useState<string | null>(null);

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      if (user) {
        setUserId(user.uid);
      }
    });
    return () => unsubscribe();
  }, []);

  const getToken = async (): Promise<string> => {
    const user = auth.currentUser;
    if (!user) {
      throw new Error("User not authenticated");
    }
    const token = await user.getIdToken();
    return token;
  };

  const { data: wallet, isLoading } = useGetWallet({
    getBearerToken: getToken,
    params: {
      externalUserId: userId || "",
    },
  });

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home page</Text>
      {isLoading && <ActivityIndicator size="large" />}
      {wallet && <Text>{JSON.stringify(wallet, null, 2)}</Text>}
    </View>
  );
}
Note: If you have not yet created a wallet, you may see an error with a message like:message:“Wallet not found for externalUserId: user_id, apiPublicKey: pk_prod_something”This error is expected and shows that your app is correctly contacting Chipi, but there is not yet a wallet for this user. Once you create a wallet, this error will disappear.
8

Celebrate & Learn More! 🎉

That’s it! You should now have an initial working version of Chipi Pay integrated into your application. You can now start implementing various features like:
  • Wallet Creations
  • Sending tokens
  • Signing transactions
  • and more!
Need help? Check out our Telegram Community for support and to connect with other developers.