Add Google Auth0 to authenticate users

.github/workflows/pr-tests.yml

@@ -21,11 +21,9 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: '20'
-          cache: 'npm'
-          cache-dependency-path: './client/package-lock.json'
 
       - name: Install dependencies
-        run: npm ci
+        run: npm install
 
       - name: Run tests
         run: npm run test

client/eslint.config.js

@@ -7,6 +7,7 @@ import pluginReact from "eslint-plugin-react";
 /** @type {import('eslint').Linter.Config[]} */
 export default [
   {files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"]},
+  {ignores: ["**/node_modules/**", "**/dist/**"]},
   {languageOptions: { globals: globals.browser }},
   pluginJs.configs.recommended,
   ...tseslint.configs.recommended,

client/src/configs/env_handler.tsx

@@ -1 +1,3 @@
 export const API_URL = import.meta.env.VITE_API_URL;
+
+export const GOOGLE_CLIENT_ID = import.meta.env.VITE_GOOGLE_CLIENT_ID;

client/src/main.tsx

@@ -7,6 +7,8 @@ import Preloader from "./components/Preloader.component";
 import { PreloaderProvider } from "./contexts/preloader_provider";
 import { ThemeProvider } from "./contexts/theme_provider";
 import { Footer } from "./components/footer.component";
+import { GoogleOAuthProvider } from "@react-oauth/google";
+import { GOOGLE_CLIENT_ID } from "./configs/env_handler";
 
 const App = () => {
   return (
@@ -28,14 +30,16 @@ const App = () => {
 };
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <PreloaderProvider>
-      <ThemeProvider>
-        <Preloader />
+    <React.StrictMode>
+      <GoogleOAuthProvider clientId={GOOGLE_CLIENT_ID}>
+      <PreloaderProvider>
+        <ThemeProvider>
+          <Preloader />
         <App/>
         <Footer />
-      </ThemeProvider>
-    </PreloaderProvider>
+        </ThemeProvider>
+      </PreloaderProvider>
+    </GoogleOAuthProvider>
     <ToastContainer />
   </React.StrictMode>
 );

client/src/network/api_axios.tsx

@@ -51,10 +51,37 @@ export async function isAuthenticated(){
     }
 
     try {
-        const response = await instance.get(`/auth/session/check?token=${token}`);
+        const response = await instance.get('/auth/session/check');
         return response.data;
     } catch (error) {
         console.log(error);
         return false;
     }
+}
+
+export async function login(email: string, password: string){
+    const response = await instance.post("/auth/login", {
+        email,
+        password
+    });
+
+    if(response.data.session){
+        localStorage.setItem("apiToken", response.data.session_token);
+        localStorage.setItem("user", JSON.stringify(response.data.user));
+    }
+
+    return response.data;
+}
+
+export async function googleLogin(credential: string){
+    const response = await instance.post("/auth/google-login", {
+        credential
+    });
+
+    if(response.data.session){
+        localStorage.setItem("apiToken", response.data.session_token);
+        localStorage.setItem("user", JSON.stringify(response.data.user));
+    }
+
+    return response.data;
 }

client/src/views/login.view.tsx

@@ -1,9 +1,112 @@
-export const Login = () => {    
+import React, { useState } from "react";
+import { CredentialResponse, GoogleLogin } from "@react-oauth/google";
+import { useNavigate } from "react-router-dom";
+import { login, googleLogin } from "../network/api_axios";
+
+export const Login: React.FC = () => {
+    const navigate = useNavigate();
+    const [loginLoading, setLoginLoading] = useState(false);
+    const [googleLoginLoading, setGoogleLoginLoading] = useState(false);
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+
+    const handleSubmit = async (event: React.FormEvent) => {
+        event.preventDefault();
+        setLoginLoading(true);
+        try {
+            const response = await login(email, password); 
+            console.log(response);
+            navigate("/");
+        } catch (error) {
+            alert(error);
+        }
+        setLoginLoading(false);
+    };
+
+    const handleGoogleLogin = async (credentialResponse: CredentialResponse) => {
+        setGoogleLoginLoading(true);
+        try {
+            await googleLogin(credentialResponse.credential!);
+            navigate("/");
+        } catch (error) {
+            alert(error);
+        }
+        setGoogleLoginLoading(false);
+    };
+
     return (
-        <>
-            <div>
-                <h1 className="text-2xl font-bold">Login</h1>
+        <div className="flex items-center justify-center min-h-screen">
+            <div className="w-full max-w-md p-8 space-y-8 bg-white rounded-lg shadow-lg">
+                <div className="mb-4 text-center">
+                    {googleLoginLoading ? (
+                        <div className="text-gray-500">Loading...</div>
+                    ) : (
+                        <div className="flex justify-center">
+                            <GoogleLogin
+                                onSuccess={handleGoogleLogin}
+                                onError={() => {
+                                    console.log("Login Failed");
+                                    alert("Login Failed");
+                                }}
+                                theme="outline"
+                                shape="circle"
+                                text="signup_with"
+                            />
+                        </div>
+                    )}
+                </div>
+
+                <div className="relative flex items-center py-5">
+                    <div className="flex-grow border-t border-gray-300"></div>
+                    <span className="flex-shrink mx-4 text-gray-500">OR</span>
+                    <div className="flex-grow border-t border-gray-300"></div>
+                </div>
+
+                <form onSubmit={handleSubmit} className="space-y-6">
+                    <div>
+                        <label htmlFor="email" className="block text-sm font-medium text-gray-700">
+                            Email:
+                        </label>
+                        <input
+                            type="email"
+                            id="email"
+                            value={email}
+                            onChange={e => setEmail(e.target.value)}
+                            className="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:outline-none"
+                        />
+                    </div>
+
+                    <div>
+                        <label htmlFor="password" className="block text-sm font-medium text-gray-700">
+                            Parolă:
+                        </label>
+                        <input
+                            type="password"
+                            id="password"
+                            value={password}
+                            onChange={e => setPassword(e.target.value)}
+                            className="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:outline-none"
+                        />
+                    </div>
+
+                    <button
+                        type="submit"
+                        className="w-full rounded-md bg-[#FFAE1F] px-4 py-2 text-white hover:bg-[#E59C1C] focus:outline-none focus:ring-2 focus:ring-[#FFAE1F] focus:ring-offset-2"
+                    >
+                        {loginLoading ? "Loading..." : "Autentificare"}
+                    </button>
+
+                    <button
+                        type="button"
+                        onClick={() => navigate('/signup')}
+                        className="w-full px-4 py-2 text-white bg-gray-600 rounded-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
+                    >
+                        Crează cont
+                    </button>
+                </form>
             </div>
-        </>
-    )
-}
+        </div>
+    );
+};
+
+export default Login;

genezio.yaml

@@ -13,6 +13,7 @@ frontend:
             - npm run dev
     environment:
         VITE_API_URL: ${{ backend.functions.fastapi.url }}
+    subdomain: blue-genetic-wildfowl
 backend:
     path: server
     language:
@@ -25,7 +26,7 @@ backend:
           entry: app.py
           type: httpServer
 services:
-  databases:
-    - name: mongo-db
-      region: eu-central-1
-      type: mongo-atlas
+    databases:
+        - name: mongo-db
+          region: eu-central-1
+          type: mongo-atlas

server/config/env_handler.py

@@ -16,6 +16,8 @@
 SMTP_PASSWORD = os.getenv('SMTP_PASSWORD')
 OTP_EXPIRATION_MINUTES = int(os.getenv('OTP_EXPIRATION_MINUTES'))
 OTP_CODE_LENGTH = int(os.getenv('OTP_CODE_LENGTH'))
+GOOGLE_CLIENT_ID = os.getenv('GOOGLE_CLIENT_ID')
+GOOGLE_CLIENT_SECRET = os.getenv('GOOGLE_CLIENT_SECRET')
 
 if ENVIRONMENT == 'development':
     APP_URL = f'http://localhost:{PORT}'

server/controllers/auth_controller.py

@@ -2,14 +2,18 @@
 from beanie import PydanticObjectId
 from datetime import datetime, timedelta
 from models.user import User
-from dtos.user import UserInput, UserUpdate, UserLogin, UserLogout
+from dtos.user import UserInput, UserUpdate, UserLogin, UserLogout, GoogleLogin
 from models.active_session import ActiveSession
 from controllers.session_controller import SessionController
 from utils.jwt_helper import create_access_token, hash_password, verify_password
 from utils.validate_helper import is_valid_email, is_valid_password
 from utils.otp_helper import generate_otp_code, is_otp_code_valid
 from services.email_service import email_service
 from config.otp_email_template import otp_email_template
+from config.env_handler import GOOGLE_CLIENT_ID
+from google.oauth2 import id_token
+from google.auth.transport import requests
+from typing import Tuple
 
 class AuthController:
     @staticmethod
@@ -99,3 +103,43 @@ async def verify_otp(otp_code: str):
         await user.save()
 
         return user
+
+    @staticmethod
+    async def google_login(credential: GoogleLogin) -> Tuple[User, str]:
+        if not credential.credential:
+            raise HTTPException(status_code=400, detail="Invalid credential")
+
+        try:
+            idinfo = id_token.verify_oauth2_token(
+                credential.credential, 
+                requests.Request(), 
+                GOOGLE_CLIENT_ID
+            )
+
+            email = idinfo['email']
+
+            user = await User.find_one({"email": email})
+
+            if user and user.auth_provider != "google":
+                raise HTTPException(
+                    status_code=400, 
+                    detail="An account with this email already exists. Please login with email and password."
+                )
+
+            if not user:
+                user = User(
+                    username=idinfo['name'],
+                    email=email,
+                    profile_picture=idinfo.get('picture'),
+                    auth_provider="google",
+                    verified=True
+                )
+                await user.insert()
+
+            session_token = create_access_token({"sub": str(user.id)})
+            await SessionController.add_session(session_token, user.id)
+
+            return user, session_token
+
+        except ValueError:
+            raise HTTPException(status_code=400, detail="Invalid Google token")

server/controllers/session_controller.py

@@ -1,5 +1,6 @@
 from models.active_session import ActiveSession
-from datetime import datetime
+from datetime import datetime, timedelta
+from config.env_handler import ACCESS_TOKEN_EXPIRE_MINUTES
 
 class SessionController:
     @staticmethod
@@ -14,7 +15,7 @@ async def get_session_by_user_id(user_id: str):
 
     @staticmethod
     async def add_session(session_token: str, user_id: str):
-        new_session = ActiveSession(session_token=session_token, user_id=user_id)
+        new_session = ActiveSession(session_token=session_token, user_id=user_id, expire_at=datetime.now() + timedelta(minutes=ACCESS_TOKEN_EXPIRE_MINUTES), created_at=datetime.now())
         response = await new_session.insert()
 
         return response
@@ -40,7 +41,7 @@ async def check_session_expiration(session_token: str):
         session = await ActiveSession.find_one({"session_token": session_token})
         if not session:
             return False
-        if session.expiration_time < datetime.now():
+        if session.expire_at < datetime.now():
             await session.delete()
             return False
         return True
@@ -50,7 +51,7 @@ async def check_session_expiration_by_user_id(user_id: str):
         session = await ActiveSession.find_one({"user_id": user_id})
         if not session:
             return False
-        if session.expiration_time < datetime.now():
+        if session.expire_at < datetime.now():
             await session.delete()
             return False
         return True

server/dtos/user.py

@@ -19,3 +19,6 @@ class UserLogin(BaseModel):
 
 class UserLogout(BaseModel):
     session_token: str
+
+class GoogleLogin(BaseModel):
+    credential: str

server/models/user.py

@@ -11,4 +11,5 @@ class User(Document):
     otp_expiration: Optional[datetime] = None
     verified: bool = False
     created_at: datetime = datetime.now()
-    updated_at: datetime = datetime.now()
+    updated_at: datetime = datetime.now()
+    profile_picture: Optional[str] = None

server/requirements.txt

@@ -11,3 +11,5 @@ pyjwt
 bcrypt
 pytest-asyncio
 httpx
+google-auth
+requests