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 { createConfig } from "@account-kit/react";
import { sepolia } from "@account-kit/infra";
 
export const config = createConfig(
  {
    chain: sepolia,
    apiKey: "ALCHEMY_API_KEY",
  },
  {
    illustrationStyle: "outline",
    auth: {
      sections: [[{ type: "email" }], [{ type: "passkey" }]],
      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 { useAddPasskey } from "@account-kit/react";
 
export default function MyComponent() {
  const { addPasskey, isAddingPasskey } = useAddPasskey();
 
  return (
    <button
      disabled={isAddingPasskey}
      onClick={() => {
        addPasskey();
      }}
    >
      Add Passkey
    </button>
  );
}