Authorization Flow returns 400

Question

I've been trying to fix this issue for a good hour, and I can't seem to fix this. I'm using node-fetch for my requests (which is just a replica of the Fetch API for browsers, but cloned for Node). I've got the following code:

fetch("https://accounts.spotify.com/api/token", {
    body: `grant_type=authorization_code&code=${req.query.code}&redirect_uri=${encodeURIComponent("http://localhost:3000/callback")}`,
    headers: {
        Authorization: `Basic ${btoa(my_client_id)}:${btoa(my_client_secret)}`,
        "Content-Type": "application/x-www-form-urlencoded"
    },
    method: "POST"
})

This is supposed to take the code from the callback, and send it to Spotify for a refresh token.

Expected behaviour:

Returned should be the following:

Actual behaviour:

400 Bad Request (consistently)

Does this answer your question? [Post a x-www-form-urlencoded request from React Native](https://stackoverflow.com/questions/35325370/post-a-x-www-form-urlencoded-request-from-react-native) — Manuel Spigolon, Feb 14 '20 at 10:54
Could you provide the body of the response rather than just the status code? — Enslev, Feb 14 '20 at 11:12
@Enslev It quite literally just says Bad Request. Nothing else — NeuronButter, Feb 14 '20 at 11:23
@ManuelSpigolon Still 400 Bad Request, even with URLSearchParams() — NeuronButter, Feb 14 '20 at 11:25

Enslev · Accepted Answer · 2020-02-14T12:34:39.247

This works. It looks like you are encoding the credentials incorrectly. Its base64({id}:{secret}) not base64({id}):base64({secret}).

I used request-promise purely for convenience, so if you fix the Authorization header in your fetch, it should work.

const rp = require('request-promise');

const clientId = 'xxx';
const clientSecret = 'xxx';

async function auth() {
    const credentialsBuffer = Buffer.from(`${clientId}:${clientSecret}`);
    const options = {
        method: 'POST',
        uri: 'https://accounts.spotify.com/api/token',
        form: {
            grant_type: 'client_credentials'
        },
        headers: {
            Authorization: `Basic  ${credentialsBuffer.toString('base64')}`
        },
    };
    const resp = await rp(options);
    console.log(resp);
}

(async () => {
    await auth();
})()

Wow, I thought it was btoa(id):btoa(secret) rather than btoa(\`${id}:${secret}\`). I don't even know how I did that lol, thanks so much — NeuronButter, Feb 15 '20 at 08:11

Authorization Flow returns 400

1 Answers1