diff --git a/frontend/src/components/authentication/AuthenticationPage.jsx b/frontend/src/components/authentication/AuthenticationPage.jsx index d932f89..791cdd9 100644 --- a/frontend/src/components/authentication/AuthenticationPage.jsx +++ b/frontend/src/components/authentication/AuthenticationPage.jsx @@ -69,7 +69,7 @@ export default function SignInSide() { localStorage.setItem('access_token', res.data.access); localStorage.setItem('refresh_token', res.data.refresh); axiosapi.axiosInstance.defaults.headers['Authorization'] = "Bearer " + res.data.access; - Navigate('/testAuth'); + Navigate('/'); }).catch(err => { console.log('Login failed'); // Handle login failure console.log(err) @@ -86,7 +86,7 @@ export default function SignInSide() { localStorage.setItem('access_token', googleResponse.data.access_token); localStorage.setItem('refresh_token', googleResponse.data.refresh_token); axiosapi.axiosInstance.defaults.headers['Authorization'] = "Bearer " + googleResponse.data.access_token; - Navigate('/testAuth'); + Navigate('/'); } } @@ -103,6 +103,7 @@ export default function SignInSide() { // Save the tokens in localStorage localStorage.setItem('access_token', access_token); localStorage.setItem('refresh_token', refresh_token); + Navigate('/'); } } catch (error) { console.error('Error with the POST request:', error); diff --git a/frontend/src/components/authentication/IsAuthenticated.jsx b/frontend/src/components/authentication/IsAuthenticated.jsx new file mode 100644 index 0000000..48edd73 --- /dev/null +++ b/frontend/src/components/authentication/IsAuthenticated.jsx @@ -0,0 +1,48 @@ +import { useState, useEffect } from 'react'; +import axiosapi from './axiosapi'; + +function IsAuthenticated() { + const [isAuthenticated, setIsAuthenticated] = useState(false); + + useEffect(() => { + const checkAuthentication = async () => { + const access_token = localStorage.getItem('access_token'); + const refresh_token = localStorage.getItem('refresh_token'); + + if (access_token && refresh_token) { + const isAccessTokenExpired = checkIfAccessTokenExpired(access_token); + + if (!isAccessTokenExpired) { + setIsAuthenticated(true); + } else { + try { + // Attempt to refresh the access token using the refresh token + const response = await axiosapi.refreshAccessToken(refresh_token); + if (response.status === 200) { + const newAccessToken = response.data.access_token; + localStorage.setItem('access_token', newAccessToken); + setIsAuthenticated(true); + } else { + setIsAuthenticated(false); + } + } catch (error) { + setIsAuthenticated(false); + } + } + } else { + setIsAuthenticated(false); + } + }; + + checkAuthentication(); + }, []); + + const checkIfAccessTokenExpired = (accessToken) => { + // Need to change logic again! + return !accessToken; + }; + + return isAuthenticated; +} + +export default IsAuthenticated; diff --git a/frontend/src/components/authentication/SignUpPage.jsx b/frontend/src/components/authentication/SignUpPage.jsx index daf7cf2..3e33a86 100644 --- a/frontend/src/components/authentication/SignUpPage.jsx +++ b/frontend/src/components/authentication/SignUpPage.jsx @@ -1,4 +1,5 @@ import React, { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; import axiosapi from '../../api/axiosapi'; import Avatar from '@mui/material/Avatar'; @@ -32,6 +33,9 @@ function Copyright(props) { const defaultTheme = createTheme(); export default function SignUp() { + + const Navigate = useNavigate(); + const [formData, setFormData] = useState({ email: '', username: '', @@ -53,6 +57,7 @@ export default function SignUp() { } finally { setIsSubmitting(false); } + Navigate('/login'); }; const handleChange = (e) => { diff --git a/frontend/src/components/testAuth.jsx b/frontend/src/components/testAuth.jsx index 937a046..9677133 100644 --- a/frontend/src/components/testAuth.jsx +++ b/frontend/src/components/testAuth.jsx @@ -4,7 +4,7 @@ import Button from '@material-ui/core/Button'; import { useNavigate } from 'react-router-dom'; function TestAuth() { - let history = useNavigate(); + let Navigate = useNavigate(); const [message, setMessage] = useState(""); @@ -22,19 +22,19 @@ function TestAuth() { const logout = () => { // Log out the user, clear tokens, and navigate to the "/testAuth" route axiosapi.apiUserLogout(); - history('/testAuth'); + Navigate('/testAuth'); } return (