Single Sign On (SSO) for your Firebase app with SAML

Thierry Falvo
Feb 25 · 6 min read

I propose to show you steps to provide SAML authentication with Firebase to your web application.

Here are the steps we are going to follow:

  1. Key points of SAML
  2. The Identity provider configuration (our partner)
  3. Service provider configuration (our app)
  4. Integration in our app code

Let’s get started…


Key concepts of SAML

I do not pretend to train you on the protocol, so just the main lines here as a reminder.

“Security Assertion Markup Language is an open standard for exchanging authentication and authorization data between parties, in particular, between an identity provider and a service provider.”, Source Wikipedia

In other words :

  • The third-party who is hosting the user directory with identity and access management is called Identity Provider or IdP
  • The application which is requesting the authentication and is receiving the user details is called Service Provider or SP

Here is the workflow:

  • User navigates to the application (Service Provider) and request to sign in.
  • Application redirects user to Identity Provider, and requests user to authenticate.
  • In case of successful authentication, Identity Provider redirects user to application with an embedded SAML response. (no password, but some information about user identity).

Both IdP and SP have a unique ID.

To setup an SAML configuration, some informations need to be exchanged between the two parties beforehand.

Identity Provider should provide to Service Provider at least :

  • Identity Provider ID
  • Identity Provider Certificate
  • Identity Provider SSO URL

Service Provider should provide to Identity Provider at least :

  • Service Provider ID
  • ACS URL (callback URL that IdP will use to redirect to application)
Source Google — SAML Diagram flow

Identity Provider for demonstration

In order to easily demonstrate the authentication with our example, we are going to use JumpCloud service.

Sign-up and create a JumpCloud account

Goto JumpCloud, and sign-up for a free account (less than 10 users).

For this tutorial, we are going to create a specific and “virtual” user account demo@my-company.com inside our JumpCloud directory.

For that, click on Users section on the left side, then + button, and fill with informations below :

  • First name, last name, and username
  • Your email
  • Password (should be compliant with complexity rules)

New SAML application

Configure a new SAML Application, by clicking on Applications section on the left side, then + button, and select Custom SAML App SAML 2.0 connector.

JumpCloud — Configure a new application

Then, we need to provide all information needed by SAML protocol.

  • IdP Entity ID : jumpcloud-demo-idp
    It will identify the Identity Provider. In production, this ID will be given by the external partner or customer.
  • SP Entity ID : firebase-demo-saml
    It will identify the service provider, our product built with Firebase.
  • ACS URL : LATER
    It is a callback URL that Identity Provider will use to redirect the user back to our application in case of successful authentication. Sometime could be call SSO URL.
    This URL will be provided later by Firebase/GCP during the configuration of SAML connector.

We need to download an IDP Certificate (on the left part of this popup, below SAML 2.0), and keep it for now. Its content should be set in Cloud Identity later.

We can leave the remaining field by default for now, and save to add our new SAML application in JumpCloud :

Now, we need to authorize our Demo user to be connected on our Firebase application.

To do that, we create a Group which includes our SAML application. Consider it as a link between our user and our application.

Create a new Group
Add our SAML application in the group
Add our user in the group

We have now a SAML Identity Provider ready for our example !


Service provider configuration (our app)

We assume that we already have a Firebase project for our example.

In this tutorial we use “firebase-demo-saml” as project ID.

Entire SAML configuration is done with Cloud Identity Platform via Google Cloud Platform Console.

We open GCP Console at https://console.cloud.google.com/ and then select our firebase project.

Then we open Identity Platform, via the left side menu of the console, and choose Providers.

We add a new SAML provider :

GCP Console creates a ID corresponding to the “Name” entered. If you want to change it, click on “Edit” button.

Here we choose : “saml.jumpcloud-demo”.
But don’t confuse it with Service Provider ID or Entity Provider ID.

This Provider ID is only used inside our code to choose the correct provider we want to use to authenticate user.

  • Entity ID : The Identity Provider ID, jumpcloud-demo-idp
  • SSO URL : The URL given by our Identity Provider (here JumpCloud) :
    https://sso.jumpcloud.com/saml2/saml2
  • Certificate : We paste here the content of IdP certificate downloaded before. (entire content)
  • Service Provider : firebase-demo-saml

Before saving and creating this new SAML provider, we should copy the URL below section “Configure your SAML provider”, and paste it inside our JumpCloud Identity Provider.

We’re done. We have created a new SAML provider.

Be sure it is enabled.


Integration in our app code

For this example we’ll use a minimal Angular project with AngularFire project.

We call signInWithPopup method with a specific SAML provider “saml.jumpcloud-demo”. (Provider ID we choose inside Cloud Identity Platform.)

Same code with Vanilla JS :

At the first connection, the user is not logged in.

If we click on “Sign-in with JumpCloud” button, we’re redirected to JumpCloud IdP, to authenticate with our credentials:

And then, after a successful authentication, our Firebase app retrieves user details, and is able to display it :


Thierry Falvo

Written by

Freelance developer/architect of cloud solutions for business -Serverless enthusiast — Google Cloud, Angular — 🚴‍👷‍✈

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade