App.jsx
const navigate = useNavigate();
return (
<>
<Routes>
<Route path="/recipe" element={<RecipeDetails/>} />
<Route path="/add" element={<AddRecipe/>} />
<Route path="/" element={<RecipeList/>} />
<Route path="/login" element={<Login/>} />
</Routes>
</>
);
}
export default App;```
**Login.jsx**
async function handleLogin () {
account.createOAuth2Session(
'google',
'http://localhost:5173/login',
'http://localhost:5173/fail'
)
}
const Login = () => {
const [user, setUser] = useState(null)
const navigate = useNavigate();
// Check if user is logged in when the component mounts
useEffect(() => {
const checkSession = async () => {
try {
const currentUser = await account.get()
setUser(currentUser)
navigate("/")
} catch (error) {
console.log("Not logged in")
}
}
}, [])
return (
<>
<div>Login</div>
{user ? (
<div>
Welcome, {user.name}!
</div>
) : (
<button onClick={handleLogin}>LOGIN with GOOGLE</button>
)}
</>
)
}
export default Login
So if you go to /login andclick the button you can login with google and then it takes you back to login. In theory if you logged in correctly the useEffect should redirect you back to / but it doesnt
Attached photo is the console before and after logging in through google. It's the same both times
TL;DR
Issue: OAuth2 login with Google is not redirecting back to the correct page (/) after successful login.
Solution: Update the `handleLogin` function in `Login.jsx` to include a redirect back to the main page after successful authentication.
```
async function handleLogin () {
await account.createOAuth2Session(
'google',
'http://localhost:5173/', // Redirect back to the main page after successful login
'http://localhost:5173/fail'
)
}
```
