Co-exist with Firebase

This guide streamlines the integration of Scalekit with Firebase applications, enabling seamless Single Sign-on (SSO) authentication for users. We’ll walk through configuring a Firebase project with Scalekit and provide sample code to manage Scalekit SSO within the app’s Firebase environment.

Before you begin

• Ensure access to Firebase Authentication with Identity Platform. OpenID Connect is not available in Legacy Firebase Authentication. See the product comparison for details.
• Access to a Scalekit account

Add Scalekit as an OpenID Connect provider

1. Log in to the Firebase Management Console and select the project.
2. Go to Authentication > Sign-in method.
3. Click Add new provider and select OpenID Connect.
4. Choose Code flow for the Grant Type and set the Name to “Scalekit”.
5. Retrieve the Client ID, Issuer URL, and Client secret from the Scalekit API Config.

Retrieve configuration details from Scalekit

1. Log in to the Scalekit Dashboard and navigate to Settings > API Config.
2. Locate the following fields in the Scalekit API Config:
   • Client ID
   • Environment URL (use https://your-subdomain.scalekit.dev for Development or https://your-subdomain.scalekit.com for Production)
   • Client secret (generate a new one if needed)
3. Copy the Client ID from Scalekit and paste it into the Client ID field in the Firebase project’s OIDC provider settings.
4. Copy the Environment URL from Scalekit and paste it into the Issuer URL field in the Firebase project’s OIDC provider settings.
5. Copy the newly generated Client secret from Scalekit and paste it into the Client secret field in the Firebase project’s OIDC provider settings.

After filling in these details, the Firebase project’s OIDC provider settings should look similar to this:

Add redirect URI in Scalekit API config

After defining new OIDC provider, configure OIDC Integration in the Firebase project. Copy the Callback URL from the Firebase project and add it as a new Redirect URI in the Scalekit API Config.

Add this URL as a new Redirect URI in the Scalekit API Config.

Handle identity provider-initiated Single Sign-on

In the current setup, Firebase acts as an OpenID Connect (OIDC) provider for Scalekit. When a user signs in with Firebase, their information is sent to Scalekit. Scalekit then redirects the user to authenticate with their identity provider and sends the user information back to the app.

Users can access the app directly from their identity provider via Single Sign-on (SSO). To handle these SSO requests, create a dedicated endpoint in the app. This endpoint will complete the authentication flow when users initiate SSO from their identity provider. For detailed instructions on implementing the IdP-initiated SSO flow, refer to Implement IdP-Initiated SSO guide. This guide walks through the necessary steps to set up and handle SSO requests originating from the identity provider.

Enable Single Sign-on in your login page

Modify the app’s login page to invoke SSO and send the request to Scalekit with user details.

Login.js

// Initialize Scalekit as an OpenID Connect (OIDC) provider
const scalekitProvider = new OAuthProvider('oidc.scalekit');

// Set custom parameters for SSO authentication
// You can use 'domain', 'organization_id', or 'connection_id' based on your setup
scalekitProvider.setCustomParameters({
  domain: 'customer@megasoft.org',
});

// Get reference to the login button element
const loginbtn = document.getElementById('login-button');

// Handle the SSO login button click event
loginbtn.onclick = () => {
  // Initiate the sign-in process with a popup
  signInWithPopup(auth, scalekitProvider)
    .then(result => {
      // Extract the OAuth credential from the authentication result
      const credential = OAuthProvider.credentialFromResult(result);

      // Get the authenticated user's information
      const user = result.user.providerData[0];

      // You can now access user details such as:
      // user.email, user.displayName, user.uid, etc.

      // Perform any additional actions with the user data here
    })
    .catch(error => {
      // Handle any errors that occur during the sign-in process
      console.error('Authentication error:', error);
      // Implement appropriate error handling and user feedback
    });
};

By following these steps, you can seamlessly integrate Scalekit’s Social Login into a Firebase application, employ Single Sign-on authentication seamlessly.