Moved auth form. Added auto login and logout functionality

client/src/store/action-creators/auth.ts

@@ -1,15 +1,21 @@
 import { Dispatch } from 'redux';
 import { ApiResponse } from '../../interfaces';
 import { ActionType } from '../action-types';
-import { LoginAction, LogoutAction } from '../actions/auth';
+import {
+  AuthErrorAction,
+  AutoLoginAction,
+  LoginAction,
+  LogoutAction,
+} from '../actions/auth';
 import axios, { AxiosError } from 'axios';
 
 export const login =
-  (password: string) => async (dispatch: Dispatch<LoginAction>) => {
+  (formData: { password: string; duration: string }) =>
+  async (dispatch: Dispatch<LoginAction>) => {
     try {
       const res = await axios.post<ApiResponse<{ token: string }>>(
         '/api/auth',
-        { password }
+        formData
       );
 
       localStorage.setItem('token', res.data.data.token);
@@ -19,15 +25,7 @@ export const login =
         payload: res.data.data.token,
       });
     } catch (err) {
-      const apiError = err as AxiosError;
-
-      dispatch<any>({
-        type: ActionType.createNotification,
-        payload: {
-          title: 'Error',
-          message: apiError.response?.data.error,
-        },
-      });
+      dispatch<any>(authError(err, true));
     }
   };
 
@@ -38,3 +36,37 @@ export const logout = () => (dispatch: Dispatch<LogoutAction>) => {
     type: ActionType.logout,
   });
 };
+
+export const autoLogin = () => async (dispatch: Dispatch<AutoLoginAction>) => {
+  const token: string = localStorage.token;
+
+  try {
+    await axios.post<ApiResponse<{ token: { isValid: boolean } }>>(
+      '/api/auth/validate',
+      { token }
+    );
+
+    dispatch({
+      type: ActionType.autoLogin,
+      payload: token,
+    });
+  } catch (err) {
+    dispatch<any>(authError(err, false));
+  }
+};
+
+export const authError =
+  (error: unknown, showNotification: boolean) =>
+  (dispatch: Dispatch<AuthErrorAction>) => {
+    const apiError = error as AxiosError;
+
+    if (showNotification) {
+      dispatch<any>({
+        type: ActionType.createNotification,
+        payload: {
+          title: 'Error',
+          message: apiError.response?.data.error,
+        },
+      });
+    }
+  };

client/src/store/action-types/index.ts

@@ -40,4 +40,6 @@ export enum ActionType {
   // AUTH
   login = 'LOGIN',
   logout = 'LOGOUT',
+  autoLogin = 'AUTO_LOGIN',
+  authError = 'AUTH_ERROR',
 }

client/src/store/actions/auth.ts

@@ -8,3 +8,12 @@ export interface LoginAction {
 export interface LogoutAction {
   type: ActionType.logout;
 }
+
+export interface AutoLoginAction {
+  type: ActionType.autoLogin;
+  payload: string;
+}
+
+export interface AuthErrorAction {
+  type: ActionType.authError;
+}

client/src/store/actions/index.ts

@@ -39,7 +39,12 @@ import {
   UpdateBookmarkAction,
 } from './bookmark';
 
-import { LoginAction, LogoutAction } from './auth';
+import {
+  AuthErrorAction,
+  AutoLoginAction,
+  LoginAction,
+  LogoutAction,
+} from './auth';
 
 export type Action =
   // Theme
@@ -76,4 +81,6 @@ export type Action =
   | UpdateBookmarkAction
   // Auth
   | LoginAction
-  | LogoutAction;
+  | LogoutAction
+  | AutoLoginAction
+  | AuthErrorAction;

client/src/store/reducers/auth.ts

@@ -28,6 +28,18 @@ export const authReducer = (
         token: null,
         isAuthenticated: false,
       };
+    case ActionType.autoLogin:
+      return {
+        ...state,
+        token: action.payload,
+        isAuthenticated: true,
+      };
+    case ActionType.authError:
+      return {
+        ...state,
+        token: null,
+        isAuthenticated: false,
+      };
     default:
       return state;
   }