Firebase

Add Single Sign-On to your Firebase application with WorkOS.

Introduction

In this guide, you’ll learn how to use WorkOS to add Single Sign-On (SSO) to a Firebase application. This will allow users to sign in to an existing Firebase application using WorkOS SSO Connections.

What WorkOS provides

WorkOS will provide the following pieces of information: API key, Client ID, and the Issuer URL.

The API key can be found in your WorkOS dashboard under API Keys.

The Client ID can be found in your WorkOS dashboard under Configuration.

The Issuer URL is constructed with the Client ID. https://auth.workos.com/sso/<client_id>.

What you’ll need

An existing Firebase project

1. Configure Authentication for your Firebase project

Log into Firebase and navigate to your project. Click on the Authentication tile to set up a new Authentication method for your project.

A screenshot showing where to find the Authentication tile in Firebase.

Next, click Get started.

A screenshot showing where to find the Get started button in Firebase

Click on the Sign-in method tab and then select the OpenID Connect custom provider.

A screenshot showing where to find the OpenID Connect custom provider in Firebase

Enter the configuration details for the connection between WorkOS and Firebase.

You will need the following pieces of information:

WorkOS Client ID: Found on the Configuration tab of the WorkOS Dashboard

WorkOS API Key: Located on the API Keys tab of the WorkOS Dashboard

Issuer (URL): This will be https://auth.workos.com/sso/ appended with your client ID, ex: https://auth.workos.com/sso/client_123

Provider ID: This is found in Firebase under the Name of your OIDC provider. This will be important for a later step.

A screenshot showing the authentication provider configuration details in Firebase

2. Configure the Redirect URI in WorkOS

Click Next, then copy the Callback URL provided by Firebase.

A screenshot showing where to obtain the Callback URL in Firebase.

Paste the Callback URL in the list of Redirect URI’s in the configuration tab of your WorkOS dashboard.

A screenshot showing where to enter the Redirect URI in WorkOS.

3. Create a Firebase web app and get configuration details

On the Firebase Project Overview page, click the web icon above Add an app to get started, or navigate to your project settings page if your project is already set up.

A screenshot showing where to create a web app in Firebase.

Choose a name for your application, and then take note of the firebaseConfig from the Add Firebase SDK step.

A screenshot showing where to obtain the firebaseConfig details in Firebase.

Your Firebase configuration and Provider ID can now be used along with any Organization ID from an Active WorkOS SSO connection to log users in to your Firebase app. Here is a basic example showing how this can be set up.

Replace the firebaseConfig variable value with the config from your Firebase app, the OAuthProvider value with your Provider ID, and the organization under provider.setCustomParameters with the organization to target. This organization should have an active SSO connection already set up.

The connection parameter may be used in place of the organization parameter to target a connection.

Finally, run the app and click the sign-in button.

Update Firebase Profile

HTML

 <html>
  <body>
    <button id="signIn">Sign In</button>
  </body>
  <script type="module">
    import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.17.2/firebase-app.js';

    import {
      OAuthProvider,
      getAuth,
      signInWithRedirect,
      getRedirectResult,
      signInWithPopup,
    } from 'https://www.gstatic.com/firebasejs/9.17.2/firebase-auth.js';

    // Your web app's Firebase configuration
    const firebaseConfig = {
      apiKey: '<api_key_from_firebase_config>',
      authDomain: '<auth_domain_from_firebase_config>',
      projectId: '<project_id_from_firebase_config>',
      storageBucket: '<storage_bucket_from_firebase_config>',
      messagingSenderId: '<messaging_sender_id_from_firebase_config>',
      appId: '<app_id_from_firebase_config>',
    };

    // Initialize Firebase
    const app = initializeApp(firebaseConfig);

    // Provider ID can be found in Firebase console
    const provider = new OAuthProvider('<your_provider_id_from_firebase>');

    // Pass additional query parameters required by WorkOS
    provider.setCustomParameters({
      organization: '<your_organization_id>',
    });

    const auth = getAuth(app);

    const button = document.getElementById('signIn');

    button.addEventListener('click', () => {
      signInWithPopup(auth, provider)
        .then((result) => {
          const credential = OAuthProvider.credentialFromResult(result);
          const accessToken = credential.accessToken;
          const idToken = credential.idToken;

          console.log(credential, accessToken, idToken);
        })
        .catch((error) => {
          console.error(error.code);
          console.log(error);
        });
    });
  </script>
</html>

You will now see the user signed in on the Authentication section’s user tab in Firebase. You can also view the user information by decoding the access token which is logged to the console.

A screenshot showing a successfully authenticated user in Firebase.