started on adding openid login

2026-01-28 12:13:04 -05:00
parent c6ff651f21
commit e03b291ca6
8 changed files with 191 additions and 47 deletions
--- a/.env.example
+++ b/.env.example
@@ -11,6 +11,18 @@ NEXTAUTH_SECRET=your-secret
 NEXTAUTH_URL=http://localhost:3000
 NEXT_PUBLIC_BASE_URL=http://localhost:3000

+# OIDC Configuration (optional)
+OIDC_ENABLED=true
+OIDC_PROVIDER_NAME="Company SSO"  # Display name for the button
+OIDC_CLIENT_ID=your-oidc-client-id
+OIDC_CLIENT_SECRET=your-oidc-client-secret
+OIDC_ISSUER=https://your-oidc-provider.com/auth/realms/your-realm
+
+# Optional: Role mapping
+OIDC_ROLE_CLAIM=roles
+OIDC_ADMIN_ROLES=admin,superuser
+OIDC_PLANNER_ROLES=planner,editor
+
 # SMTP (optional)
 SMTP_HOST=smtpserver
 SMTP_PORT=587
--- a/app/api/auth/[...nextauth]/route.ts
+++ b/app/api/auth/[...nextauth]/route.ts
@@ -1,5 +1,6 @@
 import NextAuth, { type NextAuthOptions } from 'next-auth'
 import CredentialsProvider from 'next-auth/providers/credentials'
+import KeycloakProvider from 'next-auth/providers/keycloak'
 import { PrismaClient } from '@prisma/client'
 import bcrypt from 'bcrypt'

@@ -44,6 +45,31 @@ export const authOptions: NextAuthOptions = {
        }
      },
    }),
+    ...(process.env.OIDC_CLIENT_ID && process.env.OIDC_CLIENT_SECRET && process.env.OIDC_ISSUER 
+      ? [
+          {
+            id: 'oidc',
+            name: process.env.OIDC_PROVIDER_NAME || 'PocketID',
+            type: 'oauth' as const, // Use const assertion here
+            wellKnown: `${process.env.OIDC_ISSUER}/.well-known/openid-configuration`,
+            authorization: { params: { scope: 'openid email profile' } },
+            clientId: process.env.OIDC_CLIENT_ID,
+            clientSecret: process.env.OIDC_CLIENT_SECRET,
+            idToken: true,
+            checks: ['pkce', 'state'] as any,
+            profile(profile: any) {
+              return {
+                id: profile.sub,
+                name: profile.name || profile.preferred_username || profile.email,
+                email: profile.email,
+                image: profile.picture,
+                role: mapPocketIDRoleToAppRole(profile),
+              }
+            },
+          } as any
+        ]
+      : []
+    ),
  ],
  session: {
    strategy: 'jwt',
@@ -69,5 +95,21 @@ export const authOptions: NextAuthOptions = {
  secret: process.env.NEXTAUTH_SECRET,
 }

+function mapPocketIDRoleToAppRole(profile: any): "COUPLE" | "PLANNER" | "GUEST" {
+  const roles = profile.roles || 
+                profile.groups || 
+                profile.realm_access?.roles || 
+                profile.resource_access?.[process.env.OIDC_CLIENT_ID || '']?.roles || 
+                []
+  
+  if (roles.includes('admin') || roles.includes('planner')) {
+    return 'PLANNER'
+  } else if (roles.includes('couple') || roles.includes('user')) {
+    return 'COUPLE'
+  } else {
+    return 'GUEST'
+  }
+}
+
 const handler = NextAuth(authOptions)
 export { handler as GET, handler as POST }
--- a/components/forms/LoginForm.tsx
+++ b/components/forms/LoginForm.tsx
@@ -1,18 +1,42 @@
 'use client'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { Label } from '../ui/label'
 import { Input } from '../ui/input'
 import Link from 'next/link'
 import { Button } from '../ui/button'
-import { signIn } from 'next-auth/react'
+import { getProviders, signIn } from 'next-auth/react'
 import { useRouter } from 'next/navigation'
+import { Separator } from '../ui/separator' 
+import KeyIcon from '../icons/KeyIcon'
+import OpenIDIcon from '../icons/OpenIDIcon'
+
+interface Provider {
+  id: string
+  name: string
+}

 export default function LoginForm() {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('')
    const [error, setError] = useState('');
+    const [providers, setProviders] = useState<Provider[]>([])
    const router = useRouter();

+    useEffect(() => {
+        // Fetch available auth providers
+        const fetchProviders = async () => {
+            const authProviders = await getProviders()
+            if (authProviders) {
+                // Filter out credentials provider (email/password)
+                const filtered = Object.values(authProviders).filter(
+                    p => p.id !== 'credentials'
+                )
+                setProviders(filtered)
+            }
+        }
+        fetchProviders()
+    }, [])
+
    async function handleSubmit(e: React.FormEvent) {
        e.preventDefault();

@@ -30,48 +54,87 @@ export default function LoginForm() {
            router.push('/dashboard')
        }
    }
+
+    const handleOidcLogin = (providerId: string) => {
+        signIn(providerId, { callbackUrl: '/dashboard' })
+    }
+
    return (
-        <form onSubmit={handleSubmit}>
-            <div className='flex flex-col gap-6'>
-                <div className='grid gap-3'>
-                    <Label htmlFor='email'>Email</Label>
-                    <Input
-                        id='email'
-                        type='email'
-                        placeholder='m@example.com'
-                        value={email}
-                        onChange={(e) => setEmail(e.target.value)}
-                        required
-                    />
-                </div>
-                <div className='grid gap-3'>
-                    <div className='flex items-center'>
-                        <Label htmlFor='password'>Password</Label>
-                        <Link 
-                            href={'#'}
-                            className='ml-auto inline-block text-sm underline-offset-4 hover:underline'
-                        >
-                            Forgot your password?
-                        </Link>
+        <div className="space-y-6">
+            {/* OIDC Providers Section
+            {providers.length > 0 && (
+                <>
+                    <div className="space-y-3">
+                        <h3 className="text-center text-sm font-medium text-muted-foreground">
+                            Sign in with
+                        </h3>
+                        <div className="grid grid-cols-1 gap-3">
+                            {providers.map((provider) => (
+                                <Button
+                                    key={provider.id}
+                                    type="button"
+                                    variant="outline"
+                                    className="w-full"
+                                    onClick={() => handleOidcLogin(provider.id)}
+                                >
+                                    <span className="flex items-center justify-center gap-2">
+                                        <OpenIDIcon />
+                                        {provider.name}
+                                    </span>
+                                </Button>
+                            ))}
+                        </div>
+                    </div>
+                    <Separator className="my-6" />
+                    <div className="text-center text-sm text-muted-foreground">
+                        Or continue with email
+                    </div>
+                </>
+            )} */}
+
+            {/* Email/Password Form */}
+            <form onSubmit={handleSubmit}>
+                <div className='flex flex-col gap-6'>
+                    <div className='grid gap-3'>
+                        <Label htmlFor='email'>Email</Label>
+                        <Input
+                            id='email'
+                            type='email'
+                            placeholder='m@example.com'
+                            value={email}
+                            onChange={(e) => setEmail(e.target.value)}
+                            required
+                        />
+                    </div>
+                    <div className='grid gap-3'>
+                        <div className='flex items-center'>
+                            <Label htmlFor='password'>Password</Label>
+                            <Link 
+                                href={'#'}
+                                className='ml-auto inline-block text-sm underline-offset-4 hover:underline'
+                            >
+                                Forgot your password?
+                            </Link>
+                        </div>
+                        <Input 
+                            id='password' 
+                            type='password' 
+                            value={password}
+                            onChange={(e) => setPassword(e.target.value)}
+                            required 
+                        />
+                    </div>
+                    <div className='flex flex-col gap-3'>
+                        <Button 
+                            type="submit" 
+                            className="w-full bg-brand-primary-600 hover:bg-brand-primary-400"
+                        >
+                            Sign in with Email
+                        </Button>
+                        {error && <p className="text-red-500 text-center">{error}</p>}
                    </div>
-                    <Input 
-                        id='password' 
-                        type='password' 
-                        value={password}
-                        onChange={(e) => setPassword(e.target.value)}
-                        required 
-                    />
                </div>
-                <div className='flex flex-col gap-3'>
-                    <Button 
-                        type="submit" 
-                        className="w-full bg-brand-primary-600 hover:bg-brand-primary-400"
-                    >
-                        Login
-                    </Button>
-                    {error && <p className="text-red-500">{error}</p>}
-                </div>
-            </div>
-        </form>
+            </form>
+        </div>
    )
 }
--- a/components/icons/KeyIcon.tsx
+++ b/components/icons/KeyIcon.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function KeyIcon() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="size-6">
+            <path fillRule="evenodd" d="M15.75 1.5a6.75 6.75 0 0 0-6.651 7.906c.067.39-.032.717-.221.906l-6.5 6.499a3 3 0 0 0-.878 2.121v2.818c0 .414.336.75.75.75H6a.75.75 0 0 0 .75-.75v-1.5h1.5A.75.75 0 0 0 9 19.5V18h1.5a.75.75 0 0 0 .53-.22l2.658-2.658c.19-.189.517-.288.906-.22A6.75 6.75 0 1 0 15.75 1.5Zm0 3a.75.75 0 0 0 0 1.5A2.25 2.25 0 0 1 18 8.25a.75.75 0 0 0 1.5 0 3.75 3.75 0 0 0-3.75-3.75Z" clipRule="evenodd" />
+        </svg>
+    )
+}
--- a/components/icons/OpenIDIcon.tsx
+++ b/components/icons/OpenIDIcon.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function OpenIDIcon() {
+    return (
+        <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>OpenID</title><path d="M14.54.889l-3.63 1.773v18.17c-4.15-.52-7.27-2.78-7.27-5.5 0-2.58 2.8-4.75 6.63-5.41v-2.31C4.42 8.322 0 11.502 0 15.332c0 3.96 4.74 7.24 10.91 7.78l3.63-1.71V.888m.64 6.724v2.31c1.43.25 2.71.7 3.76 1.31l-1.97 1.11 7.03 1.53-.5-5.21-1.87 1.06c-1.74-1.06-3.96-1.81-6.45-2.11z"/></svg>
+    )
+}
--- a/components/vendor/SidebarCard.tsx
+++ b/components/vendor/SidebarCard.tsx
@@ -5,7 +5,7 @@ import Link from 'next/link'

 interface SidebarCardsProps {
    description?: string | null
-    events: Array<{
+    events?: Array<{
        id: string
        name: string
        date: Date | null
@@ -44,7 +44,7 @@ export function SidebarCards({ description, events, timeline, vendorId }: Sideba
            )}

        {/* Associated Events */}
-        {events.length > 0 && (
+        {events && events.length > 0 && (
            <Card>
                <CardHeader>
                    <CardTitle>Associated Events</CardTitle>
@@ -108,7 +108,7 @@ export function SidebarCards({ description, events, timeline, vendorId }: Sideba
                            <div className="flex items-center justify-between">
                                <span className="text-sm">Final Payment Due</span>
                                <span className="text-sm text-muted-foreground">
-                                {formatDate(timeline.finalPaymentDue)}
+                                    {formatDate(timeline.finalPaymentDue)}
                                </span>
                            </div>
                        )}
@@ -124,7 +124,7 @@ export function SidebarCards({ description, events, timeline, vendorId }: Sideba
                <CardContent className="space-y-3">
                    <Button variant="outline" className="w-full justify-start" asChild>
                        <Link href={`/vendors/${vendorId}/edit`}>
-                        Edit Vendor Details
+                            Edit Vendor Details
                        </Link>
                    </Button>
                    <Button variant="outline" className="w-full justify-start">
@@ -135,7 +135,7 @@ export function SidebarCards({ description, events, timeline, vendorId }: Sideba
                    </Button>
                    <Button variant="outline" className="w-full justify-start" asChild>
                        <Link href={`/vendors/${vendorId}/payments`}>
-                        Record Payment
+                            Record Payment
                        </Link>
                    </Button>
                </CardContent>
--- a/prisma/migrations/20260128164514_add_oidc_user/migration.sql
+++ b/prisma/migrations/20260128164514_add_oidc_user/migration.sql
@@ -0,0 +1,6 @@
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "authProvider" TEXT,
+ADD COLUMN     "providerId" TEXT;
+
+-- CreateIndex
+CREATE INDEX "User_authProvider_providerId_idx" ON "User"("authProvider", "providerId");
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -17,7 +17,12 @@ model User {
    events    Event[]  @relation("EventCreator")
    createdAt DateTime @default(now())

+    authProvider    String?   // 'credentials', 'oidc', 'google', etc.
+    providerId      String?   // OIDC subject ID
+
    FileUpload FileUpload[]
+
+    @@index([authProvider, providerId])
 }

 enum Role {