topic Unable to use PKCE authorization: code_verifier was incorrect in Spotify for Developers

Unable to use PKCE authorization: code_verifier was incorrect

Christilut — Tue, 28 Jul 2020 08:15:52 GMT

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?

Re: Unable to use PKCE authorization: code_verifier was incorrect

chanderson0 — Wed, 29 Jul 2020 22:16:40 GMT

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

Re: Unable to use PKCE authorization: code_verifier was incorrect

Christilut — Thu, 30 Jul 2020 14:04:01 GMT

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)

Re: Unable to use PKCE authorization: code_verifier was incorrect

Peter_Schorn — Fri, 02 Oct 2020 23:51:48 GMT

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