From 832202a7b316eef2d146048521ce5cee3ce3e8a3 Mon Sep 17 00:00:00 2001 From: Aditya Malladi Date: Fri, 14 Oct 2022 16:30:52 -0400 Subject: [PATCH 1/4] keyri --- .../docs/guides/integrations/keyri.mdx.md | 150 ++++++++++++++++++ 1 file changed, 150 insertions(+) create mode 100644 apps/reference/docs/guides/integrations/keyri.mdx.md diff --git a/apps/reference/docs/guides/integrations/keyri.mdx.md b/apps/reference/docs/guides/integrations/keyri.mdx.md new file mode 100644 index 00000000000..bd19ebfa667 --- /dev/null +++ b/apps/reference/docs/guides/integrations/keyri.mdx.md @@ -0,0 +1,150 @@ +​ +title: Supabase detailed +slug: M_r4-supabase-detailed +createdAt: 2022-09-29T03:52:49.000Z +updatedAt: 2022-10-13T18:33:58.000Z +--- +​ +Keyri can be used to incorporate sign-in-with-QR functionality into your Supabase app, allowing users to scan a QR code on your web app with your mobile app and be instantly logged into the web app without having to input any credentials. +​ +Configuration is split into Web and Mobile components. On web, the Keyri QR Widget needs to be installed along with an event listener, and in your mobile app, install the Keyri SDK and pass into it the user's refresh token when sign-in-with-QR is initiated. When the refresh token lands in your web app, it's passed into Supabase's `setSession()` method. +​ +# Sign up for Keyri +​ +First make a free account on the Keyri dashboard (). On Add Your Application, set a name and input the domain on which your app will eventually be deployed. You can create multiple application in Keyri to account for your development, staging, and production environments +​ +![](https://archbee-image-uploads.s3.amazonaws.com/FQ4YmCkDokMJylbTAsoOR/HvTIja3KfgKUIMiNVKAqP_screen-shot-2022-10-13-at-21524-pm.png) +​ +Note your application key from the Keys and Credentials section - this will be used in the Mobile portion of the implementation +​ +![](https://archbee-image-uploads.s3.amazonaws.com/FQ4YmCkDokMJylbTAsoOR/KnD6LkWs-PUDtTS1sT9Rz_screen-shot-2022-10-13-at-21746-pm.png) +​ +# Web + +[![Keyri-Supabase Web Integration Video](http://img.youtube.com/vi/jrjrcpc2PFQ/0.jpg)](http://www.youtube.com/watch?v=jrjrcpc2PFQ "Supabase & Keyri | Web Integration Overview") +​ +For your web app, first download KeyriQR.html (available [here](https://raw.githubusercontent.com/Keyri-Co/library-keyri-connect/main/KeyriQR.html)) and save it to a public directory. +​ +Next, embed KeyriQR.html in your login page as an iFrame within the desired div. This serves as the widget that displays the dynamic QR code and connects with the Keyri API. +​ +```html +
+ +
+``` +​ +Next, for the same login view, set up an event listener to pick up the session token that the iFrame emits when the QR code is scanned by your app. +​ +```javascript +useEffect(() => { + window.addEventListener('message', async (evt) => { + if (evt.data.keyri && evt.data.data && document.location.origin == evt.origin) { + const { data } = evt; + if (!data.error) { + let refresh_token = JSON.parse(data.data).refreshToken; + await handleQrLogin(refresh_token); + } else if (data.error) { + console.log(`Keyri error: ${data.message}`); + } + } +}); +``` +​ +That's it! +​ +# Mobile + +[![Keyri-Supabase Mobile Integration Video](http://img.youtube.com/vi/oGMsSKyh6tc/0.jpg)](http://www.youtube.com/watch?v=oGMsSKyh6tc "Supabase & Keyri | Mobile Integration Overview") +​ +### Install Flutter +​ +First, install the Flutter SDK, found at flutter.dev +​ +Make sure to add Flutter to your PATH, for example: +​ +```shell +export PATH="$PATH:`pwd`/flutter/bin" +``` +​ +### Apple - initial setup +​ +Download the latest version of Xcode from the Mac App Store. Make sure the Xcode provided simulator is using a 64-bit device (iPhone 5s or later). You can check the device by viewing the settings in the simulator’s **Hardware > Device** or **File > Open Simulator** menus. +​ +### Android - initial setup +​ +Download the latest version of [Android Studio](https://developer.android.com/studio). Install Android SDK and needed emulator(s). +​ +### Create Project +​ +Run this command in your terminal/shell at the desired location for your new project +​ +```shell +$ flutter create my_app +``` +​ +You can then CD into the new directory, and run the test app with +​ +```shell +flutter run +``` +​ +This is a good test - if things are configured correctly so far you should see the default Flutter test app deployed. +​ +### Add dependencies (Keyri and Supabase) +​ +Open your Pubspec.yaml file, which should be at the top level directory in your new project +​ +Add Keyri and Supabase under **dependencies** +​ +![](https://archbee-image-uploads.s3.amazonaws.com/FQ4YmCkDokMJylbTAsoOR/jlAfOTEchuZpBq8TeXhJZ_screen-shot-2022-09-29-at-060908.png) +​ +One can now access Supabase and Keyri sdks in their Flutter code +​ +### Utilize the two together +​ +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 + - Note - you can find your App Key in the Keyri Developer Portal +​ + 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 +​ +```kotlin +// Sign in user with email and password +// Alternatively one can utilize the Supabase API to accomplish the same thing +final response = await client.auth.signIn(email: 'email', password: 'password'); +​ +if (response.error != null) { + // Error + print('Error: ${response.error?.message}'); +} else { + // Success + final session = response.data; +​ + // This is the payload that needs to be send through Keyri + final refreshToken = session.refreshToken +​ + // EasyKeyriAuth guides the user through scanning and parsing the QR, confirming the session, and configuring the payload + // One can also use the initiateQRSession method to use the Keyri Scanner with a custom Confirmation screen + // Or the ProcessLink method if you have your own scanner or are using deep linking + await keyri + .easyKeyriAuth([App Key], + '{"refreshToken":"$refreshToken"}', [email]) + .then((authResult) => _onAuthResult(authResult)) + .catchError((error, stackTrace) => _onError(error)); +​ +} +​ +​ +``` From 82ba86ce7b4a01366a193d71bd3263b3ca96d2fe Mon Sep 17 00:00:00 2001 From: Aditya Malladi Date: Tue, 18 Oct 2022 16:53:21 -0400 Subject: [PATCH 2/4] rename to mdx --- .../docs/guides/integrations/{keyri.mdx.md => keyri.mdx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename apps/reference/docs/guides/integrations/{keyri.mdx.md => keyri.mdx} (100%) diff --git a/apps/reference/docs/guides/integrations/keyri.mdx.md b/apps/reference/docs/guides/integrations/keyri.mdx similarity index 100% rename from apps/reference/docs/guides/integrations/keyri.mdx.md rename to apps/reference/docs/guides/integrations/keyri.mdx From f8049bbeb3c91591e94e50c9831c6a2f76feea7d Mon Sep 17 00:00:00 2001 From: Aditya Malladi Date: Tue, 18 Oct 2022 16:54:33 -0400 Subject: [PATCH 3/4] update metadata --- apps/reference/docs/guides/integrations/keyri.mdx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/apps/reference/docs/guides/integrations/keyri.mdx b/apps/reference/docs/guides/integrations/keyri.mdx index bd19ebfa667..936db47bad8 100644 --- a/apps/reference/docs/guides/integrations/keyri.mdx +++ b/apps/reference/docs/guides/integrations/keyri.mdx @@ -1,8 +1,7 @@ ​ -title: Supabase detailed -slug: M_r4-supabase-detailed -createdAt: 2022-09-29T03:52:49.000Z -updatedAt: 2022-10-13T18:33:58.000Z +id: keyri +title: 'Keyri' +description: 'QR authentication for an easy and flexible biometric solution across all platforms.' --- ​ Keyri can be used to incorporate sign-in-with-QR functionality into your Supabase app, allowing users to scan a QR code on your web app with your mobile app and be instantly logged into the web app without having to input any credentials. From 94df3f18aa1025513d6869517c55aa3ff26b607f Mon Sep 17 00:00:00 2001 From: Aditya Malladi Date: Tue, 18 Oct 2022 17:03:23 -0400 Subject: [PATCH 4/4] sidebar --- apps/reference/nav/_referenceSidebars.js | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/reference/nav/_referenceSidebars.js b/apps/reference/nav/_referenceSidebars.js index e0150208708..60ad0dcf290 100644 --- a/apps/reference/nav/_referenceSidebars.js +++ b/apps/reference/nav/_referenceSidebars.js @@ -222,6 +222,7 @@ const sidebars = { 'guides/integrations/dashibase', 'guides/integrations/directus', 'guides/integrations/draftbit', + 'guides/integrations/keyri', 'guides/integrations/pgmustard', 'guides/integrations/plasmic', 'guides/integrations/polyscale',