I haven’t changed anything in my app, Auth0 settings, nor the Twitter settings, however I just started getting this error for Twitter login attempts:
“Callback URL not approved for this client application. Approved callback URLs can be adjusted in your application setting”
I double checked the settings (Twitter client_id etc) and everything is still correct, and my callback url is still defined as it was before, so it’s really unclear if maybe Auth0 isn’t sending the redirect_uri correctly or something else is messed up. Has anyone else hit this?
oh wow ok, so I guess I had my app’s endpoint as a callback url back in the day instead of my “…auth0.com/login/callback”, Twitter must have changed something on their end since it has worked for a year haha.
“Enable the setting “Enable Callback Locking” to test that only URLs you have whitelisted are accepted.
Callback URLs will automatically be locked and the whitelist will be enforced starting on June 12th. The “Enable Callback Locking” setting will be removed on this date.”
My call back urls are local during the test phase of my app, ie: http://localhost:3000
However, I’m still getting the message that Access is denied because Call back is not approved.
Ok, I did not realize it had to be https://domain.com/login/callback. Does it have to be https by the way? I am not on a secure connection at this point…
Sorry, that doesn’t do it for me. I tried all variations: with https, without, with an IP address instead of localhost, and I get the same error message that the call back is not approved.
When I enter the same call back URLs in my Auth0 call back settings, ie, "https://localhost:3000/login/callback ", I AM able to go through and get another page at authorize BUT I get this message: " Callback URL mismatch.
The URL “http://localhost:3000” is not in the list of allowed callback URLs.
Please go to the Application Settings page and make sure you are sending a valid callback url from your application. "
I wish I could add a screen shot of my app settings but it doesnt seem I can.
Your app (ie, running in localhost) sends a request to https://yourtenant.auth0.com/authorize?... including the redirect URI that Auth0 should call once the Twitter authentication is successful
Auth0 then sends a request to Twitter so your user can authenticate with their Twitter account. The callback that Auth0 passes to Twitter in the querystring is https://yourtenant.auth0.com/login/callback
Twitter now validates that the https://yourtenant.auth0.com/login/callback that received from Auth0 is in the callback URL whitelist
If URL is in the whitelist, prompts the user to authenticate and authorize the app. If not, will return the error that you’re seeing
After the user authenticates and authorize the Twitter application, Twitter will redirect to the callback URL https://yourtenant.auth0.com/login/callback
This redirect silently sends your user back to your application by calling the redirect URI
This means that the callback URL that you have to whitelist in your Twitter application is https://yourtenant.auth0.com/login/callback. If you’re using a custom domain in Auth0, then also add https://subdomain.customdomain.com/login/callback.
Thanks so much… So to be more specific, in my case, the URL I have to white list in Twiter is actually: sanfranciscoconsult.auth0.com ?
I just signed up for a custom domain by the way, but stil need to implement it.
And I still get this message, which makes no sense since I removed that call back URL from all possible locations (on Auth0 and Twitter) a couple days ago!
Could it be in the underlying code managing lock somehow?
At one point as I was debugging, I had added the option : {auth:{redirectUrl:‘http://localhost:3000/login/callback’}} to this.lock = new Auth0Lock(
but removed it since. Is it engraved in digital stone somewhere??
The redirectUrl is what Auth0 uses to call your application back, but it’s not what Auth0 passes to Twitter.
I checked your logs and you actually had two separate problems.
At first you were getting the following error:
Callback URL not approved for this client application. Approved callback URLs can be adjusted in your application settings
This was fixed once you added the correct callback URL to your Twitter app configuration: https://sanfranciscoconsult.auth0.com/login/callback
The error that you get now is:
Callback URL mismatch. http://localhost:3000/ is not in the list of allowed callback URLs
This comes from Auth0, and means that you haven’t added your SPA application’s callback URL to your Auth0 application, similarly to what you did with your Twitter app.
Thanks. That was my initial setting too! I’m not getting an error message you’re right, but am retruning to the same page with the " log in with twitter " activated. Is it on my end I need to do something to show the user’s twitter handle and indicate they’re authenticated?
This probably has to do with the way your app is handling the token that’s being returned after a successful authentication. Have you been following a particular guide/tutorial?
