How to Log Out a User in Supabase

1import { createClient } from '@supabase/supabase-js';
2
3const supabase = createClient(
4  process.env.NEXT_PUBLIC_SUPABASE_URL!,
5  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
6);
7
8// Basic sign-out (current session only)
9async function handleSignOut() {
10  const { error } = await supabase.auth.signOut();
11
12  if (error) {
13    console.error('Sign out error:', error.message);
14    // Local session is still cleared even if server call fails
15  }
16
17  // Redirect to login page
18  window.location.href = '/login';
19}

1// Global sign-out — logs out all devices
2async function handleGlobalSignOut() {
3  const { error } = await supabase.auth.signOut({ scope: 'global' });
4
5  if (error) {
6    console.error('Global sign out error:', error.message);
7  }
8
9  window.location.href = '/login';
10}
11
12// Local sign-out — only current device (default)
13async function handleLocalSignOut() {
14  const { error } = await supabase.auth.signOut({ scope: 'local' });
15
16  if (error) {
17    console.error('Sign out error:', error.message);
18  }
19
20  window.location.href = '/login';
21}

1// Set up global auth state listener (typically in your app root)
2const { data: { subscription } } = supabase.auth.onAuthStateChange(
3  (event, session) => {
4    if (event === 'SIGNED_OUT') {
5      // Clear any cached application state
6      localStorage.removeItem('app-cache');
7      sessionStorage.clear();
8
9      // Redirect to login if not already there
10      if (window.location.pathname !== '/login') {
11        window.location.href = '/login';
12      }
13    }
14
15    if (event === 'SIGNED_IN') {
16      // User just logged in — initialize app state
17      console.log('User signed in:', session?.user?.email);
18    }
19  }
20);
21
22// Clean up the listener when the app unmounts
23// subscription.unsubscribe();

1import { useState } from 'react';
2import { createClient } from '@supabase/supabase-js';
3
4const supabase = createClient(
5  process.env.NEXT_PUBLIC_SUPABASE_URL!,
6  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
7);
8
9export function SignOutButton() {
10  const [loading, setLoading] = useState(false);
11
12  async function handleSignOut() {
13    setLoading(true);
14
15    const { error } = await supabase.auth.signOut();
16
17    if (error) {
18      console.error('Sign out failed:', error.message);
19      setLoading(false);
20      return;
21    }
22
23    // Full page redirect to clear all state
24    window.location.href = '/login';
25  }
26
27  return (
28    <button
29      onClick={handleSignOut}
30      disabled={loading}
31    >
32      {loading ? 'Signing out...' : 'Sign out'}
33    </button>
34  );
35}

1// Next.js App Router: Server Action for sign-out
2// app/actions/auth.ts
3'use server';
4
5import { createClient } from '@/lib/supabase/server';
6import { redirect } from 'next/navigation';
7
8export async function signOut() {
9  const supabase = await createClient();
10  await supabase.auth.signOut();
11  redirect('/login');
12}
13
14// Usage in a Server Component or Client Component
15// app/components/sign-out-button.tsx
16import { signOut } from '@/app/actions/auth';
17
18export function SignOutButton() {
19  return (
20    <form action={signOut}>
21      <button type="submit">Sign out</button>
22    </form>
23  );
24}