[feat] add login login after being successful sign up step

src/api/auth.ts

@@ -1,17 +1,27 @@
 import { defaultInstance } from './httpRequest';
 
-const postLogin = async (loginInfo: { email: string; password: string }) => {
-  console.log('In postLogin', loginInfo);
+interface AuthTokenType {
+  accessToken: string;
+  refreshToken: string;
+}
 
-  const result = await defaultInstance<{
-    accessToken: string;
-    refreshToken: string;
-  }>({
+const postLogin = async (loginInfo: { email: string; password: string }) => {
+  const result = await defaultInstance<AuthTokenType>({
     method: 'POST',
+    url: '/login',
     data: loginInfo,
   });
 
   return result;
 };
 
-export { postLogin };
+const requestLogout = async () => {
+  const result = await defaultInstance<AuthTokenType>({
+    method: 'GET',
+    url: '/logout/success',
+  });
+
+  return result;
+};
+
+export { postLogin, requestLogout };

src/app/(AuthLayout)/auth/sign-up/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useForm } from 'react-hook-form';
+import { useRouter } from 'next/navigation';
 import { KeyboardEvent, useEffect } from 'react';
 
 import Logo from '@/components/common/Logo';
@@ -13,10 +14,13 @@ import useSignUpState, {
   ISignUpFormValueType,
 } from '@/hooks/useSignUpState';
 import useSignupMutation from '@/hooks/useSignUpMutation';
+import { postLogin } from '@/api/auth';
+import { saveAccessToken, saveRefreshToken } from '@/utils/manageToken';
 
 import styles from './page.module.scss';
 
 const SignupPage = () => {
+  const router = useRouter();
   const formMethods = useForm<ISignUpFormValueType>({
     mode: 'onChange',
     defaultValues: {
@@ -77,7 +81,7 @@ const SignupPage = () => {
     changeConfirmState(CONFIRM_STATES.PENDING);
   };
 
-  const onSubmit = async (values: ISignUpFormValueType) => {
+  const onSubmit = (values: ISignUpFormValueType) => {
     const { email, password, username } = values;
 
     const payload = {
@@ -87,16 +91,30 @@ const SignupPage = () => {
       ...signupToken,
     };
 
-    console.log('payload', payload);
-    await requestSignupUser(payload);
+    requestSignupUser(payload, {
+      onSuccess: async (res) => {
+        if (res.isSuccess) {
+          const authResults = await postLogin({ email, password });
+          const { result, isSuccess } = authResults;
+
+          if (isSuccess && result) {
+            const { accessToken, refreshToken } = result;
+            saveAccessToken(accessToken);
+            saveRefreshToken(refreshToken);
+            router.push('/auth/info');
+          }
+        }
+      },
+    });
   };
 
+  const [password, repassword] = watch(['password', 'repassword']);
+
   useEffect(() => {
-    const [password, repassword] = watch(['password', 'repassword']);
     if (password !== '' && password === repassword) {
       clearErrors(['password', 'repassword']);
     }
-  }, [watch, clearErrors]);
+  }, [password, repassword, clearErrors]);
 
   return (
     <div className={styles.container}>

src/hooks/useSignUpMutation.ts

@@ -1,4 +1,3 @@
-// import { useRouter } from 'next/router';
 import { UseFormReturn } from 'react-hook-form';
 
 import {
@@ -7,7 +6,6 @@ import {
   useConfirmUsernameDuplicate,
   useSignupUser,
 } from '@/api/mutations/sign-up';
-import { postLogin } from '@/api/auth';
 import { ERROR_MESSAGE } from '@/constants/errorMessage';
 import {
   CONFIRM_STATES,
@@ -32,7 +30,6 @@ const useSignupMutation = ({
   changeUsernameState,
   changeSignupToken,
 }: UseSignupMutationParamType) => {
-  // const router = useRouter();
   const { clearErrors, setError, watch, resetField } = formMethods;
 
   const { isPending: isRequestEmailPending, mutate: requestCodeByEmail } =
@@ -89,15 +86,7 @@ const useSignupMutation = ({
 
   const { isPending: isRequestSignupPending, mutate: requestSignupUser } =
     useSignupUser({
-      onSuccess: async (res) => {
-        const [email, password] = watch(['email', 'password']);
-
-        if (res.isSuccess) {
-          const result = await postLogin({ email, password });
-          console.log(result);
-          // router.push('/auth/info');
-        }
-      },
+      onSuccess: async () => {},
       onError: (err) => {
         const [password] = watch('password');
         if (

src/utils/manageToken.ts

@@ -0,0 +1,40 @@
+const ACCESS_TOKEN = 'access_token';
+const REFRESH_TOKEN = 'refresh_token';
+
+export const saveAccessToken = (token: string) => {
+  if (token) {
+    localStorage.setItem(ACCESS_TOKEN, token);
+    return true;
+  }
+
+  throw new Error('Token string is empty!');
+};
+
+export const saveRefreshToken = (token: string) => {
+  if (token) {
+    localStorage.setItem(REFRESH_TOKEN, token);
+    return true;
+  }
+
+  throw new Error('Token string is empty!');
+};
+
+export const getAccessToken = () => {
+  const token = localStorage.getItem(ACCESS_TOKEN);
+
+  if (token) {
+    return token;
+  }
+
+  throw new Error('Access token is not erolled!');
+};
+
+export const getRefreshToken = () => {
+  const token = localStorage.getItem(REFRESH_TOKEN);
+
+  if (token) {
+    return token;
+  }
+
+  throw new Error('Refresh token is not erolled!');
+};