diff --git a/frontend/src/components/Nav/Navbar.jsx b/frontend/src/components/Nav/Navbar.jsx index 85ec720..f88d821 100644 --- a/frontend/src/components/Nav/Navbar.jsx +++ b/frontend/src/components/Nav/Navbar.jsx @@ -52,7 +52,7 @@ function NavBar() { const logout = () => { // Log out the user, clear tokens, and navigate to the "/testAuth" route axiosapi.apiUserLogout(); - Navigate('/testAuth'); + Navigate('/'); } return ( diff --git a/frontend/src/components/authentication/AuthenticationPage.jsx b/frontend/src/components/authentication/AuthenticationPage.jsx index a117889..0955342 100644 --- a/frontend/src/components/authentication/AuthenticationPage.jsx +++ b/frontend/src/components/authentication/AuthenticationPage.jsx @@ -1,7 +1,6 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; import { useGoogleLogin } from '@react-oauth/google'; -import axios from 'axios'; import Avatar from '@mui/material/Avatar'; import Button from '@mui/material/Button'; import CssBaseline from '@mui/material/CssBaseline'; @@ -17,6 +16,7 @@ import LockOutlinedIcon from '@mui/icons-material/LockOutlined'; import Typography from '@mui/material/Typography'; import { createTheme, ThemeProvider } from '@mui/material/styles'; +import refreshAccessToken from './refreshAcesstoken'; import axiosapi from '../../api/axiosapi'; @@ -24,8 +24,8 @@ function Copyright(props) { return ( {'Copyright © '} - - Your Website + + TurTask {' '} {new Date().getFullYear()} {'.'} @@ -40,6 +40,12 @@ export default function SignInSide() { const Navigate = useNavigate(); + useEffect(() => { + if (!refreshAccessToken()) { + Navigate("/"); + } + }, []); + const [email, setEmail] = useState(""); const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); @@ -76,20 +82,6 @@ export default function SignInSide() { }); } - const responseGoogle = async (response) => { - // Handle Google login response - let googleResponse = await axiosapi.googleLogin(response.access_token); - console.log('Google Response:\n', googleResponse); - - if (googleResponse.status === 200) { - // Store Google login tokens and set the authorization header on success - 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('/'); - } - } - const googleLoginImplicit = useGoogleLogin({ flow: 'auth-code', redirect_uri: 'postmessage', diff --git a/frontend/src/components/authentication/IsAuthenticated.jsx b/frontend/src/components/authentication/IsAuthenticated.jsx index e3691c8..48322de 100644 --- a/frontend/src/components/authentication/IsAuthenticated.jsx +++ b/frontend/src/components/authentication/IsAuthenticated.jsx @@ -1,48 +1,19 @@ import { useState, useEffect } from 'react'; -import axiosapi from '../../api/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'); + const access_token = localStorage.getItem('access_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(); + if (access_token) { + setIsAuthenticated(true); + } else { + setIsAuthenticated(false); + } }, []); - const checkIfAccessTokenExpired = (accessToken) => { - // Need to change logic again! - return !accessToken; - }; - return isAuthenticated; } -export default IsAuthenticated; +export default IsAuthenticated; \ No newline at end of file diff --git a/frontend/src/components/authentication/SignUpPage.jsx b/frontend/src/components/authentication/SignUpPage.jsx index 3e33a86..7739016 100644 --- a/frontend/src/components/authentication/SignUpPage.jsx +++ b/frontend/src/components/authentication/SignUpPage.jsx @@ -21,8 +21,8 @@ function Copyright(props) { return ( {'Copyright © '} - - Your Website + + TurTask {' '} {new Date().getFullYear()} {'.'} diff --git a/frontend/src/components/authentication/refreshAcessToken.jsx b/frontend/src/components/authentication/refreshAcessToken.jsx new file mode 100644 index 0000000..89204d5 --- /dev/null +++ b/frontend/src/components/authentication/refreshAcessToken.jsx @@ -0,0 +1,37 @@ +import axios from 'axios'; + +async function refreshAccessToken() { + const refresh_token = localStorage.getItem('refresh_token'); + const access_token = localStorage.getItem('access_token'); + + if (access_token) { + return true; + } + + if (!refresh_token) { + return false; + } + + const refreshUrl = 'http://127.0.0.1:8000/api/token/refresh/'; + + try { + const response = await axios.post(refreshUrl, { refresh: refresh_token }); + + if (response.status === 200) { + // Successful refresh - save the new access token and refresh token + const newAccessToken = response.data.access; + const newRefreshToken = response.data.refresh; + + localStorage.setItem('access_token', newAccessToken); + localStorage.setItem('refresh_token', newRefreshToken); + + return true; + } else { + return false; + } + } catch (error) { + return false; + } +} + +export default refreshAccessToken;