Cross-Device SSO
Overview
Cross-device Single Sign-On (SSO) enables seamless authentication between applications running on separate devices, such as mobile and web applications. This functionality allows users who are already authenticated on a mobile device to log in to a web application without re-entering credentials automatically.
The LoginRadius Identity Platform facilitates Cross-Device SSO, ensuring effortless access across multiple devices using the same account. This significantly enhances user convenience and experience.
The following screen displays the logical flow for a Cross-Device SSO:
The following steps outline the process illustrated in the sequence diagram:
- The user agent requests the authorization server to generate a QR code.
- The authorization server generates the QR code and returns it to the user agent.
- A continuous ping loop is established between the user agent and the authorization server, repeatedly checking for an access token.
- When the mobile device scans the QR code, an access token is generated and sent to the authorization server, initiating the login process.
- Once it becomes available, the user agent retrieves the access token through the ongoing ping loop.
- This access token is then used to complete the login process.
A common example of Cross-Device SSO is WhatsApp Web. To log in, the web application displays a QR code that must be scanned using a mobile device with an active session. Once the QR code is successfully scanned, the user is automatically logged into the web application.
In this process, scanning the QR code generates an access token, which is then used to authenticate the user on the web application.
While many applications implement Cross-Device SSO, WhatsApp remains one of the most well-known messaging platforms utilizing this seamless authentication flow.
Business Use Cases
Let's have some examples of general use cases across industries:
- Secure Remote Access: Organizations providing remote access to employees or external consultants can ensure secure authentication without sharing credentials. QR code scanning, a key feature of Cross-Device SSO, allows for a seamless yet secure login process, enhancing security and peace of mind.
- SaaS Product Access Management: LoginRadius, which offers multi-tenant platforms, can implement Cross-Device SSO to enable frictionless login across multiple enterprise applications and ensure seamless integration with corporate identity providers.
JavaScript Implementation
The LoginRadius Identity Platform supports JS implementation of the Cross-device SSO feature. This guide walks you through all the steps to configure your LoginRadius account and integrate Cross-Device SSO into your web application.
-
Include LoginRadius JS Library: Directly import the LoginRadius JavaScript interfaces on your page using this link: https://auth.lrcontent.com/v2/js/LoginRadiusV2.js. If you are using HTML, you can directly paste the below script into your HTML file:
<script src="https://auth.lrcontent.com/v2/js/LoginRadiusV2.js"></script>
-
Configure Cross-Device SSO Options: Leverage the following CommonOptions for Cross-Device SSO in the JS code:
var commonOption = {
apiKey: 'XXXXXXXXXXXXXXXXXXX',
sott: 'XXXXXX-XXXXXXXXXX-XXXXXXXXX',
appName: '<app name>',
isCrossDeviceSSOEnabled: true
crossDeviceSSOPingCount: 50,
crossDeviceSSOPingInterval: 10
}
var LRObject = new LoginRadiusV2(commonOption);
var cd_sso_options = {
onSuccess: function(response) {
console.log(response);
},
onError: function(errors) {
console.log(errors);
},
container: 'crossdevicesso-container',
expirytime: <QR_code_expirytime_in_seconds> // If its not define here, the default time will be 60 seconds, and if expirytime > 60 sec, then the error response will be expired after 60 seconds
};
LRObject.util.ready(function() {
LRObject.init('crossDeviceSSO', cd_sso_options);
}); -
Render QR Code Container: Add the code below to render a container that displays the QR code
<div id="crossdevicesso-container"></div>
Note: The QR code will be displayed for 60 seconds by default. You can define the time as well accordingly.
- To scan the QR code, you need to develop a mobile application capable of scanning the code and sending it—along with the existing access token from the mobile app—to the LoginRadius server using the Add QR Token API. Once the server receives the token, the user will be automatically logged into the web application.
Additional APIs for Implementation
Here are some additional APIs you may want to incorporate into the implementation
- Generate QR Code String - This API is used to get the QR code string.
- Get Access Token by QR Code: The browser triggers this API and returns the access token attached to the requested QR code string from the database.
- Add QR Token - This API is used to add/insert the QR code string with the access token into the database.