Setup
Setup

Setup

Backlinks (0)

No backlinks found.

260415
260415

260415

  • Debian Setup
  • AutoBuilder
Backlinks (0)

No backlinks found.

anaclumos/configs/AGENTS.md
anaclumos/configs/AGENTS.md

anaclumos/configs/AGENTS.md

Backlinks (1)
  • Handling Agents with Love
Clerk Passkey Nudge
Clerk Passkey Nudge

Clerk Passkey Nudge

You can create a custom UI component that prompts users to add a passkey. Use the user.createPasskey() method from Clerk's SDK:

tsx
import { useUser } from '@clerk/clerk-react'
export function PasskeyNudge() {  const { isSignedIn, user } = useUser()
  const createClerkPasskey = async () => {    if (!isSignedIn) return
    try {      await user?.createPasskey()      // Show success message    } catch (err) {      console.error('Error:', JSON.stringify(err, null, 2))    }  }
  // Check if user already has passkeys  const hasPasskey = user?.passkeys && user.passkeys.length > 0
  if (hasPasskey) return null
  return (    <div className="passkey-nudge">      <p>๐Ÿ” Set up a passkey for faster, more secure sign-ins!</p>      <button onClick={createClerkPasskey}>Add Passkey</button>    </div>  )}

Implementation Strategies

Here are some ways to nudge users:

  1. Post-login prompt โ€” Show a modal or banner after sign-in if the user doesn't have a passkey set up
  2. Settings page highlight โ€” Add a prominent section in user settings encouraging passkey setup
  3. Conditional prompts โ€” Show the nudge after a certain number of SMS-based logins
  4. Incentive messaging โ€” Highlight benefits like "Sign in faster with Face ID/Touch ID"

Using an Onboarding Flow

For a more structured approach, you can integrate passkey setup into a custom onboarding flow. Clerk has a guide that shows how to use session tokens, public metadata, and Middleware to require users to complete certain steps before accessing your app:

Add custom onboarding to your authentication flow

You could adapt this pattern to prompt users to set up a passkey as part of onboarding, tracking their passkey status in publicMetadata and redirecting them to a passkey setup page until they've added one.

Prerequisites

  • Ensure passkeys are enabled in your Clerk Dashboard under User & Authentication โ†’ Passkeys
  • Note: Passkeys require a paid plan for production use (free in development)

You can check user.passkeys to determine if a user already has passkeys configured and conditionally show your nudge UI accordingly.

Backlinks (1)
  • 260120
Index
cho.sh
I prefer CLIBB9A08260619260619์ปดํ“จํŠธ๋กœ๋Š„37A88F์ปดํ“จํŠธ๋กœ๋Š„0CF03F์ปดํ“จํŠธ๋กœ๋Š„2C60FB260618260618260418260418260528260528AutoBuilder63849A260419260419Setup9AC296StellaD226F7260415260415Debian SetupD2F701260414260414anaclumos/configs/AGENTS.mdED86A3Ramp์˜ AX (ํšŒ์‚ฌ๋ฅผ AI๋กœ ๋ฌผ๋“ค์ด๋Š” ๋ฒ•)840774260413260413How to get your company AI pilled46544C260411260411260409260409260407260407260406260406Separating Claude Code Personal Sub and Claude Code Company Sub33A53C
import { useUser } from '@clerk/clerk-react'
export function PasskeyNudge() {  const { isSignedIn, user } = useUser()
  const createClerkPasskey = async () => {    if (!isSignedIn) return
    try {      await user?.createPasskey()      // Show success message    } catch (err) {      console.error('Error:', JSON.stringify(err, null, 2))    }  }
  // Check if user already has passkeys  const hasPasskey = user?.passkeys && user.passkeys.length > 0
  if (hasPasskey) return null
  return (    <div className="passkey-nudge">      <p>๐Ÿ” Set up a passkey for faster, more secure sign-ins!</p>      <button onClick={createClerkPasskey}>Add Passkey</button>    </div>  )}