Next.js SDK Logout Does Not Work Due to CORS Error
Last Updated:
Overview
When using the Auth0 Next.js SDK in an application that uses the Next.js framework, the logout call does not successfully log the user out. Cross-Origin Resource Sharing (CORS) errors are visible in the Dev Tools Network tab.
Applies To
- Auth0 Next.js SDK
Cause
This issue occurs because Next.js attempts to pre-fetch the route via an AJAX request. This happens when the logout route is wrapped in a Next.js Link component. The logout URL must be visited as a redirect, not an AJAX request.
Solution
The solution is to use a native <a> element, which forces a redirect instead of a pre-fetch.
-
Locate the logout link or button in the application.
-
Ensure the link is formatted as a native
<a>element. This prevents Next.js from prefetching the route.Instead of using the Next.js Link component:
<Link href="/api/auth/logout">Log Out</Link>
<a> element:<a href="/api/auth/logout">Log Out</a>
This same solution applies to login requests or any other /api/auth/* requests.
