Error 401 when trying to call appsync from s3 bucket using aws-amplify

What AWS Services are you utilizing? aws-amplify,aws-cognity,aws-appsync,amazon s3

Provide additional details e.g. code snippets After setting up appsync with cognito user pool, connecting to it using aws amplify react.js library from local host, works fine but after uploading it to an s3 bucket, I just receive 401 error :

x-amzn-errortype: UnauthorizedException
x-amzn-requestid: eb7e23c8-e02f-4906-831c-2528accc46ae
x-cache: Error from cloudfront

I checked network tab of chrome. in request header there was jwt token .

The wierd thing is when I tried other hostings, they work fine too. so it seems a problem in s3 configuration or maybe amplify’s appsync API does not work on static hosting solution. Does anyone know what can cause this problem?

My s3 bucket permissions :

{
    "Version": "2012-10-17",
    "Id": "HostingPolicy",
    "Statement": [
        {
            "Sid": "PublicAccess",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "*",
            "Resource": "arn:aws:s3:::test-hosting/*"
        }
    ]
}

S3 Cors configuration :

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <ID>test-users-bucket-cors-rule</ID>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <ExposeHeader>x-amz-meta-custom-header</ExposeHeader>
    <ExposeHeader>ETag</ExposeHeader>
    <ExposeHeader>authorization</ExposeHeader>
    <ExposeHeader>Authorization</ExposeHeader>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Simplified react.js code :

const awsmobile ={
    "aws_appsync_region": "...",
    "aws_appsync_graphqlEndpoint": "https://....appsync-api.ap-southeast-2.amazonaws.com/graphql",
    "aws_appsync_authenticationType": "AMAZON_COGNITO_USER_POOLS",
    Auth: {
        identityPoolId: "...",
        region: "...",
        userPoolId: "...",
        userPoolWebClientId: "...",
    }
};
Amplify.configure(awsconfig);
//works fine in localhost but not on s3 bucket !
const users = await API.graphql(graphqlOperation(listUsers));
console.log(JSON.stringify(users.data))

[EgidioCaprino]

Try adding the following to your awsconfig:

graphql_headers: async () => {
  const currentSession = await Auth.currentSession();
  return { Authorization: currentSession.getIdToken().getJwtToken() };
};

[sigimulukutla]

I created custom config for aws amplify, which includes below:

Amplify.configure({ //app sync configurations

aws_appsync_graphqlEndpoint: graphQlEndpoint,
aws_appsync_region: awsConfig.REGION,
aws_appsync_authenticationType: 'AMAZON_COGNITO_USER_POOLS'

}

I even tried to add below, but I am still getting missing authorization header graphql_headers: async () => { const currentSession = await Auth.currentSession(); return { Authorization: currentSession.getIdToken().getJwtToken() }; },

Please advise