We Keep Coding

TikTok Login Kit web flow - keep getting Redirect URI error (code 10006)

I'm having an issue getting Login Kit to work. Similar to the question asked here I have the correct redirect domain listed in tiktok settings and the redirect_uri is basically just "domain/tiktok" but no matter what I do I get the same error message:
Below is my backend code - it's basically exactly the same as what is listed in the tiktok docs. Any help on this would be much appreciated!
const CLIENT_KEY = 'my_key'
const DOMAIN = 'dev.mydomain.com'
const csrfState = Math.random().toString(36).substring(2);
res.cookie('csrfState', csrfState, { maxAge: 60000 });
const redirect = encodeURIComponent(`https://${DOMAIN}/tiktok`)
let url = 'https://www.tiktok.com/auth/authorize/';
url += '?client_key=' + CLIENT_KEY;
url += '&scope=user.info.basic,video.list';
url += '&response_type=code';
url += '&redirect_uri=' + redirect;
url += '&state=' + csrfState;
res.redirect(url);
UPDATE 8/13/2022
I submitted the app for review and was approved so the status is now "Live in production" instead of "staging". The issue is still there - still showing error message no matter what domain / callback URL I use
UPDATE 8/16/2022
OK so I've made some progress on this.
First off - I was able to get the authentication/login screen to finally show up. I realized to do this you need to:
Make sure that the status of your app is "Live in production" and not "Staging". Even though when you create a new app you may see client_key and client_secret show up don't let that fool you - Login Kit WILL NOT WORK unless your app is submitted and approved
The redirect_uri you include in your server flow must match EXACTLY to whatever value you entered in "Registered domains" in the Settings page. So if you entered "dev.mydomain.com" in Settings then redirect_uri can only be "dev.mydomain.com" not "dev.mydomain.com/tiktok".
I think I might know what the issue is. My guess is that before - on the Settings page you had to enter the FULL redirect URL (not just the domain) and whatever redirect uri was included in the authorization query was checked against this value which was saved in TikTok's database (whatever was entered in the Settings page when path/protocol were allowed). At some point recently, the front-end business logic was changed such that you could only enter a domain (e.g., mydomain.com) on the Settings page without any protocols - however TikTok's backend logic was never updated so during the Login flow they are still checking against an EXACT match for whatever was saved in their DB as the redirect uri - this would explain why an app that was previously using the API with a redirect uri that DOES include protocols (e.g., for Later.com their redirect uri is https://app.later.com/users/auth/tiktok/callback) continues to work and why for any app attempting to save redirect WITH protocols are getting the error message screen. My gut feeling is telling me that the error is not on my part and this is actually a bug on TikTok's API - my guess is it can be addressed either by changing the front-end on the Settings page to allow for path/protocols (I think this is the ideal approach) or to change their backend so that any redirect uri is checked such that it must include 1 of the listed redirect domains.
I've been emailing with the TikTok team - their email is tiktokplatform#tiktok.com - and proposed the two solutions I mentioned above. I suggest if you're having the same issue you email them as well and maybe even link this StackOverflow question so that maybe it will get higher priority if enough people message them about it.
If you're looking for a shot-term hack I'd recommend creating a dedicated app on AWS or Heroku with a clean domain (e.g., https://mydomain-tiktok.herokuapp.com) and then redirect to either your dev or production environment by appending a prefix to the "state" query (e.g., "dev_[STATE_ID]"). I'll just reiterate I consider this a very "hacky" approach handling callbacks and would definitely not want to use something like this in production.

In my case, the integration worked after doing following steps:
In TikTok developers page:
Like #eugene-blinn said: make sure your app is in Live in production status (I couldn't find anything in the documentation about why Staging apps don't work);
Add the Login Kit product to your app and set the Redirect domain field with your host domain, for example: mywebsite.com.
In your code:
From my tests, I could add whanever url path I wanted, the only constraint was that the domain should match with step 2. So, yes, you can add https://mywebsite.com/whatever/path/you/want in redirect_url parameter.
That's it. It should work with these 3 steps.
Additionally, I got other issue related to use specific features in the scope property (like upload or read videos, etc), so here the solution as well:
Only add Video Kit product to the TikTok app and set video.upload or video.list in the scope authorize request won't work unless you also add the TikTok API product in your TikTok app as well. Btw, it neeeds to be approved too.

TikTok fixed the bug that resulted in URL mismatch with redirect domain from working. However, they fixed it only for paths (e.g., /auth/tiktok) but PORT additions still result in an error - so www.domain.com:8080/auth/tiktok won't work but www.domain.com/auth/tiktok WILL work
UPDATE 10/3/2022
Got the following response directly from TikTok engineering team:
At this point, we only support production integrations with TikTok for Developers and require that you have a URL without port number. However, we understand from your communication that this makes it harder for you to build, test, and iterate your integration with us. Unfortunately, at this time, we do not have a timeline for when this additional support for development servers will be added. We request that you only redirect to URLs without port numbers. Thank you for the feedback.

The frontend of the developer's dashboard still rejects protocol and path in validation. However, the backend skips the path validation.
To be able to update the "Redirect domain" simply:
Open dev tools in chrome and go to the "Network" tab.
Clic on "Save changes" button on the dashboard.
Right clic on the "publish" request that appeared and copy as cURL.
Modify the "redirect_domains" field in the request before pasting it in the terminal.
I believe the app still needs to be approved and in production to get it to work. I'm still waiting for approval and it has been a couple of weeks.
UPDATE 9/17/2022
Just like #mauricio-ribeiro, my app worked after it was approved to production. Setting up the redirect domain without path and scheme works just fine.

I had the same problem, my solution:
1.- In my TikTok App dashboard, the “redirect_uri” is: mydomain.com, without http/https and without path (/my-redirect-url). Also you can add subdomains using this rule
2.- In my code, I have to add http or https to the redirect_uri, and feel free to use path (/my-redirect-uri)
I hope this help you

"redirect_uri_mismatch" when exchanging access token under "popup" mode

We build our web application and integrate with Google OAuth2 according to this doc Google Identity Services JavaScript SDK
We would like to use "popup" mode, but when trying to exchange access_token with authentication code, /token return error like "
{"error": "redirect_uri_mismatch","error_description": "Bad Request"}"
We have passed the redirect_url param when calling /token, and it is exactly the same one as configured on the credential page.
What's more weird is that when we switch to "redirect" mode, everything works fine. Same client_id, same client_secret, same grant_type, same redirect_uri.
I don't get it, it's like codes generated under redirect and popup mode are treated differently.
Any help? Thanks a lot!

Set the redirectUri in the OAuth2 client to "postmessage" to indicate that you've already sent the message.
It's an undocumented feature.
Google OAuth redirect_uri_mismatch when exchanging one-time-code for refresh token

As per doc you referenced, Google is not expecting a refirect_url in popup mode. Google will not send a redirect. Instead it will return auth code directly to your callback and the callback will have to send it to your server.

Implementing Dropbox authentication and file upload locally, redirect URI error

I am able to perform the functionalities of Authentication, receiving the Access Token and upload and download of files from Dropbox using this SDK. However i want to be able to implement this functionality on a local html page. Basically, i used the Dropbox SDK at the script and im going by the example given
<script src="https://unpkg.com/dropbox/dist/Dropbox-sdk.min.js"></script>
For authentication the steps are to provide a client ID and a redirect URI, in the example they have used a static client ID and we need to pass the redirect URI in the dbx.getAuthenticationUrl function, this sets the redirect uri as the href of a link which is basically the authentication link which goes to the page where the user logs and is redirected to the redirect URI provided, where we take the access token to be used for further operations. On trying multiple redirect URI's i am getting the same error for which ever URI i provide
More details for developers
Invalid redirect_uri: "http://localhost/redirect.html": It must
exactly match one of the redirect URIs you've pre-configured for your
app (including the path).
This file is valid, but the message persists. Do i need to redirect to any other URL, i have tried a URL of a file on a server which is correct as the file opens when i try that url in the browser.
In the example they redirect to the same URI http://localhost:8080, NO OTHER, even the port number, if i change the port number it shows the same error and only works at 8080. What am i missing? Is there any other place where the url is specified? I am only specifying it like in the example html file
var dbx = new Dropbox({ clientId: CLIENT_ID });
var authUrl = dbx.getAuthenticationUrl('http://localhost:8080/auth');

Vue-router with google api

I have a site on Vue with vue-router navigation which needs to work with google drive. I've set up the app, tokens uri in the google developer's console and it works fine on its own:
https://accounts.google.com/o/oauth2/v2/auth?response_type=token&client_id=668711006022-7igan4in4ob7ngtsmqjh8ld7j8hs5t16.apps.googleusercontent.com&redirect_uri=http%3A%2F%2Ftwine.teivaz.com/auth&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fdrive
But when it came to integrating to vue-router navigation I faced a problem. After making a request to the google ouath2 server it redirects me to a specified address with the token in url params like this:
http://twine.teivaz.com/auth#access_token=ya29.Ci8o1gdfpkN51F3yjAbW-v9r-JN9YD3ze5B2123rvv62KuFc5b1OgzF-9XQ&token_type=Bearer&expires_in=3600
I've came up with several solutions:
Set authorized redirect URIs to match the vue-router's format to simply read as parameter, like this:
http://twine.teivaz.com/#!/login/
But the google console does not allow me to do that giving a message
Invalid Redirect: http://twine.teivaz.com/#!/login/ cannot contain a fragment.
It seems that I won't be able to paste in google console my vue-readable URI from the first approach. Is it supposed to be like this or it's a bug in the console?
Capture token from url from default page. But in the vue-router I have a default redirect which drops all parameters:
TwineRouter.redirect({
'*': '/stories'
});
It should be there for all url without parameters.
Is there any way to parse the parameter before redirect occurs and maintain behaviour for all cases when there is no token in parameters?
Create another page that will simply save the token to cookies and redirect to the index. And set it up in the google console:
http://twine.teivaz.com/login.html
It seems that this option is a poor design but it might actually work.
Is it the best option among given? Is there anything I missed?

a bit too late I think, but you can use
mode: 'history'
in vue-router, this eliminates # thing from the URL.
http://router.vuejs.org/en/essentials/history-mode.html

Passport facebook authentication not working

I have a nodeJS application (express), which has a facebook login. I'm using the passport-facebook authentication, described in here passport-facebook. My login was still working couple weeks ago ok, but now something has changed. I'm not sure if Facebook has changed something, or if I have. I haven't touched to any of the login code, so I suspect it is something in the facebook's end.
Here is my authentication code:
router.get('/', passport.authenticate('facebook'), function(req, res){
});
router.get('/auth/facebook/callback', passport.authenticate('facebook', {
failureRedirect: '/' }),
function(req, res) {
res.redirect('/calendar');
});
Basically, I want the app to automatically authenticate the user from the root of the app, and then redirect after the authentication to /calendar.
The symptons are following: If I try to go to the root and I haven't logged in with facebook earlier, then it will take me to the normal facebook login screen, as it should. But then on that screen, there is a warning of:
Given URL is not permitted by the Application configuration
One or more of the given URLs is not permitted by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.
I checked all questions related to this, and it seems it is because I haven't configured the app domain and site url properly in the facebook app configuration. But they should be all fine: app domain: localhost, site url: http://localhost:3000/
So I don't know why it is complaining about it? I do not have any subdomains. The only routes I do have are: (/, /calendar, /calendar/events). The last /calendar/events routes are ajax routes. Anyways, after I enter my facebook credentials and login, then the page will redirect me to a empty page, with url: (https://www.facebook.com/login.php?login_attempt=1). I opened the developer's tools, and I see one error message in its console:
Failed to load resource: the server responded with a status of 500 (Internal Server Error)
But, now I am actually logged in. Because if I now go to root or to /calendar, it will take me to correct page and show I'm logged in properly. So apparently the log in works, but there are some issues with redirection and allowed URL's. I just don't seem to know what and why. I'm using mongodDB as database.

It could be because of what site you have registered in your app. If you have registered it to http://localhost:3000/ you should work with domain localhost that for the callback. And if you have registered it as http://127.0.0.1:3000/ then you should work with 127...

I have no idea why this even worked, but I found a solution. Previously, I had configured valid OAuth redirect URI to be http://127.0.0.1:3000/auth/facebook/callback, and it was working all good. Now I changed it to use localhost instead of 127.0.0.1:3000, and that seemed to do the trick. Now everything is working as expected, though I don't know why. If someone is able to clearly tell me why, I will mark that as the correct answer.