T
TanStack•4mo ago
exotic-emerald

Clerk Billing & Protected Routes

Has anyone integrated clerk billing into their tanstack start routes? Wanted to know how their <Protected/> components are working for y'all with loaders in the route? Example: I don't want to allow a user to access my /dashboard route unless they're subscribed and authenticated. If they're authenticated and not subscribed, should either go to /onboarding or /subscribe based off their states
4 Replies
exotic-emerald
exotic-emeraldOP•4mo ago
Seems this might work instead of forcing the user to /subscribe route: 
export const Route = createFileRoute("/_authed/_sub")({
  component: RouteComponent,
});

function RouteComponent() {
  return (
    <Protect
      condition={(has) => has({ plan: "essentials" }) || has({ plan: "pro" })}
      fallback={
        <div className="flex items-center justify-center p-12">
          You need to subscribe to access this page.
          <Button>
            <Link to="/subscribe">Subscribe Now</Link>
          </Button>
        </div>
      }
    >
      <Outlet />
    </Protect>
  );
}
export const Route = createFileRoute("/_authed/_sub")({
  component: RouteComponent,
});

function RouteComponent() {
  return (
    <Protect
      condition={(has) => has({ plan: "essentials" }) || has({ plan: "pro" })}
      fallback={
        <div className="flex items-center justify-center p-12">
          You need to subscribe to access this page.
          <Button>
            <Link to="/subscribe">Subscribe Now</Link>
          </Button>
        </div>
      }
    >
      <Outlet />
    </Protect>
  );
}
ambitious-aqua
ambitious-aqua•4mo ago
export const Route = createFileRoute("/_authed/_sub")({
  component: RouteComponent,
  beforeLoad: async () => {
    const { has } = await auth()
    const hasPermission = has({ plan: "essentials" }) || has({ plan: "pro" })}
    if (!hasPermission) {
      throw redirect({ to: "/subscribe" }); //or throw redirect({ to: "/onboarding" });
    }
  },
 });
export const Route = createFileRoute("/_authed/_sub")({
  component: RouteComponent,
  beforeLoad: async () => {
    const { has } = await auth()
    const hasPermission = has({ plan: "essentials" }) || has({ plan: "pro" })}
    if (!hasPermission) {
      throw redirect({ to: "/subscribe" }); //or throw redirect({ to: "/onboarding" });
    }
  },
 });
Is this what you mean?
exotic-emerald
exotic-emeraldOP•4mo ago
I think that's effectively the same as what I have above? 😮
ambitious-aqua
ambitious-aqua•4mo ago
It’s similar, but I made a small tweak here just in case it helps

Did you find this page helpful?