website logo
⌘K
Introduction and Concepts
Keyri and its Uses
Smart Deep Linking
User+Device Signatures
Risk Analytics
End-to-End Encryption
Browser - Keyri Widget Quickstart
Mobile SDKs
Device Fingerprinting - UX & Fraud
iOS
Android
React Native
Flutter
Server-Side Authentication
Integrations
Amazon Cognito
Auth0
Firebase
Supabase
Ping Identity
AlphaPoint APEX System
Banno Digital Banking
Changelog
Docs powered by archbee 
19min

Auth0

Incorporating Keyri QR login into your Auth0-enabled app is a straightforward process entailing sending your user's valid refreshToken from your mobile app, through the Keyri mobile SDK, to the Keyri QR web widget embedded on your web app. Scripts, detailed below, on your web app, exchange the refreshToken for their id_token and access_token. Those can be set into your web app's LocalStorage or as cookies in order to establish the user's login state on your web app.

Web

Full source code for a simple Next.js-based application utilizing Keyri QR login with Auth0 is available here: https://github.com/Keyri-Co/keyri-auth0-web

The live demo is visible here: https://keyri-auth0-web.vercel.app/

The following video outlines the steps required to complete integration of the Keyri QR widget on your Auth0-enabled web app as well as the required Auth0-related API calls and other functions required to finalize authenticating the user.

QR Widget Embedding

First, embed the Keyri QR widget in a div of your choosing. Remember to save the KeyriQR.html file in a publicly-accessible directory on your server and set its location as the src of the Keyri iframe.

HTML
|

Event Listener Targeting QR Widget

Now set up an listener for events emitted by the Keyri QR widget - it will emit a payload after a user has initiated and accepted the QR login. The following is a React-based example that uses the useEffect hook

JS
|

QR Login Handling Function

Finally, set up a function, referenced in the event listener written above, for handling the payload emitted by the Keyri widget. This is the part that exchanges the refreshToken for a usable id_token and access_token.

JS
|

Mobile

Source code for an example iOS app that works with the Auth0 web project outlined above is available here: https://github.com/Keyri-Co/auth0-iOS

The following video details how to set up your Auth0 project and how to send the user's refreshToken as the payload when initiating Keyri QR login.

Some specific configurations are required on Auth0 to make Keyri QR login work without compromising security.

Create Mobile Application on Auth0

Create Application
Create Application

On Auth0's console, create a new application and select Native.

Configure URIs for Mobile App

Document image

In the settings page, configure the logout and callback URL using the format provided in the prompt. For iOS (shown above) you simply need to use your bundle id with the Auth0 app id, and with Android, the pagage name is used in the same format.

Install Keyri and Auth0 SDKs

Then, using your preferred package manager for your application, install the Keyri and Auth0 SDKs. For iOS, we support Cocoapods and SPM, for Android, we support Gradle. We also support React Native and Flutter.

Code

The coding portion is quite easy. The steps are

  1. Authenticate with Auth0 (note - it is important to use the "offline_access" scope, without it no refresh token will be provided)
  2. Extract the refresh token from the returned credential
  3. Utilize Keyri's built in API to send it to our service (this can be done with one line of code, as displayed below)
    1. The App Key can be obtained from the Keyri developer portal
    2. The token needs to be sent as a json string, ie {"refreshToken": "[token"}
Swift
Kotlin
|
UP NEXT
Firebase
Docs powered by archbee 
TABLE OF CONTENTS
Web
QR Widget Embedding
Event Listener Targeting QR Widget
QR Login Handling Function
Mobile
Create Mobile Application on Auth0
Configure URIs for Mobile App
Install Keyri and Auth0 SDKs
Code