How to properly handle unauthenticated users and requests in AWS Amplify/AppSync React apps?

Question

I am having a very hard time to figure out how to handle unauthenticated users in a React app which uses AWS Amplify and AWS AppSync. Seems like most docs suggest to wrap the whole app with withAuthenticator HOC from aws-amplify-react but in the real world it is a very rare case.

So here how I am setting a client to talk to the AppSync API

const client = new AWSAppSyncClient({
  url: AppSyncConfig.aws_appsync_graphqlEndpoint,
  region: AppSyncConfig.aws_appsync_region,
  auth: {
    type: AUTH_TYPE.AMAZON_COGNITO_USER_POOLS,
    jwtToken: async () =>
      (await Auth.currentSession()).getIdToken().getJwtToken()
  }
});

and then I wrap top level App component export default withAuthenticator(App);

All these works, a user hits the root URL and gets provided with a log in view. As it has been said above, it is a very rare case in the real world scenario. Usually, the root URL, as well as many others, is open to unauthenticated users. How to accomplish it with AWS Amplify? - no docs, not tuts :-(

I found some hint how to make it work here, yet still no complete explanation.

Answer 1

1. Make sure to update your authentication settings to enable both authenticated and unauthenticated access by running amplify update auth and configuring the settings manually.

2. In an API request, you can now specify the auth mode:

const createdTodo = await API.graphql({
  query: queries.createTodo,
  variables: {input: todoDetails},
  authMode: 'AWS_IAM'
});

Here are more detailed docs

---

These steps are outdated but also still work:

Using the following steps, you can allow both Authenticated & Unauthenticated access to your AWS AppSync API:

1. Create an Amplify project

amplify init

1. Add auth with custom security configuration:

amplify add auth

Do you want to use the default authentication and security configuration? NO

Select the authentication/authorization services that you want to use: (Use arrow keys) User Sign-Up, Sign-In, connected with AWS IAM controls (Enables per-user Storage features for images or other content, Analytics, and more)

Please provide a friendly name for your resource that will be used to label this category in the project: YOURAPINAME

Please enter a name for your identity pool. YOURIDPOOLNAME

Allow unauthenticated logins? (Provides scoped down permissions that you can control via AWS IAM) Yes

Choose defaults for the rest of the questions

3. Add the api

amplify add api

Choose Amazon Cognito User Pool as the authorization type.

4. Create the API

amplify push

5. In the AppSync API dashboard settings, change the authentication type to AWS Identity and Access Management (IAM)

6. In aws.exports.js on the client app, change aws_appsync_authenticationType to AWS_IAM

7. In the Cognito dashboard, click "Manage Identity Pools" & click on your identity pool.

8. Click "Edit Identity Pool" to see your "Unauthenticated role" & "Authenticated Role"

9. Open the IAM console & find the "Unauthenticated role" from step 8

10. Click "Add inline policy"

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "appsync:GraphQL"
            ],
            "Resource": [
                "arn:aws:appsync:<REGION>:<ACCOUNTID>:apis/<APIID>/types/Mutation/fields/listTodos"
            ]
        }
    ]
}

11. Open the IAM console & find the "Authenticated role" from step 8

12. Click "Add inline policy"

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "appsync:GraphQL"
            ],
            "Resource": [
                "arn:aws:appsync:<REGION>:<ACCOUNTID>:apis/<APIID>/types/Mutation/fields/listTodos",
                "arn:aws:appsync:<REGION>:<ACCOUNTID>:apis/<APIID>/types/Mutation/fields/createTodo"
            ]
        }
    ]
}

13. In index.js, add this code:

import { Auth } from 'aws-amplify'
Auth.currentCredentials()
  .then(d => console.log('data: ', d))
  .catch(e => console.log('error: ', e))

14. You should now be able to query when logged out, & query & create mutations when logged in.

If you'd like to access the unique identity of the logged in user for user authorization & fine grained access control, you can access the $context.identity.cognitoIdentityId in the resolver.