Logo

Facebook OAuth Setup

⚠️ Important: The screenshots and step-by-step instructions on this page reflect the interface as of December 30, 2025. Third-party services like Google, Facebook, and Microsoft frequently update their user interfaces. While the general process remains similar, the exact screens, button labels, and menu locations may differ from what you see. If you encounter significant differences, consult the provider's official documentation.

This guide walks you through setting up Facebook OAuth authentication for your site.

Quick Setup (Already Have Credentials?)

If you already have a Facebook App ID and Secret, just add them to appsettings.json:

{
  "Authentication": {
    "EnableFacebookAuth": true,
    "Facebook": {
      "AppId": "your-app-id",
      "AppSecret": "your-app-secret"
    }
  }
}

Ensure your redirect URI is configured: https://yourdomain.com/signin-facebook

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 Authenticate and request data from users with Facebook Login
  5. Click Next
  6. Select Consumer as the app type
  7. Enter an app name and contact email
  8. Click Create App

Step 2: Configure Facebook Login Permissions

  1. In the left sidebar, find Use cases
  2. Click Customize next to "Authenticate and request data from users with Facebook Login"
  3. Under Permissions, verify these are listed:
    • email
    • public_profile

Step 3: Configure OAuth Redirect URIs

  1. In the left sidebar, go to Facebook Login → Settings (under Products)
  2. Under Valid OAuth Redirect URIs, add:
    • For development: https://localhost:{port}/signin-facebook
    • For production: https://yourdomain.com/signin-facebook
  3. Ensure these settings are enabled:
    • Client OAuth Login: Yes
    • Web OAuth Login: Yes
    • Use Strict Mode for Redirect URIs: Yes
  4. Click Save Changes

Step 4: Get App Credentials

  1. In the left sidebar, go to App settings → Basic
  2. Copy the App ID
  3. Click Show next to App Secret, enter your Facebook password, and copy it
Important: Keep your App Secret secure! Never commit it to source control or expose it in client-side code.

Step 5: Configure Your Application

Add the credentials to your appsettings.json:

{
  "Authentication": {
    "EnableFacebookAuth": true,
    "Facebook": {
      "AppId": "your-app-id",
      "AppSecret": "your-app-secret"
    }
  }
}
For Development: Use User Secrets instead of appsettings.json: 
dotnet user-secrets set "Authentication:Facebook:AppId" "your-app-id"
dotnet user-secrets set "Authentication:Facebook:AppSecret" "your-app-secret"

Going Live (Production)

Production Requirement:
In development mode, only users with roles on the app (developers, testers, admins) can log in. To allow any Facebook user to log in:
  1. Go to App settings → Basic
  2. Fill in required fields: Privacy Policy URL, App Icon, Category
  3. Toggle the app from Development to Live in the top navigation

Note: For basic login with email and public_profile, App Review is typically not required - just switching to Live mode is sufficient.

Troubleshooting

Error: Can't Load URL
The domain of your redirect URI isn't in the list of valid OAuth redirect URIs. Add it in Facebook Login Settings.
Error: App Not Setup
The app is in development mode and the user isn't a tester. Add them as a tester in App Roles, or switch the app to Live mode.
Error: Invalid App ID
Check that your App ID is correct and the app hasn't been deleted.
User Cancels Login
If the user clicks "Cancel" on the Facebook login dialog, they are gracefully redirected back to the login page with a message "Facebook login was cancelled."

Related Topics