clean routes
This commit is contained in:
@@ -1,35 +0,0 @@
|
||||
import { cookies } from 'next/headers';
|
||||
import { NextResponse } from 'next/server';
|
||||
import { ServiceFactory } from '@/lib/services/ServiceFactory';
|
||||
|
||||
const STATE_COOKIE = 'gp_demo_auth_state';
|
||||
|
||||
export async function GET(request: Request) {
|
||||
const url = new URL(request.url);
|
||||
const code = url.searchParams.get('code') ?? undefined;
|
||||
const state = url.searchParams.get('state') ?? undefined;
|
||||
const rawReturnTo = url.searchParams.get('returnTo');
|
||||
const returnTo = rawReturnTo ?? undefined;
|
||||
|
||||
if (!code || !state) {
|
||||
return NextResponse.redirect('/auth/iracing');
|
||||
}
|
||||
|
||||
const cookieStore = await cookies();
|
||||
const storedState = cookieStore.get(STATE_COOKIE)?.value;
|
||||
|
||||
if (!storedState || storedState !== state) {
|
||||
return NextResponse.redirect('/auth/iracing');
|
||||
}
|
||||
|
||||
const serviceFactory = new ServiceFactory(process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3001');
|
||||
const authService = serviceFactory.createAuthService();
|
||||
const loginInput = returnTo ? { code, state, returnTo } : { code, state };
|
||||
await authService.loginWithIracingCallback(loginInput);
|
||||
|
||||
cookieStore.delete(STATE_COOKIE);
|
||||
|
||||
const redirectTarget = returnTo || '/dashboard';
|
||||
const absoluteRedirect = new URL(redirectTarget, url.origin).toString();
|
||||
return NextResponse.redirect(absoluteRedirect);
|
||||
}
|
||||
@@ -1,280 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import { motion, AnimatePresence, useReducedMotion } from 'framer-motion';
|
||||
import {
|
||||
Gamepad2,
|
||||
Flag,
|
||||
ArrowRight,
|
||||
Shield,
|
||||
Link as LinkIcon,
|
||||
User,
|
||||
Trophy,
|
||||
BarChart3,
|
||||
CheckCircle2,
|
||||
} from 'lucide-react';
|
||||
|
||||
import Card from '@/components/ui/Card';
|
||||
import Button from '@/components/ui/Button';
|
||||
import Heading from '@/components/ui/Heading';
|
||||
import { useAuth } from '@/lib/auth/AuthContext';
|
||||
|
||||
interface ConnectionStep {
|
||||
id: number;
|
||||
icon: typeof Gamepad2;
|
||||
title: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
const CONNECTION_STEPS: ConnectionStep[] = [
|
||||
{
|
||||
id: 1,
|
||||
icon: Gamepad2,
|
||||
title: 'Connect iRacing',
|
||||
description: 'Authorize GridPilot to access your profile',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: User,
|
||||
title: 'Import Profile',
|
||||
description: 'We fetch your racing stats and history',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: Trophy,
|
||||
title: 'Sync Achievements',
|
||||
description: 'Your licenses, iRating, and results',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: BarChart3,
|
||||
title: 'Ready to Race',
|
||||
description: 'Access full GridPilot features',
|
||||
},
|
||||
];
|
||||
|
||||
const BENEFITS = [
|
||||
'Automatic profile creation with your iRacing data',
|
||||
'Real-time stats sync including iRating and Safety Rating',
|
||||
'Import your racing history and achievements',
|
||||
'No manual data entry required',
|
||||
'Verified driver identity in leagues',
|
||||
];
|
||||
|
||||
export default function IracingAuthPage() {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const { session } = useAuth();
|
||||
const returnTo = searchParams.get('returnTo') ?? '/dashboard';
|
||||
const startUrl = `/auth/iracing/start?returnTo=${encodeURIComponent(returnTo)}`;
|
||||
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const [isMounted, setIsMounted] = useState(false);
|
||||
const [activeStep, setActiveStep] = useState(0);
|
||||
const [isHovering, setIsHovering] = useState(false);
|
||||
|
||||
// Check if user is already authenticated
|
||||
useEffect(() => {
|
||||
if (session) {
|
||||
router.replace('/dashboard');
|
||||
}
|
||||
}, [session, router]);
|
||||
|
||||
useEffect(() => {
|
||||
setIsMounted(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isMounted || isHovering) return;
|
||||
|
||||
const interval = setInterval(() => {
|
||||
setActiveStep((prev) => (prev + 1) % CONNECTION_STEPS.length);
|
||||
}, 2500);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [isMounted, isHovering]);
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-deep-graphite flex items-center justify-center px-4 py-12">
|
||||
{/* Background Pattern */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-primary-blue/5 via-transparent to-purple-600/5" />
|
||||
<div className="absolute inset-0 opacity-5">
|
||||
<div className="absolute inset-0" style={{
|
||||
backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
|
||||
}} />
|
||||
</div>
|
||||
|
||||
<div className="relative w-full max-w-2xl">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<div className="flex justify-center gap-4 mb-6">
|
||||
<motion.div
|
||||
initial={{ scale: 0.8, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="flex h-14 w-14 items-center justify-center rounded-xl bg-gradient-to-br from-primary-blue/20 to-purple-600/10 border border-primary-blue/30"
|
||||
>
|
||||
<Flag className="w-7 h-7 text-primary-blue" />
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={{ scale: 0, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="flex items-center"
|
||||
>
|
||||
<LinkIcon className="w-6 h-6 text-gray-500" />
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={{ scale: 0.8, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
transition={{ delay: 0.3 }}
|
||||
className="flex h-14 w-14 items-center justify-center rounded-xl bg-gradient-to-br from-orange-500/20 to-red-600/10 border border-orange-500/30"
|
||||
>
|
||||
<Gamepad2 className="w-7 h-7 text-orange-400" />
|
||||
</motion.div>
|
||||
</div>
|
||||
<Heading level={1} className="mb-3">Connect Your iRacing Account</Heading>
|
||||
<p className="text-gray-400 text-lg max-w-md mx-auto">
|
||||
Link your iRacing profile for automatic stats sync and verified driver identity.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card className="relative overflow-hidden">
|
||||
{/* Background accent */}
|
||||
<div className="absolute top-0 right-0 w-48 h-48 bg-gradient-to-bl from-primary-blue/5 to-transparent rounded-bl-full" />
|
||||
<div className="absolute bottom-0 left-0 w-32 h-32 bg-gradient-to-tr from-orange-500/5 to-transparent rounded-tr-full" />
|
||||
|
||||
<div className="relative">
|
||||
{/* Connection Flow Animation */}
|
||||
<div
|
||||
className="bg-iron-gray/50 rounded-xl border border-charcoal-outline p-6 mb-6"
|
||||
onMouseEnter={() => setIsHovering(true)}
|
||||
onMouseLeave={() => setIsHovering(false)}
|
||||
>
|
||||
<p className="text-xs text-gray-500 text-center mb-4">Connection Flow</p>
|
||||
|
||||
{/* Steps */}
|
||||
<div className="flex justify-between items-start gap-2">
|
||||
{CONNECTION_STEPS.map((step, index) => {
|
||||
const isActive = index === activeStep;
|
||||
const isCompleted = index < activeStep;
|
||||
const StepIcon = step.icon;
|
||||
|
||||
return (
|
||||
<motion.button
|
||||
key={step.id}
|
||||
onClick={() => setActiveStep(index)}
|
||||
className="flex flex-col items-center text-center flex-1 cursor-pointer"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
<motion.div
|
||||
className={`w-12 h-12 rounded-xl border flex items-center justify-center mb-2 transition-all duration-300 ${
|
||||
isActive
|
||||
? 'bg-primary-blue/20 border-primary-blue shadow-[0_0_15px_rgba(25,140,255,0.3)]'
|
||||
: isCompleted
|
||||
? 'bg-performance-green/20 border-performance-green/50'
|
||||
: 'bg-deep-graphite border-charcoal-outline'
|
||||
}`}
|
||||
animate={isActive && !shouldReduceMotion ? {
|
||||
scale: [1, 1.08, 1],
|
||||
transition: { duration: 1, repeat: Infinity }
|
||||
} : {}}
|
||||
>
|
||||
{isCompleted ? (
|
||||
<CheckCircle2 className="w-5 h-5 text-performance-green" />
|
||||
) : (
|
||||
<StepIcon className={`w-5 h-5 ${isActive ? 'text-primary-blue' : 'text-gray-500'}`} />
|
||||
)}
|
||||
</motion.div>
|
||||
<h4 className={`text-xs font-medium transition-colors ${
|
||||
isActive ? 'text-white' : 'text-gray-500'
|
||||
}`}>
|
||||
{step.title}
|
||||
</h4>
|
||||
</motion.button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Active Step Description */}
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={activeStep}
|
||||
initial={{ opacity: 0, y: 5 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -5 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="mt-4 text-center"
|
||||
>
|
||||
<p className="text-sm text-gray-400">
|
||||
{CONNECTION_STEPS[activeStep]?.description}
|
||||
</p>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
{/* Benefits List */}
|
||||
<div className="mb-6">
|
||||
<h3 className="text-sm font-medium text-gray-300 mb-3">What you'll get:</h3>
|
||||
<ul className="space-y-2">
|
||||
{BENEFITS.map((benefit, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className="flex items-start gap-2 text-sm text-gray-400"
|
||||
>
|
||||
<CheckCircle2 className="w-4 h-4 text-performance-green flex-shrink-0 mt-0.5" />
|
||||
{benefit}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Connect Button */}
|
||||
<Link href={startUrl} className="block">
|
||||
<Button
|
||||
variant="primary"
|
||||
className="w-full flex items-center justify-center gap-3 py-4"
|
||||
>
|
||||
<Gamepad2 className="w-5 h-5" />
|
||||
<span>Connect iRacing Account</span>
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
{/* Trust Indicators */}
|
||||
<div className="mt-6 pt-6 border-t border-charcoal-outline">
|
||||
<div className="flex items-center justify-center gap-6 text-xs text-gray-500">
|
||||
<div className="flex items-center gap-2">
|
||||
<Shield className="w-4 h-4" />
|
||||
<span>Secure OAuth connection</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<LinkIcon className="w-4 h-4" />
|
||||
<span>Read-only access</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Alternative */}
|
||||
<p className="mt-6 text-center text-sm text-gray-500">
|
||||
Don't have iRacing?{' '}
|
||||
<Link href="/auth/signup" className="text-primary-blue hover:underline">
|
||||
Create account with email
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Footer */}
|
||||
<p className="mt-6 text-center text-xs text-gray-500">
|
||||
GridPilot only requests read access to your iRacing profile.
|
||||
<br />
|
||||
We never access your payment info or modify your account.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
import { cookies } from 'next/headers';
|
||||
import { NextResponse } from 'next/server';
|
||||
|
||||
export async function GET(request: Request) {
|
||||
const url = new URL(request.url);
|
||||
const returnTo = url.searchParams.get('returnTo') ?? undefined;
|
||||
|
||||
const redirectUrl = `https://example.com/iracing/auth?returnTo=${encodeURIComponent(returnTo || '')}`;
|
||||
// For now, generate a simple state - in production this should be cryptographically secure
|
||||
const state = Math.random().toString(36).substring(2, 15);
|
||||
|
||||
const cookieStore = await cookies();
|
||||
cookieStore.set('gp_demo_auth_state', state, {
|
||||
httpOnly: true,
|
||||
sameSite: 'lax',
|
||||
path: '/',
|
||||
secure: process.env.NODE_ENV === 'production',
|
||||
});
|
||||
|
||||
const absoluteRedirect = new URL(redirectUrl, url.origin).toString();
|
||||
return NextResponse.redirect(absoluteRedirect);
|
||||
}
|
||||
30
apps/website/app/auth/layout.tsx
Normal file
30
apps/website/app/auth/layout.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import { headers } from 'next/headers';
|
||||
import { createRouteGuard } from '@/lib/auth/createRouteGuard';
|
||||
|
||||
interface AuthLayoutProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
/**
|
||||
* Auth Layout
|
||||
*
|
||||
* Provides authentication route protection for all auth routes.
|
||||
* Uses RouteGuard to enforce access control server-side.
|
||||
*
|
||||
* Behavior:
|
||||
* - Unauthenticated users can access auth pages (login, signup, etc.)
|
||||
* - Authenticated users are redirected away from auth pages
|
||||
*/
|
||||
export default async function AuthLayout({ children }: AuthLayoutProps) {
|
||||
const headerStore = await headers();
|
||||
const pathname = headerStore.get('x-pathname') || '/';
|
||||
|
||||
const guard = createRouteGuard();
|
||||
await guard.enforce({ pathname });
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-deep-graphite flex items-center justify-center p-4">
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
import { cookies } from 'next/headers';
|
||||
import { NextResponse } from 'next/server';
|
||||
|
||||
export async function POST(request: Request) {
|
||||
const cookieStore = await cookies();
|
||||
cookieStore.delete('gp_demo_session');
|
||||
|
||||
const url = new URL(request.url);
|
||||
const redirectUrl = new URL('/', url.origin);
|
||||
return NextResponse.redirect(redirectUrl);
|
||||
}
|
||||
Reference in New Issue
Block a user