jorge Posts - Answer Overflow

jorge

Explore posts from servers

•Created by jorge on 7/25/2023 in #support

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

5 replies

SSolidJS

•Created by jorge on 7/6/2023 in #support

Trying to modify a type from @auth/core

Hi there, I am trying to edit the DefaultSession type from @auth/core as such:

import { DefaultSession } from "@auth/core/types";

declare module '@auth/core/types' {
    interface Session {
      user: {
        id: string;
      } & DefaultSession['user'];
    }
  }

import { DefaultSession } from "@auth/core/types";

declare module '@auth/core/types' {
    interface Session {
      user: {
        id: string;
      } & DefaultSession['user'];
    }
  }

in types/@auth.d.ts However, I am getting this error when I run pnpm dev

An unhandled error occured: Error: No known conditions for "./types" specifier in "@auth/core" package

An unhandled error occured: Error: No known conditions for "./types" specifier in "@auth/core" package

Am I missing something? I'm not very familiar with .d.ts files and solid start, so I might be missing something.

2 replies

SSolidJS

•Created by jorge on 5/24/2023 in #support

Conditional tailwind css using signal

Hi there, I am looking for a way to apply a tailwind css style to a div when the signal is set to true. Is that possible?

9 replies

Gaming

Programming