Cross-Device SSO

Cross-Device Single Sign-On (SSO) allows users to seamlessly access applications across multiple devices with a single login. For instance, with LoginRadius, a user logged into a mobile app can automatically access the web version without needing to re-enter their credentials.

This feature streamlines the user experience by eliminating repetitive logins and providing effortless access across different platforms. Additionally, when a user logs into the web application, they can be instantly authenticated on their mobile device with the same account.

LoginRadius Cross-Device SSO can be useful per your business’s requirements. A few use cases are listed below:

• Seamless Multi-Platform Access: Users logged into the mobile app can access the web app without re-authenticating.

• Unified Customer Experience: Customers can switch between mobile and web without login interruptions, enhancing engagement.

• Enterprise-Grade Security & Authentication: Employees remain authenticated across mobile and desktop, ensuring a seamless workflow.

• Effortless Multi-Device Streaming: Users can transition between devices while streaming without repeated logins.

• Streamlined Subscription & Account Management: Customers can easily manage their subscriptions and accounts across all devices.

Cross-Device SSO enables seamless authentication between devices, allowing users to log in to a web application by scanning a QR code from an authenticated mobile device. This process eliminates manual credential entry and enhances security while maintaining user convenience.

The following steps outline how Cross-Device SSO works:

1. QR Code Generation: The user agent requests the authorization server to generate a QR code.
2. QR Code Display: The authorization server generates and returns the QR code displayed on the web application.
3. Continuous Polling: The user agent initiates a loop that checks the authorization server for an access token.
4. QR Code Scan & Authentication: When the mobile device scans the QR code, an access token is generated and sent to the authorization server.
5. Access Token Retrieval: The user agent retrieves the access token through the ongoing polling loop.
6. Login Completion: The retrieved access token is used to complete the login process, granting access to the user.

A common example of Cross-Device SSO is WhatsApp Web. The web application displays a QR code that users scan using their mobile device, which has an active session. An access token is generated upon scanning, and the user is automatically logged into the web application.

The LoginRadius Identity Platform supports Cross-Device SSO using JavaScript and API, allowing users to log in seamlessly across devices. This guide walks you through configuring your LoginRadius account and integrating Cross-Device SSO into your web application.

Integration via API

• 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.

Integration via JavaScript

1. Include the LoginRadius JS Library

Import the LoginRadius JavaScript SDK into your webpage:

<script src="https://auth.lrcontent.com/v2/js/LoginRadiusV2.js"></script>

2. Configure Cross-Device SSO Options

Set up SSO parameters in your 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 a container in your HTML to display the QR code:

<div id="crossdevicesso-container"></div>

4. Scan QR Code & Authenticate The mobile app scans the QR code to authenticate, automatically logging the user into the web app.

You can consider the below-mentioned best Practices while implementing the Cross-Device SSO:

• Implement Secure Token Exchange: Use short-lived tokens with refresh mechanisms to prevent unauthorized access.
• Enable Session Management Controls: Users can view and manage active sessions across devices.
• Optimize for User Experience: Minimize login prompts while maintaining security to provide a seamless experience.
• Monitor for Anomalous Activity: Detect and mitigate suspicious logins across devices with real-time alerts.
• Provide Easy Logout Options: Allow users to log out from all devices when needed for enhanced security.

• Mobile SSO
• Web SSO
• Federated SSO
• Custom IDP
• SDK Overview