Header visible on login-page after closing and reopening browser

[eensander]

A few times I have noticed that the Header-component seems to be visible on the login page (see top of the login card).

This definitely undesired behaviour, since the layout used by the login page does not contain the Header-component. My assumption is that on reopening, the Nuxt assumes the layout to be the default.vue layout and inherits that content. A hypothesized solution is to change the name of the default.vue component to another value, and respectively fill in this new name for every page that currently does not have a layout explicitly set.

[eensander]

Reproducability

The problem seems to occur whenever the user attempts to visit the homepage or login page, when its access-token has expired but its refresh-token is still valid. In that case, the user is redirected to the /auth/login page, where the supabase client uses the refresh-token to get a new access-token. Upon success, the user is again being redirected from the login page (blank layout), to the home page (default layout). However, at this stage something goes wrong: it seems Nuxt doesn't properly handle the change of the layout, resulting in the seen observations.

Steps to reproduce

1. If not logged in, log in to the app as you normally would.
2. On the homepage, open the browser's Inspector
3. In the Inspector, go to the Storage tab for FireFox or Application tab for Chrome
4. Open the Cookies view
5. Invalidate the sb-access-token cookie's value (I simply appended a 1 character to the value).
6. Refresh the page

Change in observation

The observation of the problem seems to have changed since checked last time. Additionally, there seems to be a difference between the observation of the app hosted on vercel and localhost.

On vercel

Localhost

Assumed problem and attempted solution

Perhaps some logic regarding authentication and redirection is implemented in a suboptimally. However, the root problem of the layout being incorrectly rendered seems to be related Nuxt. As an first attempted solution, I went to update Nuxt on my local environment. Unfortunately, the observations remained the same.

[eensander]

Investigating further using elimination, it seems that the culprit is the following in pages/auth/login/index.vue:

definePageMeta({
  layout: "blank",
  middleware: async ({}) => {
    const user = useSupabaseUser();
    if (user.value) return await navigateTo('/') // <---- disabling this causes the problem to cease
  }
});

That this line is causing a problem is rather peculiar, since this is what Nuxt's documentation seems to suggest.

[eensander]

After quickly testing it seems that, from the previous comment, changing the navigateTo method to a location.href = '' assignment causes the problem to cease appearing. This is the same as has been done in the checks in the onMounted() function on the login-page. This indicates that the problem is potentially (aswell) related to the absence of reloading the tRPC plugin before navigating, which keeps using the old - expired - token on the SSR execution, which probably causes a hydration mismatch which finally leads to the seen observation.

Therefore the problem could be 'fixed' (or worked-around) by changing the middleware to:

  middleware: async () => {
    const user = useSupabaseUser();
    if (user.value) location.href = '/';
  }