g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
NotII
2025-03-23 22:14:05 +00:00
parent 6ab5a9ac43
commit e3e630c211
3 changed files with 61 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
app/api/auth/check/route.ts
View File

@@ -2,17 +2,29 @@ import { NextRequest, NextResponse } from 'next/server';
export async function GET(req: NextRequest) {
try {
const token = req.cookies.get('Authorization')?.value;
// Check for Authorization in headers first, then fall back to cookies
let token = req.headers.get('Authorization')?.replace('Bearer ', '');
// If not in headers, check cookies
if (!token) {
token = req.cookies.get('Authorization')?.value;
console.log('Auth check: Token from cookies');
} else {
console.log('Auth check: Token from headers');
}
if (!token) {
console.log('Auth check failed: No Authorization token found');
return NextResponse.json(
{ error: 'No authorization token found' },
{ status: 401 }
);
}
console.log('Auth check: Token found -', token.substring(0, 15) + '...');
const apiUrl = process.env.SERVER_API_URL || 'https://internal-api.inboxi.ng/api';
console.log(`Server auth check calling: ${apiUrl}/auth/me`);
console.log(`Auth check: Calling external API: ${apiUrl}/auth/me`);
const res = await fetch(`${apiUrl}/auth/me`, {
method: 'GET',
@@ -20,24 +32,45 @@ export async function GET(req: NextRequest) {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
},
// This is a server component, so we can use Node.js options if needed
// (though we'll avoid for compatibility)
cache: 'no-store'
});
console.log('Auth check: External API response status:', res.status);
if (!res.ok) {
try {
const errorData = await res.json();
console.log('Auth check failed:', {
status: res.status,
statusText: res.statusText,
body: errorData
});
} catch {
const errorText = await res.text().catch(() => 'No response body');
console.log('Auth check failed:', {
status: res.status,
statusText: res.statusText,
body: errorText
});
}
return NextResponse.json(
{ error: 'Authentication failed' },
{ error: 'Authentication failed', details: res.statusText },
{ status: res.status }
);
}
const data = await res.json();
console.log('Auth check succeeded:', { userId: data._id || 'unknown' });
return NextResponse.json(data);
} catch (error) {
console.error('Auth check error:', error);
return NextResponse.json(
{ error: 'Failed to validate authentication' },
{
error: 'Failed to validate authentication',
details: error instanceof Error ? error.message : String(error)
},
{ status: 500 }
);
}

136
app/auth/login/page.tsx
View File

@@ -1,13 +1,9 @@
"use client";
import { fetchData } from "@/lib/data-service";
import { clientFetch } from "@/lib/client-utils";
"use client"
import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import Image from "next/image";
import { useRouter, useSearchParams } from "next/navigation";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { toast } from "sonner";
@@ -16,18 +12,9 @@ export default function LoginPage() {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [isLoading, setIsLoading] = useState(false);
const [isRedirecting, setIsRedirecting] = useState(false);
const [authStatus, setAuthStatus] = useState<{
loading: boolean;
progress: number;
message: string;
}>({
loading: false,
progress: 0,
message: "Preparing your session..."
});
const [error, setError] = useState("");
const router = useRouter();
const searchParams = useSearchParams();
const redirectUrl = searchParams.get("redirectUrl") || "/dashboard";
// Check if already logged in
useEffect(() => {
@@ -41,116 +28,37 @@ export default function LoginPage() {
}
}, [router]);
// Function to verify authentication and prepare navigation
const prepareNavigation = async (token: string) => {
try {
setAuthStatus(prev => ({
...prev,
loading: true,
message: "Verifying your credentials..."
}));
// Step 1: Verify token is valid by making a simple auth check
// This ensures we don't redirect with an invalid token
await clientFetch("/auth/me", {
headers: { Authorization: `Bearer ${token}` }
});
setAuthStatus(prev => ({
...prev,
progress: 50,
message: "Authentication successful!"
}));
// Slight delay to show success message
await new Promise(resolve => setTimeout(resolve, 300));
setAuthStatus(prev => ({
...prev,
progress: 100,
message: "Redirecting to dashboard..."
}));
// Tell Next.js to prefetch the dashboard page
// This helps with faster page load but doesn't affect server data fetching
router.prefetch('/dashboard');
// Short delay to show completion
await new Promise(resolve => setTimeout(resolve, 500));
// Redirect to dashboard
router.push("/dashboard");
// Fallback redirect if router.push fails
setTimeout(() => {
window.location.href = "/dashboard";
}, 1000);
} catch (error) {
console.error("Authentication verification error:", error);
// Even if verification fails, still try to redirect
// The dashboard will handle invalid auth
setAuthStatus(prev => ({
...prev,
progress: 100,
message: "Authentication issue, redirecting anyway..."
}));
toast.warning("Authentication issue detected", {
description: "You may need to log in again if the dashboard doesn't load."
});
// Still redirect
setTimeout(() => {
router.push("/dashboard");
// Ultimate fallback
setTimeout(() => {
window.location.href = "/dashboard";
}, 1000);
}, 500);
}
};
async function handleLogin(e: React.FormEvent) {
e.preventDefault();
if (isLoading || isRedirecting) return;
setIsLoading(true);
try {
const response = await fetch(`/api/auth/login`, {
// Using fetch directly with the proxy path
const response = await fetch("/api/auth/login", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ username, password }),
credentials: "include",
});
const data = await response.json();
if (response.ok && data.token) {
// Set redirecting state to prevent multiple redirect attempts
setIsRedirecting(true);
// Store the token in both cookie and localStorage for redundancy
document.cookie = `Authorization=${data.token}; path=/; Secure; SameSite=Strict; max-age=604800`;
localStorage.setItem("Authorization", data.token);
// Show toast before redirect
toast.success("Login successful");
// Now verify auth and handle redirect
await prepareNavigation(data.token);
// Redirect to dashboard or the original redirect URL
router.push(redirectUrl);
} else {
// Handle HTTP error responses (including 401)
// Handle HTTP error responses
const errorMessage = data.error || "Invalid credentials";
toast.error("Login Failed", {
description: errorMessage,
});
}
} catch (error) {
// This will now only catch network errors or JSON parsing errors
toast.error("Connection Error", {
description: "Unable to connect to the server. Please check your internet connection and try again.",
});
@@ -160,30 +68,6 @@ export default function LoginPage() {
}
}
// If already redirecting, show loading state with progress
if (isRedirecting) {
return (
<div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-[#0F0F12]">
<div className="w-full max-w-md p-8 space-y-8 bg-white dark:bg-[#1F1F23] rounded-xl shadow-lg text-center">
<h2 className="mt-6 text-3xl font-bold text-gray-900 dark:text-white">Logging in</h2>
<p className="mt-2 text-sm text-gray-600 dark:text-gray-400">{authStatus.message}</p>
{/* Progress bar */}
<div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700 mt-6">
<div
className="bg-primary h-2.5 rounded-full transition-all duration-300 ease-in-out"
style={{ width: `${authStatus.progress}%` }}
></div>
</div>
<div className="mt-6 flex justify-center">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
</div>
</div>
</div>
);
}
return (
<div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-[#0F0F12]">
<div className="w-full max-w-md p-8 space-y-8 bg-white dark:bg-[#1F1F23] rounded-xl shadow-lg">
@@ -222,7 +106,7 @@ export default function LoginPage() {
</div>
</div>
<Button type="submit" className="w-full" disabled={isLoading || isRedirecting}>
<Button type="submit" className="w-full" disabled={isLoading}>
{isLoading ? "Signing in..." : "Sign in"}
</Button>
</form>