Why? Multi-tenant environments. First, we need to understand a few differences between environments:
So
Most people physically separate their tenancy, such as Claude Code, from their personal vs. work laptops. So in most cases, it's not a big deal.
But when you need multi-tenancy, it becomes super stressful. For example, say you have two different toolkits:
Most MCP auth states or code harnesses don't support profiles, so you can only log in to one.
So therefore... a natural evolution was to have both:
to physically isolate tenancies.
Now we've solved the multiple-profile issue, but the client's problems persist. Now let's get back to the environments:
All MCP auth or toolkit auth info should always be saved in the Agent Runtime Environment IMHO. However, a surprising number of harnesses tie them to the LLM server (such as Codex Apps or Claude.ai Plugins) or put them in the end-user UI (Claude Desktop or Codex Desktop).
Now the problem is:
The only way to reliably isolate different auth information is thus:
Then
are both isolated VPS, and
This way, you can provide different toolkits, creating multiple dev environments.
You can create a custom UI component that prompts users to add a passkey. Use the user.createPasskey() method from Clerk's SDK:
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> )}Here are some ways to nudge users:
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.
You can check user.passkeys to determine if a user already has passkeys configured and conditionally show your nudge UI accordingly.
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> )}