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 
12min

Supabase

Incorporating Keyri QR login into your Supabase-based authentication system is a matter of sending the user's refreshToken from your mobile app to your web app via the Keyri mobile SDK and web Widget. On the mobile side, just load the refreshToken string as the payload into the Keyri method you're using in your app. On the web side, extract the refreshToken string from the payload that the Widget outputs and load it into the setSession method provided by the Supabase JS SDK. The following example code walks through how to do this with a React-based web app and a Flutter mobile app.

Usage notes:

  1. You must first have a Keyri account with a service registered under the domain name on which you will be showing the login QR code
  2. Your user must already be registered in your Supabase auth system
  3. Your user must already be logged in on your mobile app (the refreshToken must be available and valid for a logged-in session)

Web

Source code for an example web app can be found here: https://github.com/Keyri-Co/keyri-example-web-supabase. The live demo is here: https://keyri-example-web-supabase.vercel.app/

Example JSX:

React
|

Mobile

This Flutter example shows how to extract the refreshToken provided by Supabase in your app and send it to the web Widget via the Keyri SDK. The basic flow is:

  1. Make a request to Supabase to authenticate the user
  2. Parse the response to extract the token
  3. Authenticate using Keyri
    1. Below, we show how to utilize the EasyKeyriAuth function, which takes the user through scanning the code, creating the session, displaying the confirmation screen, and finalizing the payload transmission
    2. Alternatively, intermediate functions in the Keyri SDK, discussed in the mobile docs, can provide control over displaying a custom QR Scanner and/or Confirmation screen
Dart
|
UP NEXT
Ping Identity
Docs powered by archbee 
TABLE OF CONTENTS
Web
Mobile