How to force the user to re-enter facebook password even though he/she is logged in

Question

I am trying to get the user to re-enter the password when they are entering certain part of my website. I've read that I should be using the "Reauthenticate" authorization type to solve this, but I am encountering two issues.

1. When user clicks on "Reauthenticate" button the password is already filled out in the "Password" input box.

2. When user clicks on "Reauthentice" button and then closes or clicks cancel on authorization window, I still get the response back with logged in data and basically it "tells" my code that the user has signed in.

Did anyone ever encountered those issues? Here is part of my code:

<fb:login-button id="facebook-reauth" onclick="return false;">Login with Facebook</fb:login-button>


<script type="text/javascript">
    $(document).ready(function () {
        document.getElementById('facebook-reauth').onclick = function () {
            FB.login(function (response) {
                if (response) {
                    window.location = '/Account/FacebookLogin?isCheckout=false';
                }
                else {
                    window.location = '/';
                }
            }, { scope: 'email', auth_type: 'reauthenticate' });
        };
    });
</script>

EDIT:

I tried changing the <fb:login-button /> to <div /> tag but it did not help at all.

Thanks a lot!

Answer 1

1. The password field is probably pre-filled cuz your browser just remembers the password for you, try to clear that in your browser, or try to use a different e-mail which the browser does not remember.

2. I think that you just forgot to check for response.authResponse , so it should probably be:

.

FB.login(function (response) {
    if (response.authResponse) {
        window.location = '/Account/FacebookLogin?isCheckout=false';
    }
    else {
        window.location = '/';
    }
}, { scope: 'email', auth_type: 'reauthenticate' });

---

Edit

Yes, you are right, even if the user cancels the re-authentication the callback is executed and the status is "connected".
This is probably a bug or something, but from the tests I did now it looks like if the user finished the re-authentication process successfully then the token changes, and so this should probably work:

var oldToken = FB.getAccessToken();

FB.login(function (response) {
    if (response.authResponse && response.authResponse.accessToken != oldToken) {
        window.location = '/Account/FacebookLogin?isCheckout=false';
    }
    else {
        window.location = '/';
    }
}, { scope: 'email', auth_type: 'reauthenticate' });

Answer 2

In addition (or instead) of Nitzan's solution it is possible to add a validation on the backend.

If you call:

" https://graph.facebook.com/oauth/access_token_info?client_id=CLIENT_ID&access_token=ACCESS_TOKEN "

You will get the following response:

"access_token: ...,

token_type: "bearer",

expires_in: 5937,

auth_type: "reauthenticate"

The auth_type will be set to "reauthenticate" only if they user successfully re-authenticated via the authorization modal.

It is also advised to validate that the expires_in > 0 to make sure that the token is still valid.

Answer 3

if (response.status === 'connected') {
    /**
     * Even if the user cancels the re-authentication the callback is executed and the status is "connected".
     * This is probably a bug or something, but you can get info about the token and check that.    
     */
    FB.api('/debug_token', {
        input_token: response.authResponse.accessToken
    }, function(token_info) {

        if (typeof token_info.data.metadata != 'undefined') {

            if (token_info.data.metadata.auth_type == "reauthenticate") {

            }
        } else {
            //user did not re-authenticate so do nothing
        }
    });
}