Social Auth flow for React Router and Supabase

1import { useSearchParams } from 'react-router'
2 
3import { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/components/ui/card'
4 
5export default function Page() {
6  let [searchParams] = useSearchParams()
7 
8  return (
9    <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
10      <div className="w-full max-w-sm">
11        <div className="flex flex-col gap-6">
12          <Card>
13            <CardHeader>
14              <CardTitle className="text-2xl">Sorry, something went wrong.</CardTitle>
15            </CardHeader>
16            <CardContent>
17              {searchParams?.get('error') ? (
18                <p className="text-sm text-muted-foreground">
19                  Code error: {searchParams?.get('error')}
20                </p>
21              ) : (
22                <p className="text-sm text-muted-foreground">An unspecified error occurred.</p>
23              )}
24            </CardContent>
25          </Card>
26        </div>
27      </div>
28    </div>
29  )
30}