added google auth provider

Author: rohithandique

package-lock.json

@@ -15,6 +15,7 @@
     "@fontsource/geist-mono": "^5.2.7",
     "@mantine/core": "^8.3.10",
     "@mantine/hooks": "^8.3.10",
+    "@supabase/supabase-js": "^2.89.0",
     "@tanstack/react-router": "^1.143.3",
     "@tanstack/react-router-devtools": "^1.143.3",
     "react": "^19.2.3",

package.json

@@ -0,0 +1,46 @@
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  ReactNode,
+} from 'react';
+import { authAdapter } from '@/shared/api/auth';
+
+interface AuthContextType {
+  user: any | null;
+  isLoading: boolean;
+  setIsLoading: (loading: boolean) => void;
+}
+
+export const AuthContext = createContext<AuthContextType | undefined>(
+  undefined
+);
+
+export const AuthProvider = ({ children }: { children: ReactNode }) => {
+  const [user, setUser] = useState<any | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  useEffect(() => {
+    const unsubscribe = authAdapter.onAuthStateChange((currentUser) => {
+      setUser(currentUser);
+      setIsLoading(false);
+      if (window.location.href.endsWith('#')) {
+        window.history.replaceState(null, '', window.location.pathname);
+      }
+    });
+    return () => unsubscribe();
+  }, []);
+
+  return (
+    <AuthContext.Provider value={{ user, isLoading, setIsLoading }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (context === undefined)
+    throw new Error('useAuth must be used within an AuthProvider');
+  return context;
+};

src/app/providers/auth-context.tsx

@@ -2,6 +2,7 @@
 import { ComponentType } from 'react';
 import { withMantine } from './with-mantine';
 import { withRouter } from './with-router';
+import { withAuth } from './with-auth';
 
 type HOC = (component: ComponentType<any>) => ComponentType<any>;
 
@@ -11,4 +12,4 @@ const compose = (...hocs: HOC[]) => {
   };
 };
 
-export const withProviders = compose(withMantine, withRouter);
+export const withProviders = compose(withMantine, withAuth, withRouter);

src/app/providers/index.tsx

@@ -0,0 +1,12 @@
+import { ComponentType } from 'react';
+import { AuthProvider } from './auth-context';
+
+export const withAuth = (Component: ComponentType) => {
+  const WrappedComponent = (props: any) => (
+    <AuthProvider>
+      <Component {...props} />
+    </AuthProvider>
+  );
+  WrappedComponent.displayName = `withAuth(${Component.displayName || Component.name || 'Component'})`;
+  return WrappedComponent;
+};

src/app/providers/with-auth.tsx

@@ -2,8 +2,14 @@
 import { RouterProvider, createRouter } from '@tanstack/react-router';
 import { routeTree } from '../../routeTree.gen';
 import { ComponentType } from 'react';
+import { NotFoundPage } from '@/pages/not-found';
 
-const router = createRouter({ routeTree });
+const router = createRouter({
+  routeTree,
+  defaultNotFoundComponent: () => {
+    return <NotFoundPage />;
+  },
+});
 
 export const withRouter = (_Component: ComponentType) => {
   return () => <RouterProvider router={router} />;

src/app/providers/with-router.tsx

@@ -1,6 +1,9 @@
+import { useAuth } from '@/app/providers/auth-context';
 import { Box, Group, MantineTheme, UnstyledButton, Text } from '@mantine/core';
 
 export function UserCard() {
+  const { user, isLoading } = useAuth();
+
   return (
     <UnstyledButton
       p="md"
@@ -13,10 +16,10 @@ export function UserCard() {
       <Group>
         <Box style={{ flex: 1 }}>
           <Text size="sm" fw={500}>
-            Rohit Handique
+            {!isLoading && user ? user.user_metadata.name : ''}
           </Text>
           <Text c="dimmed" size="xs">
-            rohit.handique@gmail.com
+            {!isLoading && user ? user.email : ''}
           </Text>
         </Box>
       </Group>

src/entities/UserCard.tsx

@@ -13,20 +13,58 @@ import {
   Button,
   Flex,
   Group,
+  Loader,
 } from '@mantine/core';
-import { useNavigate } from '@tanstack/react-router';
+import { useLocation, useNavigate } from '@tanstack/react-router';
+import { useAuth } from '@/app/providers/auth-context';
+import { authAdapter } from '@/shared/api/auth';
 
 export function SignInModal() {
   const [opened, { open, close }] = useDisclosure(false);
   const navigate = useNavigate();
+  const location = useLocation();
 
+  const { user, isLoading, setIsLoading } = useAuth();
   const modalContentHeight = rem(550);
 
-  const mockLogin = () => {
-    close();
-    navigate({ to: '/dashboard' });
+  const handleGoogleLogin = async () => {
+    try {
+      setIsLoading(true);
+      await authAdapter.loginWithGoogle();
+      close();
+    } catch (err) {
+      console.error('Google Login failed', err);
+    }
   };
 
+  const handleLogout = async () => {
+    try {
+      setIsLoading(true);
+      navigate({ to: '/', replace: false });
+      await authAdapter.logout();
+    } catch (err) {
+      console.error('Logout failed', err);
+    }
+  };
+
+  if (user) {
+    if (location.pathname === '/') {
+      return (
+        <Button
+          variant="filled"
+          onClick={() => navigate({ to: '/dashboard', replace: false })}
+        >
+          {isLoading ? <Loader size={'xs'} /> : 'Go to Dashboard'}
+        </Button>
+      );
+    }
+    return (
+      <Button variant="outline" onClick={() => handleLogout()}>
+        Logout
+      </Button>
+    );
+  }
+
   return (
     <>
       <Modal
@@ -115,9 +153,10 @@ export function SignInModal() {
               mt="xl"
               size="md"
               radius="md"
-              onClick={() => mockLogin()}
+              loading={isLoading} // Show loading state if auth is initializing
+              onClick={handleGoogleLogin} // Call t
             >
-              Login
+              Continue with Google{' '}
             </Button>
 
             <Text ta="center" mt="md" size="sm">
@@ -147,7 +186,7 @@ export function SignInModal() {
       </Modal>
 
       <Button variant="default" onClick={open}>
-        Sign In
+        {isLoading ? <Loader size={'xs'} /> : 'Sign In'}
       </Button>
     </>
   );

src/features/SignInModal.tsx

@@ -71,10 +71,6 @@ export function Features() {
         style={{
           fontSize: rem(34),
           fontWeight: 500,
-          // Responsive font size using standard CSS logic
-          '@media (max-width: 48em)': {
-            fontSize: rem(24),
-          },
         }}
       >
         Integrate effortlessly with any technology stack

src/pages/landing/ui/features/index.tsx

@@ -0,0 +1 @@
+export { NotFoundPage as NotFoundPage } from './ui/NotFoundPage';