SolidJS•11mo ago

How to protect all routes other than sign-in

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

3 Replies

Tommypop•11mo ago

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

jorge•11mo ago

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

Tommypop•11mo ago

Unfortunately I don't have any examples that I can find These are the outlet docs: https://start.solidjs.com/api/Outlet

Gaming

Programming

How to protect all routes other than sign-in