Welcome to the Notice System Demo

This banner notice is visible across all pages. Try navigating to different routes to see how notices follow you.

Authentication Example

Demonstrates the @classic-homes/auth package with form validation using useForm composable and Zod schemas.

Sign In

Enter your credentials to access your account

Don't have an account?

How It Works

This example uses the useForm composable with Zod validation

import { useForm, loginSchema } from '@classic-homes/theme-svelte';
import { authService, isMfaChallengeResponse, getMfaToken } from '@classic-homes/auth/core';
import { authActions } from '@classic-homes/auth/svelte';

const form = useForm({
  schema: loginSchema,
  initialValues: {
    email: '',
    password: '',
    rememberMe: false,
  },
  onSubmit: async (data) => {
    // Login automatically sets auth state on success
    const response = await authService.login({
      username: data.email,
      password: data.password,
    });

    // Check if MFA is required
    if (isMfaChallengeResponse(response)) {
      const mfaToken = getMfaToken(response);
      // Redirect to MFA challenge page
      return;
    }

    // Auth state is automatically set - redirect to dashboard
    goto('/dashboard');
  },
});

// SSO-aware logout
async function handleLogout() {
  const result = await authActions.logoutWithSSO();
  if (result.ssoLogoutUrl) {
    // Redirect to SSO provider logout
    window.location.href = result.ssoLogoutUrl;
  } else {
    goto('/auth/login');
  }
}

← Back to Examples