> ## Documentation Index
> Fetch the complete documentation index at: https://docs.chipipay.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Expo with Firebase

> Learn how to integrate Chipi Pay with your Expo application using Firebase Auth for authentication and secure wallet storage.

<Steps>
  <Step title="Setting up Firebase" titleSize="h2">
    1. First, in order to create authentication with Firebase you will need two things: first, a [Firebase account](https://firebase.google.com/) and second, a [Expo](https://expo.dev/) project.

    Once you have your account you must:

    * Go to your [console](https://console.firebase.google.com) 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.

    2. Install the npm package in your project:

    ```bash theme={null}
    npm install firebase
    ```

    On the Firebase Register web app page, you will also be provided something like this. Save it for later.

    ```typescript theme={null}
    // 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);
    ```
  </Step>

  <Step title="Create a Firebase Config file" titleSize="h2">
    1. Create a file named `firebase.ts` with the following configuration:

    ```typescript theme={null}
    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);

    ```

    2. Initialize metro config:

    run the following command to initialize metro config

    ```bash theme={null}
    npx expo customize metro.config.js
    ```

    3. Edit your `metro.config.js` file

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

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

    module.exports = defaultConfig;

    ```

    4. Go to `tsconfig.json` and add to paths for typescript issues

    ```json theme={null}
    {
      "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"
      ]
    }
    ```

    5. If not already installed, install:

    ```bash theme={null}
    npm install @react-native-async-storage/async-storage
    ```
  </Step>

  <Step title="Install the Chipi SDK" titleSize="h2">
    Install the required packages:

    ```bash theme={null}
    # Install Chipi Pay SDK
    npm install @chipi-stack/chipi-expo
    ```
  </Step>

  <Step title="Setup the Chipi SDK Provider" titleSize="h2">
    1. In your `.env` file, add your Chipi **publishable** API key:

    ```bash theme={null}
    EXPO_PUBLIC_CHIPI_API_PUBLIC_KEY=your_chipi_api_public_key
    ```

    <Warning>
      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.
    </Warning>

    2. Set up the Chipi Pay provider in your application:

    ```tsx theme={null}
    // 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>
      );
    }
    ```
  </Step>

  <Step title="Add Google's public keys endpoint to Chipi configuration🕺 !" titleSize="h2">
    Visit the [dashboard JWKS and JWT configuration](https://dashboard.chipipay.com/configure/jwks-endpoint), select `Firebase` as your auth provider, and paste this under the JWKS Endpoint URL.

    ```bash theme={null}
    https://www.googleapis.com/identitytoolkit/v3/relyingparty/publicKeys
    ```
  </Step>

  <Step title="Follow the Firebase guides and begin your Journey !" titleSize="h2">
    Visit the [Firebase Authentication guide](https://firebase.google.com/docs/auth/web/password-auth) to learn how to use `createUserWithEmailAndPassword` and create your sign up and login!
  </Step>

  <Step title="Using Firebase Auth with Chipi hooks 🕺 !" titleSize="h2">
    Below you will see a simple example of how you can get and pass your tokens to the different Chipi hooks:

    ```typescript theme={null}
    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>
      );
    }
    ```

    <Warning>
      <strong>Note:</strong> 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.
    </Warning>
  </Step>

  <Step title="Celebrate & Learn More! 🎉" titleSize="h2">
    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!
  </Step>
</Steps>

<Tip>
  Need help? Check out our [Telegram Community](https://t.me/+e2qjHEOwImkyZDVh)
  for support and to connect with other developers.
</Tip>