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

[uchar]

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() };
};

[elorzafe]

@uchar I could not reproduce the problem. I used Amplify CLI and enabled hosting and did amplify publish that deploys the app on S3 and it works without issues. Can you try cleaning local storage? And start a new cycle. Let me know how it goes.

[jordanranz]

Closing due to inactivity. Please open a new issue if you are still experiencing any related problems.

[vdiaza]

Hi am having a similar issue.

I have created my webapp with amplify vue. I have succesfully connect it to cognito and appsync through graphql. This works perfectly locally. But after deploying it through AWS Amplify Console (through bitbucket) it shows me a 401 error when trying to connect to graphql. any thoughts?

[codermeisje]

I am experiencing the exact same thing as @vdiaza
Also using vue, cognito, and appsync. Works great locally, but after it is deployed through AWS amplify console, I get a 401 error when trying to connect to graphql (using the amplify-connect component).

[weysler]

Hi @codermeisje @vdiaza,

I had the same issue and after investigating I've found the missing variable aws_appsync_authenticationType on aws_exports file. The fallback authMode is AWS_IAM which explains the Authorization header without jwtToken

Please check out the solution from @swaminator on the issue 163

[ohsik]

I had the same issue and spent the entire day to figure it out lol This worked for me for my case. https://docs.aws.amazon.com/amplify/latest/userguide/custom-build-image.html#setup-live-updates

[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

[hutber]

Like @sigimulukutla I'm also pretty baffed about this