vnode.component is null when redirecting to different layout

[Thewest123]

Hi! 👋

Firstly, thanks for your work on this project!

Today I used patch-package to patch @nuxt-alt/auth@2.3.11 for the project I'm working on.

I have two pages, index.vue and login.vue, each with different Nuxt layout. When I try to access the protected index page, it should redirect to the login page. But I've got only blank page and this error:

[nuxt] Calling `useRoute` within middleware may lead to misleading results. Instead, use the (to, from) arguments passed to the middleware to access the new and old routes. [router.js:12](_nuxt/node_modules/nuxt/dist/app/composables/router.js?v=1602dacd)

<Suspense> is an experimental feature and its API will likely change. [chunk-3NMN3MUW.js:2535]

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core 
  at <FragmentWrapper > 
  at <NuxtLayout> 
  at <App key=3 > 
  at <NuxtRoot> [chunk-3NMN3MUW.js:1381]

Uncaught (in promise) TypeError: vnode.component is null
    NuxtJS 68
[chunk-3NMN3MUW.js:6414]

I couldn't manage to make the redirect work with different layouts. If the index page and login page had the same layout, redirection worker perfectly.

I'm just a beginner in JS, but I've tried to replace the router.push(to) with navigateTo(to) and it solved my problem. I don't know if this is a good change and if it doesn't break something else. Perhaps someone more proficient in JS and Nuxt can look more into it.

Thanks! :)

Here is the diff that solved my problem:

diff --git a/node_modules/@nuxt-alt/auth/dist/runtime/core/auth.mjs b/node_modules/@nuxt-alt/auth/dist/runtime/core/auth.mjs
index 7e63634..7c24624 100644
--- a/node_modules/@nuxt-alt/auth/dist/runtime/core/auth.mjs
+++ b/node_modules/@nuxt-alt/auth/dist/runtime/core/auth.mjs
@@ -1,5 +1,5 @@
 import { isSet, getProp, routeMeta, isRelativeURL } from "../../utils";
-import { useRouter, useRoute } from "#imports";
+import { useRouter, useRoute, navigateTo } from "#imports";
 import { Storage } from "./storage.mjs";
 import { isSamePath, withQuery } from "ufo";
 import requrl from "requrl";
@@ -301,7 +301,7 @@ export class Auth {
     if (!router || !isRelativeURL(to)) {
       window.location.replace(to);
     } else {
-      activeRouter.push(to);
+      return navigateTo(to);
     }
   }
   onRedirect(listener) {
diff --git a/node_modules/@nuxt-alt/auth/dist/runtime/core/middleware.mjs b/node_modules/@nuxt-alt/auth/dist/runtime/core/middleware.mjs
index 41538e9..597385e 100644
--- a/node_modules/@nuxt-alt/auth/dist/runtime/core/middleware.mjs
+++ b/node_modules/@nuxt-alt/auth/dist/runtime/core/middleware.mjs
@@ -15,9 +15,6 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
   const insidePage = (page) => normalizePath(to.path) === normalizePath(page);
   if (ctx.$auth.$state.loggedIn) {
     const { tokenExpired, refreshTokenExpired, isRefreshable } = ctx.$auth.check(true);
-    if (!login || insidePage(login) || pageIsInGuestMode) {
-      ctx.$auth.redirect("home", to);
-    }
     if (refreshTokenExpired) {
       ctx.$auth.reset();
     } else if (tokenExpired) {
@@ -31,7 +28,10 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
         ctx.$auth.reset();
       }
     }
+    if (!login || insidePage(login) || pageIsInGuestMode) {
+      return ctx.$auth.redirect("home", to);
+    }
   } else if (!pageIsInGuestMode && (!callback || !insidePage(callback))) {
-    ctx.$auth.redirect("login", to);
+    return ctx.$auth.redirect("login", to);
   }
 });

This issue body was partially generated by patch-package.