Creating authenticated routes for users with Supabase Google OAuth

[srahimeen]

I have a Vite React app which has an AuthProvider context set up to validate authorization. It exposes a useAuth hook which I use for this. I am following the doc to set up authenticated routes using React context, my set up is as follows:

routes/__root.tsx

import NavBar from "@/components/NavBar";
import { AuthContextType } from "@/hooks/AuthContext";
import {
  createRootRouteWithContext,
  Outlet,
  useMatchRoute,
} from "@tanstack/react-router";
import { TanStackRouterDevtools } from "@tanstack/router-devtools";
import { Suspense } from "react";

interface RouterContext {
  auth: AuthContextType;
}

export const Route = createRootRouteWithContext<RouterContext>()({
  component: () => <RootComponent />,
});

function RootComponent() {
  const hideNavRoutes = ["/login"];

  const matchRoute = useMatchRoute();

  const matchedHideNavRoutes = hideNavRoutes.some((route) =>
    matchRoute({ to: route }),
  );

  return (
    <>
      {!matchedHideNavRoutes ? <NavBar /> : undefined}
      <hr />
      <Outlet />
      <Suspense>
        <TanStackRouterDevtools />
      </Suspense>
    </>
  );
}

routes/dashboard.tsx

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

export const Route = createFileRoute("/dashboard")({
  component: Dashboard,

  beforeLoad: ({ context, location }) => {
    if (!context.auth.isAuthenticated) {
      throw redirect({
        to: "/login",
        search: {
          redirect: location.href,
        },
      });
    }
  },
});

function Dashboard() {
  return <div className="p-2">This is a route for authenticated users!</div>;
}

main.tsx

import ReactDOM from "react-dom/client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { RouterProvider, createRouter } from "@tanstack/react-router";
import { routeTree } from "./routeTree.gen";
import "./index.css";
import AuthProvider, { useAuth } from "./hooks/AuthContext";

// Create a client
const queryClient = new QueryClient();

// Set up a Router instance
const router = createRouter({
  routeTree,
  defaultPreload: "intent",
  context: {
    auth: undefined!,
  },
});

// Register things for typesafety
declare module "@tanstack/react-router" {
  interface Register {
    router: typeof router;
  }
}

function InnerApp() {
  const auth = useAuth();
  console.log(auth);
  return <RouterProvider router={router} context={{ auth }} />;
}

const rootElement = document.getElementById("app")!;

if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(
    <QueryClientProvider client={queryClient}>
      <AuthProvider>
        <InnerApp />
      </AuthProvider>
    </QueryClientProvider>,
  );
}

However, when I log in with my user, I am navigated to the index "/" route and not the "/dashboard" route. How do I ensure that if the user enters the "/dashboard" route while not logged in, logs in, and is routed to the "/dashboard" route after login?

I am using Supabase with Google OAuth if that helps.

[srahimeen]

It seems like it was an issue with Supabase not propagating the redirect URL and not with my routing configs. This is resolved now!

[amd75692]

Hi,
Can you please share your AuthProvider ?
I'm struggling having the user in my beforeLoad function. I'm able to get the user when i call await context.supabase.auth.getSession() within my beforeLoad, but i guess the right approach is to have the supabase calls made in the auth provider and then passed to the router context.
The authenticated routes doc is lacking in examples.
🙏

[developerEhsan]

for someone who struggling to setup authentication in tanstack router with supabase -> https://medium.com/@your-ehsan/how-to-setup-the-supabase-authentication-with-tanstack-router-in-vite-react-c0b7d5104576