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

# Next.js with Firebase

> Learn how to integrate Chipi Pay with your Next.js 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 [Next.js](https://nextjs.org/docs/app/getting-started/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}
    import { initializeApp } from "firebase/app";
    import { getAuth } from "firebase/auth";

    const firebaseConfig = {
      apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
      authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
      projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
      storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
      messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
      appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
    };

    // Initialize Firebase

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

    ```

    2. Update your environment variables:

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

    ```typescript theme={null}

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

    ```

    ```typescript theme={null}
    NEXT_PUBLIC_FIREBASE_API_KEY=apikey
    NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=domain
    NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-id
    NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=storage-bucket
    NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=000000
    NEXT_PUBLIC_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/nextjs
    ```
  </Step>

  <Step title="Setup the Chipi SDK Provider" titleSize="h2">
    1. In your [`.env`](https://dashboard.chipipay.com/configure/jwks-endpoint) file, add your Chipi API keys:

    ```bash theme={null}
    NEXT_PUBLIC_CHIPI_API_KEY=your_chipi_api_public_key
    CHIPI_SECRET_KEY=your_chipi_api_secret_key
    ```

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

    ```tsx theme={null}
    // app/layout.tsx

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

    export default function RootLayout({children}: {
      children: React.ReactNode;
    }) {
      return (
        <html lang="en">
          <body>
            <ChipiProvider>{children}</ChipiProvider>
          </body>
        </html>
      );
    }

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


     "use client";

    import { useGetWallet } from "@chipi-stack/nextjs";
    import { useEffect, useState } from "react";
    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();
      }, []);

      // Function to get Firebase ID token
      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 (
        <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
          <h1>Home page</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>