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

SolidJS•3y ago•

4 replies

modii

How to protect all routes other than sign-in

// 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

How to protect all routes other than sign-in

How to protect all routes other than sign-in

Similar Threads

Similar Threads

Similar Threads