Two-Factor Authentication

Pre-built Svelte 5 components for TOTP-based 2FA. Built on top of better-auth's twoFactorClient plugin.

Auth Client Setup

All 2FA components require a TwoFactorAuthClient prop -- a better-auth client configured with the twoFactorClient plugin:

import { createAuthClient } from 'better-auth/svelte'
import { twoFactorClient } from 'better-auth/client/plugins'

export const authClient = createAuthClient({
  plugins: [twoFactorClient()],
})

Enable2FAForm

Two-step flow: password confirmation, then TOTP verification with QR code and backup codes.

<script lang="ts">
  import { Enable2FAForm } from '@repo/auth'
  import { authClient } from '$lib/auth-client'
</script>

<Enable2FAForm
  {authClient}
  onSuccess={() => { /* 2FA now enabled */ }}
/>

Props

Prop	Type	Description
authClient	TwoFactorAuthClient	Auth client with twoFactor methods
onSuccess	() => void	Called after 2FA is successfully enabled

Disable2FAForm

Password confirmation form to disable 2FA.

<script lang="ts">
  import { Disable2FAForm } from '@repo/auth'
  import { authClient } from '$lib/auth-client'
</script>

<Disable2FAForm
  {authClient}
  onSuccess={() => { /* 2FA disabled */ }}
/>

Props

Prop	Type	Description
authClient	TwoFactorAuthClient	Auth client with twoFactor methods
onSuccess	() => void	Called after 2FA is disabled
error	Snippet<[{ message: string }]>	Optional custom error rendering snippet

Verify2FAForm

Login verification with TOTP code entry. Includes a toggle to switch to backup code input.

<script lang="ts">
  import { Verify2FAForm } from '@repo/auth'
  import { authClient } from '$lib/auth-client'
</script>

<Verify2FAForm
  {authClient}
  onSuccess={() => { /* verified, proceed to app */ }}
/>

Props

Prop	Type	Description
authClient	TwoFactorAuthClient	Auth client with twoFactor methods
onSuccess	() => void	Called after successful verification

Schemas

Zod schemas used by the 2FA forms:

import { verifyTOTPSchema, passwordSchema, verifyBackupCodeSchema } from '@repo/auth'

Schema	Fields
verifyTOTPSchema	code (6-digit string), trustDevice (boolean, optional)
passwordSchema	password (non-empty string)
verifyBackupCodeSchema	code (non-empty string), trustDevice (boolean, optional)