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

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:

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

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

Install the Chipi SDK

Install the required packages:

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

Setup the Chipi SDK Provider

In your .env file, add your Chipi publishable API key:

VITE_CHIPI_API_KEY=your_chipi_public_key

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.

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

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:

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

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

React Guides

SDK Hooks

Session Hooks

Privacy

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