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.

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.

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.

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

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.

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.

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

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.

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.

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"}