Next.js SDK Logout Does Not Work Due to CORS Error

Knowledge Solutions
, ,
1

Overview

When using the Auth0 Next.js SDK in an app that uses the Next.js framework, the logout call does not actually log the user out. There are CORS errors in the Dev Tools Network tab.

Applies To

  • Auth0 Next.js SDK

Cause

This is usually caused by Next.js attempting to Pre-fetch the route (via an AJAX request) because the logout route is wrapped in a Link component. This is not correct, and the logout URL must be visited as a redirect.

Solution

For the logout links/buttons, instead of using the Next.js Link component, use a native <a> element instead.

  • For example, instead of this:
    <Link href="/api/auth/logout">Log Out</Link>
    Use the following instead:
    <a href="/api/auth/logout">Log Out</a>

This will prevent Next.js from prefetching the logout route.

This applies to login requests (or any other /api/auth/* requests) as well.