Supabase Auth UI for Svelte

THIS README FILE WAS AI GENERATED BY CLAUDE 4 SONNET

A comprehensive, customizable authentication UI component library for Svelte applications using Supabase. Built with Svelte 5 and TypeScript, this library provides a complete authentication flow with support for email/password, OAuth providers, multi-factor authentication (MFA), and more.

Features

Complete Authentication Flow

• Email/Password Authentication: Sign up, sign in, and password reset
• Magic Link Authentication: Passwordless login via email links
• Social OAuth Providers: Support for Google, GitHub, and other OAuth providers
• Multi-Factor Authentication (MFA): TOTP-based 2FA with QR codes
• Account Management: Profile updates, email changes, account deletion

Highly Customizable

• Flexible Styling: CSS custom properties and customizable components
• Layout Options: Vertical/horizontal social button layouts
• Size Variants: Multiple button sizes (tiny, small, medium, large)
• Custom Components: Replace built-in components with your own

Internationalization (i18n)

• Built-in Languages: English (default), Arabic, Spanish, French, Chinese
• Custom Translations: Add your own language translations
• External i18n Support: Integrate with existing i18n libraries
• RTL Support: Right-to-left language support

Configurable Options

• Supabase Config Integration: Reads from supabase/config.toml
• Password Policies: Configurable length, complexity, breach checking
• Email Settings: OTP length, expiry, confirmation requirements
• Security Features: Double email confirmation, secure password changes

Security Best Practices

• NIST Guidelines: Follows NIST 800-63b-4 authentication guidelines as much as possible
• Password Strength: Built-in password strength indicators
• Breach Detection: Integration with HaveIBeenPwned API

Behavioral Testing Flows

• Email signup/login: Create account with password, email code, or email link
• Multi-factor authentication: Create, update, delete TOTP MFA factors
• Password changes: Change the password for the account
• Password strength tests: Disallow breached, repetitive, or context-specific passwords
• Account deletion: Delete an account completely (requires Supabase configuration)

Installation

npm install svelte-supabase-auth
# or
pnpm add svelte-supabase-auth
# or
yarn add svelte-supabase-auth

Peer Dependencies

npm install @supabase/supabase-js svelte

Quick Start

Initialize the Auth.svelte component with a Supabase client, any providers that you want to support, and any of the supported configuration. You can even use your Supabase config.toml file directly:

/// src/routes/user/+page.svelte
<script>
  import 'svelte-supabase-auth/supabase-auth.css' // use the default styles for the library
  import type { Provider } from '@supabase/supabase-js'
  import type { PartialSupabaseAuthOptions } from 'svelte-supabase-auth'
  import { Auth } from 'svelte-supabase-auth'
  import { supabaseClient } from '$lib/supabaseClient'
  const providers:Provider[] = ['google', 'github']

  // Import Supabase config directly
  import config from '../supabase/config.toml'

  const authOptions: PartialSupabaseAuthOptions = {
    auth: config?.auth, // Use auth config directly from Supabase
    deleteAccountFunction: 'delete_user_account', // RPC function name for account deletion
  }
</script>

<Auth {supabaseClient} {authOptions} {providers} />

Note that using the config.toml file will probably require configuring Vite:

/// vite.config.ts
import { ViteToml } from 'vite-plugin-toml';
export default defineConfig({
	// @ts-ignore
	plugins: [
    // ...
		ViteToml(),
	],
	server: {
		fs: {
			allow: ['./supabase/config.toml'],
		},
	}
  // ...
})

The full set of configuration options are available as the PartialSupabaseAuthOptions type from svelte-supabase-auth, or you can check out the full options.ts file.

Internationalization

<script>
  import { Auth } from 'svelte-supabase-auth'
  // Import additional languages
  import 'svelte-supabase-auth/i18n/languages/es'
  import 'svelte-supabase-auth/i18n/languages/fr'

  // Custom text overrides
  const customTexts = {
    signIn: 'Login',
    signUp: 'Create Account',
    emailLabel: 'Your Email'
  }
</script>

<Auth
  {supabaseClient}
  locale="es"
  texts={customTexts}
/>

Custom Authenticated View

<script>
  import { Auth } from 'svelte-supabase-auth'
</script>

<Auth {supabaseClient}>
  {#snippet signedInAs(user)}
    <div class="welcome-banner">
      <h2>Welcome back, {user?.email}!</h2>
      <p>Account created: {new Date(user?.created_at).toLocaleDateString()}</p>
    </div>
  {/snippet}

  {#snippet userInfo(user)}
    <div class="user-details">
      <p>Last sign in: {new Date(user?.last_sign_in_at).toLocaleDateString()}</p>
      <p>Email verified: {user?.email_confirmed_at ? 'Yes' : 'No'}</p>
    </div>
  {/snippet}
</Auth>

Component Props

Auth Component

Prop	Type	Default	Description
supabaseClient	SupabaseClient	Required	Supabase client instance
class	string	''	CSS class for the container
style	string	''	Inline styles for the container
socialLayout	'vertical' | 'horizontal'	'vertical'	Layout for social auth buttons
socialButtonSize	'tiny' | 'small' | 'medium' | 'large'	'medium'	Size of social auth buttons
providers	Provider[]	[]	OAuth providers to display
initialView	SignInView	'sign_in_with_password'	Initial view to show
authOptions	PartialSupabaseAuthOptions	see options.ts	Auth configuration options
locale	string	'en'	Language locale
texts	Partial<AuthTexts>	{}	Custom text overrides
t	Function	undefined	External i18n function

Snippets

Snippet	Parameters	Description
signedInAs	user: User | null	Custom signed-in user display
userInfo	user: User | null	Additional user information display

Styling

CSS Custom Properties

The component uses CSS variables for easy theming:

.sA {
  --flex-gap: 0.5em;
  --input-padding: 5px 3px 5px 35px;
  --link-color: blue;
  --layout-color: #ccc;
  --primary-color: hsl(141, 71%, 48%);
  --primary-text-color: white;
  --danger-color: hsl(358, 86%, 58%);
  --warning-color: hsl(36, 100%, 44%);
  --success-color: hsl(141, 71%, 48%);
}

If you want more control than this, you can choose not to import the library's CSS file, which will avoid most of the styling related to colors, font sizes, etc., and will only have styling related to layout and positioning.

Project Structure

src/lib/
├── Auth.svelte              # Main Auth component
├── components/              # Reusable components
├── elements/                # Basic UI elements
├── views/                   # Authentication views
├── i18n/                    # Internationalization
│   ├── index.ts             # Main i18n file
│   └── languages/           # AI-generated translations
├── utils/                   # Utility functions
└── stores.svelte.ts         # Svelte stores

Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/new-feature
3. Make your changes and add tests
4. Run the test suite: pnpm test
5. Commit your changes: git commit -m 'Add new feature'
6. Push to the branch: git push origin feature/new-feature
7. Submit a pull request

Screenshots

Default Login with Password

Default Login with Magic Link

Related

• Supabase - The open source Firebase alternative
• Svelte - Cybernetically enhanced web apps
• SvelteKit - The fastest way to build svelte apps

Support

For questions and support:

• GitHub Issues
• Supabase Community
• Svelte Discord