started on adding openid login

.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

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 }

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,7 +54,45 @@ export default function LoginForm() {
             router.push('/dashboard')
         }
     }
+
+    const handleOidcLogin = (providerId: string) => {
+        signIn(providerId, { callbackUrl: '/dashboard' })
+    }
+
     return (
+        <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'>
@@ -67,11 +129,12 @@ export default function LoginForm() {
                             type="submit" 
                             className="w-full bg-brand-primary-600 hover:bg-brand-primary-400"
                         >
-                        Login
+                            Sign in with Email
                         </Button>
-                    {error && <p className="text-red-500">{error}</p>}
+                        {error && <p className="text-red-500 text-center">{error}</p>}
                     </div>
                 </div>
             </form>
+        </div>
     )
 }

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>
+    )
+}

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>
+    )
+}

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>

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");

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 {