Type in your question below and we'll check to see what answers we can find...
Loading article...
Submitting...
If you couldn't find any answers in the previous step then we need to post your question in the community and wait for someone to respond. You'll be notified when that happens.
Simply add some detail to your question and refine the title if needed, choose the relevant category, then post.
Before we can post your question we need you to quickly make an account (or sign in if you already have one).
Don't worry - it's quick and painless! Just click below, and once you're logged in we'll bring you right back here and post your question. We'll remember what you've already typed in so you won't have to do it again.
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?
Solved! Go to 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
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
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)
So can you confirm that the code challenge does not need to be padded with the `=` character?
Hey there you, Yeah, you! 😁 Welcome - we're glad you joined the Spotify Community! While you here, let's have a fun game and get…