Basic Usage

<script>
  import { AuthPage } from '@kavach/ui'
</script>

<AuthPage />

With Providers

<script>
  import { AuthPage } from '@kavach/ui'
</script>

<AuthPage 
  providers={[
    { name: 'google', label: 'Google' },
    { name: 'github', label: 'GitHub' },
    { name: 'magic', mode: 'otp', label: 'Magic Link' },
    { name: 'password', mode: 'password', label: 'Email' }
  ]}
/>

With Callbacks

<AuthPage 
  providers={[...]}
  onSuccess={() => {
    goto('/dashboard')
  }}
  onError={(error) => {
    console.error(error)
  }}
/>

Features

• Cached Logins — Shows recent logins at top for quick access
• Collapsible Forms — Provider groups can collapse
• Passkey Support — Shows passkey option if adapter supports it
• Loading States — Built-in loading indicators
• Error Display — Shows auth errors inline

Props