How to properly wait (via Promise) on a JWT token?

I’m using AWS Cognito for authentication, and I’m really confused about how to set it up so AppSync auth waits for Cognito authorization. I have this:

const client = new AWSAppSyncClient(
  {
    url: process.env.APPSYNC_API_URL,
    region: process.env.AWS_REGION,
    auth: {
      type: AUTH_TYPE.AMAZON_COGNITO_USER_POOLS,
      jwtToken: () => store.state.auth.user.idToken,
    },
  },
  {
    defaultOptions: {
      watchQuery: {
        fetchPolicy: 'cache-and-network',
      },
    },
  }
);

This works in most cases, but sometimes there’s a race condition when the AppSync client is ready but the Vuex store doesn’t have the token just yet. Any advice?

[mikeparisstuff]

Hi,

You can provide an async function that returns a promise containing the token. Here is how you would do it using the Auth module from Amplify:

const client = new AWSAppSyncClient(
  {
    url: process.env.APPSYNC_API_URL,
    region: process.env.AWS_REGION,
    auth: {
      type: AUTH_TYPE.AMAZON_COGNITO_USER_POOLS,
      jwtToken: async () => (await Auth.currentSession()).getIdToken().getJwtToken(),
    },
  },
  {
    defaultOptions: {
      watchQuery: {
        fetchPolicy: 'cache-and-network',
      },
    },
  }
);

Hope this helps 😃

[menkveldj]

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(),