feat(frontend): adding home page and refreshToken in JWT (#124)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Enhanced authentication with email-based login and refresh token
support.
  - Introduced user-friendly modals for signing in and signing up.
- Added new UI elements including dynamic background gradients, textured
cards, and custom icons.
  - New GraphQL mutations for user registration and login.

- **Bug Fixes**
  - Improved error handling and logging for authentication processes.

- **Refactor**
  - Streamlined authentication flows and session management.
- Improved GraphQL operations to better support project and chat
functionalities.

- **Chores**
  - Updated environment configurations and dependencies.
- Refined layout and styling adjustments for an improved user
experience.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: pengyu <pengyuchen01@gmail.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Sma1lboy <541898146chen@gmail.com>
Co-authored-by: ZHallen122 <106571949+ZHallen122@users.noreply.github.com>
Co-authored-by: Jackson Chen <90215880+Sma1lboy@users.noreply.github.com>
Co-authored-by: ZHallen122 <zhallen12261@gmail.com>

Author: 5 people

.github/workflows/frontend-ci.yml

@@ -62,4 +62,4 @@ jobs:
             ./frontend/node_modules
           key: ${{ runner.os }}-nextjs-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ github.sha }}
           restore-keys: |
-            ${{ runner.os }}-nextjs-${{ hashFiles('**/pnpm-lock.yaml') }}-
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/pnpm-lock.yaml') }}-

backend/.env

@@ -1,3 +1,4 @@
 PORT=8080
-JWT_SECRET="JACKSONCHENNAHEULALLEN"
+JWT_SECRET="JACKSONCHENNAHEULALLENPENGYU"
+JWT_REFRESH_SECRET="JACKSONCHENNAHEULALLENPENGYUREFRESH"
 SALT_ROUNDS=123

backend/.env.development

@@ -1,4 +1,5 @@
 PORT=8080
-JWT_SECRET="JACKSONCHENNAHEULALLEN"
+JWT_SECRET="JACKSONCHENNAHEULALLENPENGYU"
+JWT_REFRESH="JACKSONCHENNAHEULALLENPENGYUREFRESH"
 SALT_ROUNDS=123
 OPENAI_BASE_URI="http://localhost:3001"

backend/.gitignore

@@ -52,3 +52,7 @@ report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 
 # log files with timestamp
 log-*/
+
+
+# Backend
+/backend/package-lock.json

backend/src/auth/auth.module.ts

@@ -8,11 +8,12 @@ import { AuthService } from './auth.service';
 import { User } from 'src/user/user.model';
 import { AuthResolver } from './auth.resolver';
 import { JwtCacheService } from 'src/auth/jwt-cache.service';
+import { RefreshToken } from './refresh-token/refresh-token.model';
 
 @Module({
   imports: [
     ConfigModule,
-    TypeOrmModule.forFeature([Role, Menu, User]),
+    TypeOrmModule.forFeature([Role, Menu, User, RefreshToken]),
     JwtModule.registerAsync({
       imports: [ConfigModule],
       useFactory: async (configService: ConfigService) => ({

backend/src/auth/auth.resolver.ts

@@ -1,7 +1,23 @@
-import { Args, Query, Resolver } from '@nestjs/graphql';
+import {
+  Args,
+  Query,
+  Resolver,
+  Mutation,
+  Field,
+  ObjectType,
+} from '@nestjs/graphql';
 import { AuthService } from './auth.service';
 import { CheckTokenInput } from './dto/check-token.input';
 
+@ObjectType()
+export class RefreshTokenResponse {
+  @Field()
+  accessToken: string;
+
+  @Field()
+  refreshToken: string;
+}
+
 @Resolver()
 export class AuthResolver {
   constructor(private readonly authService: AuthService) {}
@@ -10,4 +26,11 @@ export class AuthResolver {
   async checkToken(@Args('input') params: CheckTokenInput): Promise<boolean> {
     return this.authService.validateToken(params);
   }
+
+  @Mutation(() => RefreshTokenResponse)
+  async refreshToken(
+    @Args('refreshToken') refreshToken: string,
+  ): Promise<RefreshTokenResponse> {
+    return this.authService.refreshToken(refreshToken);
+  }
 }

backend/src/auth/auth.service.ts

@@ -8,7 +8,6 @@ import {
 import { ConfigService } from '@nestjs/config';
 import { JwtService } from '@nestjs/jwt';
 import { InjectRepository } from '@nestjs/typeorm';
-import { compare, hash } from 'bcrypt';
 import { LoginUserInput } from 'src/user/dto/login-user.input';
 import { RegisterUserInput } from 'src/user/dto/register-user.input';
 import { User } from 'src/user/user.model';
@@ -17,6 +16,10 @@ import { CheckTokenInput } from './dto/check-token.input';
 import { JwtCacheService } from 'src/auth/jwt-cache.service';
 import { Menu } from './menu/menu.model';
 import { Role } from './role/role.model';
+import { RefreshToken } from './refresh-token/refresh-token.model';
+import { randomUUID } from 'crypto';
+import { compare, hash } from 'bcrypt';
+import { RefreshTokenResponse } from './auth.resolver';
 
 @Injectable()
 export class AuthService {
@@ -30,17 +33,20 @@ export class AuthService {
     private menuRepository: Repository<Menu>,
     @InjectRepository(Role)
     private roleRepository: Repository<Role>,
+    @InjectRepository(RefreshToken)
+    private refreshTokenRepository: Repository<RefreshToken>,
   ) {}
 
   async register(registerUserInput: RegisterUserInput): Promise<User> {
     const { username, email, password } = registerUserInput;
 
+    // Check for existing email
     const existingUser = await this.userRepository.findOne({
-      where: [{ username }, { email }],
+      where: { email },
     });
 
     if (existingUser) {
-      throw new ConflictException('Username or email already exists');
+      throw new ConflictException('Email already exists');
     }
 
     const hashedPassword = await hash(password, 10);
@@ -53,13 +59,11 @@ export class AuthService {
     return this.userRepository.save(newUser);
   }
 
-  async login(
-    loginUserInput: LoginUserInput,
-  ): Promise<{ accessToken: string }> {
-    const { username, password } = loginUserInput;
+  async login(loginUserInput: LoginUserInput): Promise<RefreshTokenResponse> {
+    const { email, password } = loginUserInput;
 
     const user = await this.userRepository.findOne({
-      where: [{ username: username }],
+      where: { email },
     });
 
     if (!user) {
@@ -72,11 +76,32 @@ export class AuthService {
       throw new UnauthorizedException('Invalid credentials');
     }
 
-    const payload = { userId: user.id, username: user.username };
-    const accessToken = this.jwtService.sign(payload);
-    this.jwtCacheService.storeToken(accessToken);
+    const accessToken = this.jwtService.sign(
+      { userId: user.id, email: user.email },
+      { expiresIn: '30m' },
+    );
+
+    const refreshTokenEntity = await this.createRefreshToken(user);
+    this.jwtCacheService.storeAccessToken(refreshTokenEntity.token);
+
+    return {
+      accessToken,
+      refreshToken: refreshTokenEntity.token,
+    };
+  }
+
+  private async createRefreshToken(user: User): Promise<RefreshToken> {
+    const token = randomUUID();
+    const sevenDays = 7 * 24 * 60 * 60 * 1000;
+
+    const refreshToken = this.refreshTokenRepository.create({
+      user,
+      token,
+      expiresAt: new Date(Date.now() + sevenDays), // 7 days
+    });
 
-    return { accessToken };
+    await this.refreshTokenRepository.save(refreshToken);
+    return refreshToken;
   }
 
   async validateToken(params: CheckTokenInput): Promise<boolean> {
@@ -89,18 +114,20 @@ export class AuthService {
     }
   }
   async logout(token: string): Promise<boolean> {
-    Logger.log('logout token', token);
     try {
       await this.jwtService.verifyAsync(token);
-    } catch (error) {
-      return false;
-    }
+      const refreshToken = await this.refreshTokenRepository.findOne({
+        where: { token },
+      });
+
+      if (refreshToken) {
+        await this.refreshTokenRepository.remove(refreshToken);
+      }
 
-    if (!(await this.jwtCacheService.isTokenStored(token))) {
+      return true;
+    } catch (error) {
       return false;
     }
-    this.jwtCacheService.removeToken(token);
-    return true;
   }
 
   async assignMenusToRole(roleId: string, menuIds: string[]): Promise<Role> {
@@ -340,4 +367,35 @@ export class AuthService {
       menus: userMenus,
     };
   }
+
+  /**
+   * refresh access token base on refresh token.
+   * @param refreshToken refresh token
+   * @returns return new access token and refresh token
+   */
+  async refreshToken(refreshToken: string): Promise<RefreshTokenResponse> {
+    const existingToken = await this.refreshTokenRepository.findOne({
+      where: { token: refreshToken },
+      relations: ['user'],
+    });
+
+    if (!existingToken || existingToken.expiresAt < new Date()) {
+      throw new UnauthorizedException('Invalid refresh token');
+    }
+
+    const accessToken = this.jwtService.sign(
+      {
+        userId: existingToken.user.id,
+        email: existingToken.user.email,
+      },
+      { expiresIn: '30m' },
+    );
+
+    this.jwtCacheService.storeAccessToken(accessToken);
+
+    return {
+      accessToken,
+      refreshToken: refreshToken,
+    };
+  }
 }

backend/src/auth/dto/login-user.input.ts

@@ -0,0 +1,10 @@
+import { InputType, Field } from '@nestjs/graphql';
+
+@InputType()
+export class LoginUserInput {
+  @Field()
+  email: string;
+
+  @Field()
+  password: string;
+}

backend/src/auth/entities/refresh-token.entity.ts

@@ -0,0 +1,24 @@
+import {
+  Entity,
+  Column,
+  PrimaryGeneratedColumn,
+  CreateDateColumn,
+} from 'typeorm';
+
+@Entity()
+export class RefreshToken {
+  @PrimaryGeneratedColumn()
+  id: number;
+
+  @Column()
+  token: string;
+
+  @Column()
+  userId: number;
+
+  @Column()
+  expiresAt: Date;
+
+  @CreateDateColumn()
+  createdAt: Date;
+}

backend/src/auth/jwt-cache.service.ts

@@ -83,7 +83,12 @@ export class JwtCacheService implements OnModuleInit, OnModuleDestroy {
     });
   }
 
-  async storeToken(token: string): Promise<void> {
+  /**
+   * The storeAccessToken method stores the access token in the cache dbds
+   * @param token the access token
+   * @returns return void
+   */
+  async storeAccessToken(token: string): Promise<void> {
     this.logger.debug(`Storing token: ${token.substring(0, 10)}...`);
     return new Promise((resolve, reject) => {
       this.db.run(