S
SolidJS

support

How to protect all routes other than sign-in

Mmodii7/25/2023
Hi there, I am making an app where I only want signed-in users to see the content, I want all routes to automatically redirect to the sign-up page if the user is not signed in. Ideally, I don't want to have to add the boilerplate to check if the user is signed up on every single page, I also don't want to have to create and maintain a massive list of all the protected routes (which is virtually every route in my app) when using middleware. What is an easy way of setting something like this up? Here is what I came up with, conditionally showing the route if the user has a session, though tbh it is a bit janky.
// root.tsx (omitting some lines)
export const useSession = () => {
return createServerData$(
async (_, { request }) => {
return await getSession(request, authOptions)
},
{ key: () => ["auth_user"] }
)
}

export default function Root() {
const session = useSession()
return (
<Html lang="en">
<Head>
</Head>
<Body>
<SessionProvider>
<Suspense>
<ErrorBoundary>
<Show when={session()}
fallback={
<div class="flex flex-col items-center justify-center gap-4">
<button
onClick={() => signIn("discord", { redirectTo: "/" })}
class="rounded-full bg-black/10 px-10 py-3 font-semibold"
>
Sign In
</button>
</div>
}
>
<div class="flex flex-row">
<Nav />
<Routes>
<FileRoutes />
</Routes>
</div>
</Show>
</ErrorBoundary>
</Suspense>
</SessionProvider>
<Scripts />
</Body>
</Html>
);
}
// root.tsx (omitting some lines)
export const useSession = () => {
return createServerData$(
async (_, { request }) => {
return await getSession(request, authOptions)
},
{ key: () => ["auth_user"] }
)
}

export default function Root() {
const session = useSession()
return (
<Html lang="en">
<Head>
</Head>
<Body>
<SessionProvider>
<Suspense>
<ErrorBoundary>
<Show when={session()}
fallback={
<div class="flex flex-col items-center justify-center gap-4">
<button
onClick={() => signIn("discord", { redirectTo: "/" })}
class="rounded-full bg-black/10 px-10 py-3 font-semibold"
>
Sign In
</button>
</div>
}
>
<div class="flex flex-row">
<Nav />
<Routes>
<FileRoutes />
</Routes>
</div>
</Show>
</ErrorBoundary>
</Suspense>
</SessionProvider>
<Scripts />
</Body>
</Html>
);
}
It sort of works, though when you sign out, you have to refresh to show the signup
TTommypop7/26/2023
You can use route groups, where you can group all of your routes that need auth under (authed), then have an authed.tsx component, which checks for a valid session, then displays an <Outlet /> if they're logged in, which will render the corresponding route within the (authed) folder. Otherwise, you can just redirect to the login page
Mmodii7/26/2023
Thank you for this response, sounds like it's exactly what I need! By any chance do you know if there is any example out there that implements what you described? I'm not really familiar with route groups and Outlet
TTommypop7/26/2023
Unfortunately I don't have any examples that I can find These are the outlet docs: https://start.solidjs.com/api/Outlet

Looking for more? Join the community!

Want results from more Discord servers?
Add your server
Recommended Posts