idiomatic auth:
the below works, but is it the tanstack way ? Should I be using the beforeload options ? I would appreciate the 'correct' way to have a group of protected routes, currently have a _authed folder with a _authed file with this, and everything I want behind being logged in, nested under _authed.
this of course is simply concerning itself with whether or not you're signed in and so much 'authorised' to be there. I will expand on that later as for now it's going to be a small invite only dashboard so if you can sign in you should be there.
But looking at guides on the docs I see this beforeLoad option within createFileRoute ???
// src/routes/_authed.tsx
import { createFileRoute, Outlet } from '@tanstack/react-router'
import { useAuth } from '@clerk/clerk-react'
export const Route = createFileRoute('/_authed')({
component: AuthedLayout,
})
function AuthedLayout() {
const { isLoaded, isSignedIn } = useAuth()
if (!isLoaded) {
return (
<div className="flex items-center justify-center min-h-screen">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-cyan-500" />
</div>
)
}
if (!isSignedIn) {
return (
<div className="flex flex-col items-center justify-center min-h-screen gap-4">
<h1 className="text-2xl font-bold">Access Denied</h1>
<p className="text-gray-600">Please sign in to access this page.</p>
</div>
)
}
return <Outlet />
}
this of course is simply concerning itself with whether or not you're signed in and so much 'authorised' to be there. I will expand on that later as for now it's going to be a small invite only dashboard so if you can sign in you should be there.
But looking at guides on the docs I see this beforeLoad option within createFileRoute ???
// src/routes/_authed.tsx
import { createFileRoute, Outlet } from '@tanstack/react-router'
import { useAuth } from '@clerk/clerk-react'
export const Route = createFileRoute('/_authed')({
component: AuthedLayout,
})
function AuthedLayout() {
const { isLoaded, isSignedIn } = useAuth()
if (!isLoaded) {
return (
<div className="flex items-center justify-center min-h-screen">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-cyan-500" />
</div>
)
}
if (!isSignedIn) {
return (
<div className="flex flex-col items-center justify-center min-h-screen gap-4">
<h1 className="text-2xl font-bold">Access Denied</h1>
<p className="text-gray-600">Please sign in to access this page.</p>
</div>
)
}
return <Outlet />
}
