Invalid Scopes: email in React Facebook login

Question

I am using the react-facebook-login library in my React application to implement a Facebook login button. Here's the code for the FacebookSignInButton component:

import React from "react";
import FacebookLogin from "react-facebook-login/dist/facebook-login-render-props";

const FacebookSignInButton=()=>{
  const responseFacebook=(response)=>{
    console.log(response);
  };

  return (
    <>
      <FacebookLogin
        appId="FACEBOOK_APP_ID"
        autoLoad
        callback={responseFacebook}
        scope="email"
        render={(renderProps) => (
          <div
            onClick={renderProps.onClick}
            className="w-14 h-14 text-center rounded-full bg-blue-500 text-white saturate-100 transition-all hover:bg-blue-600"
          >
            <button className="block mx-auto mt-4">
              <i className="fab fa-facebook-f fa-lg"></i>
            </button>
          </div>
        )}
      />
    </>
  );
};

export default FacebookSignInButton;

However, when I try to use the Facebook login button, I get an error message that says: "Invalid Scopes: email. This message is only shown to developers. Users of your app will ignore these permissions if present."

I have set the scope prop to email to request the user's email during the login process. But it seems that there is an issue with the scopes. I have already referred to the Facebook documentation on valid permissions (https://developers.facebook.com/docs/facebook-login/permissions), but I can't figure out what is causing the error. Can anyone help me understand why I am getting this error and how I can fix it to properly request the user's email during Facebook login?

Answer 1

enter image description here

enter image description here

Add this script in body of html and replace your app id

<script>
  window.fbAsyncInit = function () {
    FB.init({
      appId: "1006519180698194",
      xfbml: true,
      version: "v17.0",
    });
    FB.AppEvents.logPageView();
  };

  (function (d, s, id) {
    var js,
      fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {
      return;
    }
    js = d.createElement(s);
    js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  })(document, "script", "facebook-jssdk");
</script>

then make a function in component like this

const handleFacebookLogin = async () => {
try {
  const { authResponse } = await new Promise((resolve) => {
    window.FB.login((response) => resolve(response));
  });

  console.log( authResponse )
} catch (error) {
  console.error('Error during Facebook login:', error);
}};

Answer 2

Send 'email' in array form to scope prop like this.

<FacebookLogin
  appId="FACEBOOK_APP_ID"
  autoLoad
  callback={responseFacebook}
  scope={['email']}
 
/>

Rest of the code will remain same.