Finished implementing frontend and backend authenication for user login

Author: Vignesh-30

backend/user-service/src/app.module.ts

@@ -2,9 +2,10 @@ import { Module } from '@nestjs/common';
 import { AppController } from './app.controller';
 import { AppService } from './app.service';
 import { AuthModule } from './auth/auth.module';
+import { ConfigModule } from '@nestjs/config';
 
 @Module({
-  imports: [AuthModule],
+  imports: [AuthModule, ConfigModule.forRoot()],
   controllers: [AppController],
   providers: [AppService],
 })

backend/user-service/src/auth/auth.controller.ts

@@ -9,9 +9,8 @@ export class AuthController {
 	@Post('/google/callback')
 	async handleRedirect(@Req() req: Request, @Res() res: Response) {
 		console.log("HELLLO")
-		const {code} = req.body
-		const tokens = await this.authService.exchangeCodeForTokens(code)
-		console.log(tokens)
+		const {token} = req.body
+		const tokens = await this.authService.verifyJWTToken(token)
 		res.json(tokens);
 	}
 }

backend/user-service/src/auth/auth.module.ts

@@ -1,12 +1,24 @@
 import { Module } from '@nestjs/common';
 import { AuthController } from './auth.controller';
 import { AuthService } from './auth.service';
-import { ConfigModule } from '@nestjs/config';
+import { ConfigModule, ConfigService } from '@nestjs/config';
+import { JwtModule } from '@nestjs/jwt'
+import { jwtSecretKey } from './constants';
+
 // import { GoogleStrategy } from './utils/google.strategy';
 
 @Module({
-  imports: [ConfigModule],
+  imports: [ConfigModule,
+    JwtModule.registerAsync({
+      imports: [ConfigModule],
+      useFactory: async (configService: ConfigService) => ({
+        secret: configService.get<string>('JWT_SECRET'),
+        global: true
+      }),
+      inject: [ConfigService]
+    })
+  ],
   controllers: [AuthController],
   providers: [AuthService]
 })
-export class AuthModule {}
+export class AuthModule { }

backend/user-service/src/auth/auth.service.ts

@@ -1,23 +1,32 @@
 import { Injectable } from '@nestjs/common';
+import { ConfigService } from '@nestjs/config';
 import { OAuth2Client } from 'google-auth-library';
+import { JwtService } from '@nestjs/jwt';
 
 @Injectable()
 export class AuthService {
-	private oAuth2Client: OAuth2Client;
+  private oAuth2Client: OAuth2Client;
+  private clientID: string;
+  private clientSecret: string;
 
-  constructor() {
-    this.oAuth2Client = new OAuth2Client('350585476549-mild3b1ggbtd57t4sduk8qlc7d8suq66.apps.googleusercontent.com', 
-		'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', 'http://localhost:3000');
+  constructor(private configService: ConfigService, private jwtService: JwtService) {
+    this.clientID = configService.get<string>('GOOGLE_CLIENT_ID');
+    this.clientSecret = configService.get<string>('GOOGLE_CLIENT_SECRET');
+    this.oAuth2Client = new OAuth2Client(this.clientID, this.clientSecret, 'http://localhost:3000');
   }
 
-  async exchangeCodeForTokens(code: string) {
-    try {
-      const { tokens } = await this.oAuth2Client.getToken(code);
-
-      return tokens; // Contains access_token, refresh_token, and id_token
-    } catch (error) {
-		
-    }
+  async verifyJWTToken(jwtToken: string) {
+    const loginTicket = await this.oAuth2Client.verifyIdToken({
+      idToken: jwtToken,
+      audience: this.clientID
+    })
+    const payload = loginTicket.getPayload();
+    console.log("PAYLOAD")
+    console.log(payload);
+    const tokenData = { sub: payload['sub'], email: payload['email'], name: payload['name'], picture: payload['picture'] }
+    const accessToken = await this.jwtService.signAsync(tokenData, { expiresIn: 60 });
+    console.log("THIS IS THE TOKEN ", accessToken);
+    return {jwtToken: accessToken};
   }
 
 }

backend/user-service/src/auth/constants.ts

@@ -0,0 +1,3 @@
+export const jwtSecretKey = {
+	secret: 'eu97kF3Uc86bCrNthxsLTyv4PKaZw2WJ',
+  };

frontend/package-lock.json

@@ -8,6 +8,9 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.7.7",
+    "js-cookie": "^3.0.5",
+    "jsonwebtoken": "^9.0.2",
+    "jwt-decode": "^4.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.2",

frontend/package.json

@@ -1,14 +1,20 @@
 import logo from './logo.svg';
 import { Route, Routes } from 'react-router-dom'
-import HomePage from './pages/HomePage'
+import LoginPage from './pages/LoginPage'
+import ProfilePage from './pages/ProfilePage'
 import './App.css';
+import { UserContextProvider } from './UserContextProvider';
 
 
 function App() {
   return (
-    <Routes>
-      <Route path='/' element={<HomePage />}/>
-    </Routes>
+    <UserContextProvider>
+      <Routes>
+        <Route path='/' element={<LoginPage />} />
+        <Route path='/login' element={<LoginPage />} />
+        <Route path='/profile' element={<ProfilePage />} />
+      </Routes>
+    </UserContextProvider>
   );
 }
 

frontend/src/App.js

@@ -0,0 +1,35 @@
+import React, { useState, createContext, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { jwtDecode } from 'jwt-decode';
+
+export const UserContext = createContext({});
+
+export function UserContextProvider({ children }) {
+	const [token, setToken] = useState(null);
+	const [loggedIn, setLoggedIn] = useState(false);
+	const navigate = useNavigate();
+
+	const isTokenValid = (token) => {
+		const decodedToken = jwtDecode(token);
+		const currentTime = Date.now() / 1000;
+		console.log("decoded", decodedToken);
+		return decodedToken.exp > currentTime;
+	};
+
+	useEffect(() => {
+		const jwtToken = localStorage.getItem("access_token");
+		if (jwtToken && isTokenValid(jwtToken)) {
+			setToken(jwtToken);
+			setLoggedIn(true);
+		} else {
+			localStorage.removeItem('jwtToken');
+			navigate('/');
+		}
+	}, [navigate]);
+
+	return (
+		<UserContext.Provider value={{ token, setToken, loggedIn }}>
+			{children}
+		</UserContext.Provider>
+	);
+}