Unable to use PKCE authorization: code_verifier was incorrect

[Christilut]

I'm trying to implement the PKCE authorization flow and as far as I can tell, I've done so correctly, but Spotify always says the code_verifier is incorrect.

This is my code to create the login URL:

    this.verifyCode = getRandomString(64)

    const codeChallenge = crypto
      .createHash('sha256')
      .update(this.verifyCode)
      .digest('base64')

    const params = new URLSearchParams()

    params.append('client_id', process.env.VUE_APP_SPOTIFY_CLIENT_ID as string)
    params.append('response_type', 'code')
    params.append('scope', SPOTIFY_SCOPES.join(' '))
    params.append('redirect_uri', SPOTIFY_REDIRECT_URI)
    params.append('code_challenge_method', 'S256')
    params.append('code_challenge', codeChallenge)

    const uri: string = `https://accounts.spotify.com/authorize?${params.toString()}`

 And to fetch the token:

    const code = new URLSearchParams(new URL(redirectUri).search).get('code') as string

    const params = new URLSearchParams()

    params.append('client_id', process.env.VUE_APP_SPOTIFY_CLIENT_ID as string)
    params.append('grant_type', 'authorization_code')
    params.append('code', code)
    params.append('redirect_uri', SPOTIFY_REDIRECT_URI)
    params.append('code_verifier', this.verifyCode)

    const { data } = await Axios.post('https://accounts.spotify.com/api/token', params)

But Spotify always returns this:

    data: {
      error: 'invalid_grant',
      error_description: 'code_verifier was incorrect'
    }

I've tried doing the code challenge encoding differently (base64url encoding) but it seems to have no effect.  

Any ideas?

[chanderson0 · Accepted solution]

I had the exact same problem, which was resolved by radically changing how I was generating the PKCE challenge. This set of functions worked for me: https://stackoverflow.com/a/59913241

[Christilut]

Thanks! I tried it that way and it worked.

For anyone running into this, I changed the encoding to the following:

async function sha256(plain) {
  const encoder = new TextEncoder()
  const data = encoder.encode(plain)

  return window.crypto.subtle.digest('SHA-256', data)
}

function base64urlencode(a){
  return btoa(String.fromCharCode.apply(null, new Uint8Array(a))
    .replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '')
}

const hashed = await sha256(verifyCode)
const codeChallenge = base64urlencode(hashed)

[Peter_Schorn]

So can you confirm that the code challenge does not need to be padded with the `=` character?