δΈ­

Facebook OAuth Setup

This guide explains how to set up Facebook Login for your application. Users will be able to sign in using their Facebook accounts.

Prerequisites

Step 1: Create a Facebook App

  1. Go to Facebook for Developers
  2. Click My Apps in the top right
  3. Click Create App
  4. Select app type:
  • Consumer - For apps that target consumers
  • Business - For business integrations
  1. Enter your app details:
  • App name: Your application name
  • App contact email: Your email
  1. Click Create App

Step 2: Set Up Facebook Login

  1. In your app dashboard, find Add Products to Your App
  2. Locate Facebook Login and click Set Up
  3. Select your platform (Web, iOS, Android)

For Web Applications

  1. Enter your Site URL: https://yourdomain.com
  2. Save changes

For iOS Applications

  1. Enter your Bundle ID: com.yourcompany.myapp
  2. Enable Single Sign On if needed
  3. Save changes

For Android Applications

  1. Enter Package Name: com.yourcompany.myapp
  2. Enter Default Activity Class Name
  3. Add Key Hashes (debug and release)
  4. Save changes

Step 3: Configure OAuth Settings

  1. Go to Facebook Login > Settings in the left sidebar
  2. Configure the following:

Valid OAuth Redirect URIs

Add your redirect URIs: 

https://yourdomain.com/auth/facebook/callback
https://yourdomain.com/auth/callback
http://localhost:3000/auth/facebook/callback (for development)

Client OAuth Settings

Setting Recommended Value
Client OAuth Login Yes
Web OAuth Login Yes
Force Web OAuth Reauthentication No
Embedded Browser OAuth Login Yes
Login from Devices No (unless needed)
  1. Click Save Changes

Step 4: Get App Credentials

  1. Go to Settings > Basic in the left sidebar
  2. Note down:
  • App ID - Your application identifier
  • App Secret - Click "Show" to reveal (keep this secure!)

Warning: Never expose your App Secret in client-side code or public repositories.

Step 5: Configure Permissions

  1. Go to App Review > Permissions and Features
  2. The following permissions are available by default:
  • email - User's email address
  • public_profile - Basic profile information
  1. For additional permissions, you may need App Review

Common Permissions

Permission Description Review Required
email User's email address No
public_profile Name, profile picture No
user_friends Friends who use your app Yes
user_photos Access to photos Yes

Step 6: Configure in OpenDev

  1. Log in to OpenDev Platform
  2. Navigate to OAuth Channels
  3. Add or edit the Facebook OAuth channel
  4. Enter your configuration:
{
  "provider": "facebook",
  "appId": "YOUR_APP_ID",
  "appSecret": "YOUR_APP_SECRET",
  "scopes": ["email", "public_profile"],
  "callbackUrl": "https://yourdomain.com/auth/facebook/callback",
  "apiVersion": "v18.0"
}

Configuration Fields

Field Required Description
App ID Yes Facebook App ID
App Secret Yes Facebook App Secret
Scopes Yes Permissions to request
Callback URL Yes Your redirect URI
API Version Optional Facebook Graph API version

Step 7: Test the Integration

Development Mode

In development mode, only app administrators, developers, and testers can log in.

  1. Go to Roles > Roles in your app dashboard
  2. Add test users under Test Users or Testers

Testing Steps

  1. Trigger Facebook Login in your app
  2. Log in with a test account
  3. Verify the OAuth callback works
  4. Check the returned user data

Sample OAuth Response

{
  "provider": "facebook",
  "providerId": "10158XXXXXXXXX",
  "email": "user@example.com",
  "name": "John Doe",
  "avatar": "https://graph.facebook.com/10158XXXXXXXXX/picture"
}

Step 8: Go Live

Before launching to users:

  1. Go to Settings > Basic
  2. Fill in all required fields:
  • Privacy Policy URL
  • Terms of Service URL
  • App Icon
  • Category
  1. Toggle app from Development to Live mode

Note: Some features require App Review before going live.

Troubleshooting

Error: Invalid redirect_uri

Solution: Ensure the redirect URI exactly matches one in your Valid OAuth Redirect URIs list.

Error: App Not Setup

Solution: Complete all required fields in Settings > Basic and ensure the app is in Live mode.

Error: User Cannot Access App

Solution: In development mode, add the user as a Tester in Roles > Roles.

Blank Screen After Login

Solution: Check browser console for JavaScript errors. Verify your callback URL handler is working.

Security Best Practices

  1. Use App Secret Proof - Enable in Advanced Settings for additional security
  2. Validate Signed Requests - Always verify Facebook's signed requests
  3. Use HTTPS - Required for production OAuth
  4. Implement State Parameter - Prevent CSRF attacks
  5. Short-lived Tokens - Use short-lived tokens and refresh as needed