Feb 27 (edited) • AI Agent SaaS Challenge
Implementing Passkeys with Clerk Made Easy!
As Sonny mentioned, you’ll get extra points if you implement signing in with passkeys. It might sound tricky, but it’s actually super simple! Here’s how you can do it:
1. Enable Passkeys in the Clerk Dashboard:
- Go to the Clerk Dashboard.
- Navigate to *Email, phone, username*.
- In the *Authentication strategies* section, ensure *Passkeys* is enabled.
2. Domain Restriction Note:
3. Create a User Passkey:
- Go to your user profile (rendered by Clerk).
- Navigate to Manage Account > Security > Add a Passkey*.
4. Create a Sign-In with Passkey Button:
Use this code snippet to create a button for signing in with passkeys:
```
export function SignInWithPasskeyButton() {
const { signIn } = useSignIn()
const router = useRouter()
const signInWithPasskey = async () => {
try {
const signInAttempt = await signIn?.authenticateWithPasskey({
flow: 'discoverable',
})
if (signInAttempt?.status === 'complete') {
await setActive({ session: signInAttempt.createdSessionId })
router.push('/')
} else {
console.error(JSON.stringify(signInAttempt, null, 2))
}
} catch (err) {
console.error('Error:', JSON.stringify(err, null, 2))
}
}
return <button onClick={signInWithPasskey}>Sign in with a passkey</button>
}
```
And you’re done! Now you can easily sign in with passkeys. 🎉
For more details, check out the official Clerk docs: https://clerk.com/docs/custom-flows/passkeys#domain-restrictions-for-passkeys-in-development.
If you need any help, don’t hesitate to comment below.
3
15 comments
Implementing Passkeys with Clerk Made Easy!
skool.com/universityofcode
You'll get Exclusive Lessons & Content, Badass Community Support & More here to elevate as a Dev!
Leaderboard (30-day)
1
+6
2
+5
3
+4
4
+2
5
+2
Powered by