Facebook Provider

Configure Facebook OAuth for authentication in your Next.js application using NextAuth.js.

Documentation

https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow/

Configuration

https://developers.facebook.com/apps/

Facebook Developer Setup

Follow these steps to configure Facebook OAuth:

Step 1: Create a Facebook App

1. Go to Facebook Developers
2. Click Create App
3. Select Consumer or None (Build something else)
4. Enter your app display name and contact email
5. Click Create App

Step 2: Add Facebook Login Product

1. In your app dashboard, find Facebook Login and click Set Up
2. Select Web as the platform
3. Enter your site URL (e.g., https://your-domain.com)
4. Click Save and continue through the quickstart

Step 3: Configure OAuth Settings

1. Navigate to Facebook Login → Settings in the left sidebar
2. Add your Valid OAuth Redirect URIs:

Step 4: Get App ID and Secret

1. Go to Settings → Basic in the left sidebar
2. Copy the App ID and App Secret
3. Add them to your .env.local file:

# .env.local
FACEBOOK_CLIENT_ID=your-app-id
FACEBOOK_CLIENT_SECRET=your-app-secret

Step 5: Configure App Domains

1. In Settings → Basic, scroll down to App Domains
2. Add your domain (e.g., your-domain.com)
3. Add Privacy Policy URL and Terms of Service URL (required for public apps)
4. Click Save Changes

Step 6: Switch to Live Mode

1. At the top of the dashboard, toggle App Mode from Development to Live
2. Complete any required verification steps
3. Note: You need a Privacy Policy URL to switch to Live mode

Options

The Facebook Provider comes with a set of default options. You can override any of the options to suit your own use case.

Facebook Provider options →

Example

// src/core/lib/auth.ts
import FacebookProvider from "next-auth/providers/facebook";

export const authOptions: NextAuthOptions = {
  providers: [
    FacebookProvider({
      clientId: process.env.FACEBOOK_CLIENT_ID!,
      clientSecret: process.env.FACEBOOK_CLIENT_SECRET!,
    }),
  ],
};

Advanced Configuration

Request Additional Permissions

You can request additional permissions (scopes) from Facebook:

// src/core/lib/auth.ts
import FacebookProvider from "next-auth/providers/facebook";

export const authOptions: NextAuthOptions = {
  providers: [
    FacebookProvider({
      clientId: process.env.FACEBOOK_CLIENT_ID!,
      clientSecret: process.env.FACEBOOK_CLIENT_SECRET!,
      authorization: {
        params: {
          scope: "email,public_profile,user_birthday",
        },
      },
    }),
  ],
};

Custom Profile Fields

Request specific user profile fields:

// src/core/lib/auth.ts
import FacebookProvider from "next-auth/providers/facebook";

export const authOptions: NextAuthOptions = {
  providers: [
    FacebookProvider({
      clientId: process.env.FACEBOOK_CLIENT_ID!,
      clientSecret: process.env.FACEBOOK_CLIENT_SECRET!,
      userinfo: {
        params: {
          fields: "id,name,email,picture",
        },
      },
    }),
  ],
};

Troubleshooting

Common Errors

Related

• Google Provider
• Authentication Design Pattern
• Installation Guide