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

## 1. Setting up Firebase

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

## 2. Create a Firebase Config file

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]
>
> **Note:**\
> ❗ React apps don’t have environment variable safety – use `VITE_` prefix (for Vite) or `.env.local` for created local React app.\
> For more information about Vite environment variables, see the [Vite documentation](https://vite.dev/guide/env-and-mode.html).\
> and for more on Create React App's environment variables, see the [React environment variables docs](https://create-react-app.dev/docs/adding-custom-environment-variables/#adding-development-environment-variables-in-env).

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

```

## 3. Install the Chipi SDK

Install the required packages:

```bash theme={null}
# Install Chipi Pay SDK
npm install @chipi-stack/chipi-react
```

## 4. Setup the Chipi SDK Provider

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.

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


```

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

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

## 6. Follow the Firebase guides and begin your Journey !

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!

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

```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]
>
> **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!

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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.