Implement Refresh Token

backend/.env.development

@@ -16,7 +16,10 @@ GITHUB_CALLBACK_URL=http://localhost:3000/auth/login/github
 
 # JWT_AUTH_SECRET: Secret key for JWT authentication.
 # This key is used to sign and verify JWT tokens.
-JWT_AUTH_SECRET=you_should_change_this_secret_key_in_production
+JWT_ACCESS_TOKEN_SECRET=you_should_change_this_secret_key_in_production
+JWT_ACCESS_TOKEN_EXPIRATION_TIME=86400
+JWT_REFRESH_TOKEN_SECRET=you_should_change_this_secret_key_in_production
+JWT_REFRESH_TOKEN_EXPIRATION_TIME=604800
 
 # FRONTEND_BASE_URL: Base URL of the frontend application.
 # This URL is used for redirecting after authentication, etc.

backend/src/auth/auth.controller.ts

@@ -1,20 +1,28 @@
-import { Controller, Get, HttpRedirectResponse, Redirect, Req, UseGuards } from "@nestjs/common";
+import {
+	Body,
+	Controller,
+	Get,
+	HttpRedirectResponse,
+	Post,
+	Redirect,
+	Req,
+	UseGuards,
+} from "@nestjs/common";
+import { ConfigService } from "@nestjs/config";
 import { AuthGuard } from "@nestjs/passport";
+import { ApiOperation, ApiResponse, ApiTags } from "@nestjs/swagger";
+import { Public } from "src/utils/decorators/auth.decorator";
+import { AuthService } from "./auth.service";
 import { LoginRequest } from "./types/login-request.type";
-import { JwtService } from "@nestjs/jwt";
 import { LoginResponse } from "./types/login-response.type";
-import { UsersService } from "src/users/users.service";
-import { Public } from "src/utils/decorators/auth.decorator";
-import { ApiOperation, ApiResponse, ApiTags } from "@nestjs/swagger";
-import { ConfigService } from "@nestjs/config";
+import { RefreshTokenRequest } from "./types/refresh-token-request.type";
 
 @ApiTags("Auth")
 @Controller("auth")
 export class AuthController {
 	constructor(
-		private configService: ConfigService,
-		private jwtService: JwtService,
-		private usersService: UsersService
+		private readonly authService: AuthService,
+		private configService: ConfigService
 	) {}
 
 	@Public()
@@ -28,16 +36,21 @@ export class AuthController {
 	})
 	@ApiResponse({ type: LoginResponse })
 	async login(@Req() req: LoginRequest): Promise<HttpRedirectResponse> {
-		const user = await this.usersService.findOrCreate(
-			req.user.socialProvider,
-			req.user.socialUid
-		);
-
-		const accessToken = this.jwtService.sign({ sub: user.id, nickname: user.nickname });
+		const { accessToken, refreshToken } = await this.authService.loginWithGithub(req);
 
 		return {
-			url: `${this.configService.get("FRONTEND_BASE_URL")}/auth/callback?token=${accessToken}`,
+			url: `${this.configService.get("FRONTEND_BASE_URL")}/auth/callback?accessToken=${accessToken}&refreshToken=${refreshToken}`,
 			statusCode: 302,
 		};
 	}
+
+	@Public()
+	@Post("refresh")
+	@UseGuards(AuthGuard("refresh"))
+	@ApiOperation({ summary: "Refresh Access Token" })
+	@ApiResponse({ type: LoginResponse })
+	async refresh(@Body() body: RefreshTokenRequest): Promise<{ accessToken: string }> {
+		const accessToken = await this.authService.getNewAccessToken(body.refreshToken);
+		return { accessToken };
+	}
 }

backend/src/auth/auth.module.ts

@@ -1,10 +1,11 @@
 import { Module } from "@nestjs/common";
-import { AuthService } from "./auth.service";
+import { ConfigService } from "@nestjs/config";
+import { JwtModule } from "@nestjs/jwt";
 import { UsersModule } from "src/users/users.module";
 import { AuthController } from "./auth.controller";
+import { AuthService } from "./auth.service";
 import { GithubStrategy } from "./github.strategy";
-import { ConfigService } from "@nestjs/config";
-import { JwtModule } from "@nestjs/jwt";
+import { JwtRefreshStrategy } from "./jwt-refresh.strategy";
 import { JwtStrategy } from "./jwt.strategy";
 
 @Module({
@@ -14,14 +15,16 @@ import { JwtStrategy } from "./jwt.strategy";
 			useFactory: async (configService: ConfigService) => {
 				return {
 					global: true,
-					signOptions: { expiresIn: "24h" },
-					secret: configService.get<string>("JWT_AUTH_SECRET"),
+					signOptions: {
+						expiresIn: `${configService.get("JWT_ACCESS_TOKEN_EXPIRATION_TIME")}s`,
+					},
+					secret: configService.get<string>("JWT_ACCESS_TOKEN_SECRET"),
 				};
 			},
 			inject: [ConfigService],
 		}),
 	],
-	providers: [AuthService, GithubStrategy, JwtStrategy],
+	providers: [AuthService, GithubStrategy, JwtStrategy, JwtRefreshStrategy],
 	controllers: [AuthController],
 })
 export class AuthModule {}

backend/src/auth/auth.service.spec.ts

@@ -1,18 +1,64 @@
+import { ConfigModule } from "@nestjs/config";
+import { JwtService } from "@nestjs/jwt";
 import { Test, TestingModule } from "@nestjs/testing";
+import { UsersService } from "../users/users.service";
 import { AuthService } from "./auth.service";
 
 describe("AuthService", () => {
 	let service: AuthService;
+	let jwtService: JwtService;
 
 	beforeEach(async () => {
 		const module: TestingModule = await Test.createTestingModule({
-			providers: [AuthService],
+			imports: [ConfigModule.forRoot()],
+			providers: [
+				AuthService,
+				{
+					provide: UsersService,
+					useValue: {
+						findOrCreate: jest
+							.fn()
+							.mockResolvedValue({ id: "123", nickname: "testuser" }),
+					},
+				},
+				{
+					provide: JwtService,
+					useValue: {
+						sign: jest.fn().mockReturnValue("signedToken"),
+						verify: jest.fn().mockReturnValue({ sub: "123", nickname: "testuser" }),
+					},
+				},
+			],
 		}).compile();
 
 		service = module.get<AuthService>(AuthService);
+		jwtService = module.get<JwtService>(JwtService);
 	});
 
 	it("should be defined", () => {
 		expect(service).toBeDefined();
 	});
+
+	describe("getNewAccessToken", () => {
+		it("should generate a new access token using refresh token", async () => {
+			const newToken = await service.getNewAccessToken("refreshToken");
+
+			expect(newToken).toBe("signedToken");
+			expect(jwtService.verify).toHaveBeenCalledWith("refreshToken");
+			expect(jwtService.sign).toHaveBeenCalledWith(
+				{ sub: "123", nickname: "testuser" },
+				expect.any(Object)
+			);
+		});
+
+		it("should throw an error if refresh token is invalid", async () => {
+			jwtService.verify = jest.fn().mockImplementation(() => {
+				throw new Error("Invalid token");
+			});
+
+			await expect(service.getNewAccessToken("invalidToken")).rejects.toThrow(
+				"Invalid token"
+			);
+		});
+	});
 });

backend/src/auth/auth.service.ts

@@ -1,7 +1,45 @@
 import { Injectable } from "@nestjs/common";
+import { ConfigService } from "@nestjs/config";
+import { JwtService } from "@nestjs/jwt";
 import { UsersService } from "src/users/users.service";
+import { LoginRequest } from "./types/login-request.type";
+import { LoginResponse } from "./types/login-response.type";
 
 @Injectable()
 export class AuthService {
-	constructor(private usersService: UsersService) {}
+	constructor(
+		private readonly usersService: UsersService,
+		private readonly jwtService: JwtService,
+		private readonly configService: ConfigService
+	) {}
+
+	async loginWithGithub(req: LoginRequest): Promise<LoginResponse> {
+		const user = await this.usersService.findOrCreate(
+			req.user.socialProvider,
+			req.user.socialUid
+		);
+
+		const accessToken = this.jwtService.sign(
+			{ sub: user.id, nickname: user.nickname },
+			{ expiresIn: `${this.configService.get("JWT_ACCESS_TOKEN_EXPIRATION_TIME")}s` }
+		);
+
+		const refreshToken = this.jwtService.sign(
+			{ sub: user.id },
+			{ expiresIn: `${this.configService.get("JWT_REFRESH_TOKEN_EXPIRATION_TIME")}s` }
+		);
+
+		return { accessToken, refreshToken };
+	}
+
+	async getNewAccessToken(refreshToken: string) {
+		const payload = this.jwtService.verify(refreshToken);
+
+		const newAccessToken = this.jwtService.sign(
+			{ sub: payload.sub, nickname: payload.nickname },
+			{ expiresIn: `${this.configService.get("JWT_ACCESS_TOKEN_EXPIRATION_TIME")}s` }
+		);
+
+		return newAccessToken;
+	}
 }

backend/src/auth/jwt-refresh.strategy.ts

@@ -0,0 +1,26 @@
+import { Injectable } from "@nestjs/common";
+import { ConfigService } from "@nestjs/config";
+import { PassportStrategy } from "@nestjs/passport";
+import { Strategy as PassportJwtStrategy } from "passport-jwt";
+import { JwtPayload } from "src/utils/types/jwt.type";
+import { AuthorizedUser } from "src/utils/types/req.type";
+
+@Injectable()
+export class JwtRefreshStrategy extends PassportStrategy(PassportJwtStrategy, "refresh") {
+	constructor(configService: ConfigService) {
+		super({
+			jwtFromRequest: (req) => {
+				if (req && req.body.refreshToken) {
+					return req.body.refreshToken;
+				}
+				return null;
+			},
+			ignoreExpiration: false,
+			secretOrKey: configService.get<string>("JWT_REFRESH_TOKEN_SECRET"),
+		});
+	}
+
+	async validate(payload: JwtPayload): Promise<AuthorizedUser> {
+		return { id: payload.sub, nickname: payload.nickname };
+	}
+}

backend/src/auth/jwt.strategy.ts

@@ -1,17 +1,17 @@
-import { ExtractJwt, Strategy as PassportJwtStrategy } from "passport-jwt";
-import { ConfigService } from "@nestjs/config";
 import { Injectable } from "@nestjs/common";
+import { ConfigService } from "@nestjs/config";
 import { PassportStrategy } from "@nestjs/passport";
+import { ExtractJwt, Strategy as PassportJwtStrategy } from "passport-jwt";
 import { JwtPayload } from "src/utils/types/jwt.type";
 import { AuthorizedUser } from "src/utils/types/req.type";
 
 @Injectable()
-export class JwtStrategy extends PassportStrategy(PassportJwtStrategy) {
+export class JwtStrategy extends PassportStrategy(PassportJwtStrategy, "jwt") {
 	constructor(configService: ConfigService) {
 		super({
 			jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
 			ignoreExpiration: false,
-			secretOrKey: configService.get<string>("JWT_AUTH_SECRET"),
+			secretOrKey: configService.get<string>("JWT_ACCESS_TOKEN_SECRET"),
 		});
 	}
 

backend/src/auth/types/login-response.type.ts

@@ -3,4 +3,5 @@ import { ApiProperty } from "@nestjs/swagger";
 export class LoginResponse {
 	@ApiProperty({ type: String, description: "Access token for CodePair" })
 	accessToken: string;
+	refreshToken: string;
 }

backend/src/auth/types/refresh-token-request.type.ts

@@ -0,0 +1,6 @@
+import { IsString } from "class-validator";
+
+export class RefreshTokenRequest {
+	@IsString()
+	refreshToken: string;
+}

frontend/src/App.tsx

@@ -2,9 +2,12 @@ import "@fontsource/roboto/300.css";
 import "@fontsource/roboto/400.css";
 import "@fontsource/roboto/500.css";
 import "@fontsource/roboto/700.css";
-import "./App.css";
 import { Box, CssBaseline, ThemeProvider, createTheme, useMediaQuery } from "@mui/material";
-import { useSelector } from "react-redux";
+import * as Sentry from "@sentry/react";
+import { QueryCache, QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import axios from "axios";
+import { useEffect, useMemo } from "react";
+import { useDispatch, useSelector } from "react-redux";
 import {
 	RouterProvider,
 	createBrowserRouter,
@@ -13,15 +16,15 @@ import {
 	useLocation,
 	useNavigationType,
 } from "react-router-dom";
-import { useEffect, useMemo } from "react";
-import { selectConfig } from "./store/configSlice";
-import axios from "axios";
-import { routes } from "./routes";
-import { QueryCache, QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import AuthProvider from "./providers/AuthProvider";
-import { useErrorHandler } from "./hooks/useErrorHandler";
-import * as Sentry from "@sentry/react";
+import "./App.css";
 import { useGetSettingsQuery } from "./hooks/api/settings";
+import { useErrorHandler } from "./hooks/useErrorHandler";
+import AuthProvider from "./providers/AuthProvider";
+import { routes } from "./routes";
+import { setAccessToken, setRefreshToken } from "./store/authSlice";
+import { selectConfig } from "./store/configSlice";
+import { store } from "./store/store";
+import { setUserData } from "./store/userSlice";
 import { isAxios404Error, isAxios500Error } from "./utils/axios.default";
 
 if (import.meta.env.PROD) {
@@ -58,6 +61,7 @@ function SettingLoader() {
 
 function App() {
 	const config = useSelector(selectConfig);
+	const dispatch = useDispatch();
 	const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
 	const theme = useMemo(() => {
 		const defaultMode = prefersDarkMode ? "dark" : "light";
@@ -95,6 +99,47 @@ function App() {
 		});
 	}, [handleError]);
 
+	useEffect(() => {
+		const handleRefreshTokenExpiration = () => {
+			dispatch(setAccessToken(null));
+			dispatch(setRefreshToken(null));
+			dispatch(setUserData(null));
+			// axios.defaults.headers.common["Authorization"] = "";
+		};
+
+		const interceptor = axios.interceptors.response.use(
+			(response) => response,
+			async (error) => {
+				if (error.response?.status === 401) {
+					if (error.config.url === "/auth/refresh") {
+						handleRefreshTokenExpiration();
+						return Promise.reject(error);
+					} else if (!error.config._retry) {
+						error.config._retry = true;
+						const refreshToken = store.getState().auth.refreshToken;
+						try {
+							const response = await axios.post("/auth/refresh", { refreshToken });
+							const newAccessToken = response.data.accessToken;
+							dispatch(setAccessToken(newAccessToken));
+							axios.defaults.headers.common["Authorization"] =
+								`Bearer ${newAccessToken}`;
+							error.config.headers["Authorization"] = `Bearer ${newAccessToken}`;
+							return axios(error.config);
+						} catch (refreshError) {
+							handleRefreshTokenExpiration();
+							return Promise.reject(refreshError);
+						}
+					}
+				}
+				return Promise.reject(error);
+			}
+		);
+
+		return () => {
+			axios.interceptors.response.eject(interceptor);
+		};
+	}, [dispatch]);
+
 	return (
 		<QueryClientProvider client={queryClient}>
 			<AuthProvider>