feat: load user data to state (freeCodeCamp-2025-Summer-Hackathon#149)

Author: gikf

backend/src/api/routes/auth.py

@@ -1,6 +1,6 @@
 from typing import Annotated
 
-from fastapi import APIRouter, Depends, HTTPException
+from fastapi import APIRouter, Cookie, Depends, HTTPException, Response
 from fastapi.security import OAuth2PasswordRequestForm
 
 from src.auth import (
@@ -10,7 +10,7 @@
     refresh_access_token,
 )
 from src.dependencies import Db
-from src.models import Token
+from src.models import LoginData, RefreshToken, Token, UserMe
 
 router = APIRouter()
 
@@ -19,7 +19,8 @@
 async def login_for_access_token(
     db: Db,
     form_data: Annotated[OAuth2PasswordRequestForm, Depends()],
-) -> Token:
+    response: Response,
+) -> LoginData:
     user = await authenticate_user(db, form_data.username, form_data.password)
     if not user:
         raise HTTPException(
@@ -30,12 +31,21 @@ async def login_for_access_token(
     access_token = create_access_token(
         data={"sub": str(user.id)},
     )
-    refresh_token = create_refresh_token(data={"sub": str(user.id)})
-    return Token(
-        access_token=access_token, refresh_token=refresh_token, token_type="bearer"
+    (refresh_token, expiration) = create_refresh_token(data={"sub": str(user.id)})
+    response.set_cookie(
+        "refresh_token",
+        refresh_token,
+        httponly=True,
+        expires=int(expiration.total_seconds()),
+    )
+    return LoginData(
+        user_data=UserMe(**user.model_dump()),
+        token=Token(access_token=access_token, token_type="bearer"),
     )
 
 
-@router.post("/refresh")
-async def get_new_access_token(db: Db, refresh_token: str):
-    return await refresh_access_token(db, refresh_token)
+@router.get("/refresh")
+async def get_new_access_token(
+    db: Db, refresh_token: Annotated[RefreshToken, Cookie()]
+) -> Token:
+    return Token(**(await refresh_access_token(db, refresh_token.refresh_token)))

backend/src/auth.py

@@ -1,5 +1,5 @@
 from datetime import UTC, datetime, timedelta
-from typing import Annotated
+from typing import Annotated, Literal
 
 import jwt
 from fastapi import Depends, HTTPException, status
@@ -28,7 +28,7 @@ def get_password_hash(plain_password):
     return password_context.hash(plain_password)
 
 
-async def authenticate_user(db, username, plain_password):
+async def authenticate_user(db, username, plain_password) -> User | Literal[False]:
     user = await db.find_one(User, User.username == username)
     if not user:
         return False
@@ -54,7 +54,7 @@ def create_access_token(
 def create_refresh_token(
     data: dict, expires_delta: timedelta = REFRESH_TOKEN_EXPIRE_MINUTES
 ):
-    return create_access_token(data, expires_delta)
+    return create_access_token(data, expires_delta), expires_delta
 
 
 credentials_exception = HTTPException(

backend/src/main.py

@@ -6,9 +6,10 @@
 from fastapi_csrf_protect.exceptions import CsrfProtectError
 
 from src.api.main import api_router
-from src.auth import User, get_current_active_user
+from src.auth import get_current_active_user
 from src.config import get_settings
 from src.csrf import verify_csrf
+from src.models import User, UserMe
 
 app = FastAPI(dependencies=[Depends(verify_csrf)])
 
@@ -50,7 +51,7 @@ async def csrf_protect_exception_handler(request: Request, exc: CsrfProtectError
 
 @app.get("/me")
 async def get_me(current_user: Annotated[User, Depends(get_current_active_user)]):
-    return current_user
+    return UserMe(**current_user.model_dump())
 
 
 @app.get("/")

backend/src/models.py

@@ -12,6 +12,16 @@ class User(Model):
     downvotes: list[ObjectId] = []
 
 
+class UserMe(BaseModel):
+    id: ObjectId
+    username: str
+    name: str
+    is_active: bool
+    is_admin: bool
+    upvotes: list[ObjectId]
+    downvotes: list[ObjectId]
+
+
 class UserPublic(BaseModel):
     id: ObjectId
     name: str = Field(max_length=255)
@@ -78,9 +88,17 @@ class Message(BaseModel):
 
 class Token(BaseModel):
     access_token: str
-    refresh_token: str
     token_type: str
 
 
+class RefreshToken(BaseModel):
+    refresh_token: str
+
+
 class TokenData(BaseModel):
     id: ObjectId | None = None
+
+
+class LoginData(BaseModel):
+    user_data: UserMe
+    token: Token

frontend/src/components/IdeaListItem.jsx

@@ -2,21 +2,24 @@ import { useState } from 'react';
 import { Link } from 'react-router';
 
 import { UpvoteButton } from './VoteButtons';
+import { useUser } from '../hooks/useUser';
 
 export const IdeaListItem = ({ id, name, upvoted_by }) => {
+  const { userState, dispatch } = useUser();
   const [idea, setIdea] = useState({
     id,
     name,
     upvotes: upvoted_by.length,
   });
-  const [isUpvoted, setIsUpvoted] = useState(false);
+  const [isUpvoted, setIsUpvoted] = useState(userState?.upvotes?.has(id));
 
   const onSuccess = () => {
     if (!isUpvoted) {
       setIdea(idea => ({
         ...idea,
         upvotes: idea.upvotes + 1,
       }));
+      dispatch({ type: 'upvote', ideaId: id });
       setIsUpvoted(true);
     }
   };

frontend/src/components/VoteButtons.jsx

@@ -78,34 +78,42 @@ const Button = ({
   );
 };
 
-export const DownvoteButton = ({ ideaId, onSuccess, onError }) => (
-  <Button
-    {...{
-      buttonProps: {
-        className: 'image-only-downvote-button',
-      },
-      buttonContents: <>downvote</>,
-      fetchAddr: `/ideas/${ideaId}/downvote`,
-      ideaId,
-      onSuccess,
-      onError,
-    }}
-  />
-);
+export const DownvoteButton = ({ ideaId, onSuccess, onError }) => {
+  const { userState } = useUser();
+  return (
+    <Button
+      {...{
+        buttonProps: {
+          className: 'image-only-downvote-button',
+          ...{ ...(userState.downvotes.has(ideaId) && { disabled: true }) },
+        },
+        buttonContents: <>downvote</>,
+        fetchAddr: `/ideas/${ideaId}/downvote`,
+        ideaId,
+        onSuccess,
+        onError,
+      }}
+    />
+  );
+};
 
-export const UpvoteButton = ({ ideaId, onSuccess, onError }) => (
-  <Button
-    {...{
-      buttonProps: {
-        className: 'image-only-upvote-button',
-      },
-      buttonContents: (
-        <img src={UpvoteImg} alt='Upvote' className='upvote-icon' />
-      ),
-      fetchAddr: `/ideas/${ideaId}/upvote`,
-      ideaId,
-      onSuccess,
-      onError,
-    }}
-  />
-);
+export const UpvoteButton = ({ ideaId, onSuccess, onError }) => {
+  const { userState } = useUser();
+  return (
+    <Button
+      {...{
+        buttonProps: {
+          className: 'image-only-upvote-button',
+          ...{ ...(userState.upvotes.has(ideaId) && { disabled: true }) },
+        },
+        buttonContents: (
+          <img src={UpvoteImg} alt='Upvote' className='upvote-icon' />
+        ),
+        fetchAddr: `/ideas/${ideaId}/upvote`,
+        ideaId,
+        onSuccess,
+        onError,
+      }}
+    />
+  );
+};

frontend/src/hooks/useApi.js

@@ -47,7 +47,7 @@ export const useApi = ({ method = 'GET', loadingInitially = false }) => {
       };
     }
 
-    return options;
+    return { ...options, credentials: 'include' };
   }, []);
 
   // TODO handle responses when access_token is no longer valid -> refreshing it with refresh_token

frontend/src/pages/Ideas/IdeaPage.jsx

@@ -8,10 +8,12 @@ import { DownvoteButton, UpvoteButton } from '../../components/VoteButtons';
 
 export const IdeaPage = () => {
   const { ideaId } = useParams();
-  const { isLogged } = useUser();
+  const { isLogged, userState, upvote, downvote } = useUser();
   const [loading, setLoading] = useState(true);
-  const [isUpvoted, setIsUpvoted] = useState(false);
-  const [isDownvoted, setIsDownvoted] = useState(false);
+  const [isUpvoted, setIsUpvoted] = useState(userState.upvotes.has(ideaId));
+  const [isDownvoted, setIsDownvoted] = useState(
+    userState.downvotes.has(ideaId)
+  );
   const { error, data, fetchFromApi } = useApi({
     loadingInitially: true,
   });
@@ -25,6 +27,7 @@ export const IdeaPage = () => {
         upvotes: idea.upvotes + 1,
         ...(isDownvoted && { downvotes: idea.downvotes - 1 }),
       }));
+      upvote(ideaId);
       setIsUpvoted(true);
     }
   };
@@ -40,6 +43,7 @@ export const IdeaPage = () => {
         downvotes: idea.downvotes + 1,
         ...(isUpvoted && { upvotes: idea.upvotes - 1 }),
       }));
+      downvote(ideaId);
       setIsDownvoted(true);
     }
   };