Protected Routes Implementation

[UbaidRajputt]

Hi @tannerlinsley, love the whole tanstack, react-location looks great as well, I just want some help with how can we implement protected routes in react-location, that's the only thing to figure out before I can use it in my upcoming project

[Codpoe]

I tried two ways:

1. just add a wrapper

[
  {
    path: '/',
    element: <Auth><Home /></Auth />
  }
]

2. Nested in the children

[
  {
    path: '/',
    element: <Auth />
    children: [
      {
        path: '/',
        element: <Home />
      }
    ]
  }
]

I also wanted to know if there is a better way to do it.

[tannerlinsley]

I think this is probably the best way. I prefer #2 personally. Also, if there are no other sibling routes you don't even need to include the path:

[
  {
    element: <Auth />
    children: [
      {
        path: '/',
        element: <Home />
      }
    ]
  }
]

🤯

[Angelelz]

Hello there,
When I started playing around with RL I didn't find this thread and I wanted to implement protected routes.
Since the routes you pass to the router is just an array, my solution was just to use the push method inside an if(isLoggedIn) to populate the protected routes on login before passing them to the router, like this:

if (isLoggedIn) {
  routes.push({
    element: <ProtectedComponent />,
    path: "protectedPath",
  })
}

Any thoughts?

[sethbro]

Example 2 uses a route with path: "/", which has a child route also with path: "/". However I get an exception when I try to do this.

CodeSandbox example: https://codesandbox.io/s/elegant-minsky-jvvwey?file=/src/App.js

[jabidof]

Hello
Can you slightly detail the content of the <Auth /> component.

I'm willing to validate a security token stored in localStorage. It is not clear to me which way is the best.
Thanks for any hints.

[Codpoe]

For the 1. :

function Auth({ children }) {
  if (!isTokenValid) {
    return <Navigate to="/error" />;
  }
  return <>{children}</>;
}

For the 2. :

function Auth() {
  if (!isTokenValid) {
    return <Navigate to="/error" />;
  }
  return <Outlet />;
}

[jabidof]

Thanks!
For some reason, it didn't work before updating to 3.2.14 (maybe not related).
Here is the code I used for the interested:

const Auth = () => {
  const auth = useAuth();
  const location = useLocation();

  if (auth.isFetching) {
    return <div>is validating token...</div>;
  } else if (auth.userID) {
    return <Outlet />;
  } else {
    return <Navigate to={`/login?redirect=${location.current.href}`} />;
  }
};

or

const AuthChildren = ({ children }: { children: JSX.Element }) => {
  const auth = useAuth();
  const location = useLocation();

  if (auth.isFetching) {
    return <div>is validating token...</div>;
  } else if (auth.userID) {
    return children;
  } else {
    return <Navigate to={`/login?redirect=${location.current.href}`} />;
  }
};

where useAuth hook is managing the token verification (and all authentication management-context-shared).

Then in the routes:
For Auth:

{
          path: "users",
          element: <Auth />,
          children: [
            {
              path: "/",
              element: <UsersPage />,
              loader: ({ search, ...rest }) => {
                 ...
              },
            },
          ],
}

and for AuthChildren:

{
          path: "users",
          element: <AuthChildren><UsersPage /></AuthChildren>,
          loader: ({ search, ...rest }) => {
              ...
           },
}

It is worth mentioning that both approaches will trigger the loader whatever the result of the token validation will be and will lead to an API error in that case; not sure how to handle it the nicest way. Here is what I finally used in conjunction with React-Query (it works but there is maybe a better way):

loader: ({ search, ...rest }) => {
  if (auth.userID) {
    return (
      queryClient.getQueryData(["users"]) ??
      queryClient
        .fetchQuery(["users"], () => fetchUsers())
        .then((data) => {
          return { users: data };
        })
    );
  } else {
    return { users: [] };
  }
},

[m7ez1n]

Hi, thank you for the code. How is it another routes? Example: Login and Register routes? How was the App.tsx?

[Angelelz]

@jabidof

It is worth mentioning that both approaches will trigger the loader whatever the result of the token validation will be and will lead to an API error in that case; not sure how to handle it the nicest way. Here is what I finally used in conjunction with React-Query (it works but there is maybe a better way)

I found this issue before finding this thread and initially I tried an approach very similar to what you did. The problem I found was that auth.userID value is set as a closure for the loader function you pass, basically it's locked in what the value was when you passed the function the first time.

What I did was use the bind method to pass whatever auth value you need inside the loader function to act accordingly, like this:

loader: ((userID, { search, ...rest }) => {
  if (userID) {
    return (
      queryClient.getQueryData(["users"]) ??
      queryClient
        .fetchQuery(["users"], () => fetchUsers())
        .then((data) => {
          return { users: data };
        })
    );
  } else {
    return { users: [] };
  }
}).bind(null, auth.userID),

Does anybody know a better way?

[danielbayerlein]

@tannerlinsley Will this use case work with @tanstack/react-router?

[borie88]

It is worth mentioning that both approaches will trigger the loader whatever the result of the token validation will be and will lead to an API error in that case; not sure how to handle it the nicest way. Here is what I finally used in conjunction with React-Query (it works but there is maybe a better way):

Yeah I don't understand why in the case where we're using an Auth element protecting child routes, child loaders still run even if the Auth element is not returning an <Outlet />. Not sure of the best way to get around this -> either add a loader with the Auth route's root that only resolves when user is defined, or change up all of our child loaders

[drock07]

Has there been any kind of consensus on how to use loaders with authenticated API calls? It's weird to me that route loaders were developed at all since I'm not sure which API calls people are using that don't require an authenticated token. Unless this is only being used for small hobbyist projects.

[tannerlinsley]

I've added a new documentation page to gather the official recommendations: https://tanstack.com/router/v1/docs/guide/authenticated-routes

To hit on a few other points:

• The entire router, including the concept of loaders is isomorphic, so it's absolutely a normal use case that people will be hitting non-authenticated API calls, but maybe not the majority use case.
• There will absolutely be larger non-hobby projects (like Nozzle, for instance) that hit public, non-protected APIs in loaders.
• Because of Router's isomorphic nature and it's lean towards SPAs, it's just as easy to implement authenticated routes via render short circuiting as it is to do login redirection, both of which are mentioned in the new doc page.

[calloc134]

Is it possible to use the hook of react inside the beforeLoad function?
I need to get state and execute that function from a hook like useAuth0.

import { useAuth0 } from '@auth0/auth0-react';

// ...

beforeLoad: async () => {
  const { isAuthenticated, loginWithRedirect } = useAuth0();

  if (!isAuthenticated) {
    loginWithRedirect({ redirectUri: '/protected' }); 
    throw new Error('Redirecting to login');
  }
},

[nahvinden]

@calloc134 https://tanstack.com/router/v1/docs/framework/react/guide/authenticated-routes#authentication-using-react-contexthooks

[mudai11]

@tannerlinsley what about on page reload? the beforeLoad function doesn't wait for api calls to check if user is correctly authenticated especially if the call is inside the auth context itself so it takes the first state in the context and if it's false by default the protection will be bypassed.

[shreddish]

@tannerlinsley what about on page reload? the beforeLoad function doesn't wait for api calls to check if user is correctly authenticated especially if the call is inside the auth context itself so it takes the first state in the context and if it's false by default the protection will be bypassed.

any answer on this? I am running into same issue so my login page flickers and then eventually redirects back to the original page

EDIT: for anyone looking at this later - for now I found a somewhat hacky solution from auth0 side where I inject the getAccessTokenSilently() method into the tanstack router context... then in my beforeLoad I can await the getAccessTokenSilently() call and if it fails I know the user doesn't have a valid token and redirect to login

[progexh]

Thank you!

[tannerlinsley]

You can actually get the auth zero context from within a wrapper component higher up from your router provider, then pass that information into the router context via the context prop on the router provider.

…

On Aug 9, 2023 at 12:43 AM -0400, calloc134 ***@***.***>, wrote: Is it possible to use the hook of react inside the beforeLoad function? I need to get state and execute that function from a hook like useAuth0. import { useAuth0 } from ***@***.***/auth0-react'; // ... beforeLoad: async () => { const { isAuthenticated, loginWithRedirect } = useAuth0(); if (!isAuthenticated) { loginWithRedirect({ redirectUri: '/protected' }); throw new Error('Redirecting to login'); } }, — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: ***@***.***>

[l-baston]

Hi @tannerlinsley ,

Question from someone learning as I go and trying out the router with my authenticated routes.

If you had a structure like this for example which wraps the router and passes context down to the provider, the initial context is evaluated first throwing a redirect. Is there something I'm missing?

  import { useAuth0 } from "@auth0/auth0-react"
  import {
      RouterProvider,
      Router,
      Route,
      redirect,
      RouterContext,
    } from '@tanstack/react-router'
  import App from '../App.tsx';
  import Profile from "@/pages/profile";
  import AuthPage from "@/pages/auth.tsx";
  
  const AuthWrapper = () => {
      const { isAuthenticated } = useAuth0();
      interface AuthRouterContext {
          isAuth: boolean
        }
        
        const authContext = new RouterContext<AuthRouterContext>()
        const rootRoute = authContext.createRootRoute();
        
        const indexRoute = new Route({
          getParentRoute: () => rootRoute,
          path: '/',
          component: App
        })
        
        const profileRoute = new Route({
          getParentRoute: () => rootRoute,
          path: '/profile',
          component: Profile
        })
        
        const authenticatedRoute = new Route({
          id: 'authenticated',
          getParentRoute: () => rootRoute,
          path: '/auth',
          beforeLoad: ({ context }) => {
              if (!context.isAuth) {
                  throw redirect({
                      to: '/',
                      search: {
                          redirect: router.state.location.href,
                      },
                  })
                  
              }
          },
          component: AuthPage
        });
        
        // Add routes to tree
        const routeTree = rootRoute.addChildren([
          indexRoute,
          profileRoute,
          authenticatedRoute
        ])
        
        // Create the router using your route tree
        const router = new Router({
          routeTree: routeTree,
          context: {
            isAuth : false
          },
        })
        
      return (
          <RouterProvider router={router} context={{isAuth: isAuthenticated}}/>
      )
  }
  
  export default AuthWrapper;

[l-baston]

Found the issue was a silly oversight on my part, just waiting on the loading state from Auth0

if(!context.isAuth.isLoading){
    if (!context.isAuth.isAuthenticated) {
        throw redirect({
            to: '/',
            search: {
            // Use the current location to power a redirect after login
            // (Do not use `router.state.resolvedLocation` as it can
            // potentially lag behind the actual current location)
            redirect: router.state.location.href,
            },
        }) 
    }
}

Or something to this effect should work (please add a timeout or something)

in terms of the initial context, found in the kitchen sink example that we can just wait to inject it from the provider props by declaring it as undefined!

context: {
  isAuth : undefined!
},

Then inject the hook

<RouterProvider router={router} context={{isAuth: useAuth0()}}/>

Hopefully helps someone in the same situation as me

[emekaokoli]

The protected route does not redirect user when not logged.

`const rootRoute = new RootRoute()
// public pages
const registerRoute = new Route({id:'register', getParentRoute: () => rootRoute, path: '/register', component: Register })
const loginRoute = new Route({ id: 'login', getParentRoute: () => rootRoute, path: '/login' , component: Login})
// private pages
const indexRoute = new Route({ id: 'index', getParentRoute: () => rootRoute, path: '/', component: App})
const userRoute = new Route({ id: 'user-profile', getParentRoute: () => rootRoute, path: 'user-profile', component:UserProfile })
const profileDetails = new Route({ id: 'profile-details', getParentRoute: () => userRoute, path: '$userId', component: ProfileDetails })

const authenticatedRoute = new Route({
  id: 'authenticated',
  getParentRoute: () => rootRoute,
  beforeLoad: async () => {
    const location = useLocation();
    const { isLoggedIn } = useAuth()
    if (!isLoggedIn) {
      throw redirect({
        to: '/login',
        search: {
          redirect: router.history.push(location.current.pathname)
        },
        replace: true,
      })
    }
  },
})

const protectedRoutes = authenticatedRoute.addChildren([profileDetails, indexRoute, userRoute, profileDetails])




const routeTree = rootRoute.addChildren([protectedRoutes, loginRoute, registerRoute])

// Create the router using your route tree
export const router = new Router({ routeTree })

declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router
  }
}`

[iamrakhmatov]

did you find solution?

[iamrakhmatov]

and btw, you cannot use hook inside beforeLoad function

[l-baston]

You could ditch the router approach with Auth0 and use withAuthenticationRequired HOC on your protected routes, just register them as normal

https://auth0.github.io/auth0-react/interfaces/WithAuthenticationRequiredOptions.html

[Shakti1990]

Hi @tannerlinsley, love the whole tanstack, react-location looks great as well, I just want some help with how can we implement protected routes in react-location, that's the only thing to figure out before I can use it in my upcoming project

how to separate two stack ,for example log in stack and logged in stack how to implement this please provide a solution i need your help

[Benanna2019]

If you look at this example from the docs - https://tanstack.com/router/v1/docs/guide/authenticated-routes

And this example in the examples - https://tanstack.com/router/v1/docs/examples/react/with-loaders-kitchen-sink-single-file?file=src%2Fmain.tsx

In the example above look at this route definition authenticatedRoute and this route definition loginRoute for implementations

You can have an auth context that you pass to your router and then in each route in the beforeLoad function check the auth value and if they are not logged in navigate them else where.

[shlroland]

I found that when using 'authenticated-route' as a parent route (with the id 'authenticated'), the paths of the child routes always carry the 'authenticated' prefix. So I extended the Route class with a predefined 'beforeload' method, which allows routes that require authentication to skip adding 'beforeload' every time. However, I'm not sure if this is a good practice.

@tannerlinsley

import type {
  AnyContext,
  AnyRoute,
  Assign,
  Expand,
  IsAny,
  ParsePathParams,
  ResolveAllParams,
  ResolveFullPath,
  ResolveFullSearchSchema,
  ResolveId,
  RouteConstraints,
  RouteContext,
  RouteOptions,
} from '@tanstack/react-router'
import { Route, redirect } from '@tanstack/react-router'
import { loginRoute } from '@/pages/bootstrap/route'
import { getAccessToken } from '@/utils'

export class AuthenticatedRoute<
  TParentRoute extends RouteConstraints['TParentRoute'] = AnyRoute,
  TPath extends RouteConstraints['TPath'] = '/',
  TFullPath extends RouteConstraints['TFullPath'] = ResolveFullPath<TParentRoute, TPath>,
  TCustomId extends RouteConstraints['TCustomId'] = string,
  TId extends RouteConstraints['TId'] = ResolveId<TParentRoute, TCustomId, TPath>,
  TSearchSchema extends RouteConstraints['TSearchSchema'] = {},
  TFullSearchSchema extends RouteConstraints['TFullSearchSchema'] = ResolveFullSearchSchema<
    TParentRoute,
    TSearchSchema
  >,
  TParams extends RouteConstraints['TParams'] = Expand<Record<ParsePathParams<TPath>, string>>,
  TAllParams extends RouteConstraints['TAllParams'] = ResolveAllParams<TParentRoute, TParams>,
  TRouteContext extends RouteConstraints['TRouteContext'] = RouteContext,
  TAllContext extends Expand<
    Assign<IsAny<TParentRoute['types']['allContext'], {}>, TRouteContext>
  > = Expand<Assign<IsAny<TParentRoute['types']['allContext'], {}>, TRouteContext>>,
  TRouterContext extends RouteConstraints['TRouterContext'] = AnyContext,
  TLoaderData = unknown,
  TChildren extends RouteConstraints['TChildren'] = unknown,
  TRouteTree extends RouteConstraints['TRouteTree'] = AnyRoute,
> extends Route<
  TParentRoute,
  TPath,
  TFullPath,
  TCustomId,
  TId,
  TSearchSchema,
  TFullSearchSchema,
  TParams,
  TAllParams,
  TRouteContext,
  TAllContext,
  TRouterContext,
  TLoaderData,
  TChildren,
  TRouteTree
> {
  constructor(
    options: RouteOptions<
      TParentRoute,
      TCustomId,
      TPath,
      TSearchSchema,
      TFullSearchSchema,
      TParams,
      TAllParams,
      TRouteContext,
      TAllContext,
      TLoaderData
    >,
  ) {
    super(options)
  }

  beforeLoad = async ({ location }) => {
    if (!getAccessToken()) {
      throw redirect({
        to: loginRoute.to,
        search: {
          redirect: location.href,
        },
      })
    }
  }
}

[eduardoborges]

Someone has an sugestion for file based router for this common problem?

[iam-amanxz]

This how my implementation looks like, I am not sure if this is the best way to do though

// App.tsx

const getRouter = (user: User | null) =>
  new Router({
    routeTree,
    context: { queryClient, authContext: new AuthContext(user) },
    defaultErrorComponent: () => <ErrorComponent />,
    defaultPendingComponent: () => <LoadingComponent />,
    defaultPreload: "intent",
    defaultPreloadStaleTime: 0,
  });

declare module "@tanstack/react-router" {
  interface Register {
    router: ReturnType<typeof getRouter>;
  }
}

const fetchUser = (): Promise<User | null> =>
  new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        "id": "af9dc63a-df42-427e-9ee8-b9ea1a1382dc",
        "first_name": "John",
        "last_name": "Doe",
        ...
      });
    }, 1000);
  });

export const App = () => {
  const [loading, setLoading] = useState(true);
  const [user, setUser] = useState<User | null>(null);

  useEffect(() => {
    fetchUser().then((user) => {
      setUser(user as User);
      setLoading(false);
    });
  }, []);

  if (loading) return <Loader />;

  return (
    <React.StrictMode>
      <QueryClientProvider client={queryClient}>
        <RouterProvider router={getRouter(user)} />
      </QueryClientProvider>
    </React.StrictMode>
  );
};

// __root.tsx

export const Route = rootRouteWithContext<{
  queryClient: QueryClient;
  authContext: AuthContext;
}>()({
  component: RootComponent,
  beforeLoad: async ({ location, context }) => {
    const user = context.authContext.user;
    if (!user) throw redirect({ to: "/login" });
    const isProduction = env.NODE_ENV === "production";
    if (
      authRoutes.includes(location.pathname as keyof Routes) &&
      isProduction
    ) {
      throw redirect({ to: "/applications" });
    }
    if (location.pathname === "/" && isProduction) {
      throw redirect({ to: "/applications" });
    }
  },
});

then in any route, you can access the auth context like so

const { user } = Route.useRouteContext().authContext;