🔐 Authentication Module
Complete authentication system with betterAuth, multiple providers, and auth guards for Next.js applications.
Multiple Providers
Google, GitHub, and email/password authentication
Auth Guards
SignedIn, SignedOut, and RoleGuard components
Session Management
Secure session handling with betterAuth
React Hooks
useAuth hook for easy state management
Server Actions
Customizable auth event handlers
Pre-built Components
Sign-in, sign-up, and user profile components
npx shadcn@latest add "https://supremetoolkit.in/r/auth-module"
npx @better-auth/cli@latest generate
npx @better-auth/cli@latest migrate
This installs:
- • Authentication configuration and client setup
- • Sign-in, sign-up, and user profile components
- • Auth guards (SignedIn, SignedOut, RoleGuard)
- • useAuth hook for state management
- • Server actions for auth events
- • API routes for authentication endpoints
- • Required dependencies (better-auth, better-sqlite3)
AuthSignIn
Complete sign-in form with provider buttons
AuthSignUp
User registration form with validation
SignedIn / SignedOut
Conditional rendering based on auth state
RoleGuard
Role-based access control component
UserProfile
User profile display and management
1. Configure providers in config.tsx:
export const toolkitConfig: ToolkitConfig = {
auth: {
providers: ['email', 'google', 'github'],
sessionDuration: 60 * 60 * 24 * 30, // 30 days
},
// ... other config
};2. Add environment variables:
# .env.local
BETTER_AUTH_SECRET=your-secret-key-here
BETTER_AUTH_URL=http://localhost:3000
# OAuth providers (optional)
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
GITHUB_CLIENT_ID=your-github-client-id
GITHUB_CLIENT_SECRET=your-github-client-secret3. Use auth components:
import { AuthSignIn } from '@/components/ui/auth-signin';
import { AuthSignUp } from '@/components/ui/auth-signup';
export default function LoginPage() {
return (
<div className="max-w-md mx-auto">
<AuthSignIn />
{/* or */}
<AuthSignUp />
</div>
);
}Environment Variables
Always use strong, unique secrets in production and never commit them to version control.
Email Verification
Enable email verification in production by setting requireEmailVerification: true in auth config.
Database
Replace SQLite with PostgreSQL or MySQL for production applications.
Error Handling
Always handle authentication errors gracefully and provide clear feedback to users.
Security
Implement rate limiting, CSRF protection, and secure session management for production apps.