NT-19: fix keep me signin, add new spinner when loading app

Author: staszekz

src/App.tsx

@@ -11,6 +11,7 @@ import { LoadingOverlay } from '@mantine/core';
 import { routeTree } from './routeTree.gen';
 import { theme } from './Theme';
 import { useAuthContext } from './hooks';
+import { Spinner } from './components/atoms/spinner/spinner';
 
 const queryClient = new QueryClient();
 
@@ -34,6 +35,16 @@ const customTheme = createTheme(theme);
 
 function AppWithRouter() {
   const auth = useAuthContext();
+
+  if (auth.loading) {
+    return (
+      <LoadingOverlay
+        overlayProps={{ color: 'var(--dark-bg-color)' }}
+        loaderProps={{ children: <Spinner /> }}
+        visible
+      />
+    );
+  }
   return <RouterProvider router={router} context={{ auth }} />;
 }
 

src/components/atoms/spinner/spinner.tsx

@@ -0,0 +1,11 @@
+import classes from './styles.module.css';
+
+export function Spinner() {
+  return (
+    <div className={classes.loader}>
+      <div className={classes.outer}></div>
+      <div className={classes.middle}></div>
+      <div className={classes.inner}></div>
+    </div>
+  );
+}

src/components/atoms/spinner/styles.module.css

@@ -0,0 +1,45 @@
+.loader {
+  position: relative;
+}
+
+.outer,
+.middle,
+.inner {
+  border: 3px solid transparent;
+  border-top-color: var(--primary);
+  border-right-color:  var(--primary);
+  border-radius: 50%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
+
+.outer {
+  width: 3.5em;
+  height: 3.5em;
+  margin-left: -1.75em;
+  margin-top: -1.75em;
+  animation: spin 2s linear infinite;
+}
+
+.middle {
+  width: 2.1em;
+  height: 2.1em;
+  margin-left: -1.05em;
+  margin-top: -1.05em;
+  animation: spin 1.75s linear reverse infinite;
+}
+
+.inner {
+  width: 0.8em;
+  height: 0.8em;
+  margin-left: -0.4em;
+  margin-top: -0.4em;
+  animation: spin 1.5s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

src/context/auth-context.tsx

@@ -8,7 +8,7 @@ import {
   updateProfile,
   signOut,
   getAuth,
-  inMemoryPersistence,
+  browserLocalPersistence,
   setPersistence,
   sendEmailVerification
 } from 'firebase/auth';
@@ -23,11 +23,12 @@ export const AuthContext = createContext<TContextAuth | undefined>(undefined);
 export function AuthProvider({ children }) {
   const [user, setUser] = useState<User | null>(getAuth().currentUser);
   const [rememberMe, setRememberMe] = useState(false);
+  const [loading, setLoading] = useState(true);
 
   async function signIn(email: string, password: string) {
     try {
-      if (!rememberMe) {
-        await setPersistence(auth, inMemoryPersistence);
+      if (rememberMe) {
+        await setPersistence(auth, browserLocalPersistence);
       }
 
       const userCredential = await signInWithEmailAndPassword(auth, email, password);
@@ -79,11 +80,14 @@ export function AuthProvider({ children }) {
   }
   // add modal to display errors => maybe a global modal to be reused for every errors
   useEffect(() => {
+    setLoading(true);
     const unsubscribe = auth.onAuthStateChanged(user => {
       if (user) {
         setUser(user);
+        setLoading(false);
       } else {
         setUser(null);
+        setLoading(false);
       }
     });
     return unsubscribe;
@@ -94,7 +98,8 @@ export function AuthProvider({ children }) {
     signIn,
     signUp,
     signUserOut,
-    setRememberMe
+    setRememberMe,
+    loading
   };
 
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;

src/routes/_auth.tsx

@@ -3,6 +3,8 @@ import { createFileRoute, redirect } from '@tanstack/react-router';
 
 export const Route = createFileRoute('/_auth')({
   beforeLoad: async ({ context }) => {
+    console.log('🚀 ~ context:', context.auth?.user);
+
     if (!context.auth?.user?.emailVerified) {
       throw redirect({
         to: RoutesDef.LOGIN

src/types/contexts.ts

@@ -6,4 +6,5 @@ export type TContextAuth = {
   signUp: (email: string, password: string, displayName: string) => Promise<UserCredential>;
   signUserOut: () => Promise<void>;
   setRememberMe: React.Dispatch<React.SetStateAction<boolean>>
+  loading: boolean;
 };