From 03a311e78db01ec2ce8a34b6a646a05ae43f76a5 Mon Sep 17 00:00:00 2001
From: Anthony Stirling <77850077+Frooodle@users.noreply.github.com.>
Date: Fri, 15 Aug 2025 14:53:49 +0100
Subject: [PATCH] add linkedin

---
 frontend/src/routes/AuthDebug.tsx    | 11 +++++++++-
 frontend/src/routes/Login.tsx        | 11 ++++++++--
 frontend/src/routes/LoginCompact.tsx | 31 +++++++++++++++++++++++++++-
 3 files changed, 49 insertions(+), 4 deletions(-)

diff --git a/frontend/src/routes/AuthDebug.tsx b/frontend/src/routes/AuthDebug.tsx
index f1488a1a2..9280f1f08 100644
--- a/frontend/src/routes/AuthDebug.tsx
+++ b/frontend/src/routes/AuthDebug.tsx
@@ -92,7 +92,7 @@ export default function AuthDebug() {
     alert(`Cleared ${keys.length} auth-related localStorage keys`)
   }
 
-  const testSignIn = async (provider: 'github' | 'google' | 'facebook' = 'github') => {
+  const testSignIn = async (provider: 'github' | 'google' | 'facebook' | 'linkedin_oidc' = 'github') => {
     try {
       // Supabase redirects back to your app after OAuth
       const redirectTo = `${window.location.origin}/auth/callback`
@@ -103,6 +103,8 @@ export default function AuthDebug() {
           redirectTo,
           queryParams: provider === 'facebook' 
             ? { scope: 'email' }
+            : provider === 'linkedin_oidc'
+            ? { scope: 'openid profile email' }
             : {
                 access_type: 'offline',
                 prompt: 'consent',
@@ -350,6 +352,13 @@ export default function AuthDebug() {
               Test Facebook Sign In
             </button>
             
+            <button
+              onClick={() => testSignIn('linkedin_oidc')}
+              className="px-4 py-2 bg-cyan-600 text-white rounded hover:bg-cyan-700"
+            >
+              Test LinkedIn Sign In
+            </button>
+            
             {session && (
               <button
                 onClick={signOut}
diff --git a/frontend/src/routes/Login.tsx b/frontend/src/routes/Login.tsx
index 44fd484c4..519cab6f2 100644
--- a/frontend/src/routes/Login.tsx
+++ b/frontend/src/routes/Login.tsx
@@ -151,7 +151,7 @@ export default function Login() {
     )
   }
 
-  const signInWithOAuth = async (provider: 'github' | 'google' | 'facebook', nextPath = '/') => {
+  const signInWithOAuth = async (provider: 'github' | 'google' | 'facebook' | 'linkedin_oidc', nextPath = '/') => {
     try {
       setIsSigningIn(true)
       setError(null)
@@ -186,6 +186,10 @@ export default function Login() {
         oauthOptions.queryParams = {
           scope: 'email',
         }
+      } else if (provider === 'linkedin_oidc') {
+        oauthOptions.queryParams = {
+          scope: 'openid profile email',
+        }
       }
 
       const { data, error } = await supabase.auth.signInWithOAuth({
@@ -207,7 +211,9 @@ export default function Login() {
           ? 'github.com' 
           : provider === 'google' 
             ? 'accounts.google.com'
-            : 'facebook.com'
+            : provider === 'facebook'
+            ? 'facebook.com'
+            : 'linkedin.com'
         setTimeout(() => {
           if (!window.location.href.includes(expectedDomain)) {
             setError('OAuth redirect did not occur as expected')
@@ -231,6 +237,7 @@ export default function Login() {
   const signInWithGitHub = (nextPath = '/') => signInWithOAuth('github', nextPath)
   const signInWithGoogle = (nextPath = '/') => signInWithOAuth('google', nextPath)
   const signInWithFacebook = (nextPath = '/') => signInWithOAuth('facebook', nextPath)
+  const signInWithLinkedIn = (nextPath = '/') => signInWithOAuth('linkedin_oidc', nextPath)
 
   const testSupabaseConnection = async () => {
     try {
diff --git a/frontend/src/routes/LoginCompact.tsx b/frontend/src/routes/LoginCompact.tsx
index 8eb19432b..5116e5a4f 100644
--- a/frontend/src/routes/LoginCompact.tsx
+++ b/frontend/src/routes/LoginCompact.tsx
@@ -93,7 +93,7 @@ export default function LoginCompact() {
     )
   }
 
-  const signInWithProvider = async (provider: 'github' | 'google' | 'facebook') => {
+  const signInWithProvider = async (provider: 'github' | 'google' | 'facebook' | 'linkedin_oidc') => {
     try {
       setIsSigningIn(true)
       setError(null)
@@ -104,6 +104,8 @@ export default function LoginCompact() {
       const oauthOptions: any = { redirectTo }
       if (provider === 'facebook') {
         oauthOptions.queryParams = { scope: 'email' }
+      } else if (provider === 'linkedin_oidc') {
+        oauthOptions.queryParams = { scope: 'openid profile email' }
       } else {
         oauthOptions.queryParams = {
           access_type: 'offline',
@@ -288,6 +290,33 @@ export default function LoginCompact() {
             </svg>
             Facebook
           </button>
+
+          {/* LinkedIn */}
+          <button
+            onClick={() => signInWithProvider('linkedin_oidc')}
+            disabled={isSigningIn}
+            style={{
+              width: '100%',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              padding: '10px 16px',
+              border: '1px solid #d1d5db',
+              borderRadius: '8px',
+              backgroundColor: '#ffffff',
+              fontSize: '14px',
+              fontWeight: '500',
+              color: '#374151',
+              cursor: isSigningIn ? 'not-allowed' : 'pointer',
+              opacity: isSigningIn ? 0.6 : 1,
+              gap: '8px'
+            }}
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="#0A66C2">
+              <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
+            </svg>
+            LinkedIn
+          </button>
         </div>
 
         {/* Footer */}