I am adding a Facebook login to our React project, using Facebook Javascript SDK. I followed this tutorial.
When I click the login button which I added to the page, following error is shown:
Facebook has detected X isn't using a secure connection to transfer information. Until X updates its security settings, you won't be able to use Facebook to log into it.
My app is in development mode, which should mean (according Facebook docs) that localhost redirects are allowed, but it isn't so.
I have also tried adding localhost to Valid OAuth Redirect URIs in Facebook developers page, but it didn't solve the problem.
I have managed to solve the problem partially by using ngrok following this tutorial, but it is very buggy (sometimes doesn't work) and impractical to work with, as I often have to restart whole server and everything.
You need to register as facebook developer and create you app there. Once you have your web app registered you can go to your app and click on add product. Add Facebook Login. Then enable Web OAuth Login and add your localhost in the textfield below and save, you should be able to access it.
2021 update: Facebook do not allow localhost over HTTP any more. You will need to get your site working locally over HTTPS for testing. This is despite their blog post and the literal Facebook developer console assuring you that they allow localhost over HTTP by default.
This setting is in the Products > Facebook Login > Settings section of the App Dashboard. Disable this setting if you are not building a custom web login flow or using the Facebook Login SDK on the web. Enforce HTTPS.
You should use the 'Create Test App' which will create an test app for an existing live account. The just use the test app's ID on your development.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With