SolidJS•6mo ago

is this a good pattern?

export default function Home() {
  const user = createAsync(() => getUser());
  const shouldRedirect = createMemo(() => !user());

  return <Suspense>{shouldRedirect() && <Navigate href="/login" />}</Suspense>;
}

export default function Home() {
  const user = createAsync(() => getUser());
  const shouldRedirect = createMemo(() => !user());

  return <Suspense>{shouldRedirect() && <Navigate href="/login" />}</Suspense>;
}

17 Replies

HusseinOP•6mo ago

or is there a better way to redirect? actually the <Suspense> is not needed here

brenelz•6mo ago

I'd redirect in the getUser function if there is no user

Liquido•6mo ago

I have a very similar code where I check if a user is logged in. If user is not logged in, I just throw redirect('/signin') in my server function and it works great

HusseinOP•6mo ago

but if getUser is used in both home and login then login needs to redirect to home if logged in

peerreynders•5mo ago

Your OP doesn't address that either

export default function Login() {
  const user = createAsync(() => getUser());

  return (
    <Show when={!user()} fallback={() => <Navigate href="/home" />}>
      <div>Login</div>
    </Show>
  );
}

export default function Login() {
  const user = createAsync(() => getUser());

  return (
    <Show when={!user()} fallback={() => <Navigate href="/home" />}>
      <div>Login</div>
    </Show>
  );
}

Does the asymmetry of the approaches bother you?

HusseinOP•5mo ago

"Your OP doesn't address that either" i just provided an empty page that redirects if the user is not logged in lol not because i don't know how to do it ...

export default function Home() {
  const user = createAsync(() => getUser());
  const shouldRedirect = createMemo(() => !user());

  return <>{shouldRedirect() && <Navigate href="/login" />}<p>You're now logged in</p></>;
}

export default function Home() {
  const user = createAsync(() => getUser());
  const shouldRedirect = createMemo(() => !user());

  return <>{shouldRedirect() && <Navigate href="/login" />}<p>You're now logged in</p></>;
}

its nothing special

peerreynders•5mo ago

There are two separate requirements: - Redirection to /login from /home (or any other protected route) if the user is not logged in. This is the majority case covered by throwing a redirect. - Redirection to /home from /login if the user is logged in. This is the minority case covered by <Navigate />. Also using && inside JSX like that is an React-ism.

HusseinOP•5mo ago

that means i'd need to create 2 caches for redirection from home to login and to login from home

peerreynders•5mo ago

Where are getting that from? You are only using one getUser cache.

HusseinOP•5mo ago

if i throw a redirect in a cache to redirect from home to login then that'll effect what will happen if you're not logged and in login so i need 2 caches right?

peerreynders•5mo ago

That's is why the approaches are asymmetric. Throwing a redirect covers the majority case of any component needing a logged in user. If there is no logged in user, you get out of Dodge. On the other hand first load onto /login when there is a logged in user is the minority case. There is no need to log in, so you simply <Navigate /> away from the <Login/> route component.

peerreynders•5mo ago

https://github.com/solidjs/solid-start/blob/1ec5e29c726dbd44df756fca0046990ab78c4280/examples/with-auth/src/lib/index.ts#L23

GitHub

solid-start/examples/with-auth/src/lib/index.ts at 1ec5e29c726dbd44...

SolidStart, the Solid app framework. Contribute to solidjs/solid-start development by creating an account on GitHub.

HusseinOP•5mo ago

yeah ik but i will call getUser() in login too right? https://github.com/solidjs/solid-start/blob/1ec5e29c726dbd44df756fca0046990ab78c4280/examples/with-auth/src/routes/login.tsx in this example they don't redirect from login to home which is not popular in web not a popular way to do auth *

peerreynders•5mo ago

but i will call getUser() in login too right?

Fair enough, the redirect would interfere - though I haven't tried it, the router may be smart enough to handle that. If the router isn't smart enough you should be able to have a simple isLoggedIn "use server" function inside a createAsync (i.e. no cache) that can trigger the <Show /> fallback once it resolves. Personally I'd look into managing the user info in a context value that could flip a separate loggedIn memo flag based on what is going on. That way the <Login /> route component could get that info without a server round trip.

bigmistqke•5mo ago

voice-message.ogg

peerreynders•5mo ago

Example:

api.ts

home.tsx

bigmistqke•5mo ago

Oooops

Gaming

Programming

is this a good pattern?