Last active
August 30, 2025 08:26
-
-
Save ericblue/2f0b77bbd20ae24356759a37b7351452 to your computer and use it in GitHub Desktop.
NextAuth - Logout example - manually POSTing to /api/auth/signout instead of calling 'signOut()'
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| "use client"; | |
| import { useEffect } from 'react'; | |
| // Note: Logout works with a direct link to NextAuth's unbranded /api/auth/signout | |
| // however signOut does not appear to work consistently (e.g. doesn't clear session) and may cause redirect loops | |
| async function fetchCsrfToken() { | |
| const response = await fetch('/api/auth/csrf'); | |
| const data = await response.json(); | |
| return data.csrfToken; | |
| } | |
| async function manualSignOut() { | |
| const csrfToken = await fetchCsrfToken(); | |
| const formData = new URLSearchParams(); | |
| formData.append('csrfToken', csrfToken); | |
| formData.append('json', 'true'); | |
| const response = await fetch('/api/auth/signout', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/x-www-form-urlencoded', | |
| }, | |
| body: formData.toString(), | |
| }); | |
| if (response.ok) { | |
| console.log('Signed out successfully'); | |
| // Additional post processing after signout and the session is cleared... | |
| window.location.href = '<put your final redirect here>'; | |
| } else { | |
| console.error('Failed to sign out'); | |
| } | |
| } | |
| export default function Logout() { | |
| // Note: If you are using useEffect, do not use this along with useSession. This causes a race condition | |
| // and issues with underlying calls to the session endpoint to interfere with logging out if you have | |
| // multiple tabs open - See: https://github.com/nextauthjs/next-auth/issues/4612 | |
| // Original example: | |
| //useEffect(() => { | |
| // manualSignOut(); | |
| //}, []); | |
| manualSignOut(); | |
| return ( | |
| <div> | |
| Logging out... | |
| </div> | |
| ); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@ericblue, this is not working when fast navigating between pages happens, and suddenly we press the signout button.
The race condition for the session is happening.
The signOut doesn't work as intended and only refreshes the page(without logging out the user)