Passkeys

Passkey (WebAuthn) authentication lets users sign in with a biometric or device credential instead of a password.

PasskeyLogin

A button that triggers passkey authentication via the browser’s WebAuthn API.

Props:

Prop	Type	Default	Description
onLogin	() => void	(none)	Called after successful passkey login
onError	(error: Error) => void	(none)	Called on error
onSetupPasskey	() => void	(none)	Called when the user wants to set up a passkey instead
setupHref	string	(none)	Route of your passkey setup page; used when onSetupPasskey isn’t provided
label	string	'Continue with passkey'	Button label text

import { PasskeyLogin } from '@nebulr-group/bridge-react';
import { useNavigate } from 'react-router-dom';

function PasskeyButton() {
  const navigate = useNavigate();

  return (
    <PasskeyLogin
      onLogin={() => navigate('/dashboard')}
      onError={(err) => console.error(err)}
    />
  );
}

PasskeySetup

Registers a new passkey using a setup token (emailed to the user).

Props:

Prop	Type	Default	Description
token	string	(required)	The setup token from the URL
onComplete	() => void	(none)	Called after passkey registration
onError	(error: Error) => void	(none)	Called on error
loginHref	string	'/auth/login'	Link back to the login page

You may not need this page. <BridgeAuthRoutes> mounted at /auth/* already serves /auth/setup-passkey/<token>. Write your own only to take that page over, and hand it to Bridge by element: <BridgeAuthRoutes pages={{ 'setup-passkey': ({ token }) => <PasskeySetup token={token!} /> }} /> — a function receives the emailed token.

// src/pages/SetupPasskeyPage.tsx (rendered at /auth/setup-passkey/:token)
import { PasskeySetup } from '@nebulr-group/bridge-react';
import { useNavigate, useParams } from 'react-router-dom';

function SetupPasskeyPage() {
  const { token } = useParams();
  const navigate = useNavigate();

  return (
    <PasskeySetup
      token={token ?? ''}
      onComplete={() => navigate('/auth/login')}
    />
  );
}

PasskeyRequestSetupLink

An email form that requests a passkey setup link be sent to the user.

Props:

Prop	Type	Default	Description
initialEmail	string	''	Pre-filled email address
onSent	() => void	(none)	Called after the setup link email is sent
onError	(error: Error) => void	(none)	Called on error
onBack	() => void	(none)	Called when user clicks back
loginHref	string	'/auth/login'	Link back to the login page

import { PasskeyRequestSetupLink } from '@nebulr-group/bridge-react';

<PasskeyRequestSetupLink
  initialEmail="user@example.com"
  onBack={() => console.log('Back to login')}
/>