Skip to main content
1

Setting up Firebase

  1. 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.
  1. 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);
2

Create a Firebase Config file

  1. 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)
  1. 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
3

Install the Chipi SDK

Install the required packages:
# Install Chipi Pay SDK
npm install @chipi-stack/nextjs
4

Setup the Chipi SDK Provider

  1. 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
  1. 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>
  );
}
5

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
6

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


 "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.
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!
Need help? Check out our Telegram Community for support and to connect with other developers.