Add Passkey

You may have noticed in the Demo App that you can allow a user to log in with an existing passkey, but there’s no way to sign-up with a passkey. This guide will outline how to add a passkey to a user’s account after they’ve signed up.

If you’re not sure how to authenticate your users, see this guide.

Add a passkey on sign up

The easiest way to add a passkey to users is right when they signup! This can be done by updating your ui config in the createConfig call to enable the UI components to prompt the user for a passkey.

import { 
const createConfig: (props: CreateConfigProps, ui?: AlchemyAccountsUIConfig) => AlchemyAccountsConfigWithUI
Wraps the createConfig that is exported from @aa-sdk/core to allow passing an additional argument, the configuration object for the Auth Components UI (the modal and AuthCard).
createConfig } from "@account-kit/react";
import { 
const sepolia: Chain
sepolia } from "@account-kit/infra";

export const 
const config: AlchemyAccountsConfigWithUI
config = 
function createConfig(props: CreateConfigProps, ui?: AlchemyAccountsUIConfig): AlchemyAccountsConfigWithUI
Wraps the createConfig that is exported from @aa-sdk/core to allow passing an additional argument, the configuration object for the Auth Components UI (the modal and AuthCard).
createConfig(
  {
    
chain: Chain
chain: 
const sepolia: Chain
sepolia,
    
apiKey: string
apiKey: "ALCHEMY_API_KEY",
  },
  {
    
illustrationStyle?: "outline" | "linear" | "filled" | "flat" | undefined
illustrationStyle: "outline",
    
auth?: {
    addPasskeyOnSignup?: boolean;
    header?: React.ReactNode;
    hideError?: boolean;
    onAuthSuccess?: () => void;
    sections: AuthType[][];
    hideSignInText?: boolean;
} | undefined
auth: {
      
sections: AuthType[][]
Each section can contain multiple auth types which will be grouped together and separated by an OR divider
sections: [[{ 
type: "email"
type: "email" }], [{ 
type: "passkey"
type: "passkey" }]],
      
addPasskeyOnSignup?: boolean | undefined
If this is true, then auth components will prompt users to add a passkey after signing in for the first time
addPasskeyOnSignup: true,
    },
  },
);

Now, when a user signs up, they will be prompted to create a passkey.

Add a passkey later

With the above config, the user will only be prompted when they first create their account in your app. If you want to add the ability to add a passkey elsewhere in your app, for example in a settings page, you can use the useAddPasskey hook.

import React from "react";
import { 
function useAddPasskey(mutationArgs?: UseAddPasskeyMutationArgs): UseAddPasskeyResult
A custom hook to handle the addition of a passkey to an already authenticated account, which includes executing a mutation with optional parameters.
useAddPasskey } from "@account-kit/react";

export default function 
function MyComponent(): JSX.Element
MyComponent() {
  const { 
const addPasskey: UseMutateFunction<string[], Error, void | CredentialCreationOptions | undefined, unknown>
addPasskey, 
const isAddingPasskey: boolean
isAddingPasskey } = 
function useAddPasskey(mutationArgs?: UseAddPasskeyMutationArgs): UseAddPasskeyResult
A custom hook to handle the addition of a passkey to an already authenticated account, which includes executing a mutation with optional parameters.
useAddPasskey();

  return (
    <
React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
button
      
React.ButtonHTMLAttributes<HTMLButtonElement>.disabled?: boolean | undefined
disabled={
const isAddingPasskey: boolean
isAddingPasskey}
      
React.DOMAttributes<HTMLButtonElement>.onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined
onClick={() => {
        
const addPasskey: (variables: void | CredentialCreationOptions | undefined, options?: MutateOptions<string[], Error, void | CredentialCreationOptions | undefined, unknown> | undefined) => void
addPasskey();
      }}
    >
      Add Passkey
    </
React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
button>
  );
}