absent-sapphire

protected routes

I understand that it is insanly important that we add the beforeLoad in a __authenticated.tsx file but what I don't understand is how to create a wrapper around my project to check the add that check. Could someone help out a big noob understand here? 🙂 Wops! This is what I have read. Please highlight what I have missed. https://tanstack.com/router/latest/docs/framework/react/guide/authenticated-routes

TanStack | High Quality Open-Source Software for Web Developers

Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.

7 Replies

adverse-sapphire•10mo ago

what do you mean by "how to create a wrapper around my project" ? you could add the auth check in the root route's beforeLoad

absent-sapphireOP•10mo ago

What I mean is to project the path www.example.com/dashboard with authentication.

adverse-sapphire•10mo ago

still unclear what you mean

absent-sapphireOP•10mo ago

Unprotected routes www.example.com www.example.com/about www.example.com/pricing www.example.com/contact Protected routes www.example.com/dashboard www.example.com/dashboard/* Inside the protected route from my understanding I need some sort of wrapper around it so that would be something like this or?

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

export const Route = createFileRoute("/dashboard/")({
  component: RouteComponent,
});

function RouteComponent() {
  return (
      <PROTECTION> // This would then come from the __authentication file or what?
        <DashboardView />
      </PROTECTION>
  );
}

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

export const Route = createFileRoute("/dashboard/")({
  component: RouteComponent,
});

function RouteComponent() {
  return (
      <PROTECTION> // This would then come from the __authentication file or what?
        <DashboardView />
      </PROTECTION>
  );
}

adverse-sapphire•10mo ago

yes. but isnt this well documented in the above doc page?

absent-sapphireOP•10mo ago

No I am confused because from my understanding it would not work the way I just showed you. Instead from my understanding you would have to pass it as a beforeLoad That would look something like this

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

export const Route = createFileRoute("/dashboard/")({
  beforeLoad: _authentication, // here
  component: RouteComponent,
});

function RouteComponent() {
  return (
    <DashboardView />
  );
}

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

export const Route = createFileRoute("/dashboard/")({
  beforeLoad: _authentication, // here
  component: RouteComponent,
});

function RouteComponent() {
  return (
    <DashboardView />
  );
}

Or am I completletly wrong?

adverse-sapphire•10mo ago

yes you should use beforeLoad, as explained in the documentation

Gaming

Programming

protected routes

Did you find this page helpful?