Components

Overview

@authrim/sveltekit/components provides five core components for common authentication patterns:

Component	Purpose
AuthProvider	Context provider — wraps your app with auth instance
ProtectedRoute	Route guard — redirects unauthenticated users
SignInButton	Passkey or social sign-in with built-in state
SignOutButton	Sign out with loading state
UserProfile	Display current user info

AuthProvider

Wraps your app and provides the auth client via Svelte context. Also handles SSR session synchronization.

<script lang="ts">
  import { AuthProvider } from '@authrim/sveltekit/components';
  import type { AuthrimClient } from '@authrim/sveltekit';

  let { data, children } = $props();
  let auth: AuthrimClient | null = $state(null);

  // Initialize auth client...
</script>

{#if auth}
  <AuthProvider
    {auth}
    initialSession={data.auth?.session ?? null}
    initialUser={data.auth?.user ?? null}
  >
    {@render children()}
  </AuthProvider>
{/if}

Props

Prop	Type	Default	Description
auth	AuthrimClient	required	Authrim client instance
initialSession	Session | null	null	SSR session for hydration
initialUser	User | null	null	SSR user for hydration

Behavior

1. Sets auth context via setAuthContext(auth) — makes getAuthContext() available to all children
2. Calls auth._syncFromSSR() synchronously to set stores before first render
3. On mount, optionally revalidates the session in the background
4. On destroy, calls auth.destroy() to clean up event listeners and timers

Context API

Inside any child component of AuthProvider:

import { getAuthContext } from '@authrim/sveltekit';

const auth = getAuthContext();
// Access auth.passkey, auth.stores, auth.on(), etc.

Note

getAuthContext() must be called during component initialization (not inside event handlers or async functions). This is a Svelte context limitation.

ProtectedRoute

Shows content only when the user is authenticated. Optionally redirects to a login page.

<script lang="ts">
  import { ProtectedRoute } from '@authrim/sveltekit/components';
</script>

<ProtectedRoute redirectTo="/login">
  <h1>Dashboard</h1>
  <p>This is protected content.</p>
</ProtectedRoute>

Props

Prop	Type	Default	Description
redirectTo	string | undefined	—	Redirect URL for unauthenticated users
includeReturnPath	boolean	true	Append current path as query param
returnPathParam	string	'redirectTo'	Query parameter name
class	string	''	CSS class

Slots

Slot	When Rendered	Props
Default	User is authenticated	—
loading	Session check in progress	—
unauthenticated	Not authenticated and no redirectTo	—

<ProtectedRoute redirectTo="/login">
  <!-- Authenticated content -->
  <h1>Welcome back</h1>

  {#snippet loading()}
    <div class="spinner">Checking session...</div>
  {/snippet}

  {#snippet unauthenticated()}
    <p>Please sign in to continue.</p>
  {/snippet}
</ProtectedRoute>

Svelte 4

In Svelte 4, use named slots instead of snippets:

<ProtectedRoute redirectTo="/login">
  <h1>Welcome back</h1>
  <div slot="loading">Checking session...</div>
  <div slot="unauthenticated">Please sign in.</div>
</ProtectedRoute>

Note

For server-side route protection, use requireAuth() instead — it redirects before the page is sent to the browser. ProtectedRoute is for client-side protection as an additional layer.

SignInButton

A button that handles passkey or social sign-in with built-in loading state.

<script lang="ts">
  import { SignInButton } from '@authrim/sveltekit/components';
  import { goto } from '$app/navigation';
</script>

<SignInButton
  method="passkey"
  onsuccess={() => goto('/')}
  onerror={(e) => console.error(e.detail.message)}
/>

<SignInButton
  method="social"
  provider="google"
  onsuccess={() => goto('/')}
/>

Props

Prop	Type	Default	Description
method	'passkey' | 'social'	'passkey'	Authentication method
provider	SocialProvider	—	Required when method='social'
disabled	boolean	false	Disabled state
class	string	''	CSS class

Events

Event	Payload	Description
success	{ session: Session; user: User }	Successful sign-in
error	AuthError	Sign-in failed
loading	AuthLoadingState	Loading state changed

Svelte 4

In Svelte 4, use on:success, on:error, on:loading instead of onsuccess, onerror, onloading.

Custom Content

<SignInButton method="passkey">
  🔑 Sign in with your passkey
</SignInButton>

SignOutButton

A button that handles sign out with loading state and optional token revocation.

<script lang="ts">
  import { SignOutButton } from '@authrim/sveltekit/components';
</script>

<SignOutButton
  redirectUri="/goodbye"
  revokeTokens={true}
  onsuccess={() => console.log('Signed out')}
/>

Props

Prop	Type	Default	Description
redirectUri	string | undefined	—	Redirect after sign out
revokeTokens	boolean	false	Revoke tokens on sign out
disabled	boolean	false	Disabled state
class	string	''	CSS class

Events

Event	Payload	Description
success	void	Successful sign out
error	AuthError	Sign out failed
loading	AuthLoadingState	Loading state changed

UserProfile

Displays the current user’s avatar, name, and email.

<script lang="ts">
  import { UserProfile } from '@authrim/sveltekit/components';
</script>

<UserProfile showAvatar={true} showEmail={true} />

Props

Prop	Type	Default	Description
showAvatar	boolean	true	Show avatar image
showEmail	boolean	true	Show email address
class	string	''	CSS class

Slots

Slot	Props	Description
Default	{ user }	Custom layout
avatar	{ user }	Custom avatar
info	{ user }	Custom info section
unauthenticated	—	Shown when not authenticated

<UserProfile>
  {#snippet avatar({ user })}
    <div class="custom-avatar">
      {user.displayName?.charAt(0) ?? '?'}
    </div>
  {/snippet}

  {#snippet info({ user })}
    <div>
      <strong>{user.displayName}</strong>
      <span>{user.email}</span>
    </div>
  {/snippet}
</UserProfile>

Svelte 4

In Svelte 4, use let:user for slot props:

<UserProfile>
  <div slot="avatar" let:user>
    {user.displayName?.charAt(0) ?? '?'}
  </div>
</UserProfile>

Default Styling

• Avatar: 40×40px, circular, with fallback icon
• Name: font-weight: 500
• Email: smaller text, 70% opacity
• Container: flex row layout

Next Steps

• UI Library — Full component catalog with forms and inputs
• Page Templates — Ready-made login, signup, and settings pages
• Stores & Events — Reactive state management