Auth Provider

svadmin provides a complete authentication system through AuthProvider and 9 reactive hooks.

AuthProvider Interface

interface AuthProvider {
  login: (params: Record<string, unknown>) => Promise<AuthActionResult>;
  logout: (params?: Record<string, unknown>) => Promise<AuthActionResult>;
  check: (params?: Record<string, unknown>) => Promise<CheckResult>;
  getIdentity: () => Promise<Identity | null>;
  getPermissions?: (params?: Record<string, unknown>) => Promise<unknown>;
  register?: (params: Record<string, unknown>) => Promise<AuthActionResult>;
  forgotPassword?: (params: Record<string, unknown>) => Promise<AuthActionResult>;
  updatePassword?: (params: Record<string, unknown>) => Promise<AuthActionResult>;
  onError?: (error: unknown) => Promise<{ redirectTo?: string; logout?: boolean }>;
}

Auth Hooks

Hook	Purpose
useLogin()	Login mutation
useLogout()	Logout mutation
useRegister()	Registration mutation
useForgotPassword()	Password reset request
useUpdatePassword()	Password update
useGetIdentity()	Get current user info
useIsAuthenticated()	Check auth status
useOnError()	Handle API errors (401→logout)
usePermissions()	Get user permissions

Usage

const { mutate: login, isLoading } = useLogin();
await login({ email: 'user@example.com', password: 'secret' });

Auth Pages

Built-in glassmorphism auth pages included:

• LoginPage — Email/password login
• RegisterPage — User registration
• ForgotPasswordPage — Password reset request
• UpdatePasswordPage — Set new password

Routes: /#/login, /#/register, /#/forgot-password, /#/update-password

<Authenticated> Component

<Authenticated>
  {#snippet children()}<p>Protected content</p>{/snippet}
  {#snippet fallback()}<p>Please log in</p>{/snippet}
  {#snippet loading()}<p>Checking auth...</p>{/snippet}
</Authenticated>

Mock AuthProvider

export const mockAuthProvider: AuthProvider = {
  login: async ({ email, password }) => {
    if (password === 'demo') {
      localStorage.setItem('auth', JSON.stringify({ email }));
      return { success: true, redirectTo: '/' };
    }
    return { success: false, error: { message: 'Use password "demo"' } };
  },
  logout: async () => {
    localStorage.removeItem('auth');
    return { success: true, redirectTo: '/login' };
  },
  check: async () => ({ authenticated: !!localStorage.getItem('auth') }),
  getIdentity: async () => {
    const auth = localStorage.getItem('auth');
    return auth ? { id: '1', name: 'Admin' } : null;
  },
};

Built-in Auth Providers

Supabase

import { createSupabaseAuthProvider } from '@svadmin/supabase';
const authProvider = createSupabaseAuthProvider(supabaseClient);

Appwrite

import { Account, Client } from 'appwrite';
import { createAppwriteAuthProvider } from '@svadmin/appwrite';

const client = new Client().setEndpoint('https://cloud.appwrite.io/v1').setProject('PROJECT_ID');
const account = new Account(client);
const authProvider = createAppwriteAuthProvider({ account });

PocketBase

import PocketBase from 'pocketbase';
import { createPocketBaseAuthProvider } from '@svadmin/pocketbase';

const pb = new PocketBase('http://127.0.0.1:8090');
const authProvider = createPocketBaseAuthProvider({ pb });

PocketBase auth supports custom collection names via the collection param in login() and register().