Hi there,
As said here (sorry for google webcache, the original page is a 404) in the bottom table
If your app is A client-side web application (pure Javascript) It should Use the OAuth code flow with short-lived access tokens with PKCE (no refresh tokens).
So far I have failed to implement this. (I'm using dropbox@9.2.0 from npm)
As far as I understand, when opening the url received by calling
auth.getAuthenticationUrl
I can either get a redirect back to my App or a code to copy/paste
At first I tried to open that URL in the same window, but after digging into the code of the auth instance, I found it stores
this.codeChallenge
this.codeVerifier
internally. These values are lost when the page is being reloaded so from what I understand, it's necessary the page remains open.
Hence I decided to open the authentication URL in a new tab without providing a redirect URL, so that I need to copy/paste the code manually (which is quite unintuitive for an end user)
In that case I can call
auth.getAccessTokenFromCode
which sends a request to
https://api.dropboxapi.com/oauth2/token?grant_type=authorization_code&code=<snip>&client_id=<snip>&code_verifier=<snip>
In that case I receive an error response (404)
{
"error_description": "invalid code verifier",
"error": "invalid_grant"
}
Could you point me in the direction what I'm doing wrong?
An example on how to implement this would greatly be appreciated!
Also I'd prefer to have the user not being forced to copy/paste the token or forcing them to find the correct opened tab in which he's meant to paste the code.
For better understanding here's the relevant part of my code:
import { Dropbox } from 'dropbox';
const dbx = new Dropbox({
clientId: DROPBOX_APP_KEY,
});
dbx.auth.getAuthenticationUrl(
null, // redirectUri,
'',
'code',
'offline',
[
'account_info.read',
'files.content.write',
'files.content.read',
],
'user',
true,
)
.then((authUrl) => {
window.open(authUrl);
// eslint-disable-next-line no-alert
const code = window.prompt('Enter your received code', '');
this.dbx.auth.getAccessTokenFromCode(null, code)
.then(({ result }) => {
// I'd expect to receive something to work with here
console.log(result);
});
});
