Next.js 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 Next.js 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 { 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)

Update your environment variables:

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

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

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

Install the Chipi SDK

Install the required packages:

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

Setup the Chipi SDK Provider

In your .env file, add your Chipi API keys:

NEXT_PUBLIC_CHIPI_API_KEY=your_chipi_api_public_key
CHIPI_SECRET_KEY=your_chipi_api_secret_key

Set up the Chipi Pay provider in your application:

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

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:

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

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.

Getting Started

Gasless

Next.js Guides

Pay With Crypto

SDK Hooks

Session Hooks

Server

MCP

Privacy

Next.js with Firebase

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