Don't automatically poke for a Passkey

theopensource-company · Dec 30, 2023 · ff843d6 · ff843d6
1 parent c13c2fb
commit ff843d6
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 19 deletions.
diff --git a/src/app/[locale]/(public)/account/create-passkey/page.tsx b/src/app/[locale]/(public)/account/create-passkey/page.tsx
@@ -16,7 +16,7 @@ import { Label } from '@/components/ui/label';
 import { useSurreal } from '@/lib/Surreal';
 import { useAuth } from '@/lib/auth';
 import { useFeatureFlags } from '@/lib/featureFlags';
-import { useRegisterPasskey } from '@/lib/webauthn';
+import { useAutoPoke, useRegisterPasskey } from '@/lib/webauthn';
 import { Link, useRouter } from '@/locales/navigation';
 import { Credential } from '@/schema/resources/credential';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -69,10 +69,17 @@ function CreatePasskey({
 }: Pick<ReturnType<typeof useRegisterPasskey>, 'loading' | 'register'> & {
     signup?: boolean;
 }) {
+    const [_, setAutoPoke] = useAutoPoke();
     const t = useTranslations('pages.account.create-passkey.pre');
     return (
         <CardFooter className="space-x-4">
-            <Button onClick={() => register()} disabled={loading}>
+            <Button
+                onClick={() => {
+                    register();
+                    setAutoPoke(true);
+                }}
+                disabled={loading}
+            >
                 {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                 {t('trigger')}
             </Button>

diff --git a/src/app/[locale]/(public)/account/signin/page.tsx b/src/app/[locale]/(public)/account/signin/page.tsx
@@ -21,7 +21,7 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { useFeatureFlags } from '@/lib/featureFlags';
 import { cn } from '@/lib/utils';
-import { usePasskeyAuthentication } from '@/lib/webauthn';
+import { useAutoPoke, usePasskeyAuthentication } from '@/lib/webauthn';
 import { useRouter } from '@/locales/navigation';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { ChevronsUpDown, Info, KeyRound, Loader2, XCircle } from 'lucide-react';
@@ -44,11 +44,13 @@ export default function Signin() {
             (localStorage.getItem('signin.default-scope') as scope)) ||
         'user';
 
+    const [autoPoke, setAutoPoke] = useAutoPoke();
+
     const {
         loading: passkeyLoading,
         authenticate: tryPasskey,
         passkey,
-    } = usePasskeyAuthentication();
+    } = usePasskeyAuthentication({ autoPoke });
     const [featureFlags] = useFeatureFlags();
     const router = useRouter();
     const [navigating, setNavigating] = useState(false);
@@ -223,7 +225,10 @@ export default function Signin() {
                                 <Button
                                     type="button"
                                     className={passkey ? ' bg-green-500' : ''}
-                                    onClick={() => tryPasskey()}
+                                    onClick={() => {
+                                        tryPasskey();
+                                        setAutoPoke(true);
+                                    }}
                                     variant={passkey ? 'default' : 'outline'}
                                     disabled={passkeyLoading}
                                 >

diff --git a/src/lib/webauthn.ts b/src/lib/webauthn.ts
@@ -1,6 +1,6 @@
 import { client } from '@passwordless-id/webauthn';
 import { useMutation } from '@tanstack/react-query';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { z } from 'zod';
 import { useSurreal } from './Surreal';
 import { useAuth } from './auth';
@@ -59,11 +59,32 @@ export function useWebAuthnAvailable() {
     return available;
 }
 
+export function useAutoPoke() {
+    const [autoPoke, setAutoPoke] = useState(false);
+
+    const updatePreference = useCallback(
+        (autoPoke: boolean, persist = true) => {
+            setAutoPoke(autoPoke);
+            if (persist && typeof window !== 'undefined') {
+                localStorage.setItem('auto-poke', autoPoke.toString());
+            }
+        },
+        [setAutoPoke]
+    );
+
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            const state = localStorage.getItem('auto-poke');
+            setAutoPoke(state == 'true');
+        }
+    }, [setAutoPoke]);
+
+    return [autoPoke, updatePreference] as const;
+}
+
 export function useRegisterPasskey() {
     const [featureFlags] = useFeatureFlags();
-    const [didPoke, setDidPoke] = useState(false);
     const { user, loading: userLoading } = useAuth();
-    const ready = useReadyAfter(10);
 
     const {
         isPending: isRegistering,
@@ -127,18 +148,12 @@ export function useRegisterPasskey() {
     });
 
     const loading = userLoading || isRegistering;
-
-    useEffect(() => {
-        if (ready && !loading && user && !didPoke) {
-            register();
-            setDidPoke(true);
-        }
-    }, [ready, loading, user, register, didPoke, setDidPoke]);
-
     return { loading, register, passkey };
 }
 
-export function usePasskeyAuthentication() {
+export function usePasskeyAuthentication({
+    autoPoke,
+}: { autoPoke?: boolean } = {}) {
     const [featureFlags] = useFeatureFlags();
     const [didPoke, setDidPoke] = useState(false);
     const { refreshUser } = useAuth();
@@ -215,11 +230,11 @@ export function usePasskeyAuthentication() {
     });
 
     useEffect(() => {
-        if (ready && !loading && !didPoke) {
+        if (ready && autoPoke && !loading && !didPoke) {
             authenticate();
             setDidPoke(true);
         }
-    }, [ready, loading, authenticate, didPoke, setDidPoke]);
+    }, [ready, autoPoke, loading, authenticate, didPoke, setDidPoke]);
 
     return { loading, authenticate, passkey };
 }