extended-salmon

Protect all routes with a redirect

Hey all, i'm trying to build a project where all routes are protected unless the user is logged in. I.e even if i hit "/" if i'm not logged in, i'll be redirected to the login page. I can't seem to figure out how to do this in a nice way. I've attached my csb link. Does anyone have any advice for me on the recommended way to do this? https://codesandbox.io/p/github/dave-hawkins/react-router-help/main?import=true&embed=1&file=%2F.codesandbox%2Ftasks.json Edit: This has been fixed, and the code now lives at https://github.com/dave-hawkins/tanstack-router-supabase-auth

20 Replies

curious-teal•2y ago

Create two layout files, one for authenticated and one for public _auth.tsx

export const Route = createFileRoute("/_auth")({
  beforeLoad: async ({  location }) => {
    if (!isAuthenticated()) {
      throw redirect({
        to: "/login",
        search: {
          redirect: location.href
        }
      });
    }
  },
  component: () => <Outlet />
});

export const Route = createFileRoute("/_auth")({
  beforeLoad: async ({  location }) => {
    if (!isAuthenticated()) {
      throw redirect({
        to: "/login",
        search: {
          redirect: location.href
        }
      });
    }
  },
  component: () => <Outlet />
});

_public.tsx

export const Route = createFileRoute("/_public")({
  beforeLoad: async () => {
    if (isAuthenticated()) {
      throw redirect({ to: "/" });
    }
  },
  component: () => <Outlet />
});

export const Route = createFileRoute("/_public")({
  beforeLoad: async () => {
    if (isAuthenticated()) {
      throw redirect({ to: "/" });
    }
  },
  component: () => <Outlet />
});

Then create two folders named _auth and _public and put all the files which you want to be protected (i.e unaccessable unless the user is logged in) under _auth and under _public put the pages which are accessible to people who are not logged in (like login, register, forgot password etc) I'm pretty sure this is the easiest and simplest way tanstack router currently supports

curious-teal•2y ago

Something like this

curious-teal•2y ago

Uhhh, I just noticed your codesandbox It looks fine I don't think there's much more you can improve on top of so what exactly don't you like about the way you used in your csb?

extended-salmonOP•2y ago

I was just envisioning that I could do some sort of redirect on index.tsx if the user wasn't logged in, protecting the entire site so to speak

curious-teal•2y ago

Yea, just change index.tsx to _auth.index.tsx or put all the routes which require auth under _auth this will protect the entire site

extended-salmonOP•2y ago

doing so makes it like this: my auth.tsx reads export const Route = createFileRoute("/_auth")({ and my _auth.index.tsx also reads export const Route = createFileRoute("/_auth/")({

curious-teal•2y ago

Yea that's normal notice the trailing /, that basically tells the framework it's the / route that is wrapped by the _auth layout

extended-salmonOP•2y ago

I get a ts error from it "Argument of type '"/_auth/"' is not assignable to parameter of type 'keyof FileRoutesByPath'.ts(2345)" and thrown back to the login page constantly

curious-teal•2y ago

close and reopen vs code

extended-salmonOP•2y ago

error persists unfortunately

curious-teal•2y ago

Hmmmm is your csb updated?

extended-salmonOP•2y ago

trying to figure out how to 😅

curious-teal•2y ago

join live stream and share your screen export const Route = createFileRoute("/_public")({ component: () => <Outlet /> }); @Sean Cassiere I think you're needed here

extended-salmonOP•2y ago

FWIW the most up to date code is here https://github.com/dave-hawkins/react-router-help. I get redirected constantly if i set my index to an auth route, if my index route isn't protected, i can log in fine. Video demo here: https://share.cleanshot.com/hdBsftJf

CleanShot Cloud

ScreenShot 2024-02-15 at 15.24.45

Video uploaded to CleanShot Cloud

harsh-harlequin•2y ago

Taking a look at it @davehawkins I've sent you a DM with my email. Please add it as a demo user. And I trust that you've correctly set up the redirect_uri for development. Ignore my previous messages. I've fixed the OAuth flow.

harsh-harlequin•2y ago

I've opened a pull request to your original repo -> https://github.com/dave-hawkins/react-router-help/pull/1

GitHub

fix: broken oauth flow by SeanCassiere · Pull Request #1 · dave-haw...

harsh-harlequin•2y ago

If you want to explore the changes -> https://github.com/SeanCassiere/dave-hawkins-react-router-help/tree/SeanCassiere/fixing-oauth

GitHub

GitHub - SeanCassiere/dave-hawkins-react-router-help at SeanCassier...

Contribute to SeanCassiere/dave-hawkins-react-router-help development by creating an account on GitHub.

harsh-harlequin•2y ago

This is what the flow looks like.

harsh-harlequin•2y ago

In my changes, on the login page, if you are already logged-in, it navigates you back to whatever is the redirect value or /. This can ofcourse be changed to display some UI should you prefer, like something saying "Looks like you are already logged-in, please click here to head to the dashboard". Let me know if I've made any supabase faux pas... Its the first time I've used it.

extended-salmonOP•2y ago

@Sean Cassiere huge thank you, works like a charm. I'm going to clean up the codebase and keep this open for anyone wanting to implement a similar flow. If anyone finds this and wants to take a look at the code - I renamed the repo. https://github.com/dave-hawkins/tanstack-router-supabase-auth

Gaming

Programming

Protect all routes with a redirect

Did you find this page helpful?