Skip to main content
This guide explains how to set up Passkey authentication with Hexclave. Passkeys allow users to sign in to your application securely using biometrics, mobile devices, or security keys.
Passkeys provide a more secure and convenient authentication method compared to traditional passwords by using WebAuthn standard.

​
Integration Steps

1

Enable Passkey Authentication in Hexclave

  1. Log in to the Hexclave dashboard.
  2. Select your project from the dashboard.
  3. In the left sidebar, select Auth Methods.
  4. Find the Passkey authentication method and toggle it to enable.
  5. Save your changes.
2

Implement Passkey Authentication in Your Application

  1. Make sure you’ve installed the right Hexclave SDK package for your framework. For example, in Next.js: 
    npm install @hexclave/next
    For other frameworks, use the package shown in Setup, such as @hexclave/react, @hexclave/js, or @hexclave/tanstack-start.
  2. Add Passkey support to your sign-in component by using the built-in Hexclave components or creating your own implementation with the SDK. Using built-in components: 
    import { SignIn } from "@hexclave/next";  // replace `next` with the correct framework SDK package

export default function SignInPage() {
  return <SignIn />;
}
    The built-in components will automatically show the passkey option when it’s enabled in your project.

​
How Passkey Authentication Works

  1. Registration: When a user creates a new passkey, their device generates a unique public-private key pair. The private key stays on the user’s device, while the public key is sent to Hexclave’s servers.
  2. Authentication: When a user wants to sign in, Hexclave sends a challenge to the user’s device. The device uses the private key to sign the challenge, and sends the signature back to Hexclave for verification.
  3. Cross-device authentication: Users can create passkeys on one device and use them to sign in on another device using QR codes or nearby device detection.
For the most up-to-date compatibility information, refer to the WebAuthn browser compatibility chart.