Implementing Facebook Login (OAuth 2.0) for a Web Application

Desired Outcome

Enable users to sign in to your web application using their Facebook account. After a successful flow you will have a short‑lived access token that can be used to call the Graph API /me endpoint and retrieve the user’s id, name, and email (if the email permission is approved).

Prerequisites

• A verified Meta developer account.
• A Facebook App created in Meta for Developers with Facebook Login product added.
• App ID and App Secret from the app dashboard.
• A redirect URI that uses HTTPS (or http://localhost for local development) and is entered exactly in Settings → Facebook Login → Valid OAuth Redirect URIs.
• Server‑side code capable of making HTTPS requests and storing secrets out of the browser (e.g., Node.js, Python, PHP, Java).

Procedure

1. Register the redirect URI

In the app dashboard, add the full callback URL, for example:

https://app.example.com/auth/facebook/callback

Any mismatch in scheme, host, port, or path will cause Facebook to reject the authorization request.

2. Build the authorization URL

Redirect the user’s browser to:

https://www.facebook.com/v19.0/dialog/oauth?
  client_id={APP_ID}
  &redirect_uri={ENCODED_REDIRECT_URI}
  &state={RANDOM_CSRF_TOKEN}
  &scope=email,public_profile
  &response_type=code

• state must be a cryptographically random string stored in the user’s session to prevent CSRF.
• scope lists the permissions you need; email requires App Review before it can be used by non‑developers.

3. Handle the callback

Facebook redirects back to your redirect URI with code and state query parameters.

1. Verify that the returned state matches the value stored in the session. If it does not, abort the flow.
2. Exchange the authorization code for an access token (server‑side only). Example using curl on the application server:

curl -X GET "https://graph.facebook.com/v19.0/oauth/access_token" \
  -G --data-urlencode "client_id={APP_ID}" \
  --data-urlencode "client_secret={APP_SECRET}" \
  --data-urlencode "redirect_uri={ENCODED_REDIRECT_URI}" \
  --data-urlencode "code={AUTH_CODE}"

Expected JSON response (short‑lived token, typically ~1 hour):

{
  "access_token": "EAA...",
  "token_type": "bearer",
  "expires_in": 3600
}

4. Retrieve the user profile

Call the Graph API /me endpoint with the access token:

curl -X GET "https://graph.facebook.com/v19.0/me" \
  -G --data-urlencode "fields=id,name,email" \
  --data-urlencode "access_token={ACCESS_TOKEN}"

Successful response (HTTP 200):

{
  "id": "1234567890",
  "name": "Jane Doe",
  "email": "[contact removed]"
}

Expected Checks

• State validation – ensures the callback originates from your own authorization request.
• Token scopes – inspect the access_token response or call /debug_token to confirm email and public_profile are granted.
• Graph API response – verify the JSON contains the requested fields and the HTTP status is 200.
• Error handling – Facebook returns error objects with error.code and error.message; log these (without the token) for diagnostics.

Recovery Options

• Token revocation – call DELETE https://graph.facebook.com/v19.0/me/permissions?access_token={ACCESS_TOKEN} to log the user out of your app.
• Expired token – short‑lived tokens cannot be refreshed directly. Prompt the user to run the authorization flow again, or use a long‑lived token (exchange via /oauth/access_token?grant_type=fb_exchange_token) if your use case permits.
• User denies permission – Facebook redirects with error=access_denied. Display a friendly message and offer an alternative login method.

Limitations & Practical Verification

• Access tokens must never be written to client‑side storage (localStorage, cookies) or logged. Store them only in server‑side session stores.
• Redirect URIs must match exactly; trailing slashes matter.
• Permissions beyond public_profile (e.g., email, user_birthday) require App Review before they work for non‑developer accounts.
• Graph API versioning: the examples use v19.0. Pin the version in all URLs to avoid breaking changes.

Verification checklist (run after each code change):

1. Open the authorization URL in a browser; confirm the Facebook login dialog appears.
2. After consent, verify the callback URL receives code and matching state.
3. Run the token‑exchange curl command on the server; ensure a 200 response with access_token.
4. Call /me with the token; confirm the JSON includes id, name, and email (if granted).
5. Revoke the token via the delete call and confirm a subsequent /me request returns an error with code 190 (invalid token).

Diagram Labels

• App Registration
• Authorization Redirect
• Token Exchange
• Graph API Call