reactjs facebook login issue with OAuth redirect URIs

Question

I am integrating Facebook login takin reference http://jslancer.com/blog/2017/11/27/facebook-google-login-react/ and https://www.npmjs.com/package/react-facebook-login

Problem I am facing..

1. If any Facebook account is not logged in on browser, so by choosing Facebook login button on my app it says No user logged in.

2. Other case if I have logged into facebook account on browser then it says error "URL blocked: This redirect failed because the redirect URI is not white-listed in the app's client OAuth settings. Make sure that the client and web OAuth logins are on and add all your app domains as valid OAuth redirect URIs."

for case 2 I am working on localhost, So after some RND I come to the point related to https, Then I have ran my app on htttps://some_id.ngrok.io and same htttps://some_id.ngrok.io I set in facebook developer domain,website,OAuth redirect URIs but still facing same "URL block" isssue.

Please let me know if I need to set OAuth redirect URIs at code side in React.

Answer 1

To get around the https rule, you should be testing your app in dev mode:

Best practice would be to have 2 versions of your app, one in dev mode where your developers can test locally and then one in production mode where Facebook needs to redirect to an https page.