reactjsfacebookfacebook-login

Facebook Login Blank Screen In Production


I'm using the react-facebook-login library to implemented the facebook login in my react application. Every time I click on the facebook login button to try to login, it gives me a blank page for some reason. Once I close the popup it logs in automatically to my account. This is only happening in production, everything is working fine on localhost. I checked the url bellow to see if there's a problem with the app id but there wasn't.

here's a screenshot of the popup page:

enter image description here

and here's the url:

https://www.facebook.com/v2.3/dialog/oauth?app_id=[app_id]&auth_type=&cbt=1662983366825&channel_url=https%3A%2F%2Fstaticxx.facebook.com%2Fx%2Fconnect%2Fxd_arbiter%2F%3Fversion%3D46%23cb%3Df3167cf29f7288c%26domain%3Ddash.indepth.inkylab.com%26is_canvas%3Dfalse%26origin%3Dhttps%253A%252F%252Fdash.indepth.inkylab.com%252Ff304eb27eb1ffa4%26relation%3Dopener&client_id=[client_id]&display=popup&domain=dash.indepth.inkylab.com&e2e=%7B%7D&fallback_redirect_uri=https%3A%2F%2Fdash.indepth.inkylab.com%2Fdashboard%2Foverview%2F&locale=en_US&logger_id=f1c467f11696cbc&origin=1&redirect_uri=https%3A%2F%2Fstaticxx.facebook.com%2Fx%2Fconnect%2Fxd_arbiter%2F%3Fversion%3D46%23cb%3Df11d4365f6ca06%26domain%3Ddash.indepth.inkylab.com%26is_canvas%3Dfalse%26origin%3Dhttps%253A%252F%252Fdash.indepth.inkylab.com%252Ff304eb27eb1ffa4%26relation%3Dopener%26frame%3Df36d6c5766d6e5&response_type=token%2Csigned_request%2Cgraph_domain&return_scopes=false&scope=public_profile%2Cpages_show_list%2Cread_insights%2Cpages_read_engagement%2Cpages_read_user_content&sdk=joey&version=v2.3

component:

                <FacebookLogin
                    appId={appId}
                    autoLoad={false}
                    scope={permissions.join(',')}
                    fields="name,email,picture"
                    onClick={handleClick}
                    callback={handleResponse}
                    render={renderProps => (
                        <div className="fb-login" onClick={renderProps.onClick}>
                            <img className="fb-login-logo" src="https://static.xx.fbcdn.net/rsrc.php/v3/yd/r/pXqmY8Ggh_m.png" />
                            <span className="fb-inner">&nbsp;&nbsp;Login with Facebook</span>
                        </div>
                    )}
                />

Solution

  • Apparently you need to enable the login with the javascript sdk and specify the allowed domains. That was the problem for me. Settings can be found in facebook login product settings.

    enter image description here