Feature/jc 726 authorization implementation

apps/react/.env

@@ -1 +1,2 @@
 VITE_APP_API_BASE_URL=https://api.camp-js.saritasa.rocks/api/v1/
+VITE_APP_API_KEY=4d114755-959f-4864-b484-b1752f9ae529

apps/react/src/App.tsx

@@ -20,7 +20,6 @@ export const App: FC = () => (
 						<RootRouter />
 					</Suspense>
 				</StyledEngineProvider>
-
 			</div>
 		</BrowserRouter>
 	</Provider>

apps/react/src/api/config.ts

@@ -3,4 +3,5 @@
  */
 export const CONFIG = {
 	apiUrl: import.meta.env.VITE_APP_API_BASE_URL ?? '',
+	apiKey: import.meta.env.VITE_APP_API_KEY ?? '',
 };

apps/react/src/api/index.ts

@@ -1,10 +1,17 @@
 import axios from 'axios';
 
 import { CONFIG } from './config';
+import { apiKeyHeaderInterceptor } from './interceptors/apiKeyHeaderInterceptor';
+import { authorizationHeaderInterceptor } from './interceptors/authorizationTokenInterceptor';
+import { refreshTokenInterceptor } from './interceptors/refreshTokenInterceptor';
 
-/**
- * Http const with base url.
- */
+/** Http const with base url. */
 export const http = axios.create({
 	baseURL: CONFIG.apiUrl,
 });
+
+http.interceptors.request.use(apiKeyHeaderInterceptor, error => Promise.reject(error));
+
+http.interceptors.request.use(authorizationHeaderInterceptor, error => Promise.reject(error));
+
+http.interceptors.response.use(response => response, refreshTokenInterceptor);

apps/react/src/api/interceptors/apiKeyHeaderInterceptor.ts

@@ -0,0 +1,13 @@
+import { InternalAxiosRequestConfig } from 'axios';
+
+import { CONFIG } from '../config';
+
+/**
+ * Sets the Api-Key header to request.
+ * @param config - Request config.
+ * @returns Request config with Api-Key header.
+ */
+export function apiKeyHeaderInterceptor(config: InternalAxiosRequestConfig): InternalAxiosRequestConfig {
+	config.headers.set('Api-Key', CONFIG.apiKey);
+	return config;
+}

apps/react/src/api/interceptors/authorizationTokenInterceptor.ts

@@ -0,0 +1,16 @@
+import { InternalAxiosRequestConfig } from 'axios';
+
+import { LocalStorageService } from '../services/localStorageService';
+
+/**
+ * Sets the Authorization header to request.
+ * @param config - Request config.
+ * @returns Request config with Authorization header.
+ */
+export function authorizationHeaderInterceptor(config: InternalAxiosRequestConfig): InternalAxiosRequestConfig {
+	const accessToken = LocalStorageService.getAccessToken();
+	if (accessToken) {
+		config.headers.set('Authorization', `Bearer ${accessToken}`);
+	}
+	return config;
+}

apps/react/src/api/interceptors/refreshTokenInterceptor.ts

@@ -0,0 +1,46 @@
+import axios from 'axios';
+import { ServerErrorStatus } from '@js-camp/core/models/server-error-status';
+
+import { http } from '..';
+import { LocalStorageService } from '../services/localStorageService';
+import { AuthorizationService } from '../services/authorizationService';
+import { UrlConfigService } from '../services/urlConfigService';
+
+/**
+ * Refresh access token and sets it as the Authorization header to request.
+ * @param error - Request error.
+ * @returns Request config with new Authorization header.
+ */
+export async function refreshTokenInterceptor(error: unknown) {
+
+	if (!axios.isAxiosError(error)) {
+		return Promise.reject(error);
+	}
+
+	const originalRequest = error.config;
+
+	if (!originalRequest || originalRequest.url === UrlConfigService.authorizationUrls.refreshToken) {
+		return Promise.reject(error);
+	}
+
+	if (error.response?.status === ServerErrorStatus.Unauthorized) {
+		const refreshToken = LocalStorageService.getRefreshToken();
+
+		if (refreshToken) {
+			try {
+				const tokens = await AuthorizationService.refreshAccessToken(refreshToken);
+				LocalStorageService.saveTokens(tokens);
+				http.defaults.headers.common.Authorization = `Bearer ${tokens.access}`;
+				originalRequest.headers.Authorization = `Bearer ${tokens.access}`;
+				return http(originalRequest);
+			} catch (refreshError) {
+				console.error(refreshError);
+				LocalStorageService.removeTokens();
+				return Promise.reject(refreshError);
+			}
+		}
+	}
+
+	LocalStorageService.removeTokens();
+	return Promise.reject(error);
+}

apps/react/src/api/services/authorizationService.ts

@@ -0,0 +1,55 @@
+import { RegistrationData } from '@js-camp/core/models/registration-data';
+import { RegistrationDataMapper } from '@js-camp/core/mappers/registration-data.mapper';
+import { AuthorizationTokens } from '@js-camp/core/models/authorization-tokens';
+import { AuthorizationTokensDto } from '@js-camp/core/dtos/authorization-tokens.dto';
+import { AuthorizationTokensMapper } from '@js-camp/core/mappers/authorization-tokens.mapper';
+import { LoginData } from '@js-camp/core/models/login-data';
+import { LoginDataMapper } from '@js-camp/core/mappers/login-data.mapper';
+
+import { http } from '..';
+
+import { UrlConfigService } from './urlConfigService';
+
+export namespace AuthorizationService {
+
+	/**
+	 * Login the user and receives authorization tokens.
+	 * @param loginData - User's data for login.
+	 * @returns - Authorization tokens.
+	 */
+	export async function login(loginData: LoginData): Promise<AuthorizationTokens> {
+		const { data } = await http.post<AuthorizationTokensDto>(
+			UrlConfigService.authorizationUrls.login,
+			LoginDataMapper.toDto(loginData),
+		);
+		return AuthorizationTokensMapper.fromDto(data);
+	}
+
+	/**
+	 * Registers the user and receives authorization tokens.
+	 * @param registrationData - User's data for registration.
+	 * @returns - Authorization tokens.
+	 */
+	export async function register(registrationData: RegistrationData): Promise<AuthorizationTokens> {
+		const { data } = await http.post<AuthorizationTokensDto>(
+			UrlConfigService.authorizationUrls.register,
+			RegistrationDataMapper.toDto(registrationData),
+		);
+		return AuthorizationTokensMapper.fromDto(data);
+	}
+
+	/**
+	 * Refresh access token with refresh token.
+	 * @param refreshToken - Token for refreshing access token.
+	 * @returns - Authorization tokens.
+	 */
+	export async function refreshAccessToken(refreshToken: string): Promise<AuthorizationTokens> {
+		const { data } = await http.post<AuthorizationTokensDto>(
+			UrlConfigService.authorizationUrls.refreshToken,
+			{
+				refresh: refreshToken,
+			},
+		);
+		return AuthorizationTokensMapper.fromDto(data);
+	}
+}

apps/react/src/api/services/localStorageService.ts

@@ -0,0 +1,37 @@
+import { AuthorizationTokens } from '@js-camp/core/models/authorization-tokens';
+
+export namespace LocalStorageService {
+
+	/**
+	 * Save tokens to local storage.
+	 * @param tokens - Access and refresh tokens.
+	 */
+	export function saveTokens(tokens: AuthorizationTokens): void {
+		localStorage.setItem('accessToken', tokens.access);
+		localStorage.setItem('refreshToken', tokens.refresh);
+	}
+
+	/**
+	 * Remove tokens from local storage.
+	 */
+	export function removeTokens(): void {
+		localStorage.removeItem('accessToken');
+		localStorage.removeItem('refreshToken');
+	}
+
+	/**
+	 * Get access token from local storage.
+	 * @returns Access token.
+	 */
+	export function getAccessToken(): string | null {
+		return localStorage.getItem('accessToken');
+	}
+
+	/**
+	 * Get refresh token from local storage.
+	 * @returns Refresh token.
+	 */
+	export function getRefreshToken(): string | null {
+		return localStorage.getItem('refreshToken');
+	}
+}

apps/react/src/api/services/urlConfigService.ts

@@ -0,0 +1,15 @@
+
+export namespace UrlConfigService {
+
+	/** Object with parts of the authorization url requests. */
+	export const authorizationUrls = {
+		login: 'auth/login/',
+		register: 'auth/register/',
+		refreshToken: 'auth/token/refresh/',
+	};
+
+	/** Object with parts of the user url requests. */
+	export const userUrls = {
+		profile: 'users/profile/',
+	};
+}

apps/react/src/api/services/userService.ts

@@ -0,0 +1,30 @@
+import { User } from '@js-camp/core/models/user';
+import { UserDto } from '@js-camp/core/dtos/user.dto';
+import { UserMapper } from '@js-camp/core/mappers/user.mapper';
+
+import { http } from '..';
+
+import { UrlConfigService } from './urlConfigService';
+
+export namespace UserService {
+
+	const errorObject = {
+		avatar: null,
+	};
+
+	/**
+	 * Get the current user based on the stored token.
+	 * @returns Current user.
+	 */
+	export async function getCurrentUser(): Promise<User> {
+		const { data } = await http.get<UserDto>(UrlConfigService.userUrls.profile);
+
+		// When the server fails to retrieve a user, it does not send an error,
+		// but an object with an avatar field equal to null.
+		// Therefore, we will throw an error when receiving such data.
+		if (JSON.stringify(data) === JSON.stringify(errorObject)) {
+			throw new Error('Failed to get current user');
+		}
+		return UserMapper.fromDto(data);
+	}
+}

apps/react/src/components/Progress/Progress.tsx

@@ -0,0 +1,12 @@
+import { FC, memo } from 'react';
+import { Box, CircularProgress } from '@mui/material';
+
+/** Component to show the loading process.  */
+const ProgressComponent: FC = () => (
+	<Box sx={{ display: 'flex', justifyContent: 'center', padding: 2 }}>
+		<CircularProgress />
+	</Box>
+);
+
+/** Memoized progress component. */
+export const Progress = memo(ProgressComponent);

apps/react/src/components/header/Header.module.css

@@ -20,3 +20,31 @@
 	flex-direction: row;
 	gap: var(--space-m);
 }
+
+.authorizationMenu {
+	display: flex;
+	flex-direction: row;
+	gap: var(--space-s);
+}
+
+.link {
+	font-size: var(--font-size-base);
+	text-decoration: none;
+	color: var(--primary-font-color);
+}
+
+.link:hover {
+	text-decoration: underline;
+}
+
+.logoutButton {
+	font-size: var(--font-size-base);
+	background-color: var(--primary-background-color);
+	border: none;
+	padding: 0;
+	cursor: pointer;
+}
+
+.logoutButton:hover {
+	text-decoration: underline;
+}

apps/react/src/components/header/Header.tsx

@@ -1,21 +1,44 @@
-import { FC, memo } from 'react';
-import { Link, useLocation } from 'react-router-dom';
+import { FC, memo, useEffect } from 'react';
+import { Link, NavLink, useLocation } from 'react-router-dom';
 import AppBar from '@mui/material/AppBar';
 import Chip from '@mui/material/Chip';
 import Stack from '@mui/material/Stack';
 import { ANIME_PATH } from '@js-camp/react/features/anime/routes';
 import { GENRES_PATH } from '@js-camp/react/features/genres/routes';
 import { STUDIOS_PATH } from '@js-camp/react/features/studios/routes';
+import { useAppDispatch, useAppSelector } from '@js-camp/react/store/store';
+import { selectCurrentUser, selectIsCurrentUserLoading } from '@js-camp/react/store/user/selectors';
+import { REGISTER_PATH } from '@js-camp/react/features/registration/routes';
+import { fetchUser } from '@js-camp/react/store/user/dispatchers';
+import { LOGIN_PATH } from '@js-camp/react/features/login/routes';
+import { logout } from '@js-camp/react/store/user/slice';
+import { LocalStorageService } from '@js-camp/react/api/services/localStorageService';
 
 import styles from './Header.module.css';
 
 /** Header component. */
 const HeaderComponent: FC = () => {
 
+	const user = useAppSelector(selectCurrentUser);
+	const isLoading = useAppSelector(selectIsCurrentUserLoading);
+	const refreshToken = LocalStorageService.getRefreshToken();
+
+	const dispatch = useAppDispatch();
+
+	useEffect(() => {
+		if (!isLoading) {
+			dispatch(fetchUser());
+		}
+	}, [refreshToken]);
+
 	const location = useLocation();
 
 	const isCurrentPath = (path: string) => location.pathname.startsWith(path);
 
+	const handleLogoutButtonClick = () => {
+		dispatch(logout());
+	};
+
 	return (
 		<AppBar
 			position="static"
@@ -47,7 +70,24 @@ const HeaderComponent: FC = () => {
 					/>
 				</Stack>
 			</nav>
-			<span>Authorization menu</span>
+			<span className={styles.authorizationMenu}>
+				{ user ?
+					<>
+						<span>{`Hi, ${user.firstName} ${user.lastName}!`}</span>
+						<button
+							type='button'
+							className={styles.logoutButton}
+							onClick={handleLogoutButtonClick}
+						>
+							Logout
+						</button>
+					</>	:
+					<>
+						<NavLink to={LOGIN_PATH} className={styles.link}>Login</NavLink>
+						<NavLink to={REGISTER_PATH} className={styles.link}>Register</NavLink>
+					</>
+				}
+			</span>
 		</AppBar>
 	);
 };