Trouble with Facebook Login API

Question

So I'm trying to use the Facebook Login API but without using their SDK, but even when I've whitelisted all possible Urls it comes up with the error.

I've followed the guide on how to manually set it up and even follow a personal guide given to me by a lecturer, and searched the issue online and have found nothing fixing it

let my_URL = "https://webappdev-thorkazil99.c9users.io/Intelligent%20Media%20Systems/assignment3/webpack-demo/src/";

let my_FB_ID = "xxxxxxxxxxxxxxx";

let FBURL = "https://www.facebook.com/v3.3/dialog/oauth?client_id=" + my_FB_ID + "&redirect_uri=" + my_URL + "&response_type=token";

List of Valid OAuth Redirect URIs: https://webappdev-thorkazil99.c9users.io/Removehttps://webappdev-thorkazil99.c9users.io/Intelligent%20Media%20Systems/assignment3/webpack-demo/src/

https://webappdev-thorkazil99.c9users.io/Intelligent%20Media%20Systems/assignment3/webpack-demo/src/_oauth/facebook

https://webappdev-thorkazil99.c9users.io/Intelligent%20Media%20Systems/assignment3/webpack-demo/

https://webappdev-thorkazil99.c9users.io/Intelligent%20Media%20Systems/assignment3/webpack-demo/src/_oauth/facebook?close

Warning URL Blocked: This redirect failed because the redirect URI is not whitelisted in the app's Client OAuth Settings. Make sure Client and Web OAuth Login are on and add all your app domains as Valid OAuth Redirect URIs.

Answer 1

I could be wrong but since no one has tried to answer your question yet, I'll take a crack at it.

I think the issue is a result of url encoding/decoding. I think you need to specify the Valid OAuth Redirect URIs without url encoding. So instead of

https://webappdev-thorkazil99.c9users.io/Intelligent%20Media%20Systems/assignment3/webpack-demo/src/

you would specify

https://webappdev-thorkazil99.c9users.io/Intelligent Media Systems/assignment3/webpack-demo/src/

Note: That only applies to specifying the url in the Valid OAuth redirect URIs UI. You do want to url encode your redirect url in the my_URL string (as you've already done).

If I'm right, the Valid OAuth redirect URIs UI is taking the string you specify and comparing it to the url decoded version of the redirect url. Since " https://webappdev-thorkazil99.c9users.io/Intelligent Media Systems/assignment3/webpack-demo/src/" (the redirect url after url decoding) is not the same as " https://webappdev-thorkazil99.c9users.io/Intelligent%20Media%20Systems/assignment3/webpack-demo/src/ " (the redirect url you listed as valid) it thinks that redirect url is not valid.