Merge branch 'master' into android-playground-guide

Author: shahbaz17

docs/sdk/passkeys-sfa/passkeys-sfa.mdx

@@ -61,11 +61,11 @@ constructor:
 
 <TabItem value="table">
 
-| Parameter   | Description                                                                                   |
-| ----------- | --------------------------------------------------------------------------------------------- |
-| `rpID?`     | Your app domain. If your app is hosted on "your.app.xyz", the RPID can be "your.app.xyz".     |
-| `rpName?`   | Name of your app. We recommend setting it to the correctly capitalized name of your app.      |
-| `buildEnv?` | Specifies the build environment to use: `production`, `staging`, `testing`, or `development`. |
+| Parameter   | Description                                                                                                             |
+| ----------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `rpID?`     | Stands for relying party ID. Your app domain. If your app is hosted on "your.app.xyz", the RPID can be "your.app.xyz".  |
+| `rpName?`   | Stands for relying party name. Name of your app. We recommend setting it to the correctly capitalized name of your app. |
+| `buildEnv?` | Specifies the build environment to use: `production`, `staging`, `testing`, or `development`.                           |
 
 </TabItem>
 
@@ -137,8 +137,8 @@ console.log(passkeys);
 
 :::note Note
 
-First, a user needs to log in the usual way, and then register a passkey. From the next time, they
-can log in using a passkey.
+First, a user needs to log in the usual way, and then register a passkey. The next time, they can
+log in using a passkey.
 
 :::
 
@@ -199,7 +199,9 @@ console.log(passkeys);
 
 Below are two files, `App.tsx` and `utils.ts`, demonstrating the implementation of the Passkeys SFA
 Plugin. The `utils.ts` file is kept non-opinionated and can be configured according to your
-requirements for your users.
+requirements for your users. Also, note that the passkeys flow is **only supported on browsers that
+support WebAuthn**. You need to check for browser support before registering or logging in with a
+passkey.
 
 :::
 
@@ -213,10 +215,11 @@ requirements for your users.
 
 <TabItem value="App.tsx">
 
-```javascript
+```typescript
 import { CHAIN_NAMESPACES, WEB3AUTH_NETWORK, IProvider } from "@web3auth/base";
 import Web3Auth from "@web3auth/single-factor-auth";
 import { PasskeysPlugin } from "@web3auth/passkeys-sfa-plugin";
+import { shouldSupportPasskey } from "./utils";
 
 const clientId = "Your_Web3Auth_Client_ID";
 
@@ -245,25 +248,44 @@ const passkeysPlugin = new PasskeysPlugin({
 
 web3auth.addPlugin(passkeysPlugin); // Add the plugin to web3auth
 
-// Register a new passkey
-await passkeysPlugin.registerPasskey({ username: "user@example.com" });
+await web3auth.init();
 
-// Login with an existing passkey
-await passkeysPlugin.loginWithPasskey({ authenticatorId: "authenticator_id" });
+await web3auth.connect({
+  verifier: "your_verifier_name", // Pass the verifier name created on the Web3Auth dashboard
+  verifierId: "your_verifier_id", // Pass the verifierId received from the OAuth provider
+  idToken: "id_token", // Pass the idToken received from the OAuth provider
+});
 
-// List all registered passkeys
-const passkeys = await passkeysPlugin.listAllPasskeys();
-console.log(passkeys);
+const result = shouldSupportPasskey();
+
+if (!result.isBrowserSupported) {
+  console.log("Browser not supported");
+} else {
+  // Register a new passkey
+  await passkeysPlugin.registerPasskey({ username: "user@example.com" });
+
+  // Login with an existing passkey
+  await passkeysPlugin.loginWithPasskey({ authenticatorId: "authenticator_id" });
+
+  // List all registered passkeys
+  const passkeys = await passkeysPlugin.listAllPasskeys();
+  console.log(passkeys);
+}
 ```
 
 </TabItem>
 
 <TabItem value="utils.ts">
 
-```javascript
+```typescript
 import bowser from "bowser";
 
-const PASSKEYS_ALLOWED_MAP = [bowser.OS_MAP.iOS, bowser.OS_MAP.MacOS, bowser.OS_MAP.Android, bowser.OS_MAP.Windows];
+const PASSKEYS_ALLOWED_MAP = [
+  bowser.OS_MAP.iOS,
+  bowser.OS_MAP.MacOS,
+  bowser.OS_MAP.Android,
+  bowser.OS_MAP.Windows,
+];
 
 const getWindowsVersion = (osVersion: string) => {
   const windowsVersionRegex = /NT (\d+\.\d+)/;
@@ -293,9 +315,13 @@ const checkIfOSIsSupported = (osName: string, osVersion: string) => {
   }
 };
 
-export function shouldSupportPasskey(): { isBrowserSupported: boolean; isOsSupported: boolean; supported
+export function shouldSupportPasskey(): {
+  isBrowserSupported: boolean;
+  isOsSupported: boolean;
+  supported;
 
-Browser?: Record<string, string> } {
+  Browser?: Record<string, string>;
+} {
   const browser = bowser.getParser(navigator.userAgent);
   const osDetails = browser.parseOS();
   if (!osDetails) return { isBrowserSupported: false, isOsSupported: false };
@@ -325,8 +351,9 @@ Browser?: Record<string, string> } {
 }
 
 export function browserSupportsWebAuthn() {
-  return (window?.PublicKeyCredential !== undefined &&
-      typeof window.PublicKeyCredential === 'function');
+  return (
+    window?.PublicKeyCredential !== undefined && typeof window.PublicKeyCredential === "function"
+  );
 }
 ```