External redirect in SSR loader #868

JonasHiltl · 2023-12-23T17:54:58Z

JonasHiltl
Dec 23, 2023

I have setup SSR like the basic-ssr-streaming-file-based example.
I now want to redirect the user to an external auth url inside my root loader if a session cookie doesn't exist.
But I get the error

Error: Invariant failed: Attempting to navigate to external url with this.navigate!

export const rootRoute = rootRouteWithContext<RouterContext>()({
  loader: async ({ context }) => {
    if (!context.cookies.session) {
      const authUrl = "..."
      throw redirect({ to: authUr })
    }
  },
  component: () => (
    <html lang="en">
      <head>
        <meta charSet="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Vite App</title>
        <script
          type="module"
          suppressHydrationWarning
          dangerouslySetInnerHTML={{
            __html: `
              import RefreshRuntime from "/@react-refresh"
              RefreshRuntime.injectIntoGlobalHook(window)
              window.$RefreshReg$ = () => {}
              window.$RefreshSig$ = () => (type) => type
              window.__vite_plugin_react_preamble_installed__ = true
            `,
          }}
        />
        <script type="module" src="/@vite/client" />
        <script type="module" src="/src/entry-client.tsx" />
      </head>
      <body>
        <Outlet />
        <TanStackRouterDevtools position="bottom-right" />
        <DehydrateRouter />
      </body>
    </html>
  ),
});

I don't think that it's currently possible to use redirect() with an external url, but is there another way to redirect from inside a loader to an external url?

Or would I have to built that into the express api?

langovoi · 2023-12-30T10:52:28Z

langovoi
Dec 30, 2023

I tried to use redirect in beforeLoad (https://tanstack.com/router/v1/docs/guide/authenticated-routes#the-routebeforeload-option), but got same error.

0 replies

llucasspot · 2024-05-09T14:45:03Z

llucasspot
May 9, 2024

hello,

Any update ? I got the same error here

code used :

const protectedRouteProps = {
    beforeLoad: async ({context}: { context: Context }) => {
        const isAuthenticated = await context.services.authProvider.checkAuth()
        if (isAuthenticated) {
            return
        }
        throw redirect({
            to: RoutePath.SIGN_IN,
            search: {
                redirect: location.href,
            }
        })
    },
}

0 replies

rago4 · 2024-12-23T10:02:18Z

rago4
Dec 23, 2024

Try with href instead of to.

throw redirect({ href: "https://github.com" })

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

External redirect in SSR loader #868

{{title}}

Replies: 3 comments

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

External redirect in SSR loader #868

JonasHiltl Dec 23, 2023

Replies: 3 comments

langovoi Dec 30, 2023

llucasspot May 9, 2024

rago4 Dec 23, 2024

JonasHiltl
Dec 23, 2023

langovoi
Dec 30, 2023

llucasspot
May 9, 2024

rago4
Dec 23, 2024