@ngriffin_uk/auth-react

Unstyled React components for complete authentication flows.

pnpm add react @ngriffin_uk/auth-react

import { AuthFlow, AuthProvider } from '@ngriffin_uk/auth-react'

;<AuthProvider
  config={{
    capabilities: {
      magicLink: true,
      password: true,
      passkeys: true,
      signUp: true
    },
    providers: [{ id: 'github', label: 'Continue with GitHub' }]
  }}
>
  <AuthFlow />
</AuthProvider>

Your application must:

• expose a POST /api/auth endpoint that accepts AuthRequest and returns AuthClientResult;
• enable only the authentication methods and providers that its backend supports;
• style the supplied auth-* classes, or provide replacement class names.

Set endpoint only when the authentication API is hosted elsewhere. The package provides the browser UI for OAuth, direct Apple sign-in, password and magic-link flows, MFA, recovery codes, TOTP QR codes, and WebAuthn.

Pass an emailed password-reset challenge as initialChallenge. Include its token as parameters.code; omit that parameter to show the manual token field.

Configure Apple with provider ID apple and its Services ID as clientId. Apple sign-in always uses the direct browser flow.

Use <AuthProviderList fieldPresentation="modal" /> when provider fields should open in a modal instead of expanding in the provider list.