Logout correctly

src/auth.ts

@@ -4,7 +4,7 @@ import Credentials from 'next-auth/providers/credentials';
 import { z } from 'zod';
 import { authConfig } from './auth.config';
 
-export const { auth, signIn } = NextAuth({
+export const { auth, signIn, signOut } = NextAuth({
   ...authConfig,
   providers: [
     Credentials({

src/components/Header.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import logo from '@/assets/logo_text.png';
-import { logout } from '@/lib/actions';
+import { performLogout } from '@/lib/actions';
 import { getAuthStatus } from '@/lib/auth-utils';
 import styles from '@/styles/Header.module.scss';
 import { faInstagram } from '@fortawesome/free-brands-svg-icons';
@@ -41,8 +41,7 @@ export default function Header() {
         {isAuth ? (
           <p
             onClick={async () => {
-              await logout();
-              window.location.reload();
+              performLogout();
             }}
             className={`${styles.navLink}`}>
             Logout

src/lib/actions.ts

@@ -1,8 +1,7 @@
 'use server';
 
-import { signIn } from '@/auth';
+import { signIn, signOut } from '@/auth';
 import { AuthError } from 'next-auth';
-import { cookies } from 'next/headers';
 import { redirect } from 'next/navigation';
 
 export async function authenticate(_prevState: string | undefined, formData: FormData): Promise<string> {
@@ -30,13 +29,7 @@ export async function authenticate(_prevState: string | undefined, formData: For
   }
 }
 
-export async function logout() {
-  const c = await cookies();
-
-  c.delete('authjs.session-token');
-  c.delete('authjs.csrf-token');
-  c.delete('authjs.callback-url');
-  c.delete('__Host-authjs.csrf-token');
-  c.delete('__Secure-authjs.callback-url');
-  c.delete('__Secure-authjs.session-token');
+export async function performLogout() {
+  await signOut({ redirectTo: '/', redirect: true });
+  redirect('/');
 }