add loading state outside AuthContext

Author: staszekz

src/App.tsx

@@ -6,18 +6,19 @@ import { ModalsProvider } from '@mantine/modals';
 import { AuthProvider } from './context/auth-context';
 import { RouterProvider, createRouter } from '@tanstack/react-router';
 import './index.css';
+import { LoadingOverlay } from '@mantine/core';
 
 import { routeTree } from './routeTree.gen';
-import { getAuth } from 'firebase/auth';
 import { theme } from './Theme';
+import { useAuthContext } from './hooks';
 
 const queryClient = new QueryClient();
 
 const router = createRouter({
   routeTree,
   context: {
     queryClient,
-    auth: getAuth()
+    auth: undefined
   },
   defaultPreload: 'intent',
   defaultPreloadStaleTime: 0
@@ -28,16 +29,24 @@ declare module '@tanstack/react-router' {
     router: typeof router;
   }
 }
+
 const customTheme = createTheme(theme);
 
+function AppWithRouter() {
+  const auth = useAuthContext();
+  if (auth.loading) {
+    return <LoadingOverlay visible />;
+  }
+  return <RouterProvider router={router} context={{ auth }} />;
+}
+
 export function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <MantineProvider theme={customTheme}>
         <AuthProvider>
           <ModalsProvider>
-            {/* <Loder /> */}
-            <RouterProvider router={router} />
+            <AppWithRouter />
           </ModalsProvider>
         </AuthProvider>
       </MantineProvider>

src/Theme/theme.ts

@@ -13,7 +13,7 @@ export const theme = {
   fontFamily: 'Nunito, sans-serif',
   headings: {
     fontFamily: 'Nunito, sans-serif',
-    textWrap: 'wrap',
+    textWrap: 'wrap' as "wrap" | "nowrap" | "balance" | "pretty" | "stable" | undefined,
     sizes: {
       h1: {
         fontSize: '2.5rem',

src/context/auth-context.tsx

@@ -1,25 +1,15 @@
-import { LoadingOverlay } from '@mantine/core';
 import { auth } from '@notes/database';
+import { TContextAuth } from '@notes/types';
 import {
   signInWithEmailAndPassword,
   User,
-  UserCredential,
   createUserWithEmailAndPassword,
   updateProfile,
   signOut
 } from 'firebase/auth';
 import { createContext, useEffect, useState } from 'react';
 
-type ContextAuth = {
-  user: User | undefined;
-  signIn: (email: string, password: string) => Promise<UserCredential>;
-  signUp: (email: string, password: string, displayName: string) => Promise<UserCredential>;
-  loading: boolean;
-  setLoadingState: (loading: boolean) => void;
-  signUserOut: () => Promise<void>;
-};
-
-export const AuthContext = createContext<ContextAuth | undefined>(undefined);
+export const AuthContext = createContext<TContextAuth | undefined>(undefined);
 
 export function AuthProvider({ children }) {
   const [user, setUser] = useState<User>();
@@ -59,7 +49,7 @@ export function AuthProvider({ children }) {
     return unsubscribe;
   }, []);
 
-  const value: ContextAuth = { user, signIn, signUp, signUserOut, loading, setLoadingState };
+  const value: TContextAuth = { user, signIn, signUp, signUserOut, loading, setLoadingState };
 
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
 }

src/routes/__root.tsx

@@ -1,22 +1,24 @@
+import { TContextAuth } from '@notes/types';
 import { QueryClient } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import { Outlet, Link, redirect, createRootRouteWithContext } from '@tanstack/react-router';
+import { Outlet, createRootRouteWithContext } from '@tanstack/react-router';
 import { TanStackRouterDevtools } from '@tanstack/router-devtools';
-import { getAuth } from 'firebase/auth';
 
 type RouterContext = {
-  auth: ReturnType<typeof getAuth> | undefined;
+  auth: TContextAuth | undefined;
   queryClient: QueryClient;
 };
 
 export const Route = createRootRouteWithContext<RouterContext>()({
-  component: () => (
-    <>
-      <Outlet />
-      <TanStackRouterDevtools />
-      <ReactQueryDevtools initialIsOpen={false} />
-    </>
-  ),
+  component: () => {
+    return (
+      <>
+        <Outlet />
+        <TanStackRouterDevtools />
+        <ReactQueryDevtools initialIsOpen={false} />
+      </>
+    );
+  },
   notFoundComponent: () => {
     return <p>This is the notFoundComponent </p>;
   }

src/routes/_auth.index.tsx

@@ -2,13 +2,5 @@ import { Home } from '@notes/views';
 import { createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute('/_auth/')({
-  // component: () => {
-  //   if (!isAuthenticated()) {
-  //     return <div style={{ color: 'white' }}>Loading...</div>;
-  //   }
-
-  //   return <Home />;
-  // },
-  component: Home,
-  pendingComponent: () => <div style={{ color: 'white' }}>Loading...</div>
+  component: Home
 });

src/routes/_auth.tsx

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

src/types/contexts.ts

@@ -1,4 +1,10 @@
-export enum PageType {
-  NOTES = 'notes',
-  TODOS = "todos"
-}
+import { User, UserCredential } from 'firebase/auth';
+
+export type TContextAuth = {
+  user: User | undefined;
+  signIn: (email: string, password: string) => Promise<UserCredential>;
+  signUp: (email: string, password: string, displayName: string) => Promise<UserCredential>;
+  loading: boolean;
+  setLoadingState: (loading: boolean) => void;
+  signUserOut: () => Promise<void>;
+};