full user login flow, redirect user from root path to dashboard

This commit is contained in:
IluaAir
2025-10-21 22:40:37 +03:00
parent 17b64121db
commit 246cd54a47
4 changed files with 58 additions and 3 deletions

View File

@@ -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" />

View File

@@ -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]);

View File

@@ -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)

View 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;
}