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 React 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:
// 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);
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.
and for more on Create React App’s environment variables, see the React environment variables docs.
  1. Update your environment variables:
From the firebaseConfig JSON object provided by Firebase when initializing your project, set up your environment variables.

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


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:
# Install Chipi Pay SDK
npm install @chipi-stack/chipi-react
4

Setup the Chipi SDK Provider

  1. In your environment variables file, add your Chipi API keys:
VITE_CHIPI_API_KEY=your_chipi_public_key
VITE_CHIPI_SECRET_KEY=your_chipi_secret_key
  1. Set up the Chipi Pay provider in your application:
// 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, 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:

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