feat: connect backend to frontend

Author: VictoriaTskhondia

backend/src/auth/api.py

@@ -1,7 +1,7 @@
 from datetime import timedelta
 from typing import Annotated
 
-from fastapi import APIRouter, Depends, HTTPException
+from fastapi import APIRouter, Depends, HTTPException, Request
 from fastapi.security import OAuth2PasswordRequestForm
 
 from src.auth.schemas import Token
@@ -15,6 +15,7 @@
 
 @router.post("/tokens")
 def login_access_token(
+    request: Request,
     session: SessionDep, form_data: Annotated[OAuth2PasswordRequestForm, Depends()]
 ) -> Token:
     user = services.authenticate(
@@ -25,8 +26,17 @@ def login_access_token(
     elif not user.is_active:
         raise HTTPException(status_code=400, detail="Inactive user")
     access_token_expires = timedelta(minutes=settings.ACCESS_TOKEN_EXPIRE_MINUTES)
-    return Token(
-        access_token=services.create_access_token(
-            user.id, expires_delta=access_token_expires
-        )
+
+    # Create token
+    token = services.create_access_token(
+        user.id, expires_delta=access_token_expires
     )
+
+    # Also store user in session for consistency with Auth0 flow
+    request.session["user"] = {
+        "email": user.email,
+        "id": str(user.id),
+    }
+    request.session["user_id"] = str(user.id)
+
+    return Token(access_token=token)

backend/src/auth/auth0_api.py

@@ -2,7 +2,8 @@
 from fastapi.responses import RedirectResponse
 from authlib.integrations.starlette_client import OAuth
 from src.core.config import settings
-
+from src.core.db import get_db
+from src.auth.services import get_or_create_user_by_email  # Fix the import path
 router = APIRouter(tags=["auth"])
 
 oauth = OAuth()
@@ -15,7 +16,7 @@
 )
 
 
-@router.get("/login")
+@router.get("/login", name="auth0_login")
 async def login(request: Request):
     redirect_uri = request.url_for("auth0_callback")
     return await oauth.auth0.authorize_redirect(
@@ -32,27 +33,32 @@ async def auth0_callback(request: Request):
 
     user = token.get("userinfo") or await oauth.auth0.userinfo(token=token)
 
+    # Create or get the user from database
+    db = next(get_db())
+    db_user = get_or_create_user_by_email(
+        session=db,
+        email=user["email"],
+        defaults={
+            "auth0_id": user["sub"],
+            "full_name": user.get("name"),
+            "picture": user.get("picture"),
+            "is_active": True,
+        },
+    )
+
+    # Store in session
     request.session["user"] = {
         "email": user["email"],
         "name": user.get("name"),
         "picture": user.get("picture"),
         "sub": user.get("sub"),
     }
+    request.session["user_id"] = str(db_user.id)
 
     return RedirectResponse(url="http://localhost:5173/collections")
 
 
-@router.get("/logout")
+@router.get("/logout", name="auth0_logout")
 async def logout(request: Request):
     request.session.clear()
-    return RedirectResponse(
-        url=f"https://{settings.AUTH0_DOMAIN}/v2/logout"
-            f"?client_id={settings.AUTH0_CLIENT_ID}"
-            f"&returnTo=http://localhost:5173"
-    )
-
-
-@router.get("/me")
-async def me(request: Request):
-    user = request.session.get("user")
-    return {"authenticated": bool(user), "user": user}
+    return {"detail": "Logged out"}

backend/src/auth/services.py

@@ -2,7 +2,7 @@
 from typing import Annotated, Any
 
 import jwt
-from fastapi import Depends, HTTPException, status, Request
+from fastapi import Depends, HTTPException, Request
 from fastapi.security import OAuth2PasswordBearer
 from jwt.exceptions import InvalidTokenError
 from passlib.context import CryptContext
@@ -42,10 +42,14 @@ def get_user_from_token(
     try:
         payload = jwt.decode(token, settings.SECRET_KEY, algorithms=[ALGORITHM])
         token_data = TokenPayload(**payload)
+
         user = session.get(User, token_data.sub)
+
         if not user or not user.is_active:
             raise HTTPException(status_code=401, detail="Invalid user")
+
         return user
+
     except (InvalidTokenError, ValidationError):
         raise HTTPException(status_code=403, detail="Invalid token")
 
@@ -55,18 +59,12 @@ def get_current_user(
     session: SessionDep,
     token: Annotated[str | None, Depends(OAuth2PasswordBearer(tokenUrl=f"{settings.API_V1_STR}/tokens", auto_error=False))] = None,
 ) -> User:
-    print("in get current user")
-    # Prefer session (Auth0 flow)
     session_user = request.session.get("user")
     if session_user:
-        print("Session user found:", session_user["email"])
-        res = get_user_from_session(request, session)
-        print("User from session:", res)
-        return res
-    # Fallback to token (JWT flow)
+        return get_user_from_session(request, session)
     if token:
         return get_user_from_token(session, token)
-    
+
     raise HTTPException(status_code=401, detail="Not authenticated")
 
 
@@ -83,15 +81,15 @@ def authenticate(*, session: Session, email: str, password: str) -> User | None:
     db_user = get_user_by_email(session=session, email=email)
     if not db_user:
         return None
-        
+
     # Auth0 users may not have a password
     if not db_user.hashed_password:
         # Return None for users without a password when using password authentication
         return None
-        
+
     if not verify_password(password, db_user.hashed_password):
         return None
-        
+
     return db_user
 
 

backend/src/core/config.py

@@ -30,6 +30,7 @@ class Settings(BaseSettings):
     SECRET_KEY: str = secrets.token_urlsafe(32)
     # 60 minutes * 24 hours * 8 days = 8 days
     ACCESS_TOKEN_EXPIRE_MINUTES: int = 60 * 24 * 8
+    AUTH_EXPIRE_MINUTES: int = 60 * 24 * 8
     DOMAIN: str = "localhost"
     ENVIRONMENT: Literal["local", "staging", "production"] = "local"
 
@@ -98,6 +99,6 @@ def _enforce_non_default_secrets(self) -> Self:
         self._check_default_secret("AUTH0_CLIENT_SECRET", self.AUTH0_CLIENT_SECRET)
 
         return self
-    
+
 
 settings = Settings()  # type: ignore

backend/src/main.py

@@ -30,11 +30,13 @@ def custom_generate_unique_id(route: APIRoute) -> str:
         allow_headers=["*"],
     )
 
+# Setup session middleware
 app.add_middleware(
     SessionMiddleware,
     secret_key=settings.SECRET_KEY,
     same_site="lax",  # adjust for production
-    https_only=False
+    https_only=False,
+    max_age=settings.AUTH_EXPIRE_MINUTES * 60,
 )
 
 app.include_router(api_router, prefix=settings.API_V1_STR)

backend/src/users/api.py

@@ -16,7 +16,6 @@ def read_user_me(request: Request, current_user: CurrentUser) -> Any:
     """
     Get current user.
     """
-    print("session content:", request.session)
     return current_user
 
 

frontend/src/components/commonUI/Drawer.tsx

@@ -13,10 +13,11 @@ import {
 import useAuth from '@/hooks/useAuth'
 import { getCollections } from '@/services/collections'
 import { HStack, IconButton, Image, List, Spinner, Text, VStack } from '@chakra-ui/react'
-import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { useQuery } from '@tanstack/react-query'
 import { Link, useNavigate } from '@tanstack/react-router'
 import { useTranslation } from 'react-i18next'
 import { FiLogOut, FiMoon, FiSun } from 'react-icons/fi'
+import { UsersService } from '@/client'
 import { DefaultButton } from './Button'
 import LanguageSelector from './LanguageSelector'
 
@@ -54,14 +55,23 @@ function Drawer({ isOpen, setIsOpen }: { isOpen: boolean; setIsOpen: (open: bool
   const { t } = useTranslation()
   const { logout } = useAuth()
   const { colorMode, toggleColorMode } = useColorMode()
-  const queryClient = useQueryClient()
-  const currentUser = queryClient.getQueryData<{ email: string }>(['currentUser'])
-  const flashcardsService = { getCollections }
   const navigate = useNavigate()
+  
+  const { data: currentUser } = useQuery({
+    queryKey: ['currentUser'],
+    queryFn: async () => {
+      try {
+        return await UsersService.readUserMe()
+      } catch (error) {
+        return null
+      }
+    }
+  })
 
+  // Fetch collections data
   const { data, isLoading } = useQuery({
     queryKey: ['collections'],
-    queryFn: flashcardsService.getCollections,
+    queryFn: getCollections,
     placeholderData: (prevData) => prevData,
   })
 

frontend/src/hooks/useAuthContext.tsx

@@ -1,5 +1,6 @@
 import type React from 'react'
 import { createContext, useContext, useEffect, useState } from 'react'
+import { UsersService } from '@/client'
 
 const GUEST_MODE_KEY = 'guest_mode'
 const ACCESS_TOKEN_KEY = 'access_token'
@@ -8,26 +9,47 @@ interface AuthContextType {
   isGuest: boolean
   isLoggedIn: boolean
   setGuestMode: (value: boolean) => void
-  logout: () => void
+  logout: () => Promise<void>
 }
 
 const AuthContext = createContext<AuthContextType | undefined>(undefined)
 
 function AuthProvider({ children }: { children: React.ReactNode }) {
   const [isGuest, setIsGuest] = useState(() => localStorage.getItem(GUEST_MODE_KEY) === 'true')
-  const [isLoggedIn, setIsLoggedIn] = useState(
-    () =>
-      Boolean(localStorage.getItem(ACCESS_TOKEN_KEY)) ||
-      localStorage.getItem(GUEST_MODE_KEY) === 'true',
+  const [isLoggedIn, setIsLoggedIn] = useState(() => 
+    Boolean(localStorage.getItem(ACCESS_TOKEN_KEY)) || localStorage.getItem(GUEST_MODE_KEY) === 'true'
   )
 
   useEffect(() => {
+    console.log("isLoggedIn", isLoggedIn)
+
+    const checkUser = async () => {
+      if (localStorage.getItem(GUEST_MODE_KEY) === 'true') {
+        setIsLoggedIn(true)
+        return
+      }
+
+      try {
+        const user = await UsersService.readUserMe()
+        if (user) {
+          setIsLoggedIn(true)
+        }
+      } catch (error) {
+        console.error('Error fetching user:', error)
+      }
+    }
+    checkUser()
+  }, [])
+
+  useEffect(() => {
+    console.log('AuthProvider mounted')
     const handleStorage = (e: StorageEvent) => {
+      console.log('Storage event:', e.key)
       if (e.key === GUEST_MODE_KEY || e.key === ACCESS_TOKEN_KEY) {
         setIsGuest(localStorage.getItem(GUEST_MODE_KEY) === 'true')
         setIsLoggedIn(
           Boolean(localStorage.getItem(ACCESS_TOKEN_KEY)) ||
-            localStorage.getItem(GUEST_MODE_KEY) === 'true',
+            localStorage.getItem(GUEST_MODE_KEY) === 'true'
         )
       }
     }
@@ -45,7 +67,15 @@ function AuthProvider({ children }: { children: React.ReactNode }) {
     setIsLoggedIn(value || Boolean(localStorage.getItem(ACCESS_TOKEN_KEY)))
   }
 
-  const logout = () => {
+  const logout = async () => {
+    try {
+      await fetch('http://localhost:8000/api/v1/auth0/logout', {
+        method: 'GET',
+        credentials: 'include',
+      })
+    } catch (e) {
+      console.error('Logout request failed', e)
+    }
     localStorage.removeItem(ACCESS_TOKEN_KEY)
     setGuestMode(false)
     setIsLoggedIn(false)
@@ -64,4 +94,4 @@ function useAuthContext() {
   return ctx
 }
 
-export { AuthProvider, useAuthContext }
+export { AuthProvider, useAuthContext }

frontend/src/routes/_layout.tsx

@@ -1,33 +1,26 @@
 import Navbar from '@/components/commonUI/Navbar'
 import { Toaster } from '@/components/ui/toaster'
+import { UsersService } from '@/client'
 import { Container } from '@chakra-ui/react'
 import { Outlet, createFileRoute, redirect } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/_layout')({
   component: Layout,
   beforeLoad: async () => {
-    // ✅ Auth check using backend session-aware endpoint
+    const isGuest = localStorage.getItem('guest_mode') === 'true';
+    if (isGuest) {
+      return;
+    }
     try {
-      const res = await fetch('http://localhost:8000/api/v1/users/me', {
-        credentials: 'include', // 🔒 Required to send session cookie
-      })
-
-      console.log("res:", res)
-
-      const data = await res.json()
-      console.log("data:", data)
-      const isLoggedIn = data?.email != null
-      const isGuest = localStorage.getItem('guest_mode') === 'true'
-    
-      if (!isLoggedIn && !isGuest) {
-        console.log("Not logged in or guest")
-        throw redirect({ to: '/login' })
+      const user = await UsersService.readUserMe();
+      if (!user) {
+        throw redirect({ to: '/login' });
       }
     } catch (err) {
-      console.error('Failed to check auth state:', err)
-      throw redirect({ to: '/login' })
+      console.error('Failed to check auth state:', err);
+      throw redirect({ to: '/login' });
     }
-  },
+  }
 })
 
 function Layout() {