auth0: Google login, social auth auto-provisioning

AUTH0 SETUP (done via Management API):
- Created 'Pledge Now Pay Later' app (regular_web) on quikcue.us.auth0.com
- Enabled connections: Google, Apple, Username-Password
- Callback: https://pledge.quikcue.com/api/auth/callback/auth0
- Client ID: hpr7JcEAAk3Q5ADkzyyZSRDxGIZTcjRJ

CODE CHANGES:
- Auth0Provider added to NextAuth alongside existing CredentialsProvider
- findOrCreateSocialUser(): first Google login auto-creates org + user
- Login page: 'Continue with Google' button at top, email/password below
- Signup page: 'Sign up with Google' button at top, form below
- JWT callback: resolves Auth0 users to DB users on every token refresh
- Docker compose: AUTH0_CLIENT_ID, AUTH0_CLIENT_SECRET, AUTH0_ISSUER env vars

FLOW:
- Click 'Continue with Google' → Auth0 Universal Login → Google consent
- First time: auto-creates '{Name}'s Charity' org + org_admin user
- Return time: finds existing user, loads their org
- Demo login still works via credentials provider

pledge-now-pay-later/src/app/(auth)/login/page.tsx

@@ -33,54 +33,69 @@ function LoginForm() {
     }
   }
 
-  const handleSubmit = (e: React.FormEvent) => doLogin(e)
-
   // Auto-login as demo if ?demo=1
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => { if (isDemo) doLogin(undefined, "demo@pnpl.app", "demo1234") }, [])
 
   return (
     <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-trust-blue/5 via-white to-warm-amber/5 p-4">
-      <div className="w-full max-w-sm space-y-6">
+      <div className="w-full max-w-sm space-y-5">
+        {isDemo && (
+          <div className="text-center py-8">
+            <div className="inline-flex h-12 w-12 rounded-2xl bg-gradient-to-br from-trust-blue to-blue-600 items-center justify-center shadow-lg shadow-trust-blue/20 animate-pulse mb-3">
+              <span className="text-white text-xl">🤲</span>
+            </div>
+            <p className="text-sm font-medium text-trust-blue animate-pulse">Loading demo...</p>
+          </div>
+        )}
+
+        {!isDemo && (
+          <>
             <div className="text-center">
-          <div className="inline-flex h-12 w-12 rounded-2xl bg-gradient-to-br from-trust-blue to-blue-600 items-center justify-center shadow-lg shadow-trust-blue/20 mb-4">
+              <div className="inline-flex h-12 w-12 rounded-2xl bg-gradient-to-br from-trust-blue to-blue-600 items-center justify-center shadow-lg shadow-trust-blue/20 mb-3">
                 <span className="text-white text-xl">🤲</span>
               </div>
               <h1 className="text-2xl font-black text-gray-900">Welcome back</h1>
               <p className="text-sm text-muted-foreground mt-1">Sign in to your charity dashboard</p>
             </div>
 
-        <form onSubmit={handleSubmit} className="space-y-4">
-          {error && (
-            <div className="rounded-xl bg-danger-red/10 border border-danger-red/20 p-3 text-sm text-danger-red text-center">
-              {error}
+            {/* Social login */}
+            <div className="space-y-2">
+              <button
+                onClick={() => signIn("auth0", { callbackUrl: "/dashboard" })}
+                className="w-full flex items-center justify-center gap-2 rounded-xl border border-gray-200 bg-white px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-all"
+              >
+                <svg className="h-4 w-4" viewBox="0 0 24 24"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/></svg>
+                Continue with Google
+              </button>
             </div>
-          )}
 
-          <div>
-            <label className="text-sm font-medium text-gray-700">Email</label>
+            <div className="relative">
+              <div className="absolute inset-0 flex items-center"><div className="w-full border-t" /></div>
+              <div className="relative flex justify-center text-xs"><span className="bg-gradient-to-br from-trust-blue/5 via-white to-warm-amber/5 px-3 text-muted-foreground">or sign in with email</span></div>
+            </div>
+
+            {/* Email/password form */}
+            <form onSubmit={(e) => doLogin(e)} className="space-y-3">
+              {error && (
+                <div className="rounded-xl bg-danger-red/10 border border-danger-red/20 p-2.5 text-sm text-danger-red text-center">{error}</div>
+              )}
               <input
                 type="email"
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
-              className="mt-1 w-full rounded-xl border border-gray-200 px-4 py-3 text-sm focus:border-trust-blue focus:ring-2 focus:ring-trust-blue/20 outline-none transition-all"
-              placeholder="you@charity.org"
+                className="w-full rounded-xl border border-gray-200 px-4 py-3 text-sm focus:border-trust-blue focus:ring-2 focus:ring-trust-blue/20 outline-none transition-all"
+                placeholder="Email"
                 required
               />
-          </div>
-
-          <div>
-            <label className="text-sm font-medium text-gray-700">Password</label>
               <input
                 type="password"
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
-              className="mt-1 w-full rounded-xl border border-gray-200 px-4 py-3 text-sm focus:border-trust-blue focus:ring-2 focus:ring-trust-blue/20 outline-none transition-all"
-              placeholder="••••••••"
+                className="w-full rounded-xl border border-gray-200 px-4 py-3 text-sm focus:border-trust-blue focus:ring-2 focus:ring-trust-blue/20 outline-none transition-all"
+                placeholder="Password"
                 required
               />
-          </div>
-
               <button
                 type="submit"
                 disabled={loading}
@@ -106,10 +121,10 @@ function LoginForm() {
 
             <p className="text-center text-sm text-muted-foreground">
               Don&apos;t have an account?{" "}
-          <Link href="/signup" className="text-trust-blue font-semibold hover:underline">
-            Get Started Free
-          </Link>
+              <Link href="/signup" className="text-trust-blue font-semibold hover:underline">Get Started Free</Link>
             </p>
+          </>
+        )}
       </div>
     </div>
   )

pledge-now-pay-later/src/app/(auth)/signup/page.tsx

@@ -13,6 +13,11 @@ export default function SignupPage() {
   const [error, setError] = useState("")
   const router = useRouter()
 
+  const signUpWithGoogle = () => {
+    setStep("loading")
+    signIn("auth0", { callbackUrl: "/dashboard" })
+  }
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     if (!charityName.trim() || !email.trim() || !password) return
@@ -71,6 +76,20 @@ export default function SignupPage() {
           <p className="text-sm text-muted-foreground mt-1">Free. 30 seconds. No card.</p>
         </div>
 
+        {/* Google signup */}
+        <button
+          onClick={signUpWithGoogle}
+          className="w-full flex items-center justify-center gap-2 rounded-xl border border-gray-200 bg-white px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-all"
+        >
+          <svg className="h-4 w-4" viewBox="0 0 24 24"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/></svg>
+          Sign up with Google
+        </button>
+
+        <div className="relative">
+          <div className="absolute inset-0 flex items-center"><div className="w-full border-t" /></div>
+          <div className="relative flex justify-center text-xs"><span className="bg-gradient-to-br from-trust-blue/5 via-white to-warm-amber/5 px-3 text-muted-foreground">or use email</span></div>
+        </div>
+
         <form onSubmit={handleSubmit} className="space-y-3">
           {error && (
             <div className="rounded-xl bg-danger-red/10 border border-danger-red/20 p-2.5 text-sm text-danger-red text-center">{error}</div>

pledge-now-pay-later/src/lib/auth.ts

@@ -1,15 +1,85 @@
 import { type NextAuthOptions } from "next-auth"
 import CredentialsProvider from "next-auth/providers/credentials"
+import Auth0Provider from "next-auth/providers/auth0"
 import { compare } from "bcryptjs"
 import prisma from "@/lib/prisma"
 
+/**
+ * Find or create a user+org from an Auth0 social login.
+ * First login creates the org; subsequent logins find existing.
+ */
+async function findOrCreateSocialUser(profile: { email: string; name?: string; picture?: string }) {
+  if (!prisma || !profile.email) return null
+
+  const email = profile.email.toLowerCase().trim()
+
+  // Check if user exists
+  const existing = await prisma.user.findUnique({
+    where: { email },
+    include: { organization: { select: { id: true, name: true, slug: true } } },
+  })
+
+  if (existing) {
+    return {
+      id: existing.id,
+      email: existing.email,
+      name: existing.name,
+      role: existing.role,
+      orgId: existing.organizationId,
+      orgName: existing.organization.name,
+      orgSlug: existing.organization.slug,
+    }
+  }
+
+  // First-time social login → create org + user
+  const name = profile.name || email.split("@")[0]
+  const slug = name.toLowerCase().replace(/[^a-z0-9]+/g, "-").slice(0, 30) + "-" + Date.now().toString(36)
+
+  const result = await prisma.$transaction(async (tx) => {
+    const org = await tx.organization.create({
+      data: {
+        name: `${name}'s Charity`,
+        slug,
+        country: "GB",
+        refPrefix: slug.substring(0, 4).toUpperCase(),
+      },
+    })
+    const user = await tx.user.create({
+      data: {
+        email,
+        name,
+        role: "org_admin",
+        organizationId: org.id,
+      },
+    })
+    return { user, org }
+  })
+
+  return {
+    id: result.user.id,
+    email: result.user.email,
+    name: result.user.name,
+    role: result.user.role,
+    orgId: result.org.id,
+    orgName: result.org.name,
+    orgSlug: result.org.slug,
+  }
+}
+
 export const authOptions: NextAuthOptions = {
   session: { strategy: "jwt" },
   pages: {
     signIn: "/login",
-    newUser: "/dashboard/setup",
   },
   providers: [
+    // Auth0 — Google, Apple, email/password via Universal Login
+    Auth0Provider({
+      clientId: process.env.AUTH0_CLIENT_ID || "hpr7JcEAAk3Q5ADkzyyZSRDxGIZTcjRJ",
+      clientSecret: process.env.AUTH0_CLIENT_SECRET || "ha6Q5bK1B-YaluwznBvgi8jaCpqwdNmLq-UAca_-WHVy6Yfscf1tfNCrHPxKwvAh",
+      issuer: process.env.AUTH0_ISSUER || "https://quikcue.us.auth0.com",
+    }),
+
+    // Keep credentials for demo login + existing password users
     CredentialsProvider({
       name: "credentials",
       credentials: {
@@ -42,14 +112,44 @@ export const authOptions: NextAuthOptions = {
     }),
   ],
   callbacks: {
+    async signIn({ user, account, profile }) {
+      // For Auth0 social logins, find/create user in our DB
+      if (account?.provider === "auth0" && profile?.email) {
+        const dbUser = await findOrCreateSocialUser({
+          email: profile.email,
+          name: (profile as { name?: string }).name || undefined,
+          picture: (profile as { picture?: string }).picture || undefined,
+        })
+        if (dbUser) {
+          // Attach our DB fields to the user object for the jwt callback
+          Object.assign(user, dbUser)
+        }
+        return true
+      }
+      return true
+    },
     async jwt({ token, user }) {
       if (user) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const u = user as any
+        if (u.orgId) {
           token.role = u.role
           token.orgId = u.orgId
           token.orgName = u.orgName
           token.orgSlug = u.orgSlug
+          token.dbId = u.id
+        }
+      }
+      // For Auth0 users on first token creation, look up from DB
+      if (!token.orgId && token.email) {
+        const dbUser = await findOrCreateSocialUser({ email: token.email as string, name: token.name || undefined })
+        if (dbUser) {
+          token.role = dbUser.role
+          token.orgId = dbUser.orgId
+          token.orgName = dbUser.orgName
+          token.orgSlug = dbUser.orgSlug
+          token.dbId = dbUser.id
+        }
       }
       return token
     },
@@ -57,7 +157,7 @@ export const authOptions: NextAuthOptions = {
       if (session.user) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const s = session as any
-        s.user.id = token.sub
+        s.user.id = token.dbId || token.sub
         s.user.role = token.role
         s.user.orgId = token.orgId
         s.user.orgName = token.orgName