Clerk Passkey Nudge

cho.sh

researchmini

3,249 notes

260722260722 I prefer TUIBB9A08 MarkRight8B0501 에이전트 런타임 서버 셋업1983DC Bun을 Rust로 재작성하다2BDED3 260721260721 Agent Runtime Server SetupC38C2C 260719260719 AutoBuilder63849A 260718260718 Slack Bots are the new CLIs3E662F 260717260717 WristcomputerD98BDF 260716260716 SalpakanA2940F AGENTS.mdDFE522 260714260714 260713260713 260712260712 260711260711 인간의 보완재와 AX41F1E5 260710260710 tokenmaxxing cli635294 260709260709

cho.sh

research mini

3,249 notes

Clerk Passkey Nudge · cho.sh

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,

Backlinks1

260120

Comments0

No comments yet. Be the first to share your thoughts.

Comments

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 (

<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:

Post-login prompt — Show a modal or banner after sign-in if the user doesn't have a passkey set up
Settings page highlight — Add a prominent section in user settings encouraging passkey setup
Conditional prompts — Show the nudge after a certain number of SMS-based logins
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.

Comments0

No comments yet. Be the first to share your thoughts.