Is there a PKCE Example for a "A client-side web application (pure Javascript)"?

[Zatacke]

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);
      });
  });

[Zatacke]

I just found there is already a bugreport on this on GitHub since end of January.

I created a (not-working) standalone example and put it in that bugreport.

[Greg-DB · Accepted solution]

Thanks for writing this up! Yes, this is already open on GitHub so I'll follow up with you there.