add linkedin

This commit is contained in:
Anthony Stirling 2025-08-15 14:53:49 +01:00
parent 2de89fb173
commit 03a311e78d
3 changed files with 49 additions and 4 deletions

View File

@ -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}

View File

@ -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 {

View File

@ -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 */}