Fix bug in signup / login for user after signup

backend/users/views.py

@@ -7,6 +7,8 @@ from rest_framework.response import Response
 from rest_framework.views import APIView
 from rest_framework.parsers import MultiPartParser
 
+from rest_framework_simplejwt.tokens import RefreshToken
+
 from users.serializers import CustomUserSerializer, UpdateProfileSerializer
 from users.models import CustomUser
 
@@ -25,7 +27,9 @@ class CustomUserCreate(APIView):
         if serializer.is_valid():
             user = serializer.save()
             if user:
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
+                refresh = RefreshToken.for_user(user)
+                return Response(data={'access_token': str(refresh.access_token), 'refresh_token': str(refresh),},
+                                status=status.HTTP_201_CREATED)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
     
 

frontend/src/App.jsx

@@ -46,9 +46,7 @@ const App = () => {
             setIsAuthenticated(false);
           }
         })
-        .catch((error) => {
+        .catch((error) => {});
-          console.error("Error checking login status:", error.message);
-        });
     };
 
     checkLoginStatus();

frontend/src/api/AuthenticationApi.jsx

@@ -34,10 +34,10 @@ export const googleLogin = async (token) => {
 export const createUser = async (formData) => {
   try {
     axios.defaults.withCredentials = true;
-    const response = axios.post(`${baseURL}user/create/`, formData);
+    const response = await axios.post(`${baseURL}user/create/`, formData);
-    // const response = await axiosInstance.post('/user/create/', formData);
     return response.data;
   } catch (e) {
-    console.log(e);
+    console.error("Error in createUser function:", e);
+    throw e;
   }
 };

frontend/src/api/AxiosConfig.jsx

@@ -13,6 +13,14 @@ export const axiosInstance = axios.create({
   },
 });
 
+axiosInstance.interceptors.request.use((config) => {
+  const access_token = localStorage.getItem("access_token");
+  if (access_token) {
+    config.headers.Authorization = `Bearer ${access_token}`;
+  }
+  return config;
+});
+
 // handling token refresh on 401 Unauthorized errors
 axiosInstance.interceptors.response.use(
   (response) => response,

frontend/src/components/authentication/SignUpPage.jsx

@@ -23,20 +23,33 @@ export function SignUp() {
     setIsSubmitting(true);
     setError(null);
 
+    const delay = (ms) => new Promise((res) => setTimeout(res, ms));
+
     try {
-      createUser(formData);
+      const data = await createUser(formData);
+      localStorage.setItem("access_token", data.access_token);
+      localStorage.setItem("refresh_token", data.refresh_token);
+      await delay(200);
+      setIsAuthenticated(true);
+      Navigate("/");
     } catch (error) {
       console.error("Error creating user:", error);
       setError("Registration failed. Please try again.");
     } finally {
       setIsSubmitting(false);
     }
-    Navigate("/login");
   };
 
-  const handleChange = (e) => {
+  const handleEmailChange = (e) => {
-    const { name, value } = e.target;
+    setFormData({ ...formData, email: e.target.value });
-    setFormData({ ...formData, [name]: value });
+  };
+
+  const handleUsernameChange = (e) => {
+    setFormData({ ...formData, username: e.target.value });
+  };
+
+  const handlePasswordChange = (e) => {
+    setFormData({ ...formData, password: e.target.value });
   };
 
   const googleLoginImplicit = useGoogleLogin({
@@ -51,7 +64,7 @@ export function SignUp() {
           localStorage.setItem("access_token", access_token);
           localStorage.setItem("refresh_token", refresh_token);
           setIsAuthenticated(true);
-          Navigate("/");
+          Navigate("/profile");
         }
       } catch (error) {
         console.error("Error with the POST request:", error);
@@ -63,12 +76,9 @@ export function SignUp() {
 
   return (
     <div>
-      <NavPreLogin text="Already have account?" btn_text="Log In" link="/login" />
+      <NavPreLogin text="Already have an account?" btn_text="Log In" link="/login" />
       <div className="h-screen flex items-center justify-center bg-gradient-to-r from-zinc-100 via-gray-200 to-zinc-100">
-        <div aria-hidden="true" className="absolute inset-0 grid grid-cols-2 -space-x-52 opacity-40">
+        {/* ... (other code) */}
-          <div className="blur-[106px] h-56 bg-gradient-to-br from-primary to-purple-400"></div>
-          <div className="blur-[106px] h-32 bg-gradient-to-r from-cyan-400 to-sky-300"></div>
-        </div>
         <div className="w-1/4 h-1 flex items-center justify-center z-10">
           <div className="w-96 bg-white rounded-lg p-8 space-y-4 z-10">
             {/* Register Form */}
@@ -80,7 +90,13 @@ export function SignUp() {
                   Email<span className="text-red-500 text-bold">*</span>
                 </p>
               </label>
-              <input className="input" type="email" id="email" placeholder="Enter your email" onChange={handleChange} />
+              <input
+                className="input"
+                type="email"
+                id="email"
+                placeholder="Enter your email"
+                onChange={handleEmailChange}
+              />
             </div>
             {/* Username Input */}
             <div className="form-control">
@@ -94,7 +110,7 @@ export function SignUp() {
                 type="text"
                 id="Username"
                 placeholder="Enter your username"
-                onChange={handleChange}
+                onChange={handleUsernameChange}
               />
             </div>
             {/* Password Input */}
@@ -109,7 +125,7 @@ export function SignUp() {
                 type="password"
                 id="password"
                 placeholder="Enter your password"
-                onChange={handleChange}
+                onChange={handlePasswordChange}
               />
             </div>
             <br></br>

frontend/src/components/dashboard/dashboard.jsx

@@ -11,7 +11,6 @@ export function Dashboard() {
     from: new Date(2021, 0, 1),
     to: new Date(2023, 0, 7),
   });
-  console.log(value);
   return (
     <div className="flex flex-col p-12">
       <div>

frontend/src/components/signup.jsx

@@ -1,115 +0,0 @@
-import { useState } from "react";
-import axiosapi from "../api/axiosapi";
-import TextField from "@material-ui/core/TextField";
-import Typography from "@material-ui/core/Typography";
-import CssBaseline from "@material-ui/core/CssBaseline";
-import Container from "@material-ui/core/Container";
-import Button from "@material-ui/core/Button";
-import { makeStyles } from "@material-ui/core/styles";
-
-const useStyles = makeStyles((theme) => ({
-  // Styles for various elements
-  paper: {
-    marginTop: theme.spacing(8),
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-  },
-  avatar: {
-    margin: theme.spacing(1),
-    backgroundColor: theme.palette.secondary.main,
-  },
-  form: {
-    width: "100%",
-    marginTop: theme.spacing(1),
-  },
-  submit: {
-    margin: theme.spacing(3, 0, 2),
-  },
-}));
-
-const Signup = () => {
-  const classes = useStyles();
-  const [formData, setFormData] = useState({
-    email: "",
-    username: "",
-    password: "",
-  });
-  const [error, setError] = useState(null);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    setIsSubmitting(true);
-    setError(null);
-
-    try {
-      axiosapi.createUser(formData);
-    } catch (error) {
-      console.error("Error creating user:", error);
-      setError("Registration failed. Please try again."); // Set an error message
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  const handleChange = (e) => {
-    const { name, value } = e.target;
-    setFormData({ ...formData, [name]: value });
-  };
-
-  return (
-    <Container component="main" maxWidth="xs">
-      <CssBaseline />
-      <div className={classes.paper}>
-        <Typography component="h1" variant="h5">
-          Sign Up
-        </Typography>
-        <form className={classes.form} onSubmit={handleSubmit}>
-          <TextField
-            variant="outlined"
-            margin="normal"
-            type="email"
-            name="email"
-            fullWidth
-            value={formData.email}
-            onChange={handleChange}
-            label="Email"
-          />
-          <TextField
-            variant="outlined"
-            margin="normal"
-            type="text"
-            name="username"
-            fullWidth
-            value={formData.username}
-            onChange={handleChange}
-            label="Username"
-          />
-          <TextField
-            variant="outlined"
-            margin="normal"
-            type="password"
-            name="password"
-            fullWidth
-            value={formData.password}
-            onChange={handleChange}
-            label="Password"
-          />
-          <Button
-            type="submit"
-            fullWidth
-            variant="contained"
-            color="primary"
-            className={classes.submit}
-            disabled={isSubmitting}>
-            {isSubmitting ? "Signing up..." : "Sign Up"}
-          </Button>
-        </form>
-        {error && <Typography color="error">{error}</Typography>}
-      </div>
-    </Container>
-  );
-};
-
-export default Signup;

frontend/src/components/testAuth.jsx

@@ -1,47 +0,0 @@
-import { useState, useEffect } from "react";
-import axiosapi from "../api/AuthenticationApi";
-import { Button } from "@mui/material";
-import { useNavigate } from "react-router-dom";
-
-function TestAuth() {
-  let Navigate = useNavigate();
-
-  const [message, setMessage] = useState("");
-
-  useEffect(() => {
-    // Fetch the "hello" data from the server when the component mounts
-    axiosapi
-      .getGreeting()
-      .then((res) => {
-        console.log(res.data);
-        setMessage(res.data.user);
-      })
-      .catch((err) => {
-        console.log(err);
-        setMessage("");
-      });
-  }, []);
-
-  const logout = () => {
-    // Log out the user, clear tokens, and navigate to the "/testAuth" route
-    axiosapi.apiUserLogout();
-    Navigate("/testAuth");
-  };
-
-  return (
-    <div>
-      {message !== "" && (
-        <div>
-          <h1 className="text-xl font-bold">Login! Hello!</h1>
-          <h2>{message}</h2>
-          <Button variant="contained" onClick={logout}>
-            Logout
-          </Button>
-        </div>
-      )}
-      {message === "" && <h1 className="text-xl font-bold">Need to sign in, No authentication found</h1>}
-    </div>
-  );
-}
-
-export default TestAuth;