xenial-black

Can't get protected routes to work

I'm not sure what I'm doing wrong her but I cannot seem to figure out how I can create a protected route. I'm tryint to make a protected route /authenticated/dashboard. but no matter what does_authenticated.tsx not get triggered and redirect the client to /login ?

├── index.html
├── package.json
├── package-lock.json
├── src
│   ├── App.tsx
│   ├── assets
│   ├── components
│   ├── index.css
│   ├── main.tsx
│   ├── routes
│   │   ├── authenticated
│   │   │   └── dashboard.tsx
│   │   ├── _authenticated.tsx
│   │   ├── index.lazy.tsx
│   │   ├── login.lazy.tsx
│   │   └── __root.tsx
│   ├── routeTree.gen.ts
│   └── vite-env.d.ts

├── index.html
├── package.json
├── package-lock.json
├── src
│   ├── App.tsx
│   ├── assets
│   ├── components
│   ├── index.css
│   ├── main.tsx
│   ├── routes
│   │   ├── authenticated
│   │   │   └── dashboard.tsx
│   │   ├── _authenticated.tsx
│   │   ├── index.lazy.tsx
│   │   ├── login.lazy.tsx
│   │   └── __root.tsx
│   ├── routeTree.gen.ts
│   └── vite-env.d.ts

import { createFileRoute, redirect } from "@tanstack/react-router";

export const Route = createFileRoute("/_authenticated")({
  beforeLoad: async ({ context }) => {
    const { isLogged } = { isLogged: () => true };
    if (isLogged()) {
      throw redirect({ to: "/login" });
    }
  },
});

import { createFileRoute, redirect } from "@tanstack/react-router";

export const Route = createFileRoute("/_authenticated")({
  beforeLoad: async ({ context }) => {
    const { isLogged } = { isLogged: () => true };
    if (isLogged()) {
      throw redirect({ to: "/login" });
    }
  },
});

18 Replies

rare-sapphire•2y ago

either you need to rename _authenticated.tsx to authenticated.tsx (remove the leading underscore) or rename the folder authenticated to _authenticated (add a leading underscore) the second option would result in the path to just be /dashboard (without the authenticatedpart)

xenial-blackOP•2y ago

Thank you SOOOOOO MUCH! I've bee trying to figure out where I was going wrong for some time now. Can I ask what you personally would prefer? or no underscore or no underscore

rare-sapphire•2y ago

this is not a matter of preference, but rather how the url should look like

xenial-blackOP•2y ago

Fair point. One thing I don't get thought. TS is complaining and only know about the routes / /login /about, but it doesn't recognize /authenticated Argument of type '"/authenticated"' is not assignable to parameter of type 'keyof FileRoutesByPath'.

rare-sapphire•2y ago

how does your file/folder structure look like now? do you use the router vite plugin? is vite running?

xenial-blackOP•2y ago

├── index.html
├── package.json
├── package-lock.json
├── src
│   ├── App.tsx
│   ├── assets
│   ├── components
│   ├── index.css
│   ├── main.tsx
│   ├── routes
│   │   ├── authenticated
│   │   │   └── dashboard.tsx
│   │   ├── authenticated.tsx
│   │   ├── index.lazy.tsx
│   │   ├── login.lazy.tsx
│   │   └── __root.tsx
│   ├── routeTree.gen.ts
│   └── vite-env.d.ts

├── index.html
├── package.json
├── package-lock.json
├── src
│   ├── App.tsx
│   ├── assets
│   ├── components
│   ├── index.css
│   ├── main.tsx
│   ├── routes
│   │   ├── authenticated
│   │   │   └── dashboard.tsx
│   │   ├── authenticated.tsx
│   │   ├── index.lazy.tsx
│   │   ├── login.lazy.tsx
│   │   └── __root.tsx
│   ├── routeTree.gen.ts
│   └── vite-env.d.ts

rare-sapphire•2y ago

i.e. did the generator run

xenial-blackOP•2y ago

yes and yes 🙂

rare-sapphire•2y ago

would need a reproducer, e.g. by forking one of the existing example on stackblitz or this as a git repo

xenial-blackOP•2y ago

I think the easiest way would be to give you the repo 🙂 https://github.com/Notaduck/fitter-fullstack/tree/feature/frontend

rare-sapphire•2y ago

private repo? cannot access

xenial-blackOP•2y ago

2 sec. It shoulde be public by now. And thank you so much for the help so far!

rare-sapphire•2y ago

where should I be seeing this error?

xenial-blackOP•2y ago

I'm so sorry! I really don't know why there was a delay, I tried to restart the TS server in vs-code, restart the application but for some was there a delay with updating routeTree.gen.ts

rare-sapphire•2y ago

so error has vanished?

xenial-blackOP•2y ago

Si, it just took a minute or two before routeTree.gen.ts was updated and typescript could see the routes -_"

rare-sapphire•2y ago

shouldn't take that long, but well ...

xenial-blackOP•2y ago

Nope. and my laptop isn't THAT old, not new but not that old thoug.

Gaming

Programming

Can't get protected routes to work

Did you find this page helpful?