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

Uh oh!

Uh oh!

External redirect in SSR loader #868

Uh oh!

{{title}}

Uh oh!

Replies: 3 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

External redirect in SSR loader #868

Uh oh!

JonasHiltl Dec 23, 2023

Replies: 3 comments

Uh oh!

langovoi Dec 30, 2023

Uh oh!

Uh oh!

llucasspot May 9, 2024

Uh oh!

rago4 Dec 23, 2024

JonasHiltl
Dec 23, 2023

langovoi
Dec 30, 2023

llucasspot
May 9, 2024

rago4
Dec 23, 2024