Why is the Facebook login modal not prompting users for access to their email address? - facebook

Question

I'm trying to integrate the Facebook login flow into a website (as per this page: https://developers.facebook.com/docs/facebook-login/web), and I'm having issues with trying to force the login modal to request access to the user's Facebook email address.
Specifically, I'm executing the following code from my JS:
FB.login((response) => {
if (response.status === 'connected' &&
response.authResponse) {
// Do something with the response here.
}
}, {
scope: 'email',
return_scopes: true
});
The response is coming back as connected when the user successfully logs in, and I am getting the user's user ID, access token, etc., but when they click on the button in my UI that calls FB.login, the modal that pops up for Facebook does not ask the user if they want to grant access to their email address. Why?
For the site I'm building, I need access to the user's Facebook email address. If they were to be asked and deny access, that's one thing, but the modal that pops up isn't even asking them for access to their email address, and I don't get their email address back in the response.
Furthermore, if I make a subsequent call to the following, the email permission comes back as declined:
FB.api(`/${response.authResponse.userID}/permissions`, (response) => {
console.log(response);
});
Does anyone know why I can't prompt the user for access to their email address? Thanks.
Edit: It might be worth mentioning that I'm testing this on localhost, and I wonder if that's having an effect. In the Facebook for Developers dashboard, I did set my localhost virtual host (e.g., site-name.test) as an allowed URL for redirects, and it does let me log in with Facebook and get the user ID, etc., but it just never prompts the user for access to their email address. Thanks.

Answer 1

Thanks again to misorude for the answer. Without that, I would have never figured this out. To sum everything up, the problem was that during testing, I had apparently already once declined the request to provide access to my email address, and after that, it no longer asked me for permission to access it.
As such, you have to pass an extra parameter to FB.login in order to force it to re-ask the user for access to their email address. Specifically, it's the authType parameter, and here's how you pass it:
FB.login((response) => {
if (response.status === 'connected' &&
response.authResponse) {
// Do something with the response here.
}
}, {
scope: 'email',
authType: 'rerequest'
});
That will give you access to the email address (assuming a user has one registered; again, thanks to misorude for noting that), but it doesn't actually return the email address. To get that, you then have to send an API request to /me with a fields parameter requesting the email address to get it. I figured out how to get that via the following SO answer: https://stackoverflow.com/a/31763373/1992973
Specifically, a full solution is something like the following:
FB.login((response) => {
if (response.status === 'connected' &&
response.authResponse) {
FB.api('/me?fields=email', (response) => {
// The email should be in the response, assuming the user has one registered with FB.
});
}
}, {
scope: 'email',
authType: 'rerequest'
});