continuing-cyan

How to redirect from root layout?

I want to make sure that my root layout is also authenticated, and if not then navigate to the /login page and authenticate the user. I was using the authentication context based example on github but when i add a before load to the root

export const Route = createRootRouteWithContext<MyRouterContext>()({
  beforeLoad: ({ context, location }) => {
    if (!context.auth.isAuthenticated) {
      console.log('redirecting to login')
      throw redirect({
        to: '/login',
        search: {
          redirect: location.href,
        },
      })
    }
  },
  component: RootComponent,
})

export const Route = createRootRouteWithContext<MyRouterContext>()({
  beforeLoad: ({ context, location }) => {
    if (!context.auth.isAuthenticated) {
      console.log('redirecting to login')
      throw redirect({
        to: '/login',
        search: {
          redirect: location.href,
        },
      })
    }
  },
  component: RootComponent,
})

I get a blank page and no layout loads. all the navigation works when i use the links on the route layout but i want my route layout to be authenticated and i am not sure how to do so. would appreciate any help! Thanks

8 Replies

continuing-cyanOP•2y ago

this only happens on the first load... if i manually refresh the page everything works as expected

plain-purple•2y ago

I would create an "auth" layout route under your root that surrounds all of your auth'd paths Then keep the login route out of that layout route In that auth layout route's beforeLoad or loader or component, check for auth status and redirect them to login

continuing-cyanOP•2y ago

I guess in that case I'm a bit confused with what I could display on the "/" route, is there a way for me to set the default route to "/dashboard"?

plain-purple•2y ago

To put it in router terms, the root route is a layout route. It's always rendered You can create an index.tsx route that targets / specifically and redirect from there to /dashboard if you'd like

continuing-cyanOP•2y ago

oh that would be great. is there an example I could follow? sorry this is my first time using this so a bit lost also I understand what you reccomend for the auth route wrapper, but i dont want the user to have to click on a button or link in the root layout to navigate to the said protected page. I do want the default to be the dashbaord (which is protected) if the user is authenticated otherwise redirect to login page. So I would love a way to redirect from the root page to a authenticated root automatically, then check if authenticated and go to login or stay based off of that.

plain-purple•2y ago

The kitchen sink examples show off this method of auth In your root route, you can use beforeLoad to check auth status and throw redirect(...)

continuing-cyanOP•2y ago

I see, will take a look thanks for the help!

Gaming

Programming

How to redirect from root layout?

Did you find this page helpful?