Facebook Sign In Preview

Create Facebook Account

Create Facebook App

  • Go to Meta for Developers.
  • Click My Apps in the top right.
  • Click Create App in the top right.
  • Select your app type (e.g. Consumer).
  • Click Next.
  • Fill in the Display name.
  • Click Create app.

Set up Facebook Login

  • Click on Add Product in the left menu.
  • Click on Setup on the Facebook login card.
  • Don’t complete the quickstart. Instead, follow the next step.
  • Click on Settings under Facebook Login in the left menu.
  • Make sure Embedded Browser OAuth Login is set to Yes.
  • Fill in Valid OAuth Redirect URIs with your OAuth Callback URL from Nhost.
  • Click Save changes.

Activate Facebook Permissions and Features

To make sure we can fetch all user data (email, profile picture and name). For that we need to enable email and public_profile permissions.

  • Click on App Review and Permission and Features in the left menu.
  • Search for email in the Search Permissions and Features search box.
  • Click on Request advanced access and complete the steps.
  • Search for public_profile in the Search Permissions and Features search box.
  • Click on Request advanced access and complete the steps.

Configure Nhost

  • Click Settings and then Basic in the left menu.
  • Copy and paste the App ID (Client ID) and App secret (Client Secret) from Facebook to your Nhost OAuth settings for Facebook. Make sure the OAuth provider is enabled in Nhost.
  • Click the checkbox “I have pasted the redirect URI into Facebook”.
  • Click Confirm settings.

Sign In Users

Use the Nhost JavaScript client to sign in users:

nhost.auth.signIn({
  provider: 'facebook'
})