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:
- Key points of SAML
- The Identity provider configuration (our partner)
- Service provider configuration (our app)
- 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)
Identity Provider for demonstration
In order to easily demonstrate the authentication with our example, we are going to use JumpCloud service.
JumpCloud is a Directory-As-A-Service which will provide us a SAML IdP for free (less than 10 accounts).
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 email@example.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.
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.
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 :
Be careful of field “Name”
It will be used by Firebase/GCP to display a human readable name of the SAML connector. But the “Provider ID” in lower size below is very important.
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) :
- 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.
Remember the ACS URL we didn’t enter at the beginning.
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 :
The workflow is not really complex, but I admit that some concepts could be a little confused.
You can find code snippets for this minimal app on my GitHub account.
Some others resources that may be useful :