User Authentication
Implement user authentication in your app
User Authentication
Set up user authentication with email/password and OAuth providers.
Authentication Setup
This starter uses Better Auth for authentication with support for multiple providers.
Email/Password Authentication
Users can sign up and log in with email and password.
Sign Up Flow
import { authClient } from '@/lib/auth-client';
async function handleSignUp(email: string, password: string, name: string) {
const { data, error } = await authClient.signUp.email({
email,
password,
name,
});
if (error) {
console.error('Sign up failed:', error);
return;
}
console.log('User created:', data);
}Sign In Flow
import { authClient } from '@/lib/auth-client';
async function handleSignIn(email: string, password: string) {
const { data, error } = await authClient.signIn.email({
email,
password,
});
if (error) {
console.error('Sign in failed:', error);
return;
}
console.log('Signed in:', data);
}OAuth Providers
Google OAuth
Configure Google OAuth in your .env.local:
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secretGitHub OAuth
Configure GitHub OAuth in your .env.local:
GITHUB_CLIENT_ID=your_github_client_id
GITHUB_CLIENT_SECRET=your_github_client_secretProtecting Routes
Server-Side Protection
// app/[locale]/dashboard/page.tsx
import { auth } from '@/lib/auth';
import { redirect } from 'next/navigation';
export default async function DashboardPage() {
const session = await auth();
if (!session) {
redirect('/');
}
return (
<div>
<h1>Dashboard</h1>
<p>Welcome, {session.user.name}</p>
</div>
);
}Client-Side Protection
'use client';
import { useSession } from '@/lib/auth-client';
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';
export default function ProtectedPage() {
const { data: session, isPending } = useSession();
const router = useRouter();
useEffect(() => {
if (!isPending && !session) {
router.push('/');
}
}, [session, isPending, router]);
if (isPending) {
return <div>Loading...</div>;
}
return <div>Protected content</div>;
}Session Management
Get Current User
import { authClient } from '@/lib/auth-client';
const { data: session } = await authClient.getSession();
console.log('Current user:', session?.user);Sign Out
import { authClient } from '@/lib/auth-client';
async function handleSignOut() {
await authClient.signOut();
window.location.href = '/';
}Next Steps
- Learn about Private Pages
- Explore API Calls