Signout with redirect causes flash of login page

[hendrasan]

Environment

---

• Operating System: Darwin
• Node Version: v20.18.1
• Nuxt Version: 3.17.3
• CLI Version: 3.25.1
• Nitro Version: 2.11.12
• Package Manager: npm@11.2.0
• Builder: -
• User Config: app, compatibilityDate, devtools, css, imports, vite, modules, fonts, shadcn, components, icon, runtimeConfig, auth, i18n
• Runtime Modules: shadcn-nuxt@2.1.0, @nuxt/icon@1.13.0, @nuxtjs/i18n@9.5.4, @sidebase/nuxt-auth@0.10.1, @nuxt/fonts@0.11.4
• Build Modules: -

---

Reproduction

Describe the bug

I have:

/ -> landing page
/login -> login page

And after login, when I logout, I want to log the user out to landing page, so I do this

await signOut({ callbackUrl: '/' })

But apparently, what it does is, the user is shown the login page for a bit, before being redirected to landing page.

Can we somehow change it? I tried this but it doesn't work

await signOut()
await navigateTo('/')

Additional context

No response

Logs

[phoenix-ru]

@hendrasan Could you please share your config? What provider do you use?

[github-actions]

Hello 👋

Please provide a reproduction for this issue 🙏

How can I create a reproduction?

Please use one of the following links to reproduce your issue.

• https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz
• https://codesandbox.io/s/github/nuxt/starter/v3-codesandbox

Please ensure that the reproduction is as minimal as possible. This will allow us to isolate the issue as best as possible.

Here are some more amazing posts about the importance of reproductions:

• The Importance of Reproductions
• How to Generate a Minimal, Complete, and Verifiable Example

[hendrasan]

I'm using local provider, and my nuxt.config.ts is pretty basic, like this

auth: {
    globalAppMiddleware: true,
    sessionRefresh: {
      enableOnWindowFocus: false,
    },
    provider: {
      type: "local",
      token: {
        maxAgeInSeconds: 86400,
      },
      endpoints: {
        signIn: { path: "/auth/login", method: "post" },
        signOut: { path: "/auth/logout", method: "post" },
        signUp: { path: "/auth/register", method: "post" },
        getSession: { path: "/user/profile", method: "get" },
      },
    },
  },

on logout, I think the default is redirecting user to signIn (or maybe they're being redirected because of the absence of session data, hence middleware redirects them to signIn page.

The problem is when I do await signOut({ callbackUrl: '/' }), I guess the auth middleware is triggered first, hence showing a flash of signIn page, before the callbackUrl is being triggered.

[TheDutchCoder]

We encounter a very similar issue, where the global state is changed before the redirect, causing some UI flashing (certain colors/UI element change because they rely on some global state parts).

I think you're right that the middleware is triggered in the process of signing out.