exotic-emerald

Auth context initially returns null and doesn't redirect/rerender after update

Hi folks! I'm fairly new to Tanstack Router and loving it, but I'm having some issues with my Router Context. To sum up: - I'm accessing my auth context (Supabase auth) in a protected route in beforeLoad - The context initially returns null and doesn't render once the context is updated I'm following the Authenticated Routes example from the docs. Here's my setup: auth-provider.tsx

export const AuthContext = createContext<AuthContextType | null>(null);

export default function AuthProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  const [session, setSession] = useState<Session | null>(null);

  useEffect(() => {
    supabase.auth.getSession().then(({ data: { session } }) => {
      setSession(session);
    });

    const {
      data: { subscription },
    } = supabase.auth.onAuthStateChange((_event, session) => {
      setSession(session);
    });

    return () => subscription.unsubscribe();
  }, []);

  return (
    <AuthContext.Provider value={{ session }}>{children}</AuthContext.Provider>
  );
}

export const AuthContext = createContext<AuthContextType | null>(null);

export default function AuthProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  const [session, setSession] = useState<Session | null>(null);

  useEffect(() => {
    supabase.auth.getSession().then(({ data: { session } }) => {
      setSession(session);
    });

    const {
      data: { subscription },
    } = supabase.auth.onAuthStateChange((_event, session) => {
      setSession(session);
    });

    return () => subscription.unsubscribe();
  }, []);

  return (
    <AuthContext.Provider value={{ session }}>{children}</AuthContext.Provider>
  );
}

hooks/useAuth.tsx

export function useAuth() {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error("Must be used within AuthProvider");
  }
  return context;
}

export function useAuth() {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error("Must be used within AuthProvider");
  }
  return context;
}

router.tsx

export const router = createRouter({
  routeTree,
  context: {
    auth: undefined!,
  },
});

export const router = createRouter({
  routeTree,
  context: {
    auth: undefined!,
  },
});

App.tsx

function InnerApp() {
  const auth = useAuth();

  return <RouterProvider router={router} context={{ auth }} />;
}

export default function App() {
  return (
    <AuthProvider>
      <InnerApp />
    </AuthProvider>
  );
}

function InnerApp() {
  const auth = useAuth();

  return <RouterProvider router={router} context={{ auth }} />;
}

export default function App() {
  return (
    <AuthProvider>
      <InnerApp />
    </AuthProvider>
  );
}

/routes/_auth

export const Route = createFileRoute("/_auth")({
  validateSearch: z.object({
    redirect: z.string().optional(),
  }),
  beforeLoad: async ({ context, location }) => {
    console.log(context.auth);
    if (!context.auth.session) {
      throw redirect({
        to: "/",
        search: {
          redirect: location.href,
        },
      });
    }
  },
});

export const Route = createFileRoute("/_auth")({
  validateSearch: z.object({
    redirect: z.string().optional(),
  }),
  beforeLoad: async ({ context, location }) => {
    console.log(context.auth);
    if (!context.auth.session) {
      throw redirect({
        to: "/",
        search: {
          redirect: location.href,
        },
      });
    }
  },
});

5 Replies

complex-teal•14mo ago

You may want to checkout this repo with Supabase auth https://github.com/dave-hawkins/tanstack-router-supabase-auth

GitHub

GitHub - dave-hawkins/tanstack-router-supabase-auth: Tanstack route...

Tanstack router + supabase auth starter repo. Contribute to dave-hawkins/tanstack-router-supabase-auth development by creating an account on GitHub.

xenophobic-harlequin•11mo ago

Would you say this is still the recommened approach?

complex-teal•11mo ago

I haven't tried it in a while, but it should work I'd assume.

xenophobic-harlequin•11mo ago

Yeah it would to be fair, I was just wondering because the current Supabase Auth example uses the supabase server instead of client. Only issue I am having is it sometimes keeps checking user auth way too often on the client, so maybe I do need a provider

complex-teal•11mo ago

The example uses for React on https://supabase.com/docs/guides/auth/quickstarts/react uses @supabase/supabase-js lib. It's being uses in the example repo as well I believe.

Use Supabase Auth with React | Supabase Docs

Learn how to use Supabase Auth with React.js.

Gaming

Programming

Auth context initially returns null and doesn't redirect/rerender after update

Did you find this page helpful?