full user login flow, redirect user from root path to dashboard
This commit is contained in:
@@ -4,13 +4,14 @@ import { SignUp } from './pages/SignUp'
|
||||
import { AuthLayout } from './layouts/AuthLayout'
|
||||
import { Routes, Route, Navigate } from 'react-router'
|
||||
import Dashboard from './pages/Dashboard'
|
||||
import RootRedirect from './pages/RootRedirect'
|
||||
|
||||
|
||||
function App() {
|
||||
|
||||
return (
|
||||
<Routes>
|
||||
<Route path="/" element={<Navigate to="/auth/login" replace />} />
|
||||
<Route path="/" element={<RootRedirect />} />
|
||||
|
||||
<Route path="/auth" element={
|
||||
<AuthLayout className="flex min-h-svh flex-col items-center justify-center bg-muted text-foreground" />
|
||||
|
||||
@@ -58,7 +58,7 @@ export default function Dashboard() {
|
||||
useEffect(() => {
|
||||
if (authError) {
|
||||
console.log('Authentication error detected, redirecting to login...');
|
||||
navigate('/');
|
||||
navigate('/auth/login', { replace: true });
|
||||
}
|
||||
}, [authError, navigate]);
|
||||
|
||||
|
||||
@@ -12,10 +12,11 @@ import {
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { login } from "@/api/auth.service"
|
||||
import { Link } from "react-router"
|
||||
import { Link, useNavigate } from "react-router"
|
||||
|
||||
|
||||
export function LoginPage({ className }) {
|
||||
const navigate = useNavigate()
|
||||
const [username, setUsername] = useState("")
|
||||
const [password, setPassword] = useState("")
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
@@ -33,6 +34,9 @@ export function LoginPage({ className }) {
|
||||
setSuccess("Login successful!")
|
||||
console.log("Logged in:", result)
|
||||
|
||||
// Redirect to dashboard after successful login
|
||||
navigate('/dashboard', { replace: true })
|
||||
|
||||
} catch (err) {
|
||||
setError(err.detail || "Login failed. Please check your credentials.")
|
||||
console.error("Login error:", err)
|
||||
|
||||
50
taskncoffee-app/src/pages/RootRedirect.jsx
Normal file
50
taskncoffee-app/src/pages/RootRedirect.jsx
Normal file
@@ -0,0 +1,50 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useNavigate } from 'react-router';
|
||||
import { jwtexp } from '@/lib/utils';
|
||||
|
||||
export default function RootRedirect() {
|
||||
const navigate = useNavigate();
|
||||
const [checking, setChecking] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const checkAuthAndRedirect = async () => {
|
||||
try {
|
||||
const token = localStorage.getItem('access_token');
|
||||
|
||||
if (token) {
|
||||
console.log('Token found, validating...');
|
||||
const isTokenValid = await jwtexp(token);
|
||||
|
||||
if (isTokenValid) {
|
||||
console.log('Token is valid, redirecting to dashboard...');
|
||||
navigate('/dashboard', { replace: true });
|
||||
} else {
|
||||
console.log('Token is invalid, redirecting to login...');
|
||||
navigate('/auth/login', { replace: true });
|
||||
}
|
||||
} else {
|
||||
console.log('No token found, redirecting to login...');
|
||||
navigate('/auth/login', { replace: true });
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error checking auth:', error);
|
||||
navigate('/auth/login', { replace: true });
|
||||
} finally {
|
||||
setChecking(false);
|
||||
}
|
||||
};
|
||||
|
||||
checkAuthAndRedirect();
|
||||
}, [navigate]);
|
||||
|
||||
if (checking) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen">
|
||||
<p className="text-xl">Checking authentication...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user