Signup Authentication using JWT

src/api/Signup/signup-auth.ts

@@ -0,0 +1,20 @@
+import axios from 'axios';
+
+const signupAxios = axios.create({
+  baseURL: 'http://localhost:8080',
+});
+
+signupAxios.interceptors.request.use(
+  (config) => {
+    const token = localStorage.getItem('jwt');
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+export default signupAxios;

src/components/signup/SignupForm.tsx

@@ -2,21 +2,23 @@ import { Button, Grid, Link, TextField, Typography } from '@mui/material';
 import { Box } from '@mui/system';
 import { ChangeEvent, FormEvent, useState } from 'react';
 import { Link as RouterLink, useParams } from 'react-router-dom';
-
+import './auth/signup-auth';
 import { green, grey } from '@mui/material/colors';
-
+import customAxios from '../../api/Signup/signup-auth';
 interface FormData {
   lastname: string;
   firstname: string;
   email: string;
   password: string;
+  role: string[];
 }
 
 interface FormErrors {
   lastname?: string;
   firstname?: string;
   email?: string;
   password?: string;
+  role?: string[];
 }
 
 const SignupForm = () => {
@@ -28,14 +30,32 @@ const SignupForm = () => {
     lastname: '',
     email: '',
     password: '',
+    role: [`${userType}`],
   });
 
   const handleSubmit = (e: FormEvent) => {
     e.preventDefault();
     if (validate()) {
       console.log('Form Submitted: ', formData);
       console.log(`user type: ${userType}`);
+
       // POST REQUEST FOR THE BACKEND GOES HERE ....
+      const PostRequest = async () => {
+        try {
+          const response = await customAxios.post(
+            '/api/auth/register',
+            {
+              ...formData,
+            },
+            { withCredentials: true }
+          );
+          console.log('Signup Successful: ', response.data);
+        } catch (error) {
+          console.error('Signup Failed: ', error);
+        }
+      };
+      PostRequest();
+      //-------------------------//
     }
   };