auth

src/app/App.tsx

@@ -20,9 +20,9 @@ function App() {
         <div>
             <Router>
                 <Routes>
-                    <Route path="/" element={<AuctionPage />} />
+                    <Route path="/auction" element={<AuctionPage />} />
                     <Route path="/auth" element={<AuthPage />} />
-                    <Route path="*" element={<Navigate to="/" replace />} />
+                    <Route path="*" element={<Navigate to="/auth" replace />} />
                 </Routes>
             </Router>
         </div>

src/pages/AuthPage/AuthPage.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { useNavigate } from "react-router-dom";
 
 import { ButtonUi, ButtonUiType } from "../../shared/UI/ButtonUi";
 
@@ -8,11 +9,15 @@ import { useFormik } from 'formik';
 import * as yup from 'yup';
 
 import { api } from "../../query/query";
+import { setCookie } from "typescript-cookie";
+import { AuthResponsePayload } from "../../types";
 
 import styles from "./authPage.module.scss"
 
 export const AuthPage = () => {
 
+    const navigate = useNavigate();
+
     const schema = yup.object().shape({
         username: yup.string()
             .min(3, 'Минимум 3 символа!')
@@ -27,18 +32,28 @@ export const AuthPage = () => {
         handleChange,
         handleBlur,
         errors,
-        values
+        values,
+        setFieldError
     } = useFormik({
         initialValues: {
             username: '',
             password: '',
         },
         validationSchema: schema,
-        onSubmit: async (values) => {
+        onSubmit: async (values): Promise<AuthResponsePayload> => {
-            await api.post('/authorization', {
+            return await api.post('/authorization', {
                 username: values.username,
                 password: values.password
             }).then((res) => {
+                if (res.data[0]) {
+                    setFieldError('username', res.data[0])
+                    setFieldError('password', res.data[0])
+                } else {
+                    setCookie('authToken', res.data!.authToken)
+                    setCookie('refreshToken', res.data!.refreshToken)
+                    navigate("/auction")
+                }
+                return res.data as AuthResponsePayload
             })
         },
     })

src/types.ts

@@ -6,10 +6,16 @@ export interface AuctionItem {
     status: string
 }
 
-type socialName = 'faceBook' | 'instagram' | 'whatsapp'
-
 export type socialType = {
     name: socialName,
     img: string,
     href: string
 }
+
+export type AuthResponsePayload = {
+    accessToken: string
+    refreshToken: string
+} |
+string[]
+
+export type socialName = 'faceBook' | 'instagram' | 'whatsapp'