DEV Community

Cover image for AWS AppSync without Authentication
Daniel Bayerlein
Daniel Bayerlein

Posted on • Edited on

AWS AppSync without Authentication

#aws #appsync #graphql #serverless

There are several ways to authorize your application to interact with the AWS AppSync GraphQL API. But what if your application has no authentication? This post shows you a best practice for communicating with AWS AppSync for public web sites.

TL;DR - Use Cognito Identity Pools with IAM Roles.

I found many comments on GitHub and Stack Overflow that deal with this issue. But no solution felt good until I found the GitHub repo from dabit3.

AWS AppSync supports AWS_IAM. With the Cognito Identity Pool you can associate the IAM policy.

Code, Code and Code

In the following two steps I explain which changes are necessary.

Step 1: Configure AWS AppSync

The first step is to specify the authentication type in aws-exports.js. Set the authenticationType to 'AWS_IAM'.

File: aws-exports.js

export default { graphqlEndpoint: process.env.AWS_APPSYNC_GRAPHQL_ENDPOINT, region: 'eu-central-1', authenticationType: 'AWS_IAM' }
Enter fullscreen mode Exit fullscreen mode

Update the AppSync configuration by setting credentials to () => Auth.currentCredentials().

File: index.js

import React from 'react' import ReactDOM from 'react-dom' import Auth from '@aws-amplify/auth' import AWSAppSyncClient from 'aws-appsync' import { ApolloProvider } from '@apollo/client' import { Rehydrated } from 'aws-appsync-react' import App from './App' import AppSyncConfig from './aws-exports' const appSyncConfig = { url: AppSyncConfig.graphqlEndpoint, region: AppSyncConfig.region, auth: { type: AppSyncConfig.authenticationType, credentials: () => Auth.currentCredentials() }, disableOffline: true // https://github.com/awslabs/aws-mobile-appsync-sdk-js/issues/102 } const appSyncOptions = { defaultOptions: { watchQuery: { fetchPolicy: 'cache-and-network' } } } const client = new AWSAppSyncClient(appSyncConfig, appSyncOptions) ReactDOM.render( <ApolloProvider client={client}> <Rehydrated> <App /> </Rehydrated>  </ApolloProvider>,  document.getElementById('app') )
Enter fullscreen mode Exit fullscreen mode

Not so important

The rest of the following code is only for the completeness of the demo application.

File: App.js

import React from 'react' import { Query } from '@apollo/client/react/components' import Auth from '@aws-amplify/auth' import { LIST_EVENTS } from './graphql/queries.gql' Auth.configure({ region: process.env.AWS_COGNITO_REGION, identityPoolId: process.env.AWS_COGNITO_IDENTITIY_POOL_ID }) export default () => ( <> <h1>Events</h1>  <Query query={LIST_EVENTS}> {({ loading, error, data }) => ( data.listEvents.items.map(event => ( <div key={`event_${event.id}`}> <h2>{event.name}</h2>  <p>{event.date}</p>  </div>  )) )} </Query>  </> )
Enter fullscreen mode Exit fullscreen mode

File: queries.gql

query LIST_EVENTS { listEvents { items { id name date } } }
Enter fullscreen mode Exit fullscreen mode

File: schema.graphql

type Event { id: ID! name: String! date: AWSDateTime! } type ModelEventConnection { items: [Event] nextToken: String } type Query { listEvents( limit: Int, nextToken: String ): ModelEventConnection } schema { query: Query }
Enter fullscreen mode Exit fullscreen mode

Step 2: Setup Cognito Identity Pool

In my example I use the Serverless Framework.

First we define the Cognito Identity Pool and set AllowUnauthenticatedIdentities: true. This enable access for unauthenticated identities.

In the second part I link the role for the Identity Pool. BTW: You can also set an role for authenticated users via authenticated if your application supports authenticated and unauthenticated users.

At the last step, I create the IAM role and the related policy. Add your resources (Query, Mutation, Subscription) to the policy.

File: serverless.yml

## Cognito Identity Pool CognitoIdentityPool: Type: AWS::Cognito::IdentityPool Properties: IdentityPoolName: ${self:service}-${self:provider.stage}-${self:provider.region}-IdentityPool AllowUnauthenticatedIdentities: true ## IAM roles CognitoIdentityPoolRoles: Type: AWS::Cognito::IdentityPoolRoleAttachment Properties: IdentityPoolId: Ref: CognitoIdentityPool Roles: unauthenticated: !GetAtt CognitoUnAuthRole.Arn ## IAM role used for unauthenticated users CognitoUnAuthRole: Type: AWS::IAM::Role Properties: Path: / AssumeRolePolicyDocument: Version: '2012-10-17' Statement: - Effect: 'Allow' Principal: Federated: 'cognito-identity.amazonaws.com' Action: - 'sts:AssumeRoleWithWebIdentity' Condition: StringEquals: 'cognito-identity.amazonaws.com:aud': Ref: CognitoIdentityPool 'ForAnyValue:StringLike': 'cognito-identity.amazonaws.com:amr': unauthenticated Policies: - PolicyName: ${self:service}-${self:provider.stage}-${self:provider.region}-AppSyncCognitoPolicy PolicyDocument: Version: '2012-10-17' Statement: - Effect: 'Allow' Action: - 'mobileanalytics:PutEvents' - 'cognito-sync:*' - 'cognito-identity:*' Resource: '*' - Effect: Allow Action: - appsync:GraphQL Resource: !Join [ '', [ !GetAtt GraphQlApi.Arn, '/types/Query/fields/listEvents' ] ]
Enter fullscreen mode Exit fullscreen mode

Ready

🏁 Now you have access to AWS AppSync and the listEvents query can be executed without authentication.

Top comments (2)

Collapse
 
fasani profile image
Michael Fasani •

I am yet to try your solution but the AWS documentation for this topic is a complete joke. Thank you for posting this and hopefully tomorrow I have some good luck with it as today was slow progress!

Collapse
 
shereef profile image
Shereef Marzouk •

I am currently trying this and my first question is going to be where in the serverless.yml do we insert those values. I think under resources:Resources: but I am not sure yet