> ## 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.

# React with Firebase

> Learn how to integrate Chipi Pay with your React 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 [React](https://es.react.dev/learn/installation) 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}
    // src/firebase.ts
    import { initializeApp } from "firebase/app";
    import { getAuth } from "firebase/auth";

    const firebaseConfig = {
      apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
      authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
      projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
      storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
      messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
      appId: import.meta.env.VITE_FIREBASE_APP_ID,
    };

    export const firebaseApp = initializeApp(firebaseConfig);
    export const auth = getAuth(firebaseApp);

    ```

    <Warning> <strong>Note:</strong><br /> ❗ React apps don’t have environment variable safety – use <code>VITE\_</code> prefix (for Vite) or <code>.env.local</code> for created local React app.<br /> For more information about Vite environment variables, see the <a href="https://vite.dev/guide/env-and-mode.html" target="_blank" rel="noopener noreferrer">Vite documentation</a>.<br /> and for more on Create React App's environment variables, see the <a href="https://create-react-app.dev/docs/adding-custom-environment-variables/#adding-development-environment-variables-in-env" target="_blank" rel="noopener noreferrer">React environment variables docs</a>. </Warning>

    2. Update your environment variables:

    From the firebaseConfig JSON object provided by Firebase when initializing your project, set up your environment variables.

    ```typescript theme={null}

    const firebaseConfig = {
      apiKey: "apikey",
      authDomain: "domain",
      projectId: "your-id",
      storageBucket: "storage-bucket",
      messagingSenderId: "000000",
      appId: "app-id"
    };

    ```

    ```typescript theme={null}
    VITE_FIREBASE_API_KEY=apikey
    VITE_FIREBASE_AUTH_DOMAIN=domain
    VITE_FIREBASE_PROJECT_ID=your-id
    VITE_FIREBASE_STORAGE_BUCKET=storage-bucket
    VITE_FIREBASE_MESSAGING_SENDER_ID=000000
    VITE_FIREBASE_APP_ID=app-id

    ```
  </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-react
    ```
  </Step>

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

    ```bash theme={null}
    VITE_CHIPI_API_KEY=your_chipi_public_key
    ```

    <Warning>
      **Never put a Chipi secret key in a Vite/React client app.** Any environment
      variable prefixed with `VITE_` is bundled into the browser JavaScript and
      exposed via `import.meta.env`, which means anyone inspecting your shipped app
      can read it. The `@chipi-stack/chipi-react` SDK uses only `apiPublicKey` —
      the type `ChipiBrowserSDKConfig` explicitly sets `apiSecretKey?: never`
      (see `types/src/core.ts`). Secret keys belong on your backend only.
    </Warning>

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

    ```tsx theme={null}
    // src/main.tsx
    import React from "react";
    import ReactDOM from "react-dom/client";
    import App from "./App";
    import { ChipiProvider } from "@chipi-stack/chipi-react";

    const API_PUBLIC_KEY = import.meta.env.VITE_CHIPI_API_KEY;
    if (!API_PUBLIC_KEY) throw new Error("VITE_CHIPI_API_KEY is not set");

    ReactDOM.createRoot(document.getElementById("root")!).render(
      <React.StrictMode>
        <ChipiProvider
          config={{
            apiPublicKey: API_PUBLIC_KEY,
          }}
        >
          <App />
        </ChipiProvider>
      </React.StrictMode>
    );


    ```
  </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}

    // src/App.tsx
    import { useEffect, useState } from "react";
    import { useGetWallet } from "@chipi-stack/chipi-react";
    import { onAuthStateChanged } from "firebase/auth";
    import { auth } from "./firebase";

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

      useEffect(() => {
        return onAuthStateChanged(auth, (user) => {
          setUserId(user ? user.uid : null);
        });
      }, []);

      // Get Firebase token
      const getToken = async () => {
        const user = auth.currentUser;
        if (!user) throw new Error("User not authenticated");
        return user.getIdToken();
      };

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

      return (
        <div style={{ padding: 32 }}>
          <h1>Chipi + Firebase + React</h1>
          {isLoading && <p>Loading wallet...</p>}
          {wallet && <pre>{JSON.stringify(wallet, null, 2)}</pre>}
        </div>
      );
    }
    ```

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