# Passkey Login Authentication

> How to implement Passkey Login authentication in your React app

> For the complete documentation index, see [llms.txt](/docs/llms.txt).

If a user has added a passkey to their account, or they initially signed up with a passkey, authenticate them using that passkey. This provides a secure, passwordless authentication experience.

You can implement Passkey Login authentication in two ways:

* [Pre-built UI Components](#pre-built-ui-components) - Quick implementation with minimal code
* [Custom UI](#custom-ui) - Complete control over the user experience

## Pre-built UI Components

Pre-built UI components handle the entire Passkey Login authentication flow with minimal code.

### Step 1: Add Authentication Components to Your Page

Before configuring your authentication, first add one of the pre-built components to your application:

## Using Modal Authentication

To add authentication in a modal popup:

```tsx twoslash
import React from "react";
import { useAuthModal } from "@account-kit/react";

export default function MyPage() {
  const { openAuthModal } = useAuthModal();

  return <button onClick={openAuthModal}>Sign in</button>;
}
```

For more details on modal configuration, see the [Modal Authentication](/docs/wallets/react/ui-components#modal-auth) documentation.


Or:

## Using Embedded Authentication

To embed authentication directly in your page:

```tsx twoslash
import React from "react";
import { AuthCard } from "@account-kit/react";

export default function MyLoginPage() {
  return (
    <div className="flex flex-row p-4 bg-white border border-gray-200 rounded-lg">
      <AuthCard />
    </div>
  );
}
```

For more details on embedded authentication, see the [Embedded Authentication](/docs/wallets/react/ui-components#embedded-auth) documentation.


### Step 2: Configure Passkey Login in UI Components

After adding the components, configure the Passkey Login authentication in your application config:

To customize the Passkey Login authentication experience in your pre-built components, configure the UI as follows:

```tsx twoslash
import { AlchemyAccountsUIConfig, createConfig } from "@account-kit/react";
import { sepolia, alchemy } from "@account-kit/infra";

const uiConfig: AlchemyAccountsUIConfig = {
  auth: {
    sections: [
      [
        // Include passkey login in a section
        { type: "passkey" },

        // You can combine with other authentication methods
        { type: "email" },
      ],
    ],
  },
};

export const config = createConfig(
  {
    transport: alchemy({ apiKey: "your-api-key" }),
    chain: sepolia,
  },
  uiConfig,
);
```

Passkey login configuration accepts the following options:

```ts twoslash
type PasskeyAuthType = {
  type: "passkey";
};
```

You can find the full type definition in the [Account Kit source code](https://github.com/alchemyplatform/aa-sdk/blob/main/account-kit/react/src/components/auth/types.ts).

For more details on UI component customization, see the [UI Components](/docs/wallets/react/ui-components) documentation.

## Custom UI

If you need complete control over the user experience, you can implement your own custom UI for Passkey Login authentication using Wallet APIs hooks.

### Option 1: Passkey Login with Email

If the user's passkey is associated with an email, you can use the email to help identify the correct passkey:

```tsx twoslash
import { useAuthenticate } from "@account-kit/react";

// Inside your component
const { authenticate } = useAuthenticate();

// When the user wants to log in with their passkey and email
const handlePasskeyLogin = (email: string) => {
  authenticate(
    {
      type: "passkey",
      email,
    },
    {
      onSuccess: () => {
        // Success - user authenticated with passkey
      },
      onError: (error) => {
        // Handle error
      },
    },
  );
};
```

### Option 2: Passkey Login without Email

If you want to authenticate a user with just their passkey (without requiring an email), you can use this approach:

```tsx twoslash
import { useAuthenticate } from "@account-kit/react";

// Inside your component
const { authenticate } = useAuthenticate();

// When the user wants to log in with just their passkey
const handlePasskeyOnlyLogin = () => {
  authenticate(
    {
      type: "passkey",
      createNew: false, // Important: set to false to prevent creating a new passkey
    },
    {
      onSuccess: () => {
        // Success - user authenticated with passkey
      },
      onError: (error) => {
        // Handle error
      },
    },
  );
};
```

### Step 3: Track Authentication Status

Use the `useSignerStatus` hook to determine if the user is authenticated:

```tsx twoslash
import { useSignerStatus } from "@account-kit/react";

// Inside your component
const { isConnected } = useSignerStatus();

// You can use isConnected to conditionally render UI
```