What's wrong with my authorization syntax? Getting 403 - ImgurAPI

Question

I'm trying to get a response from the Imgur API but despite my best efforts I seem to be passing the Client ID improperly.

const key = `Client-ID ${process.env.REACT_APP_IMGURKEY}`;

fetch(url, {
    method: "GET",
    headers: new Headers({
        Authorization: key
    })
})

result of the fetch is 403: invalid Client ID, I've double checked and confirmed client ID is valid.

Answer 1

You need to retrieve an access token in order to be able to make requests to "Authed" requests in Imgur's api.

More details: https://apidocs.imgur.com/?version=latest#authorization-and-oauth

Basically you need to redirect the user of your app to this URL:

const YOUR_CLIENT_ID = process.env.REACT_APP_IMGURKEY;
const url = 'https://api.imgur.com/oauth2/authorize?client_id=' + YOUR_CLIENT_ID + ' &response_type=token'

Then the user will see an Imgur page, asking them to give permission to your app. After the user agreed to give permission, they are taken back to the URL you configured in your application preferences, and the access token will be in the URL:

https://example.org/#access_token=ACCESS_TOKEN&expires_in=315360000&token_type=bearer&refresh_token=___&account_username=___&account_id=____

Then you can make requests passing the access token like this:

fetch(url, {
    method: "GET",
    headers: new Headers({
        Authorization: "Bearer " + ACCESS_TOKEN
    })
})