How to implement the authentication? #113

Activity

1. nuric commented on Jul 28, 2022

   

   nuric

   on Jul 28, 2022

   More actions

   I'm not sure if this is the best way to do it but I use a nested route that acts as a user guard:

   /* Assuming useUser is a signal indicating whether the user is logged in or not */
   
   const UserGuard: Component = () => {
     const navigate = useNavigate();
     /* Authentication guard */
     createEffect(() => {
       /* Here null means user is not logged in. It could also be undefined
       which means we don't know yet.*/
       if (useUser() === null) {
         navigate("/login", { replace: true });
       }
     });
     return (
       <Show when={useUser()} fallback="Loading user...">
         <Outlet />
       </Show>
     );
   }

   It displays loading user if the user signal is undefined and redirects if it is null (as in the user is not logged in). If they are logged in then it shows the child routes that are guarded. I then use it in the Routes:

   <Routes>
     <Route path="/private" element={<UserGuard />}>
       <Route path="/profile" element={/* ... */} />
     </Route>
   </Routes>

   👍React with 👍1Reacted by Nikhil Saraf
2. ryansolid

   added

   questionFurther information is requestedFurther information is requested

   on Nov 21, 2022
3. solidjs

   locked and limited conversation to collaborators on Nov 21, 2022
4. ryansolid

   converted this issue into a discussion #205 on Nov 21, 2022