[HUMAN App] feat: browser caching and decoded auth (#3486)

Author: dnechay

packages/apps/human-app/frontend/src/shared/contexts/browser-auth-provider.ts

@@ -5,29 +5,32 @@ import type {
 } from '@/shared/types/browser-auth-provider';
 import { type AuthTokensSuccessResponse } from '../schemas';
 
-const accessTokenKey = btoa('access_token');
-const refreshTokenKey = btoa('refresh_token');
-const authTypeKey = btoa('auth_type');
-const userDataKey = btoa('extendable_user_data');
+const accessTokenKey = 'ro_access_token';
+const refreshTokenKey = 'ro_refresh_token';
+const authTypeKey = 'ro_auth_type';
+const userDataKey = 'ro_extendable_user_data';
 
 const browserAuthProvider: BrowserAuthProvider = {
   isAuthenticated: false,
   authType: 'web2',
+  signOutSubscription: undefined,
+
   signIn(
     { access_token, refresh_token }: AuthTokensSuccessResponse,
     authType,
     signOutSubscription
   ) {
     browserAuthProvider.isAuthenticated = true;
     browserAuthProvider.authType = authType;
-    localStorage.setItem(accessTokenKey, btoa(access_token));
-    localStorage.setItem(refreshTokenKey, btoa(refresh_token));
-    localStorage.setItem(authTypeKey, btoa(authType));
+    localStorage.setItem(accessTokenKey, access_token);
+    localStorage.setItem(refreshTokenKey, refresh_token);
+    localStorage.setItem(authTypeKey, authType);
 
     if (signOutSubscription) {
       this.signOutSubscription = signOutSubscription;
     }
   },
+
   signOut(args) {
     browserAuthProvider.isAuthenticated = false;
     localStorage.removeItem(accessTokenKey);
@@ -44,37 +47,41 @@ const browserAuthProvider: BrowserAuthProvider = {
       this.signOutSubscription = undefined;
     }
   },
-  signOutSubscription: undefined,
+
   getAccessToken() {
-    const result = localStorage.getItem(accessTokenKey);
+    const accessToken = localStorage.getItem(accessTokenKey);
 
-    if (!result) {
+    if (!accessToken) {
       return null;
     }
 
-    return atob(result);
+    return accessToken;
   },
+
   getRefreshToken() {
-    const result = localStorage.getItem(refreshTokenKey);
+    const refreshToken = localStorage.getItem(refreshTokenKey);
 
-    if (!result) {
+    if (!refreshToken) {
       return null;
     }
 
-    return atob(result);
+    return refreshToken;
   },
+
   getAuthType(): AuthType | null {
-    const result = localStorage.getItem(authTypeKey);
+    const authType = localStorage.getItem(authTypeKey);
 
-    if (!result) {
+    if (!authType) {
       return null;
     }
 
-    return atob(result) as AuthType;
+    return authType as AuthType;
   },
+
   setUserData(userData) {
-    localStorage.setItem(userDataKey, btoa(JSON.stringify(userData)));
+    localStorage.setItem(userDataKey, JSON.stringify(userData));
   },
+
   getUserData() {
     const userData = localStorage.getItem(userDataKey);
 
@@ -84,7 +91,7 @@ const browserAuthProvider: BrowserAuthProvider = {
 
     try {
       return {
-        data: JSON.parse(atob(userData)) as unknown,
+        data: JSON.parse(userData) as unknown,
       };
     } catch (error) {
       return { data: {} as unknown };

packages/apps/human-app/server/src/modules/h-captcha/h-captcha.controller.ts

@@ -1,6 +1,6 @@
 import { Mapper } from '@automapper/core';
 import { InjectMapper } from '@automapper/nestjs';
-import { Body, Controller, Get, Post, Request } from '@nestjs/common';
+import { Body, Controller, Get, Header, Post, Request } from '@nestjs/common';
 import { ApiBearerAuth, ApiOperation, ApiTags } from '@nestjs/swagger';
 import { RequestWithUser } from '../../common/interfaces/jwt';
 import { JwtUserData } from '../../common/utils/jwt-token.model';
@@ -29,8 +29,8 @@ export class HCaptchaController {
     @InjectMapper() private readonly mapper: Mapper,
   ) {}
 
-  @Post('/enable')
   @ApiOperation({ summary: 'Enables h-captcha labeling' })
+  @Post('/enable')
   public async enableLabeling(
     @Request() req: RequestWithUser,
   ): Promise<EnableLabelingResponse> {
@@ -40,8 +40,8 @@ export class HCaptchaController {
     return this.service.enableLabeling(command);
   }
 
-  @Post('/verify')
   @ApiOperation({ summary: 'Sends solution for verification' })
+  @Post('/verify')
   public async verifyToken(
     @Body() dto: VerifyTokenDto,
     @Request() req: RequestWithUser,
@@ -55,8 +55,9 @@ export class HCaptchaController {
     return await this.service.verifyToken(command);
   }
 
-  @Get('/daily-hmt-spent')
   @ApiOperation({ summary: 'Gets global daily HMT spent' })
+  @Header('Cache-Control', 'public, max-age=60')
+  @Get('/daily-hmt-spent')
   public async getDailyHmtSpent(
     @Request() req: RequestWithUser,
   ): Promise<DailyHmtSpentResponse> {
@@ -71,8 +72,9 @@ export class HCaptchaController {
     return this.service.getDailyHmtSpent(command);
   }
 
-  @Get('/user-stats')
   @ApiOperation({ summary: 'Gets stats per user' })
+  @Header('Cache-Control', 'public, max-age=60')
+  @Get('/user-stats')
   public async getUserStats(
     @Request() req: RequestWithUser,
   ): Promise<UserStatsResponse> {

packages/apps/human-app/server/src/modules/oracle-discovery/oracle-discovery.controller.ts

@@ -3,6 +3,7 @@ import { InjectMapper } from '@automapper/nestjs';
 import {
   Controller,
   Get,
+  Header,
   HttpException,
   HttpStatus,
   Query,
@@ -27,12 +28,13 @@ export class OracleDiscoveryController {
     @InjectMapper() private readonly mapper: Mapper,
   ) {}
 
-  @Get('/oracles')
   @ApiOperation({ summary: 'Oracles discovery' })
   @ApiOkResponse({
     type: Array<DiscoveredOracle>,
     description: 'List of oracles',
   })
+  @Header('Cache-Control', 'public, max-age=60')
+  @Get('/oracles')
   public async getOracles(
     @Request() req: RequestWithUser,
     @Query() query: GetOraclesQuery,

packages/apps/human-app/server/src/modules/ui-configuration/ui-configuration.controller.ts

@@ -1,4 +1,4 @@
-import { Controller, Get } from '@nestjs/common';
+import { Controller, Get, Header } from '@nestjs/common';
 import { ApiOkResponse, ApiOperation, ApiTags } from '@nestjs/swagger';
 import { EnvironmentConfigService } from '../../common/config/environment-config.service';
 import { Public } from '../../common/decorators';
@@ -12,12 +12,13 @@ export class UiConfigurationController {
     private readonly environmentConfigService: EnvironmentConfigService,
   ) {}
 
-  @Get('/ui-config')
   @ApiOperation({ summary: 'Retrieve UI configuration' })
   @ApiOkResponse({
     type: UiConfigResponseDto,
     description: 'UI Configuration object',
   })
+  @Header('Cache-Control', 'public, max-age=3600')
+  @Get('/ui-config')
   public async getConfig(): Promise<UiConfigResponseDto> {
     return {
       chainIdsEnabled: this.environmentConfigService.chainIdsEnabled,