This template includes a comprehensive self-rolled authentication system with multiple authentication methods and security features.
The authentication system is built from scratch without relying on third-party authentication providers like Auth.js or Clerk. This gives you complete control over your auth stack while maintaining high security standards.
The system is designed to be modular, allowing you to easily enable or disable specific authentication methods based on your needs.
Modern, passwordless authentication using the WebAuthn standard for enhanced security.
JSON Web Token implementation for secure, stateless authentication.
Server-side session management for secure user sessions across multiple devices.
Social authentication with multiple providers (Google, GitHub, Discord, etc.).
Passwordless authentication through secure email links.
Secure flow for users to reset their passwords with email verification.
Two-factor authentication with TOTP for additional security.
Customizable user onboarding flow after registration.
Check if passwords have been compromised in known data breaches.
Verify user email addresses to ensure they're valid and owned by the user.
Enforce strong password policies with client and server validation.
The authentication system is implemented in the src/server/auth directory and consists of several key components:
To authenticate users in your application, you can use the authentication hooks and components provided:
// Example: Using the authentication context
import { useAuth } from "@/hooks/use-auth";
function ProfilePage() {
const { user, isLoading, signOut } = useAuth();
if (isLoading) return <div>Loading...</div>;
return (
<div>
<h1>Welcome, {user.name}!</h1>
<button onClick={signOut}>Sign Out</button>
</div>
);
}Authentication settings can be configured in the .env file and in the auth configuration files. See the environment variables documentation for more details on available settings.