Expo with Firebase

Setting up Firebase

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.

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);

Create a Firebase Config file

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);

Initialize metro config:

run the following command to initialize metro config

npx expo customize metro.config.js

Edit your metro.config.js file

const { getDefaultConfig } = require('@expo/metro-config');

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

module.exports = defaultConfig;

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"
  ]
}

If not already installed, install:

npm install @react-native-async-storage/async-storage

Install the Chipi SDK

Install the required packages:

# Install Chipi Pay SDK
npm install @chipi-stack/chipi-expo

Setup the Chipi SDK Provider

In your .env file, add your Chipi publishable API key:

EXPO_PUBLIC_CHIPI_API_PUBLIC_KEY=your_chipi_api_public_key

Never put CHIPI_SECRET_KEY in an Expo app — the SDK explicitly forbids it at the type level via ChipiBrowserSDKConfig. Secret keys belong on your backend only.

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_PUBLIC_KEY;
if (!API_PUBLIC_KEY) throw new Error("EXPO_PUBLIC_CHIPI_API_PUBLIC_KEY is not set");

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

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

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!

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.

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.

Documentation Index

Setting up Firebase

Create a Firebase Config file

Install the Chipi SDK

Setup the Chipi SDK Provider

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

Follow the Firebase guides and begin your Journey !

Using Firebase Auth with Chipi hooks 🕺 !

Celebrate & Learn More! 🎉