firebase-google-jwt-grouped-example

MetaMask Embedded Wallets — Firebase + Google Grouped Connection (JWT)

React + Vite example using MetaMask Embedded Wallets (powered by Web3Auth) with a grouped connection that combines Firebase (GitHub via JWT) and Google OAuth (JWT flow). A grouped connection ensures the same user always gets the same wallet address regardless of which provider they use to sign in.

Without grouping, signing in with Google directly and signing in via Firebase would produce two completely different wallet addresses for the same person.

Prerequisites

• Node.js 20+
• npm
• A Client ID from the Dashboard
• A Firebase project with Authentication enabled
• A Google OAuth app — get your Google Client ID from the Google Cloud Console
• A grouped connection on the Dashboard combining Firebase and Google (Grouped Connections guide)

Setup

1. Clone the repository

git clone https://github.com/Web3Auth/web3auth-examples.git
cd web3auth-examples/custom-authentication/grouped-connection/firebase-google-jwt-grouped-example

2. Install dependencies

npm install

3. Configure environment variables

cp .env.example .env

Edit .env:

VITE_WEB3AUTH_CLIENT_ID=YOUR_CLIENT_ID
VITE_GOOGLE_CLIENT_ID=YOUR_GOOGLE_CLIENT_ID
VITE_FIREBASE_API_KEY=YOUR_FIREBASE_API_KEY
VITE_FIREBASE_AUTH_DOMAIN=YOUR_FIREBASE_AUTH_DOMAIN
VITE_FIREBASE_PROJECT_ID=YOUR_FIREBASE_PROJECT_ID
VITE_FIREBASE_STORAGE_BUCKET=YOUR_FIREBASE_STORAGE_BUCKET
VITE_FIREBASE_MESSAGING_SENDER_ID=YOUR_FIREBASE_MESSAGING_SENDER_ID
VITE_FIREBASE_APP_ID=YOUR_FIREBASE_APP_ID

4. Run the application

npm run dev

Visit http://localhost:5173 in your browser.

Resources

• MetaMask Embedded Wallets Documentation
• Build with AI — set up the MCP server and skill for AI-assisted integration
• Grouped Connections Guide
• Firebase Integration Guide
• Dashboard
• Community — Builder Hub

License

MIT