Add Facebook Sign-In to Your App

What You'll Build

In this tutorial, you'll configure Facebook as a social identity provider for your OAuth42 application. Your users will be able to click "Continue with Facebook" and authenticate using their Facebook account.

Prerequisites

• An OAuth42 account with an existing application
• A Facebook account with access to Meta for Developers
• Your application already integrated with OAuth42 (see Getting Started with Hosted Auth)

Step 1: Create a Facebook App

1. Go to Meta for Developers and log in
2. Click Create App
3. Select Allow people to log in with their Facebook account as your use case
4. Click Next
5. Enter your app details:
   • App name: Your application name
   • App contact email: Your developer email
6. Click Create app

Step 2: Enable Email Permission

OAuth42 requires the email permission to create user accounts. Enable it in your Facebook App:

1. In your app dashboard, go to Use cases in the left sidebar
2. Find Facebook Login and click Customize
3. Click on Permissions and features
4. Find email in the list and click Add
5. The email permission should now show "Ready for testing"

Step 3: Configure Redirect URIs

1. Still in Use cases → Facebook Login → Customize
2. Click on Settings
3. In the Valid OAuth Redirect URIs field, add:
   • Production: https://api.oauth42.com/api/social-auth/callback
   • Development: https://localhost:8443/api/social-auth/callback
4. Ensure Client OAuth Login is enabled
5. Ensure Web OAuth Login is enabled
6. Click Save Changes

Step 4: Get App Credentials

1. Go to App Settings → Basic in the left sidebar
2. Copy your App ID (this is your Client ID)
3. Click Show next to App Secret and copy it (this is your Client Secret)

Step 5: Configure Facebook in OAuth42 Portal

Now configure Facebook as a social provider in your OAuth42 application:

1. Log in to the OAuth42 Portal
2. Navigate to Applications and select your application
3. Click the Social Providers tab
4. Click Add Provider
5. Select Facebook from the dropdown
6. Enter the App ID you copied from Facebook
7. Enter the App Secret you copied from Facebook
8. Click Add Provider to save

Step 6: Add Facebook Sign-In Button to Your App

If you're using OAuth42's hosted auth pages, the Facebook Sign-In button appears automatically when you enable the provider. No code changes needed!

For custom login pages, add a Facebook Sign-In button that initiates the social auth flow:

"use client"

import { useState } from 'react'

export default function LoginPage() {
  const [isLoading, setIsLoading] = useState(false)

  const handleFacebookSignIn = async () => {
    setIsLoading(true)

    // Call OAuth42's social auth init endpoint
    const response = await fetch('/api/auth/social/facebook', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        provider: 'facebook',
        client_id: process.env.NEXT_PUBLIC_OAUTH42_CLIENT_ID,
        is_signup: true, // Allow account creation
      }),
    })

    const data = await response.json()

    if (data.authorization_url) {
      // Redirect to Facebook
      window.location.href = data.authorization_url
    }
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-100">
      <div className="max-w-md w-full space-y-6 p-8 bg-white rounded-lg shadow">
        <h1 className="text-2xl font-bold text-center">Sign In</h1>

        <button
          onClick={handleFacebookSignIn}
          disabled={isLoading}
          className="w-full flex items-center justify-center gap-3 py-3 px-4 bg-[#1877F2] text-white rounded-lg hover:bg-[#166FE5] transition-colors"
        >
          <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
            <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
          </svg>
          {isLoading ? 'Redirecting...' : 'Continue with Facebook'}
        </button>

        <div className="relative">
          <div className="absolute inset-0 flex items-center">
            <div className="w-full border-t border-gray-300" />
          </div>
          <div className="relative flex justify-center text-sm">
            <span className="px-2 bg-white text-gray-500">or</span>
          </div>
        </div>

        {/* Your regular email/password login form */}
        <form className="space-y-4">
          <input
            type="email"
            placeholder="Email"
            className="w-full px-4 py-3 border border-gray-300 rounded-lg"
          />
          <input
            type="password"
            placeholder="Password"
            className="w-full px-4 py-3 border border-gray-300 rounded-lg"
          />
          <button
            type="submit"
            className="w-full py-3 px-4 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700"
          >
            Sign In
          </button>
        </form>
      </div>
    </div>
  )
}

Step 7: Create API Route for Social Auth (Custom Login Only)

If using a custom login page, create an API route to initiate the social auth flow:

mkdir -p app/api/auth/social/facebook
touch app/api/auth/social/facebook/route.ts

Add the following code to app/api/auth/social/facebook/route.ts:

import { NextRequest, NextResponse } from 'next/server'

const API_BASE_URL = process.env.OAUTH42_ISSUER || 'https://api.oauth42.com'

export async function POST(request: NextRequest) {
  try {
    const body = await request.json()

    const response = await fetch(`${API_BASE_URL}/api/social-auth/init`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        provider: 'facebook',
        client_id: body.client_id,
        is_signup: body.is_signup || true,
        state: body.state,
      }),
    })

    const data = await response.json()

    if (!response.ok) {
      return NextResponse.json(data, { status: response.status })
    }

    return NextResponse.json(data)
  } catch (error) {
    console.error('[Social Auth] Error:', error)
    return NextResponse.json(
      { error: 'Failed to initiate social auth' },
      { status: 500 }
    )
  }
}

Step 8: Test Facebook Sign-In

1. Start your application
2. Navigate to your login page
3. Click "Continue with Facebook"
4. You'll be redirected to Facebook's authorization page
5. Sign in and authorize the application
6. Facebook redirects back to OAuth42
7. OAuth42 creates/links your user and redirects to your app
8. You're now logged in!

How Account Linking Works

OAuth42 intelligently handles user accounts based on their Facebook profile:

Security Considerations

• OAuth 2.0: Facebook uses standard OAuth 2.0 for authentication
• State Parameter: CSRF protection via cryptographically random state tokens
• Encrypted Storage: Facebook App Secrets are encrypted at rest using AES-256
• Email Requirement: OAuth42 requires an email from Facebook to create accounts
• HTTPS Required: Facebook requires HTTPS for callback URLs in production

Troubleshooting

Going Live: App Review

Before your Facebook integration can be used by all users, you may need to complete Meta's App Review process:

1. In development mode, only users with app roles can test
2. For the email and public_profile permissions, you typically don't need App Review
3. Go to App Settings → Basic and complete all required fields
4. Add a Privacy Policy URL and Terms of Service URL
5. Toggle your app to Live mode

Next Steps

• Add Google Sign-In - Enable Sign in with Google
• Add Apple Sign-In - Enable Sign in with Apple for webapp and iOS
• Add GitHub Sign-In - Enable Sign in with GitHub
• Add LinkedIn Sign-In - Enable Sign in with LinkedIn
• Add MFA for extra security
• Security best practices