feat: implement Supabase authentication with Google OAuth

Add Supabase client, middleware, and auth pages; update header for auth state. Co-authored-by: ASOwnerYT <[email protected]>
2026-03-22 23:07:11 +00:00
parent 84200ac175
commit 1386f6e549
13 changed files with 1073 additions and 18 deletions
@@ -0,0 +1,134 @@
+import { createClient } from '@/lib/supabase/server'
+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'
+
+async function signOut() {
+  'use server'
+  const supabase = await createClient()
+  await supabase.auth.signOut()
+  redirect('/')
+}
+
+export default async function DashboardPage() {
+  const supabase = await createClient()
+  const { data: { user } } = await supabase.auth.getUser()
+
+  if (!user) {
+    redirect('/auth/login')
+  }
+
+  const userName = user.user_metadata?.full_name || user.email?.split('@')[0] || 'User'
+
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Header */}
+      <header className="border-b border-border bg-card/50 backdrop-blur-sm sticky top-0 z-50">
+        <div className="container mx-auto px-4 h-16 flex items-center justify-between">
+          <Link href="/" className="flex items-center gap-2">
+            <span className="text-xl font-bold">
+              Cloud<span className="text-primary">rite</span>
+            </span>
+          </Link>
+          
+          <div className="flex items-center gap-4">
+            <div className="flex items-center gap-2 text-sm text-muted-foreground">
+              <User className="w-4 h-4" />
+              <span>{userName}</span>
+            </div>
+            <form action={signOut}>
+              <Button type="submit" variant="outline" size="sm" className="gap-2">
+                <LogOut className="w-4 h-4" />
+                Sign out
+              </Button>
+            </form>
+          </div>
+        </div>
+      </header>
+
+      {/* Main content */}
+      <main className="container mx-auto px-4 py-12">
+        {/* Welcome section */}
+        <div className="mb-12">
+          <Link 
+            href="/" 
+            className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors mb-4"
+          >
+            <ArrowLeft className="w-4 h-4" />
+            Back to home
+          </Link>
+          <h1 className="text-4xl font-bold mb-2">
+            Welcome back, <span className="text-primary">{userName}</span>
+          </h1>
+          <p className="text-muted-foreground text-lg">
+            Your Cloudrite dashboard is coming soon. We&apos;re working on exciting features for you.
+          </p>
+        </div>
+
+        {/* Service cards */}
+        <div className="grid md:grid-cols-3 gap-6 mb-12">
+          <div className="bg-card border border-border rounded-2xl p-6 hover:border-primary/50 transition-colors">
+            <div className="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center mb-4">
+              <Globe className="w-6 h-6 text-primary" />
+            </div>
+            <h3 className="text-xl font-bold mb-2">Web Development</h3>
+            <p className="text-muted-foreground text-sm mb-4">
+              Manage your websites, view analytics, and request updates.
+            </p>
+            <span className="text-xs text-muted-foreground bg-muted px-2 py-1 rounded">Coming Soon</span>
+          </div>
+
+          <div className="bg-card border border-border rounded-2xl p-6 hover:border-primary/50 transition-colors">
+            <div className="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center mb-4">
+              <Cloud className="w-6 h-6 text-primary" />
+            </div>
+            <h3 className="text-xl font-bold mb-2">Cloud Hosting</h3>
+            <p className="text-muted-foreground text-sm mb-4">
+              Monitor your hosting, check uptime, and manage your servers.
+            </p>
+            <span className="text-xs text-muted-foreground bg-muted px-2 py-1 rounded">Coming Soon</span>
+          </div>
+
+          <div className="bg-card border border-border rounded-2xl p-6 hover:border-primary/50 transition-colors">
+            <div className="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center mb-4">
+              <Wrench className="w-6 h-6 text-primary" />
+            </div>
+            <h3 className="text-xl font-bold mb-2">I.T Support</h3>
+            <p className="text-muted-foreground text-sm mb-4">
+              Submit support tickets and track the status of your requests.
+            </p>
+            <span className="text-xs text-muted-foreground bg-muted px-2 py-1 rounded">Coming Soon</span>
+          </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>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  )
+}