Firebase

Learn how to integrate Clerk into your Firebase application

Getting Started

To enable the integration, you will need to provide Clerk with the required Firebase configuration attributes depending on the Firebase features you would require authenticated user access to.

To get started, turn on the Firebase integration in the Clerk Dashboard:

Your Application & instance → Integrations → Firebase

Check out our example application showcasing how to integrate Clerk with Firebase: https://github.com/clerkinc/clerk-firebase-starter

Integration configuration

To allow Clerk to generate the required authentication token for Firebase, you will need to set some configuration attributes on the Clerk integration page.

1. (Easy way) Upload a JSON Firebase configuration file

You can upload the JSON configuration file you will retrieve from Firebase directly on the integrations page and the required fields will be filled in automatically.

To get the Firebase JSON configuration file, navigate to your Project Settings → Service Accounts → Firebase Admin SDK and then click the Generate new private key button.

To upload the file on Clerk, use the Upload JSON button on the Firebase integration screen inside the configuration modal:

2. Fill in the required attributes manually

The attributes that you need to fill in to connect Clerk with Firebase, as a custom authentication system, are described below:

Service account ID The service account ID can be found in the Google Cloud Console for your Firebase project, or in the client_email field of a service account JSON file.
Project ID The Firebase project ID is the unique identifier of your Firebase project. Can be found under the Project Settings in the Firebase platform.
Database URL (Optional)The Firebase Realtime Database URL as retrieved from the Firebase platform under the Realtime Database page.
Private Key The private key used for signing which belongs to the Google service account ID of your project. Can be found in the Google Cloud Console for your Firebase project, or in the private_key field of a service account JSON file.

After successfully completing the integration setup on your dashboard, you should setup your frontend to connect Clerk with the Firebase authentication system.

1. Retrieve a Firebase user authentication token from Clerk

The Firebase Web SDK requires an authentication token to sign in your users using Clerk as the custom authentication provider. This token can be retrieved calling the getToken method returned from the useAuth() hook and calling it with the "integration_firebase" template parameter.

1
await getToken({ template: "integration_firebase" });

The above method will return the token needed for the Firebase Web SDK to sign in your users with Clerk.

The Firebase Web SDK referenced is the browser installation of the official Firebase JavaScript SDK package on npm.

To authenticate your users on Firebase using Clerk you would need to call the signInWithCustomToken method of the Firebase Auth scope.

1
import { getAuth, signInWithCustomToken } from "firebase/auth";
2

3
const auth = getAuth();
4
await signInWithCustomToken(auth, clerkCustomToken);

1
import firebase from "firebase";
2

3
await firebase.auth().signInWithCustomToken(clerkCustomToken);

An example implementation using Next.js:

pages/index.js1
import { useAuth } from "@clerk/nextjs";
2
import { initializeApp } from "firebase/app";
3
import { getAuth, signInWithCustomToken } from "firebase/auth";
4
import { useEffect } from "react";
5
import firebaseConfig from "../lib/firebase.config";
6

7
// Initialize Firebase app with config
8
initializeApp(firebaseConfig);
9

10
export default function Home() {
11
  const { getToken } = useAuth();
12

13
  useEffect(() => {
14
    const signInWithClerk = async () => {
15
      const auth = getAuth();
16
      const token = await getToken({ template: "integration_firebase" });
17
      const userCredentials = await signInWithCustomToken(auth, token);
18

19
      /**
20
       * The userCredentials.user object will call the methods of
21
       * the Firebase platform as an authenticated user.
22
       */
23
      console.log("user ::", userCredentials.user);
24
    };
25

26
    signInWithClerk();
27
  }, []);
28

29
  return (
30
    <main>
31
      <h1>Hello Clerk + Firebase!</h1>
32
    </main>
33
  );
34
}
35