Authenticate Apollo Client to AWS AppSync with Cognito User Pools

Question

I am trying to connect to my AWS AppSync API using the plain Apollo Client but I am not sure how to structure the authentication header correctly.

So far I have followed the header authentication documentation here: https://www.apollographql.com/docs/react/recipes/authentication.html

And have this code, which I adapted to include the token call to the Amplify authentication service but it returns a 401 error:

const httpLink = createHttpLink({
  uri: '[API end point address]/graphql'
});

const authLink = setContext((_, { headers }) => {
  const token = async () => (await Auth.currentSession()).getAccessToken().getJwtToken();
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : ""
    }
  }
})

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache()
})

The only documentation I can find relating to this doesn't provide any technical instructions:

When using Amazon Cognito User Pools, you can create groups that users belong to. This information is encoded in a JWT token that your application sends to AWS AppSync in an authorization header when sending GraphQL operations.

From here: https://docs.aws.amazon.com/appsync/latest/devguide/security.html

I know that token is fine because if I use the AppSync JavaScript API then it works. Is there anywhere I can go to find out how to achieve this or does someone know how?

Edit:

So far i have tried changing this line:

  authorization: token ? `Bearer ${token}` : ""

The following attempts:

token

jwtToken: token

authorization: token

Authorization: token

None of these have worked either.

score 5 · Accepted Answer · edited Feb 25 '20 at 21:19

5

Disclaimer: Never tried it, but here is what I would do:

Check out the AppSync Client code here as a foundation for creating a an Authentication link for Apollo Client and the AppSync server. It looks like that code provides the scaffolding for each of the available authentication methods.

Specifically, if you are trying to use the OPENID_CONNECT method of authentication, it appears as if the JWT token does not need to be prepended by Bearer (line 156).

edited Feb 25 '20 at 21:19

cyberwombat

38,105
35
175
251

answered Sep 07 '18 at 17:10

Jclangst

1,274
7
11

That makes sense, but annoyingly the case for Cognito user pools is blank. Editing question to show things tried so far. – Exitialis Sep 07 '18 at 17:48
Based on what I read from the AppSync developer guide, the Cognito User Pool Auth should use the OPENID_CONNECT method using the JWT token provided by the Cognito User Pool service. – Jclangst Sep 07 '18 at 17:53
Also, this is specified on line 144 of the link I posted. – Jclangst Sep 07 '18 at 17:55
The `Authorization: token` format should be the key to getting it to work, so I think the issue is likely with your Cognito User Pool config or the token itself rather than with the Apollo setup. – Jclangst Sep 07 '18 at 18:01
Sorry, you are correct, I saw that line but did not realise that you nothing in the case meant that it does what the following case does. – Exitialis Sep 08 '18 at 19:47

score 4 · Answer 2 · answered Feb 26 '19 at 20:59

You can see an example of it on Github from AWS sample. Works with AppSync but very similar.

// AppSync client instantiation
const client = new AWSAppSyncClient({
  url: GRAPHQL_API_ENDPOINT_URL,
  region: GRAPHQL_API_REGION,
  auth: {
    type: AUTH_TYPE,
    // Get the currently logged in users credential.
    jwtToken: async () => (await Auth.currentSession()).getAccessToken().getJwtToken(),
  },
  // Amplify uses Amazon IAM to authorize calls to Amazon S3. This provides the relevant IAM credentials.
  complexObjectsCredentials: () => Auth.currentCredentials()
});

Link to the AWS repo

Authenticate Apollo Client to AWS AppSync with Cognito User Pools

2 Answers2