-
Notifications
You must be signed in to change notification settings - Fork 0
feat(auth): prompt passkey setup on first-time signup #30
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
8 commits
Select commit
Hold shift + click to select a range
e5ca0c4
Initial plan
Copilot 5703d72
feat: prompt passkey setup after first-time signup with E2E tests
Copilot e2208ee
improve accessibility: add ARIA attributes and Escape key support to …
Copilot ffa336f
feat(profile): add avatar upload support using Vercel Blob with clien…
Copilot b11e7c2
Initial plan
Copilot 58c3b48
fix: dismiss passkey prompt before interacting with UI in E2E tests
Copilot 3284bdd
merge: resolve conflicts with main branch
Copilot b86ec10
test: dismiss passkey setup prompt in account-select e2e
sirily11 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,147 @@ | ||
| "use client"; | ||
|
|
||
| import { useState, useEffect, useCallback, useRef } from "react"; | ||
| import { useRouter } from "next/navigation"; | ||
| import { motion, AnimatePresence } from "framer-motion"; | ||
| import { Loader2, KeyRound, ShieldCheck } from "lucide-react"; | ||
| import { Button } from "@/components/ui/button"; | ||
| import { Input } from "@/components/ui/input"; | ||
| import { Label } from "@/components/ui/label"; | ||
| import { usePasskey } from "@/hooks/use-passkey"; | ||
|
|
||
| export function PasskeySetupPrompt() { | ||
| const router = useRouter(); | ||
| const [isOpen, setIsOpen] = useState(true); | ||
| const [name, setName] = useState(""); | ||
| const inputRef = useRef<HTMLInputElement>(null); | ||
|
|
||
| const { isLoading, error, registerPasskey, clearError } = usePasskey({ | ||
| onSuccess: () => { | ||
| setIsOpen(false); | ||
| router.replace("/account"); | ||
| }, | ||
| }); | ||
|
|
||
| const handleSubmit = async (e: React.FormEvent) => { | ||
| e.preventDefault(); | ||
| if (!name.trim()) return; | ||
| await registerPasskey(name.trim()); | ||
| }; | ||
|
|
||
| const handleSkip = useCallback(() => { | ||
| if (isLoading) return; | ||
| setIsOpen(false); | ||
| clearError(); | ||
| router.replace("/account"); | ||
| }, [clearError, router, isLoading]); | ||
|
|
||
| useEffect(() => { | ||
| const handleKeyDown = (e: KeyboardEvent) => { | ||
| if (e.key === "Escape" && isOpen && !isLoading) { | ||
| handleSkip(); | ||
| } | ||
| }; | ||
| document.addEventListener("keydown", handleKeyDown); | ||
| return () => document.removeEventListener("keydown", handleKeyDown); | ||
| }, [isOpen, isLoading, handleSkip]); | ||
|
|
||
| // Focus the passkey name input when the dialog opens | ||
| useEffect(() => { | ||
| if (isOpen && inputRef.current) { | ||
| inputRef.current.focus(); | ||
| } | ||
| }, [isOpen]); | ||
|
|
||
| return ( | ||
| <AnimatePresence> | ||
| {isOpen && ( | ||
| <> | ||
| <motion.div | ||
| initial={{ opacity: 0 }} | ||
| animate={{ opacity: 1 }} | ||
| exit={{ opacity: 0 }} | ||
| className="fixed inset-0 bg-black/50 z-40" | ||
| onClick={handleSkip} | ||
| /> | ||
|
Comment on lines
+59
to
+65
|
||
| <motion.div | ||
| initial={{ opacity: 0, scale: 0.95 }} | ||
| animate={{ opacity: 1, scale: 1 }} | ||
| exit={{ opacity: 0, scale: 0.95 }} | ||
| role="dialog" | ||
| aria-modal="true" | ||
| aria-labelledby="passkey-setup-title" | ||
| className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-sm bg-background border rounded-lg p-6 z-50 shadow-lg" | ||
| data-testid="passkey-setup-prompt" | ||
| > | ||
| <div className="flex items-center gap-3 mb-4"> | ||
| <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center"> | ||
| <ShieldCheck className="w-5 h-5 text-primary" /> | ||
| </div> | ||
| <div> | ||
| <h2 id="passkey-setup-title" className="font-semibold">Secure your account</h2> | ||
| <p className="text-sm text-muted-foreground"> | ||
| Add a passkey for faster, more secure sign-in | ||
| </p> | ||
| </div> | ||
| </div> | ||
|
|
||
| {error && ( | ||
| <div className="bg-destructive/10 border border-destructive/20 text-destructive text-sm rounded-lg p-3 mb-4"> | ||
| {error} | ||
| </div> | ||
| )} | ||
|
|
||
| <form onSubmit={handleSubmit} className="space-y-4"> | ||
| <div className="space-y-2"> | ||
| <Label htmlFor="setup-passkey-name">Passkey Name</Label> | ||
| <Input | ||
| ref={inputRef} | ||
| id="setup-passkey-name" | ||
| placeholder="e.g., MacBook Pro, iPhone" | ||
| value={name} | ||
| onChange={(e) => setName(e.target.value)} | ||
|
Comment on lines
+96
to
+102
|
||
| disabled={isLoading} | ||
| data-testid="setup-passkey-name" | ||
| /> | ||
| <p className="text-xs text-muted-foreground"> | ||
| Give your passkey a name to identify it later | ||
| </p> | ||
| </div> | ||
|
|
||
| <div className="flex gap-3"> | ||
| <Button | ||
| type="button" | ||
| variant="outline" | ||
| className="flex-1" | ||
| onClick={handleSkip} | ||
| disabled={isLoading} | ||
| data-testid="skip-passkey-setup" | ||
| > | ||
| Skip for now | ||
| </Button> | ||
| <Button | ||
| type="submit" | ||
| className="flex-1" | ||
| disabled={isLoading || !name.trim()} | ||
| data-testid="register-passkey-setup" | ||
| > | ||
| {isLoading ? ( | ||
| <> | ||
| <Loader2 className="w-4 h-4 animate-spin" /> | ||
| Registering... | ||
| </> | ||
| ) : ( | ||
| <> | ||
| <KeyRound className="w-4 h-4" /> | ||
| Add Passkey | ||
| </> | ||
| )} | ||
| </Button> | ||
| </div> | ||
| </form> | ||
| </motion.div> | ||
| </> | ||
| )} | ||
| </AnimatePresence> | ||
| ); | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The PR description says the passkey prompt should appear after first-time signup, but
AccountPageonly triggers the prompt when?setup=passkeyis present. In the normal (non-E2E) signup flow, email verification redirects to/account?verified=true(seeactions/auth/verify-email.ts), so new users won’t see this prompt unless that redirect (or this condition) is updated accordingly.