Passkeys

1. User is signed in and navigates to security settings
2. User clicks "Add Passkey"
3. Client calls authClient.passkey.addPasskey()
4. Server generates a challenge and returns registration options
5. Browser triggers the WebAuthn API (navigator.credentials.create())
6. User completes the biometric/PIN/security key prompt
7. Browser returns the attestation response to the client
8. Client sends the attestation to the server for verification
9. Server validates the response and stores the credential public key
10. Passkey is now registered and ready for authentication

1. User navigates to the sign-in page
2. User clicks "Sign in with Passkey"
3. Client calls authClient.signIn.passkey()
4. Server generates an authentication challenge
5. Browser triggers the WebAuthn API (navigator.credentials.get())
6. User completes the biometric/PIN/security key prompt
7. Browser returns the assertion response to the client
8. Client sends the assertion to the server for verification
9. Server validates the signature against the stored public key
10. Session is created and user is authenticated

// convex/banataAuth/auth.ts
function buildConfig(): BanataAuthConfig {
  return {
    appName: "My App",
    siteUrl: process.env.SITE_URL!,
    secret: process.env.BETTER_AUTH_SECRET!,
 
    authMethods: {
      passkey: true,  // Enable passkey (WebAuthn) authentication
    },
 
    passkey: {
      rpId: process.env.PASSKEY_RP_ID ?? "localhost",
      rpName: "My App",
      origin: process.env.PASSKEY_ORIGIN ?? "http://localhost:3000",
    },
  };
}

# .env
PASSKEY_RP_ID=myapp.com
PASSKEY_ORIGIN=https://myapp.com

# .env.local
PASSKEY_RP_ID=localhost
PASSKEY_ORIGIN=http://localhost:3000

import { authClient } from "@/lib/auth-client";
 
const { data, error } = await authClient.passkey.addPasskey();
 
if (error) {
  // Handle errors:
  // - "WebAuthn not supported" (browser doesn't support passkeys)
  // - "Registration failed" (user cancelled or hardware error)
  // - "Passkey already registered" (duplicate credential)
  console.error(error.message);
} else {
  console.log("Passkey registered successfully");
}

const { data, error } = await authClient.signIn.passkey();
 
if (error) {
  // Handle errors:
  // - "Authentication failed" (invalid credential or user cancelled)
  // - "No passkeys found" (no credentials registered for this rpId)
  console.error(error.message);
} else {
  // data contains the user and session
  console.log(data.user);
  console.log(data.session);
  window.location.href = "/dashboard";
}

const { data, error } = await authClient.passkey.listPasskeys();
 
if (data) {
  // data is an array of registered passkeys
  data.forEach((passkey) => {
    console.log(passkey.id);          // Credential ID
    console.log(passkey.createdAt);   // When it was registered
    console.log(passkey.deviceType);  // "platform" or "cross-platform"
  });
}

const { error } = await authClient.passkey.deletePasskey({
  id: "credential_id_here",
});
 
if (!error) {
  console.log("Passkey removed");
}

"use client";
 
import { authClient } from "@/lib/auth-client";
import { useState, useEffect } from "react";
 
export function PasskeySettings() {
  const [passkeys, setPasskeys] = useState<any[]>([]);
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);
 
  useEffect(() => {
    loadPasskeys();
  }, []);
 
  async function loadPasskeys() {
    const { data } = await authClient.passkey.listPasskeys();
    if (data) setPasskeys(data);
  }
 
  async function handleAdd() {
    setError("");
    setLoading(true);
 
    const { error } = await authClient.passkey.addPasskey();
 
    if (error) {
      setError(error.message ?? "Failed to register passkey");
    } else {
      await loadPasskeys();
    }
 
    setLoading(false);
  }
 
  async function handleDelete(id: string) {
    const { error } = await authClient.passkey.deletePasskey({ id });
 
    if (!error) {
      setPasskeys((prev) => prev.filter((p) => p.id !== id));
    }
  }
 
  return (
    <div>
      <h2>Passkeys</h2>
      <p>
        Use your device's biometric sensor or security key to sign in
        without a password.
      </p>
 
      {passkeys.length > 0 ? (
        <ul>
          {passkeys.map((passkey) => (
            <li key={passkey.id}>
              <span>
                {passkey.deviceType === "platform"
                  ? "This device"
                  : "Security key"}{" "}
                -- Added {new Date(passkey.createdAt).toLocaleDateString()}
              </span>
              <button onClick={() => handleDelete(passkey.id)}>
                Remove
              </button>
            </li>
          ))}
        </ul>
      ) : (
        <p>No passkeys registered yet.</p>
      )}
 
      {error && <p style={{ color: "red" }}>{error}</p>}
 
      <button onClick={handleAdd} disabled={loading}>
        {loading ? "Waiting for device..." : "Add Passkey"}
      </button>
    </div>
  );
}

"use client";
 
import { authClient } from "@/lib/auth-client";
import { useState } from "react";
 
export function SignInPage() {
  const [error, setError] = useState("");
 
  async function handlePasskeySignIn() {
    setError("");
    const { data, error } = await authClient.signIn.passkey();
 
    if (error) {
      setError(error.message ?? "Passkey sign-in failed");
    } else {
      window.location.href = "/dashboard";
    }
  }
 
  return (
    <div>
      <h1>Sign In</h1>
 
      <button onClick={handlePasskeySignIn}>
        Sign in with Passkey
      </button>
 
      {error && <p style={{ color: "red" }}>{error}</p>}
 
      <hr />
      <p>Or sign in with email and password:</p>
      {/* Email/password form here */}
    </div>
  );
}

authMethods: {
  emailPassword: true,   // Traditional fallback
  passkey: true,          // Passwordless primary
  magicLink: true,        // Another passwordless option
},
 
passkey: {
  rpId: process.env.PASSKEY_RP_ID ?? "localhost",
  rpName: "My App",
  origin: process.env.PASSKEY_ORIGIN ?? "http://localhost:3000",
},

+----------------------------------+
|  [Sign in with Passkey]          |  <-- Primary, prominent
+----------------------------------+
|                                  |
|  -------- or continue with ----- |
|                                  |
|  Email:    [____________]        |
|  Password: [____________]        |
|  [Sign In]                       |
+----------------------------------+