Overview

Passkeys (WebAuthn) provide a secure, passwordless login mechanism using platform authenticators such as Touch ID, Face ID, or Windows Hello.

A passkey is a credential stored on the user’s device (or synced via iCloud/Google account) that replaces passwords with biometric or device-based authentication.

It uses WebAuthn and FIDO2 standards.

Passkey support in @astra-void/auth-kit allows you to integrate this modern authentication method seamlessly into your Next.js applications.

Supported Modes

There are two main modes of operation:

Email-first


1. Enter email ➝ 2. Get challenge ➝ 3. Use passkey ➝ Login

Ideal for users with multiple accounts per device
More predictable UX
Recommended for most use cases

Credential-only


1. Auto-prompt passkey ➝ 2. Select account ➝ ✅ Login

Fully passwordless
No email input required
May be slower with many credentials on device

For large-scale apps, email-first is generally preferred due to better performance.

Setup


// app/api/auth/[...authkit]/route.ts
import { AuthKit } from "@astra-void/auth-kit";
import { PasskeyProvider } from "@astra-void/auth-kit/providers";
import { PrismaAdapter } from "@astra-void/auth-kit/adapters";
import { prisma } from "@/lib/prisma";
 
export const handler = AuthKit({
  adapter: PrismaAdapter(prisma),
  providers: [
    PasskeyProvider({
        rpId: "localhost",
        rpName: "Passkey Example",
        mode: "credential",
        store: "redis",
        challengeStore: RedisChallengeStore(redis)
    })
  ]
});

Required Config

Option	Type	Description
rpId	string	Relying party ID (e.g. domain name)
rpName	string	Friendly name shown in browser UI
challengeStore	ChallengeStore	Store to persist challenge per user
mode	”email” or “credential”	Login flow strategy

If no challengeStore is provided, an in-memory store will be used by default (not recommended for production).

Also, you should set enviorment variables for AUTHKIT_ORIGIN


# .env
AUTHKIT_ORIGIN=http://localhost:3000

Security Notes

Passkeys are phishing-resistant
Challenge should be time-limited (e.g. 5 minutes)
Always use HTTPS in production

Client Usage

All passkey-related functions are available in:

Registering a Passkey (User must be logged in)


import { register } from "@astra-void/auth-kit/react";
 
await register('passkey');

Logging in with Passkey (email mode)


import { login } from "@astra-void/auth-kit/react";
 
await login('passkey', { email });

Logging in with Passkey (credential mode)


import { login } from "@astra-void/auth-kit/react";
 
await login('passkey');

Notes

Passkeys are stored in your database and linked to users via the adapter.