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)

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:

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