Issue with Logout in Nuxt 3 using Sidebase NuxtAuth: Error Page Flash and Redirect Loop to /dashboard

Question

I'm using the latest version of Nuxt 3 with the Sidebase NuxtAuth module for authentication, and I've encountered two issues when logging out.

1. Error Page Flash: After logging out on my /dashboard page, I get briefly redirected to /dashboard, which shows an error page before it eventually redirects back to my login page (/auth/login).
2. Unexpected Redirect Loop: After pressing the logout button on my /dashboard page, the app is incorrectly redirecting from /dashboard to /dashboard. But just for a brief momemt before redirecting to my login page again.

Here is my current configuration for NuxtAuth and the relevant code snippets:

NuxtConfig (nuxt.config.ts):

export default defineNuxtConfig({
  auth: {
    globalAppMiddleware: true,
    disableServerSideAuth: false,
    baseURL: 'api/auth',
    sessionRefresh: {
      enablePeriodically: true,
      enableOnWindowFocus: true
    },
  }
});

NuxtAuth Handler (server/api/auth/[...].ts):

import { NuxtAuthHandler } from "#auth";
import AzureADProvider from "next-auth/providers/azure-ad";
import prisma from "~/lib/prisma";

export default NuxtAuthHandler({
  secret: useRuntimeConfig().authSecret,
  providers: [
    AzureADProvider.default({
      clientId: useRuntimeConfig().azure.clientId,
      clientSecret: useRuntimeConfig().azure.clientSecret,
      tenantId: useRuntimeConfig().azure.tenantId,
    }),
  ],
  callbacks: {
    async signIn({ user }) {
      const userExists = !!(await prisma.user.findUnique({
        where: { email: user.email ?? undefined },
      }));

      if (!userExists) {
        return false;
      }

      return true;
    },
  },
  pages: {
    error: "/auth/error",
    signIn: "/auth/login",
  }
});

Login Page (pages/auth/login.vue):

<template>
  <div>
    <button @click="signIn('azure-ad');"> Microsoft </button>
    {{status}}
  </div>
</template>

<script lang="ts" setup>
definePageMeta({
  auth: {
    unauthenticatedOnly: true,
    navigateAuthenticatedTo: '/dashboard'
  }
})

const { signIn, status } = useAuth()
</script>

Dashboard Page (pages/dashboard.vue):

<template>
  <div>
    <h1>Dashboard</h1>
    {{status}}
    <button @click="signOut()">Logout</button>
  </div>
</template>

<script lang="ts" setup>
 const { status, signOut } = useAuth();
 const router = useRouter();
</script>

Questions:

1. Why is the error page being displayed momentarily when I’m redirected from /dashboard?
2. Why is the app redirecting from /dashboard to /dashboard after logging out, causing a loop?

I suspect it may have something to do with how the authentication state or session is handled between server-side and client-side navigation, but I'm not sure how to debug or resolve this. If you need further information or code snippets I am here to help!

Any help or pointers would be greatly appreciated!

I am using the default authentication flow provided by the Sidebase NuxtAuth module with the Auth.js provider (Azure AD in this case) for authentication. I have configured the module with the default settings, including the authentication middleware and session handling.

When I log in using Azure AD, the authentication works as expected, and I’m redirected to the /dashboard page. However, when I log out (using the signOut() method), I encounter two issues:

1. The page briefly redirects to /dashboard, which shows an error page, before finally redirecting back to the login page (/auth/login).
2. After logging out, the application seems to enter a redirect loop, trying to redirect from /dashboard to /dashboard before eventually going to /auth/login. I expected the following behavior:

The Sidebase NuxtAuth module should log the user out and immediately redirect them to the login page (/auth/login). No error page or redirect loop should occur after the logout. Since this is the default behavior of the NuxtAuth module, I was expecting the logout process to work without any issues.

Answer 1

Disabling SSR for my dashboard and adding this to my Nuxt Config fixed it:

routeRules: {
    "/": { redirect: "/dashboard" },
    "/dashboard": { ssr: false },
    "/api/**": { cors: true },
}