diff --git a/backend/users/views.py b/backend/users/views.py index af201b7..9d022e3 100644 --- a/backend/users/views.py +++ b/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) diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 619149d..a917ca5 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -46,9 +46,7 @@ const App = () => { setIsAuthenticated(false); } }) - .catch((error) => { - console.error("Error checking login status:", error.message); - }); + .catch((error) => {}); }; checkLoginStatus(); diff --git a/frontend/src/api/AuthenticationApi.jsx b/frontend/src/api/AuthenticationApi.jsx index 79456a6..e029404 100644 --- a/frontend/src/api/AuthenticationApi.jsx +++ b/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 axiosInstance.post('/user/create/', formData); + const response = await axios.post(`${baseURL}user/create/`, formData); return response.data; } catch (e) { - console.log(e); + console.error("Error in createUser function:", e); + throw e; } }; diff --git a/frontend/src/api/AxiosConfig.jsx b/frontend/src/api/AxiosConfig.jsx index f2de1b7..29ed6c7 100644 --- a/frontend/src/api/AxiosConfig.jsx +++ b/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, diff --git a/frontend/src/components/authentication/SignUpPage.jsx b/frontend/src/components/authentication/SignUpPage.jsx index 1019779..08628e8 100644 --- a/frontend/src/components/authentication/SignUpPage.jsx +++ b/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 { name, value } = e.target; - setFormData({ ...formData, [name]: value }); + const handleEmailChange = (e) => { + setFormData({ ...formData, email: e.target.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 (
- +
- + {/* ... (other code) */}
{/* Register Form */} @@ -80,7 +90,13 @@ export function SignUp() { Email*

- +
{/* Username Input */}
@@ -94,7 +110,7 @@ export function SignUp() { type="text" id="Username" placeholder="Enter your username" - onChange={handleChange} + onChange={handleUsernameChange} />
{/* Password Input */} @@ -109,7 +125,7 @@ export function SignUp() { type="password" id="password" placeholder="Enter your password" - onChange={handleChange} + onChange={handlePasswordChange} />


diff --git a/frontend/src/components/dashboard/dashboard.jsx b/frontend/src/components/dashboard/dashboard.jsx index e16ff6e..31cc71f 100644 --- a/frontend/src/components/dashboard/dashboard.jsx +++ b/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 (
diff --git a/frontend/src/components/signup.jsx b/frontend/src/components/signup.jsx deleted file mode 100644 index e047627..0000000 --- a/frontend/src/components/signup.jsx +++ /dev/null @@ -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 ( - - -
- - Sign Up - -
- - - - - - {error && {error}} -
-
- ); -}; - -export default Signup; diff --git a/frontend/src/components/testAuth.jsx b/frontend/src/components/testAuth.jsx deleted file mode 100644 index f57ea49..0000000 --- a/frontend/src/components/testAuth.jsx +++ /dev/null @@ -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 ( -
- {message !== "" && ( -
-

Login! Hello!

-

{message}

- -
- )} - {message === "" &&

Need to sign in, No authentication found

} -
- ); -} - -export default TestAuth;