Getting out of memory error when navigating to authenticated route

[srahimeen]

I have a Vite React app which is using Supabase and Google OAuth for authentication. I have an AuthContext to keep track of authentication state. It has the following type:

export interface AuthContextType {
  isAuthenticated: boolean;
  session: Session | null | undefined;
  user: User | null | undefined;
  signOut: () => Promise<void>;
}

It makes network calls to supabase to get the authentication state and sets that in the context and returns it as a useAuth hook. I set up my main.tsx following the TanStack Router Authenticate Routes doc.

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>,
  );
}

I am trying to use my useAuth hook in my __root.tsx to check if the user is authenticated since for logged in users I would like to show a different Navbar. I have it set up as:

routes/__root.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>,
  );
}

And I also have a dashboard route with is an authenticated route, if the user is not authenticated I redirect them to the /login route.

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 <DashBoardPage></DashBoardPage>;
}

pages/DashboardPage.tsx

import { Button } from "@/components/ui/button";
import { useAuth } from "@/hooks/AuthContext";

function DashBoardPage() {
  const { user, signOut } = useAuth();
  return (
    <div>
      <div>Logged in as: {user?.user_metadata?.full_name}</div>
      <Button className="flex h-12 items-center gap-3 px-6" onClick={signOut}>
        Sign out
      </Button>
    </div>
  );
}

export default DashBoardPage;

However, when I try to refresh the page on my Dashboard route, I seem to get a memory leak error:

I feel like this is not the right way to achieve this?

I feel like I created some sort of infinite loop, but not sure where it is.

[srahimeen]

It does seem like there is an infinite loop somehow in my dashboard route, I added a comment in dashboard.tsx and can see it:

[SeanCassiere]

From what I can see here, it looks like a Supabase caller is being infinitely called/rendered.

See this example repository which has Supabase Authentication set up with the OAuth2+OIDC flow.