Attaching Cognito Authorization to a axios post request

Question

I have a react app that needs to post a file to API gateway. The react app authenticates users via Cognito and the API gateway requires Authentication.

Any help here would be much appreciated! Originally I tried to use Amplify which manages all the Authorization for you but apparently it will not pass binary data, hence why I'm using Axios.

However I get the following error message:

not a valid key=value pair (missing equal-sign) in Authorization header: 'eyJra....'

uploadfile = async (event) => {
    let file = event.target.files[0];
    let reader = new FileReader();
    reader.readAsArrayBuffer(file);
    reader.onload = async () => {
        try
        {
            let request = {
            method: 'POST',
            url: 'https://XXXXXXXXXX.execute-api.us-east-1.amazonaws.com/dev/upload',
            headers: {
                'Content-Type': 'image/png',
                //'Authorization': 'Bearer ' + this.props.JWT,
                'Authorization': this.props.JWT,
            },
            data: reader.result          
            };
            return axios(request); 
        }
        catch(e)
        {
            console.log(e);
        }
    };
}

I've seen a number of examples that do this, but none of them explain what you need to pass in to the Authorization. I'm assuming its the JWT token I get from Cognito.

This is how I get the JWT Token:

let res = await Auth.currentSession();
const info = await Auth.currentUserInfo();
let accessToken = res.getAccessToken();
let jwt = accessToken.getJwtToken();

As you can see I've also added the Bearer to the JWT token and it did not work.

SpaceBrain SpaceBrain · Accepted Answer · 2020-08-11T18:15:59

What we figured out is not to send binary files. Instead convert the binary file to base64. This way what you send out via Amplify is plan text. On the receiving end you convert the base64 back to binary. There is prebuilt functionally for this which makes is simple.

Attaching Cognito Authorization to a axios post request

1 Answers