Integrate Firebase with Clerk

Configure the integration

The Firebase integration enables you to use Clerk to generate a valid authentication token to send to Firebase Auth. This enables you to leverage Clerk's prebuilt components, auth provider options, and more, while accessing Firebase products like Firestore with a session validated by Firebase Auth.

To get enable the integration:

1. Navigate to the Clerk Dashboard.
2. In the sidebar, select Integrations(opens in a new tab).
3. Toggle the Firebase integration on. The configuration modal will appear. Keep this open while you configure your Firebase project.

Next, configure your integration.

Enable authentication in Firebase

To use Firebase auth, ensure authentication is enabled in your Firebase dashboard. To do so:

1. Navigate to your Firebase dashboard.
2. In the navigation sidebar, select the Build dropdown and select Authentication(opens in a new tab).
3. Select Get started.
4. Enable any sign-in method you want, such as Email/Password.

Add a Security Rule to your Firestore database (optional)

Adding the Cloud Firestore(opens in a new tab) feature in your Firebase application is optional.

To use Firestore with Clerk, ensure that you have defined Security Rules(opens in a new tab) that allow authenticated requests to access your database. For example:

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

Get your Firebase config object

To connect to your Firebase app in your code, you need a config object from your Firebase project. To find it:

1. Visit your Firebase project settings(opens in a new tab).
2. In the Your apps section, there should be a code snippet that includes the firebaseConfig object. Copy this object. It should look similar to the following:

   const firebaseConfig = {
     apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
     authDomain: "clerk-example-xxxxx.firebaseapp.com",
     databaseURL: "https://clerk-example-xxxxx-default-xxxx.firebaseio.com",
     projectId: "clerk-test-xxxx",
     storageBucket: "clerk-test-xxxx.appspot.com",
     messagingSenderId: "012345678910",
     appId: "1:012345678:web:abcdef123456hijklm",
     measurementId: "G-ABC123DEF"
   };

3. Save this information somewhere secure. You'll need it to connect to your Firebase app.

See Google's Firebase documentation(opens in a new tab) for more information on the config object.

Use Firebase with Clerk in your code

Now that you have configured the integration, and you have retrieved your Firebase config object, it's time to use Firebase with Clerk in your code.

The following example:

• Uses Clerk to generate an authentication token for Firebase's API.
• Creates a button for signing into your Firebase app.
• Creates a button for fetching example data from your Firestore database.

This example is written for Next.js App Router, but is supported by any React meta framework, such as Remix or Gatsby.

app/firebase/page.tsx
"use client";
import { useAuth } from "@clerk/nextjs";
import { initializeApp } from "firebase/app";
import { getAuth, signInWithCustomToken } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import { doc, getDoc } from "firebase/firestore";
 
const firebaseConfig = {
  apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  authDomain: "clerk-example-xxxxx.firebaseapp.com",
  databaseURL: "https://clerk-example-xxxxx-default-xxxx.firebaseio.com",
  projectId: "clerk-test-xxxx",
  storageBucket: "clerk-test-xxxx.appspot.com",
  messagingSenderId: "012345678910",
  appId: "1:012345678:web:abcdef123456hijklm",
  measurementId: "G-ABC123DEF",
};
 
// Connect to your Firebase app
const app = initializeApp(firebaseConfig);
// Connect to your Firestore database
const db = getFirestore(app);
// Connect to Firebase auth
const auth = getAuth(app);
 
// Remove this if you do not have Firestore set up
// for your Firebase app
const getFirestoreData = async () => {
  const docRef = doc(db, "example", "example-document");
  const docSnap = await getDoc(docRef);
  if (docSnap.exists()) {
    console.log("Document data:", docSnap.data());
  } else {
    // docSnap.data() will be undefined in this case
    console.log("No such document!");
  }
};
 
export default function FirebaseUI() {
  const { getToken } = useAuth();
  const signInWithClerk = async () => {
    console.log("Sign in with clerk");
    const token = await getToken({ template: "integration_firebase" });
    const userCredentials = await signInWithCustomToken(auth, token || "");
     // The userCredentials.user object can call the methods of
     // the Firebase platform as an authenticated user.
    console.log("User:", userCredentials.user);
  };
 
  return (
    <main style={{ display: "flex", flexDirection: "column", rowGap: "1rem" }}>
      <button onClick={signInWithClerk}>Sign in</button>
      <button onClick={getFirestoreData}>Get document</button>
    </main>
  );
}