Edit on GitHub

Creating Authentication Pages

This guide will walk you through creating the necessary authentication pages for your SvelteKit application using Svelte Guardian, including sign-in, sign-up, password reset, and email verification.

Sign-In Page

Create a basic sign-in page at src/routes/signin/+page.svelte:

Sign In

{#if error}
{error}
{/if}
Forgot password?

Don't have an account? Sign up

Sign-Up Page

Create a sign-up page at src/routes/signup/+page.svelte:

Create an Account

{#if error}
{error}
{/if}
Password must be at least 8 characters long

Already have an account? Sign in

Password Reset Page

Create a password reset page at src/routes/reset-password/+page.svelte:

{#if step === 'request'}

Reset Your Password

{#if success}
Password reset email sent. Please check your inbox.
{:else} {#if error}
{error}
{/if}

Enter your email address to receive a password reset link.

{/if} {:else if step === 'reset'}

Create New Password

{#if success}
Password reset successful. You can now sign in with your new password.
{:else} {#if error}
{error}
{/if}
Password must be at least 8 characters long
{/if} {/if}

Back to Sign In

Email Verification Page

Create an email verification page at src/routes/verify-email/+page.svelte:

Email Verification

{#if success}
Your email has been successfully verified. You can now sign in to your account.
{:else} {#if error}
{error}
{/if} {#if verificationMethod === 'link'} {#if loading}
Verifying your email...
{:else}

Invalid or expired verification link. Please request a new one.

{#if resendSuccess}
Verification email has been sent. Please check your inbox.
{/if} {/if} {:else}

Please enter the verification code that was sent to your email.

Didn't receive the code?
{#if resendSuccess}
Verification code has been sent. Please check your inbox.
{/if} {/if} {/if}

Back to Sign In

Server-Side Request Handling

For some authentication operations, you’ll need server-side handlers. Here’s an example of a sign-in handler in src/routes/signin/+page.server.ts:

import { fail, redirect } from '@sveltejs/kit'; import type { Actions } from './$types'; import { signIn } from '$lib/server/auth'; export const actions = { default: async ({ request, cookies }) => { const formData = await request.formData(); const email = formData.get('email')?.toString(); const password = formData.get('password')?.toString(); if (!email || !password) { return fail(400, { error: 'Email and password are required' }); } try { const result = await signIn('credentials', { email, password, cookies }); if (result.error) { return fail(400, { error: result.error }); } throw redirect(303, '/dashboard'); } catch (error) { if (error instanceof Response) throw error; return fail(500, { error: 'An error occurred during sign in' }); } } } satisfies Actions;

Auth Utility Component

Create a reusable authentication status component at src/components/AuthStatus.svelte:

{#if $page.data.session?.user}
{#if showUsername} {$page.data.session.user.name ?? $page.data.session.user.email} {/if}
{:else}
Sign In Sign Up
{/if}

Next Steps

After setting up these authentication pages, you should:

  1. Customize the styling to match your application’s design
  2. Add validation for form inputs
  3. Implement loading states and error handling
  4. Test the complete authentication flow

For more advanced authentication features, refer to the OAuth Providers and Two-Factor Authentication guides.

Share this page
← Getting Started with Svelte Guardian Configuration →