Skip to main content

Facebook Authentication

This guide explains how to set up Facebook OAuth authentication for the Zero Kelvin application.

Prerequisites​

Step 1: Create a Facebook App​

  1. Go to Meta for Developers
  2. Click My Apps in the top right corner
  3. Click Create App
  4. Select Consumer as the app type and click Next
  5. Enter your app details:
    • App name: Zero Kelvin
    • App contact email: Your email address
  6. Click Create App

Step 2: Set Up Facebook Login​

  1. In your app dashboard, find Facebook Login and click Set Up
  2. Select Web as the platform
  3. Enter your website URL:
    • For development: http://localhost:3000
    • For production: Your production domain
  4. Click Save and continue through the quickstart

Step 3: Configure OAuth Settings​

  1. In the left sidebar, navigate to Facebook Login > Settings
  2. Under Valid OAuth Redirect URIs, add:
    • http://localhost:3000/api/auth/callback/facebook (for development)
    • Your production callback URL (e.g., https://example.com/api/auth/callback/facebook)
  3. Click Save Changes

Step 4: Get Your App Credentials​

  1. In the left sidebar, click Settings > Basic
  2. You'll find your App ID at the top
  3. Click Show next to App Secret and enter your Facebook password
  4. Copy both the App ID and App Secret

Step 5: Configure Environment Variables​

Add the following to your .env.local file:

AUTH_FACEBOOK_ID="your-app-id"
AUTH_FACEBOOK_SECRET="your-app-secret"

Step 6: Test the Integration​

  1. Start the development server:
nx dev web
  1. Navigate to http://localhost:3000
  2. Click the Sign In button
  3. Select Continue with Facebook

App Review and Permissions​

Development Mode​

When your app is in development mode:

  • Only users listed in Roles can test the login
  • Add test users in Roles > Test Users

Going Live​

To allow any Facebook user to sign in:

  1. Complete the Data Use Checkup in App Review > Data Use Checkup
  2. Accept the Platform Terms
  3. Toggle App Mode from "Development" to "Live" in the top header

Permissions​

The default setup includes these permissions:

  • email - User's email address
  • public_profile - Name, profile picture, etc.

To request additional permissions, add them in auth.ts:

Facebook({
  clientId: process.env.AUTH_FACEBOOK_ID,
  clientSecret: process.env.AUTH_FACEBOOK_SECRET,
  authorization: {
    params: {
      scope: "email public_profile user_friends",
    },
  },
}),

Note: Additional permissions may require App Review approval.

Privacy and Data Handling​

Data Deletion Request URL​

Facebook requires you to handle data deletion requests:

  1. Go to Settings > Basic
  2. Scroll down to Data Deletion Request URL
  3. Enter a URL that handles deletion requests (e.g., https://example.com/api/facebook/data-deletion)

Example handler:

// app/api/facebook/data-deletion/route.ts
import { NextResponse } from "next/server";

export async function POST(request: Request) {
  const data = await request.formData();
  const signedRequest = data.get("signed_request");

  // Verify and parse the signed request
  // Delete user data associated with the user_id
  // Return a confirmation URL

  return NextResponse.json({
    url: "https://example.com/deletion-status",
    confirmation_code: "unique-deletion-code",
  });
}

Privacy Policy​

You must have a privacy policy URL configured:

  1. Go to Settings > Basic
  2. Add your Privacy Policy URL

Troubleshooting​

"App Not Active"​

  • Your app might still be in development mode
  • Add yourself as a test user or switch to live mode

"URL Blocked"​

  • The redirect URI isn't in the list of valid OAuth redirect URIs
  • Check for exact matches including protocol and path

"Error validating access token"​

  • Your App Secret might be incorrect
  • Try regenerating the App Secret in Settings > Basic

User email not returned​

  • The user might not have an email associated with their Facebook account
  • The user might have denied the email permission
  • Handle cases where email is null