logoPressFast

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_secret

GitHub OAuth

Configure GitHub OAuth in your .env.local:

GITHUB_CLIENT_ID=your_github_client_id
GITHUB_CLIENT_SECRET=your_github_client_secret

Protecting 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

User Authentication