Page Templates

Overview

@authrim/sveltekit/ui/templates provides seven page templates — fully styled, responsive reference implementations that you can use directly or copy and customize.

import {
  LoginTemplate,
  SignUpTemplate,
  AccountSettingsTemplate,
  ConsentTemplate,
  DeviceFlowTemplate,
  CIBATemplate,
  ReauthTemplate,
} from '@authrim/sveltekit/ui/templates';

All templates use the UI Library components and respect the --authrim-* CSS custom properties.

LoginTemplate

A full login page with passkey, email code, and social login options.

<script lang="ts">
  import { LoginTemplate } from '@authrim/sveltekit/ui/templates';
  import { getAuthContext } from '@authrim/sveltekit';
  import { goto } from '$app/navigation';

  const auth = getAuthContext();

  let loading = $state(false);
  let loadingProvider = $state<string | undefined>(undefined);
  let error = $state('');

  async function handlePasskeyLogin() {
    loading = true;
    error = '';
    const { error: err } = await auth.passkey.login();
    loading = false;
    if (err) { error = err.message; return; }
    goto('/');
  }

  async function handleSocialLogin(e: CustomEvent<{ provider: string }>) {
    const provider = e.detail.provider;
    loadingProvider = provider;
    error = '';
    const { error: err } = await auth.social.loginWithPopup(provider);
    loadingProvider = undefined;
    if (err) { error = err.message; return; }
    goto('/');
  }
</script>

<LoginTemplate
  availableProviders={['google', 'github', 'apple']}
  enablePasskey={true}
  enableEmailCode={true}
  {loading}
  {loadingProvider}
  {error}
  title="Welcome back"
  subtitle="Sign in to your account"
  on:passkey-login={handlePasskeyLogin}
  on:social-login={handleSocialLogin}
  on:email-submit={(e) => sendCode(e.detail.email)}
  on:code-submit={(e) => verifyCode(e.detail.code)}
  on:code-resend={resendCode}
  on:dismiss-error={() => { error = ''; }}
/>

Props

Prop	Type	Default	Description
`availableProviders`	`SocialProvider[]`	`[]`	Social providers to display
`enablePasskey`	`boolean`	`true`	Show passkey login option
`enableEmailCode`	`boolean`	`true`	Show email code option
`loading`	`boolean`	`false`	Global loading state
`loadingProvider`	`SocialProvider \| undefined`	—	Provider currently loading
`error`	`string`	`''`	Error message to display
`title`	`string`	`'Welcome back'`	Page title
`subtitle`	`string`	`'Sign in to your account'`	Page subtitle

Events

Event	Payload	Description
`passkey-login`	—	Passkey login requested
`social-login`	`{ provider }`	Social login requested
`email-submit`	`{ email }`	Email code send requested
`code-submit`	`{ code }`	Code verification requested
`code-resend`	—	Resend code requested
`dismiss-error`	—	Error dismissed

Exported Methods

Method	Description
`setEmailStep(step)`	Control email form step (`'email'` or `'code'`) from parent

Layout

Centered card (max-width: 420px) on a full-height gradient background
Sections separated by dividers: Passkey → Email Code → Social
Footer with “Don’t have an account? Sign up” link

SignUpTemplate

Multi-method signup page with passkey and email code options.

<SignUpTemplate
  availableProviders={['google', 'github']}
  enablePasskey={true}
  enableEmailCode={true}
  {loading}
  {error}
  on:passkey-signup={(e) => signUpWithPasskey(e.detail)}
  on:social-login={(e) => socialSignup(e.detail.provider)}
  on:email-submit={(e) => sendSignupCode(e.detail)}
  on:code-submit={(e) => verifySignupCode(e.detail.code)}
  on:dismiss-error={() => { error = ''; }}
/>

Props

Prop	Type	Default	Description
`availableProviders`	`SocialProvider[]`	`[]`	Social providers
`enablePasskey`	`boolean`	`true`	Show passkey option
`enableEmailCode`	`boolean`	`true`	Show email option
`loading`	`boolean`	`false`	Loading state
`error`	`string`	`''`	Error message
`title`	`string`	`'Create account'`	Page title

Events

passkey-signup, social-login, email-submit, code-submit, code-resend, dismiss-error

AccountSettingsTemplate

Account management page with passkey list, session list, and profile info.

<AccountSettingsTemplate
  passkeys={passkeyList}
  sessions={sessionList}
  currentSessionId={currentSessId}
  on:add-passkey={handleAddPasskey}
  on:delete-passkey={(e) => deletePasskey(e.detail.credentialId)}
  on:revoke-session={(e) => revokeSession(e.detail.sessionId)}
  on:sign-out={handleSignOut}
/>

Props

Prop	Type	Description
`passkeys`	`PasskeyItemDisplay[]`	Registered passkeys
`sessions`	`SessionItemDisplay[]`	Active sessions
`currentSessionId`	`string \| undefined`	Current session ID
`passkeyLoading`	`boolean`	Passkey section loading
`sessionLoading`	`boolean`	Session section loading

Events

add-passkey, delete-passkey, revoke-session, sign-out

ConsentTemplate

OAuth consent screen showing client info, requested scopes, and approve/deny buttons.

<script lang="ts">
  import { ConsentTemplate } from '@authrim/sveltekit/ui/templates';
  import { getAuthContext } from '@authrim/sveltekit';
  import { page } from '$app/stores';

  const auth = getAuthContext();
  const challengeId = $page.url.searchParams.get('challenge');

  let consentData = $state(null);

  $effect(() => {
    if (challengeId) {
      auth.consent.getData(challengeId).then(data => {
        consentData = data;
      });
    }
  });
</script>

{#if consentData}
  <ConsentTemplate
    clientInfo={consentData.client}
    scopes={consentData.scopes}
    userInfo={consentData.user}
    on:approve={() => auth.consent.submit(challengeId, { approved: true })}
    on:deny={() => auth.consent.submit(challengeId, { approved: false })}
  />
{/if}

Props

Prop	Type	Description
`clientInfo`	`ConsentClientInfo`	Requesting client details
`scopes`	`ConsentScopeInfo[]`	Requested scopes
`userInfo`	`ConsentUserInfo \| undefined`	Current user info
`loading`	`boolean`	Loading state

Events

approve, deny

DeviceFlowTemplate

Device authorization code entry screen (RFC 8628).

<script lang="ts">
  import { DeviceFlowTemplate } from '@authrim/sveltekit/ui/templates';
  import { getAuthContext } from '@authrim/sveltekit';

  const auth = getAuthContext();

  async function handleSubmit(e: CustomEvent<{ userCode: string }>) {
    const result = await auth.deviceFlow.submit(e.detail.userCode);
    // Handle result...
  }
</script>

<DeviceFlowTemplate
  on:submit={handleSubmit}
/>

Props

Prop	Type	Description
`loading`	`boolean`	Loading state
`error`	`string`	Error message

Events

submit with { userCode: string }

CIBATemplate

CIBA (Client Initiated Backchannel Authentication) approval screen.

<script lang="ts">
  import { CIBATemplate } from '@authrim/sveltekit/ui/templates';
  import { getAuthContext } from '@authrim/sveltekit';

  const auth = getAuthContext();
  let requests = $state([]);

  $effect(() => {
    auth.ciba.getData('[email protected]').then(data => {
      requests = data;
    });
  });
</script>

<CIBATemplate
  {requests}
  on:approve={(e) => auth.ciba.approve(e.detail.authReqId, userId, sub)}
  on:reject={(e) => auth.ciba.reject(e.detail.authReqId)}
/>

Props

Prop	Type	Description
`requests`	`CIBAPendingRequest[]`	Pending CIBA requests
`loading`	`boolean`	Loading state

Events

approve with { authReqId }, reject with { authReqId }

ReauthTemplate

Re-authentication prompt for sensitive operations.

Props

Prop	Type	Description
`enablePasskey`	`boolean`	Show passkey option
`enableEmailCode`	`boolean`	Show email code option
`loading`	`boolean`	Loading state
`error`	`string`	Error message
`title`	`string`	Page title

Events

passkey-login, email-submit, code-submit, dismiss-error

Template Theming

All templates use --authrim-* CSS custom properties. Override them to match your brand:

:root {
  /* Primary brand color */
  --authrim-color-primary: #0066cc;
  --authrim-color-primary-hover: #0052a3;
  --authrim-color-primary-active: #003d7a;
  --authrim-color-primary-subtle: #e6f0ff;
  --authrim-color-primary-text: #ffffff;

  /* Background */
  --authrim-color-bg: #ffffff;
  --authrim-color-bg-subtle: #f8fafc;

  /* Typography */
  --authrim-font-sans: 'Inter', system-ui, sans-serif;

  /* Border radius */
  --authrim-radius-lg: 12px;
}

Templates occupy the full viewport height with a centered card layout and subtle gradient background.

Next Steps

UI Library — Individual component details
Advanced Flows — Consent, Device Flow, CIBA API details
Configuration — Full configuration reference