120 lines
4.5 KiB
TypeScript
120 lines
4.5 KiB
TypeScript
'use client'
|
||
|
||
import { useSearchParams } from 'next/navigation'
|
||
import { Suspense } from 'react'
|
||
|
||
function DebugContent() {
|
||
const searchParams = useSearchParams()
|
||
|
||
// Get all parameters
|
||
const allParams: Record<string, string> = {}
|
||
searchParams.forEach((value, key) => {
|
||
allParams[key] = value
|
||
})
|
||
|
||
return (
|
||
<div className="min-h-screen bg-slate-50 p-8">
|
||
<div className="max-w-4xl mx-auto">
|
||
<div className="bg-white rounded-lg shadow-lg p-8">
|
||
<h1 className="text-3xl font-bold text-slate-900 mb-6">
|
||
🔍 Auth Debug Page
|
||
</h1>
|
||
|
||
<div className="mb-8">
|
||
<h2 className="text-xl font-semibold text-slate-700 mb-4">
|
||
Full URL
|
||
</h2>
|
||
<div className="bg-slate-100 p-4 rounded-lg font-mono text-sm break-all">
|
||
{typeof window !== 'undefined' ? window.location.href : 'Loading...'}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mb-8">
|
||
<h2 className="text-xl font-semibold text-slate-700 mb-4">
|
||
URL Parameters ({Object.keys(allParams).length})
|
||
</h2>
|
||
{Object.keys(allParams).length > 0 ? (
|
||
<div className="space-y-3">
|
||
{Object.entries(allParams).map(([key, value]) => (
|
||
<div key={key} className="bg-slate-100 p-4 rounded-lg">
|
||
<div className="font-mono text-sm">
|
||
<span className="text-teal-600 font-semibold">{key}</span>
|
||
<span className="text-slate-500"> = </span>
|
||
<span className="text-slate-900">{value}</span>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<div className="bg-amber-50 border border-amber-200 rounded-lg p-4 text-amber-800">
|
||
⚠️ No URL parameters found
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="border-t pt-6">
|
||
<h2 className="text-xl font-semibold text-slate-700 mb-4">
|
||
Expected Parameters for Password Reset
|
||
</h2>
|
||
<div className="space-y-2 text-sm">
|
||
<div className="flex items-center gap-2">
|
||
<span className={`w-3 h-3 rounded-full ${allParams.token_hash ? 'bg-green-500' : 'bg-red-500'}`} />
|
||
<code className="text-slate-700">token_hash</code>
|
||
<span className="text-slate-500">
|
||
{allParams.token_hash ? '✅ Present' : '❌ Missing'}
|
||
</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<span className={`w-3 h-3 rounded-full ${allParams.type === 'recovery' ? 'bg-green-500' : 'bg-amber-500'}`} />
|
||
<code className="text-slate-700">type=recovery</code>
|
||
<span className="text-slate-500">
|
||
{allParams.type === 'recovery' ? '✅ Correct' : allParams.type ? `⚠️ Wrong: ${allParams.type}` : '❌ Missing'}
|
||
</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<span className={`w-3 h-3 rounded-full ${allParams.next === '/update-password' ? 'bg-green-500' : 'bg-amber-500'}`} />
|
||
<code className="text-slate-700">next=/update-password</code>
|
||
<span className="text-slate-500">
|
||
{allParams.next === '/update-password' ? '✅ Correct' : allParams.next ? `⚠️ Wrong: ${allParams.next}` : '❌ Missing'}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-8 pt-6 border-t">
|
||
<h2 className="text-xl font-semibold text-slate-700 mb-4">
|
||
Quick Actions
|
||
</h2>
|
||
<div className="flex gap-4">
|
||
<a
|
||
href="/login"
|
||
className="px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors"
|
||
>
|
||
Go to Login
|
||
</a>
|
||
<a
|
||
href="/reset-password"
|
||
className="px-4 py-2 bg-slate-600 text-white rounded-lg hover:bg-slate-700 transition-colors"
|
||
>
|
||
Reset Password
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default function DebugPage() {
|
||
return (
|
||
<Suspense fallback={
|
||
<div className="min-h-screen bg-slate-50 flex items-center justify-center">
|
||
<div className="text-slate-600">Loading debug info...</div>
|
||
</div>
|
||
}>
|
||
<DebugContent />
|
||
</Suspense>
|
||
)
|
||
}
|