feat: implement passkey support with Supabase auth
Add WebAuthn utility functions and passkey manager component; update login and dashboard pages Co-authored-by: ASOwnerYT <[email protected]>
This commit is contained in:
+32
-23
@@ -3,6 +3,7 @@ import { redirect } from 'next/navigation'
|
||||
import Link from 'next/link'
|
||||
import { LogOut, User, ArrowLeft, Cloud, Globe, Wrench } from 'lucide-react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { PasskeyManager } from '@/components/passkey-manager'
|
||||
|
||||
async function signOut() {
|
||||
'use server'
|
||||
@@ -102,31 +103,39 @@ export default async function DashboardPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Account info */}
|
||||
<div className="bg-card border border-border rounded-2xl p-6">
|
||||
<h2 className="text-xl font-bold mb-4">Account Information</h2>
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between py-2 border-b border-border">
|
||||
<span className="text-muted-foreground">Email</span>
|
||||
<span className="font-medium">{user.email}</span>
|
||||
</div>
|
||||
<div className="flex justify-between py-2 border-b border-border">
|
||||
<span className="text-muted-foreground">Account created</span>
|
||||
<span className="font-medium">
|
||||
{new Date(user.created_at).toLocaleDateString('en-NZ', {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric'
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between py-2">
|
||||
<span className="text-muted-foreground">Auth provider</span>
|
||||
<span className="font-medium capitalize">
|
||||
{user.app_metadata?.provider || 'Email'}
|
||||
</span>
|
||||
{/* Account Settings */}
|
||||
<div className="grid lg:grid-cols-2 gap-6">
|
||||
{/* Account info */}
|
||||
<div className="bg-card border border-border rounded-2xl p-6">
|
||||
<h2 className="text-xl font-bold mb-4">Account Information</h2>
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between py-2 border-b border-border">
|
||||
<span className="text-muted-foreground">Email</span>
|
||||
<span className="font-medium">{user.email}</span>
|
||||
</div>
|
||||
<div className="flex justify-between py-2 border-b border-border">
|
||||
<span className="text-muted-foreground">Account created</span>
|
||||
<span className="font-medium">
|
||||
{new Date(user.created_at).toLocaleDateString('en-NZ', {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric'
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between py-2">
|
||||
<span className="text-muted-foreground">Auth provider</span>
|
||||
<span className="font-medium capitalize">
|
||||
{user.app_metadata?.provider || 'Email'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Passkey Management */}
|
||||
<div className="bg-card border border-border rounded-2xl p-6">
|
||||
<PasskeyManager />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user