Improve middleware to fully abort a navigation when the server-side auth check failed

[BracketJohn]

Describe the feature

Browbeat on discord reported that components still shortly flash to the end-user even iof the auth middleware detected that the user is not logged in. It's the expectation that we should be able to navigate away on the server side, so that the content is not visible to the end-user.

• create a reporduction
• look into the behavior

Additional information

No response

[BracketJohn]

This is actually a Nuxt 3 problem and not a nuxt-auth problem. Here's the issue to follow: nuxt/nuxt#15407

As soon as Nuxt 3.1.0 is released (appearently this december), this issue should be fixed. Leaving it open until then.

[endorfin]

It is not a Nuxt 3 problem! The problem occurs when you use your own custom login page. The current middleware does not cover this case. I solved the problem with my own middleware

export default defineNuxtPlugin(() => {
  const { status } = useSession()

  addRouteMiddleware('authentication', (to, _from) => {
    if (to.meta.auth !== false && status.value === 'unauthenticated') {
      return navigateTo(`/login?callbackUrl=${to.path}`)
    }
  }, { global: true })
})

One approach could be as follows, but I have no idea how to get the settings for the "pages" that are defined in the NuxtAuthHandler

import { defineNuxtRouteMiddleware } from '#app'
import useSession from '../composables/useSession'

export default defineNuxtRouteMiddleware((to) => {
  if (to.meta.auth === false) {
    return
  }

  const { status, signIn } = useSession()
  if (status.value === 'authenticated') {
    return
  }

  // check if custom signIn page is defined and redirect to it 
  const customSignInPageDefined = ???
  const customSignInPagePath = ???
  if (customSignInPageDefined) {
    return navigateTo(`${customSignInPagePath}?callbackUrl=${to.path}`)
  }

  return signIn(undefined, { callbackUrl: to.path, replace: true }, { error: 'SessionRequired' })
})

[BracketJohn]

Hey @endorfin! Thanks for the headsup, will look into this ASAP and release a fix if possible (:

[BracketJohn]

It is not a Nuxt 3 problem! The problem occurs when you use your own custom login page. The current middleware does not cover this case. I solved the problem with my own middleware

Heya @endorfin 👋

I think you may be describing a different issue: You talk about re-directs to custom login pages, but the issue is about short visibility of protected pages.

AFAIU your issue could be resolved via a new condfiguration option that allows you to specify custom login pages that the global auth middleware knows of. Do you want to open a new issue for that?

[endorfin]

No, I had exactly that problem.

I created a custom login page, specified it in the NuxtAuthHandler and enabled GlobalAppMiddleware in nuxt.config.

If you are not logged in, all content of the protected pages are visible for a short time before redirecting to the login page. But as I said, the problem only occurs with a custom login page. I suspect that the method "signIn" does not return the correct value and the RouteMiddleware does not stop and display the page. Later the "signIn" method redirects to the login page.

[endorfin]

nothing - does not block navigation and will move to the next middleware function, if any, or complete the route navigation

https://nuxt.com/docs/guide/directory-structure/middleware

[BracketJohn]

But as I said, the problem only occurs with a custom login page.

I'm actually able to reproduce it with both our playground and our demo-app that do not have custom login pages. Test it out here: https://nuxt-auth-example.sidebase.io/

Clicking "globally protected" there you will shortly see the page content before going to the standard log in page of the module.

Plus: browbeat did not report having a custom login page, you first brought this up.

Not saying that there's not an improvement to be made for the cust-page redirect, but just saying that this is two different problems:

1. page content is briefly visible although it shouldn't be,
2. middleware does not redirect to custom login page if one exists

[endorfin]

It's all about the return value in the defineNuxtRouteMiddleware ;)

return signIn(undefined, { callbackUrl: to.path, replace: true }, { error: 'SessionRequired' })

is not valid and blocks not the navigation

[BracketJohn]

Hm, under the hood signIn will return a navigateTo:

nuxt-auth/src/runtime/composables/useSession.ts

Line 107 in 42a7a58

return navigateToWithNuxt(hrefSignInAllProviderPage)

This however gives me a lead to look into: See if problem is resolved by returning navigateTo

[BracketJohn]

Investigated: We can resolve this by awaiting signIn PLUS faking a navigateTo.

This issue was resolved via 0568254 🎊

Release will happen soon (: