feat: add option to disable storing last passkey credentials (#4944)

Author: joaquim-verges

.changeset/tricky-clouds-swim.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Option to disable storing last stored passkey credentials

packages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsx

@@ -393,7 +393,6 @@ export function PasskeyView(props: InAppWalletFormUIProps) {
       <View
         style={{
           flexDirection: "column",
-          flex: 1,
           alignItems: "center",
           justifyContent: "center",
           padding: spacing.xl,

packages/thirdweb/src/wallets/in-app/core/authentication/passkeys.ts

@@ -55,8 +55,8 @@ export interface PasskeyClient {
 
 export async function registerPasskey(options: {
   client: ThirdwebClient;
-  storage: ClientScopedStorage;
   passkeyClient: PasskeyClient;
+  storage?: ClientScopedStorage;
   ecosystem?: Ecosystem;
   username?: string;
   rp: RpInfo;
@@ -119,17 +119,17 @@ export async function registerPasskey(options: {
     );
   }
   // 4. store the credentialId in local storage
-  await options.storage.savePasskeyCredentialId(registration.credentialId);
+  await options.storage?.savePasskeyCredentialId(registration.credentialId);
 
   // 5. returns back the IAW authentication token
   return verifData;
 }
 
 export async function loginWithPasskey(options: {
   client: ThirdwebClient;
-  storage: ClientScopedStorage;
   passkeyClient: PasskeyClient;
   rp: RpInfo;
+  storage?: ClientScopedStorage;
   ecosystem?: Ecosystem;
 }): Promise<AuthStoredTokenWithCookieReturnType> {
   if (!options.passkeyClient.isAvailable()) {
@@ -145,7 +145,8 @@ export async function loginWithPasskey(options: {
   const challenge = challengeData.challenge;
   // 1.2. find the user's credentialId in local storage
   const credentialId =
-    (await options.storage.getPasskeyCredentialId()) ?? undefined;
+    (await options.storage?.getPasskeyCredentialId()) ?? undefined;
+
   // 2. initiate login
   const authentication = await options.passkeyClient.authenticate({
     credentialId,
@@ -188,7 +189,7 @@ export async function loginWithPasskey(options: {
   }
 
   // 5. store the credentialId in local storage
-  await options.storage.savePasskeyCredentialId(authentication.credentialId);
+  await options.storage?.savePasskeyCredentialId(authentication.credentialId);
 
   // 6. return the auth'd user type
   return verifData;

packages/thirdweb/src/wallets/in-app/core/authentication/types.ts

@@ -49,6 +49,12 @@ export type SingleStepAuthArgsType =
        * Optional name of the passkey to create, defaults to a generated name
        */
       passkeyName?: string;
+      /**
+       * Whether to store the last used passkey from local storage.
+       * This is useful if you want to automatically log in the user with their last used passkey.
+       * Defaults to true.
+       */
+      storeLastUsedPasskey?: boolean;
     }
   | {
       strategy: "wallet";

packages/thirdweb/src/wallets/in-app/native/native-connector.ts

@@ -214,10 +214,17 @@ export class InAppNativeConnector implements InAppConnector {
   private async passkeyAuth(args: {
     type: "sign-up" | "sign-in";
     passkeyName?: string;
+    storeLastUsedPasskey?: boolean;
     client: ThirdwebClient;
     ecosystem?: Ecosystem;
   }): Promise<AuthStoredTokenWithCookieReturnType> {
-    const { type, passkeyName, client, ecosystem } = args;
+    const {
+      type,
+      passkeyName,
+      client,
+      ecosystem,
+      storeLastUsedPasskey = true,
+    } = args;
     const domain = this.passkeyDomain;
     const storage = this.localStorage;
     if (!domain) {
@@ -236,7 +243,7 @@ export class InAppNativeConnector implements InAppConnector {
           ecosystem,
           username: passkeyName,
           passkeyClient,
-          storage,
+          storage: storeLastUsedPasskey ? storage : undefined,
           rp: {
             id: domain,
             name: domain,
@@ -247,7 +254,7 @@ export class InAppNativeConnector implements InAppConnector {
           client,
           ecosystem,
           passkeyClient,
-          storage,
+          storage: storeLastUsedPasskey ? storage : undefined,
           rp: {
             id: domain,
             name: domain,

packages/thirdweb/src/wallets/in-app/web/lib/web-connector.ts

@@ -411,15 +411,16 @@ export class InAppWebConnector implements InAppConnector {
     args: Extract<SingleStepAuthArgsType, { strategy: "passkey" }>,
   ) {
     const { PasskeyWebClient } = await import("./auth/passkeys.js");
+    const { passkeyName, storeLastUsedPasskey = true } = args;
     const passkeyClient = new PasskeyWebClient();
     const storage = this.localStorage;
     if (args.type === "sign-up") {
       return registerPasskey({
         client: this.client,
         ecosystem: this.ecosystem,
-        username: args.passkeyName,
+        username: passkeyName,
         passkeyClient,
-        storage,
+        storage: storeLastUsedPasskey ? storage : undefined,
         rp: {
           id: this.passkeyDomain ?? window.location.hostname,
           name: this.passkeyDomain ?? window.document.title,
@@ -430,7 +431,7 @@ export class InAppWebConnector implements InAppConnector {
       client: this.client,
       ecosystem: this.ecosystem,
       passkeyClient,
-      storage,
+      storage: storeLastUsedPasskey ? storage : undefined,
       rp: {
         id: this.passkeyDomain ?? window.location.hostname,
         name: this.passkeyDomain ?? window.document.title,