Svelte Slauth WASM OTP Example

A modern, interactive TOTP (Time-based One-Time Password) authenticator built with Svelte, TypeScript, and the Devolutions slauth library.

Features

• 🔐 TOTP Generation - Generates time-based one-time passwords using SHA-256
• ⏱️ Real-time Countdown - Visual radial progress bar showing time remaining for the current code
• 📱 Phone Mockup UI - Displays the authenticator code in a stylized phone interface
• 🎨 Modern Design - Built with DaisyUI for a polished, responsive UI
• ⚡ Svelte 5 Reactivity - Uses Svelte's latest rune syntax for state management

Getting Started

Prerequisites

• Node.js 16+
• Bun or npm/pnpm/yarn

Installation

1. Clone the repository
2. Install dependencies:

bun install
# or npm install / pnpm install / yarn install

Development

Start the development server:

bun run dev
# or npm run dev

Open http://localhost:5173 in your browser.

Building

Create a production build:

bun run build

Preview the production build:

bun run preview

How It Works

TOTP Configuration

The authenticator uses a TOTP configuration with the following defaults:

const config: Config = {
    secret: 'GEZDGNBVGY', // Base32-encoded secret
    period: 30, // 30-second validity period
    digits: 6, // 6-digit codes
    algo: OtpAlgorithm.sha256() // SHA-256 hashing
};

Code Generation

• Codes are generated using the @devolutions/slauth library
• A new code is automatically generated by default every 30 seconds
• The system tracks time remaining in the current period and updates the progress bar every second

UI Components

• Phone Mockup: Displays the current 6-digit code
• Radial Progress Bar: Shows percentage of time remaining (0-100%)
• Login Form: Email, password, and authenticator code inputs (UI placeholder)

Project Structure

src/
├── routes/
│   ├── +layout.svelte   # Root layout
│   └── +page.svelte     # Main authenticator page
├── app.html             # HTML entry point
├── app.css              # Global styles
└── app.d.ts             # Type definitions

Technologies

• Svelte 5 - Reactive UI framework
• SvelteKit - Full-stack framework
• TypeScript - Type safety
• Slauth - Auth Library
• DaisyUI - Tailwind CSS component library
• Vite - Build tool