Aws-mobile-appsync-sdk-js: Appsync Authentication - AWS Cognito User Pools with AWS Amplify

[sid88in]

To pass the jwtToken in auth object https://www.youtube.com/watch?v=vAjf3lyjf8c&feature=youtu.be&t=3410 talks about passing it like:

but Auth.currentSession returns a promise (not sure if above approach is correct) so I followed this approach:

Now jwtToken is successfully generated but client auth object doesn't wait for credentials to get generated.

What is the right way to generate token on the client side for cognito user pools?

Reference Implementation: https://github.com/serverless/serverless-graphql/pull/227

```
Amplify.configure({
Auth: {
region: process.env.REACT_APP_AWS_AUTH_REGION, // REQUIRED - Amazon Cognito Region
userPoolId: process.env.REACT_APP_USER_POOL_ID, //OPTIONAL - Amazon Cognito User Pool ID
userPoolWebClientId: process.env.REACT_APP_CLIENT_APP_ID, //User Pool App Client ID
},
});

const getCreds = async () => {
return await Auth.currentSession()
.then(data => {
return data.idToken.jwtToken;
})
.catch(err => console.log(err));
};

const client = new AWSAppSyncClient({
url: process.env.REACT_APP_GRAPHQL_ENDPOINT,
region: process.env.REACT_APP_AWS_CLIENT_REGION,
auth: {
type: AUTH_TYPE.AMAZON_COGNITO_USER_POOLS,
jwtToken: getCreds(),
},
});```

[undefobj]

Hi, thanks for the feedback Right now you would need to manage the JWT Token externally and refresh it, passing the value into the client constructor. However we're investigating a method that will allow you to pass in a promise to the client constructor which could reference Amplify's Auth category.

[sid88in]

thanks @undefobj for looking into it :)

[dmitryyankowski]

Check out vossberg's solution towards the bottom of the link below @sid88in for an example of fixing this!

https://forums.aws.amazon.com/thread.jspa?threadID=270662&tstart=0

[sid88in]

meeoowww @lolcoolkat it worked :D:D thanks a lot. I am going to integrate this solution in https://github.com/serverless/serverless-graphql/pull/227

[manueliglesias]

Hey @sid88in and @lolcoolkat with the latest aws-amplify and aws-appsync you can do something like this:

// AppSync client instantiation
const client = new AWSAppSyncClient({
  url: AppSync.graphqlEndpoint,
  region: AppSync.region,
  auth: {
    // IAM
    // type: AUTH_TYPE.AWS_IAM,
    // credentials: () => Auth.currentCredentials(),

    // COGNITO USER POOLS
    type: AUTH_TYPE.AMAZON_COGNITO_USER_POOLS,
    jwtToken: async () => (await Auth.currentSession()).getAcceessToken().getJwtToken(),
  },
});

Hope that helps

[sid88in]

@manueliglesias I get "Network error: The string did not match the expected pattern."

https://github.com/serverless/serverless-graphql/pull/263/files

[sid88in]

nvm worked :) I had to upgrade all amplify/appsync packages

[menkveldj]

@manueliglesias

I might suggest adding promise resolver function in case of error. This will prevent anything from being printed to the console.log.

 jwtToken: async () => (await Auth.currentSession()
        .then(data => {
          return data
        })
        .catch(err => {
          return err
        })).getIdToken().getJwtToken(),

[yalamber]

@manueliglesias it should probably be getAccessToken() instead of getAcceessToken() just a small typo

[ragate-tatsuyoshi]

Hey @sid88in and @lolcoolkat with the latest aws-amplify and aws-appsync you can do something like this:

// AppSync client instantiation
const client = new AWSAppSyncClient({
  url: AppSync.graphqlEndpoint,
  region: AppSync.region,
  auth: {
    // IAM
    // type: AUTH_TYPE.AWS_IAM,
    // credentials: () => Auth.currentCredentials(),

    // COGNITO USER POOLS
    type: AUTH_TYPE.AMAZON_COGNITO_USER_POOLS,
    jwtToken: async () => (await Auth.currentSession()).getAcceessToken().getJwtToken(),
  },
});

Hope that helps

Hey guys!
If take error, try bellow.

import {Auth} from "aws-amplify"

const client = new AWSAppSyncClient({
  url: AppSync.graphqlEndpoint,
  region: AppSync.region,
  auth: {
    type: AUTH_TYPE.AMAZON_COGNITO_USER_POOLS,
    jwtToken: (await Auth.currentSession()).accessToken.jwtToken, // adjust 
  },
});