SSO for SMPL

Firebase Application

Firebase provides authentication options like backend services, easy-to-use SDKs, and ready-made UI libraries to authenticate users to your app. It supports authentication using passwords, phone numbers, popular federated identity providers like Google, Facebook and Twitter, and more. Firebase Authentication integrates tightly with other Firebase services, and it leverages industry standards like OAuth 2.0 and OpenID Connect, so it can be easily integrated with custom backend.
We will be demonstrating below how we can achieve Single Sign-On(SSO) into Firebase using one or multiple SAML 2.0 compliant Identity Provider. We will be using miniOrange cloud service to achieve this. We support all known IDPs like miniOrange, Google Apps, ADFS, Okta, OneLogin, Azure AD, Salesforce, Shibboleth, SimpleSAMLphp, OpenAM, Centrify, Ping, RSA, IBM, Oracle, Bitium, WSO2, NetIQ etc.

Step-by-Step Guide to setup Firebase Application with miniOrange JWT Token

STEP 1: Setup Identity Source in miniOrange

• The first step involves setting up the Identity Source in miniOrange. This step can be repeated for the number of IDP instances against which authentication needs to be done.
• Login to miniOrange Admin Console.
• Navigate to the Identity Providers tab.
• Click on Add Identity Source button on the top right.

• The following configuration settings need to be done:
  

  IdP Identifier	Unique Identifier for the Identity Source. This unique identifier has to be sent from Firebase in request to miniOrange. This attribute is used to distinguish between different IDPs.
  IdP Display Name	Display Name for the Identity Source.
  SAML SSO Login URL	SAML SSO Login URL. It is mapped to the SingleSignOnService element in the metadata.
  IdP Entity ID	It is mapped to the EntityDescriptor element in the metadata. The entityID value needs to be used.
  X.509 Certificate	It is mapped to the signing certificate for the IDPSSODescriptor for the protocolSupportEnumeration as urn:oasis:names:tc:SAML:2.0:protocol. The value of the child element X509Certificate needs to be used.

• Click on Save.

STEP 2: Setting up miniOrange in Identity Provider

• Copy SAML ACS URL value as given in the screenshot above. This is the login URL for miniOrange.
• Set Entity ID/Issuer as https://auth.miniorange.com/moas

STEP 3: Setup Firebase app in miniOrange

• This step involves setting up Firebase app in miniOrange :
  1. Login into miniOrange Admin Console.
  2. Navigate to the Apps->Manage Apps tab.
  3. Click on the Configure Apps button on the top right.
  4. Click on the External/JWT/Pwdless tab and select External App/ JWT App.

• Click on Save.
• Navigate to Apps->Manage Apps click on edit app. Copy App Secret by clicking “Click to reveal App Secret”. It will required in Step-4.

STEP 4: Send Request to miniOrange

• In order to send request to miniOrange, a custom token needs to be formed and sent from Firebase application. This will include the identifier (configured in Step 1) of Identity Provider (e.g.ADFS) against which authentication needs to be done.
• For cryptographic purposes, use the CryptoJS library.
• To get the Customer ID and Token Key, the following steps need to be performed:
  1. Navigate to the miniOrange Admin Console
  2. Login with the miniOrange Account credentials.
  3. Navigate to the Settings.
  4. Note down the Customer ID and Token Key.
• The below code accepts IdPName (String) as a parameter. This parameter is the same value as configured in Step 1 which is used to distinguish different IDPs.
• For testing purpose, create a sample html file & call the following functions on document load.
• NOTE: You need to replace the Token Key, Customer ID and Response URL for your miniOrange account and added application. Sample Javascript Code for Sending Request to miniOrange.
• Add the following crypto JS files in your code:
  
<script src="/crypto-js/3.1.2/components/core-min.js"></script>
<script src="/components/sha256.js"></script>
<script src="/components/enc-base64.js"></script>
<script src="/rollups/aes.js"></script>
<script src="/components/mode-ecb.js"></script>
<script src="/components/pbkdf2.js"></script>
<script src="/components/pas-nopadding.js"></script>
<script>
function sendRequest(idpName)
{
var appSecret = ""; //miniOrange App Secret
var tokenKey = ""; //miniOrange Token Key of Customer
var customerId = ""; //miniOrange Customer ID
var responseUrl = ""; //Response URL (configured in Step 2)
var date = new Date();
var currentTimestamp = date.getTime();
var inputString = currentTimestamp + ":" + appSecret;
var keyHex = CryptoJS.enc.Utf8.parse(tokenKey);
var cipherText = CryptoJS.enc.Base64.stringify(CryptoJS.AES.encrypt(inputString,
keyHex, {mode:CryptoJS.mode.ECB}).ciphertext);
var redirectUrl = "https://auth.miniorange.com/moas/broker/login/jwt/" + customerId + "/"
+ idpName + "?token=" + cipherText + "&returnUrl=" + responseUrl;
window.location = redirectUrl;
}
</script>

STEP 5: Modify JWT Response

• At this point authentication with IDP should work but the user will not be logged into Firebase. When IDP sends a SUCCESS, miniOrange will send a JWT response to the Response URL(Firebase URL which will process the response). The Response URL needs to modify the JWT Response so that it is compatible with Firebase standards.
• NOTE: You need to replace iss, sub and aud values based on your Firebase project.
• Sample Javascript Code for modifying JWT Response :
  
function modifyJwtResponse(token)
{
//CONFIGURATION PARAMETERS
var iss = ""; //Project's Service Account Email Address
var sub = ""; //Project's Service Account Email Address
var aud = "https://identitytoolkit.googleapis.com/google.identity.identit
ytoolkit.v1.IdentityToolkit"; //Required audience value
var base64Url = token.split('.')[1];
var base64 = base64Url.replace('-', '+').replace('_', '/');
var decodedToken = JSON.parse(window.atob(base64));
//MODIFY JWT VALUES BELOW
decodedToken['iss'] = iss;
decodedToken['sub'] = sub;
decodedToken['aud'] = aud;
//Base64 Encode Token
var encodedToken = btoa(JSON.stringify(decodedToken));
//CREATE NEW JWT TOKEN
var newToken = token.split('.');
var newJwtToken = newToken[0] + "." + encodedToken + "." + newToken[2];
return newJwtToken;
}

• The new token can be used to authenticate the user in Firebase using the signInWithCustomToken() function.
  
firebase.auth().signInWithCustomToken(token).catch(function(error)
{
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// ...
});


Business trial for free

If you don’t find what you are looking for, please contact us at info@miniorange.com or call us at +1 978 658 9387.