Using AWS Cognito Id Token from generated UI in a website (vue.js) to authenticate HTTP Requests to AWS Gateway

Question

I have an API in AWS API gateway with a cognito user pool authorizer. Currently we have rolled it out with mobile apps and they created their own auth flow using the cognito SDK.

I wanted to use their auto generated UI and just get the #id_token to authenticate the user in the website I'm creating.

However, I'm a bit confused with all the documentation around, seems like none of it talks about initiating a user session with an #id-Token using AWS SDK for JS or aws-amplify-sdk for JS.

The generated UI spits out this http://localhost:8080/#id_token=uyiuiubii-huge-Token-goes-here&expires_in=3600&token_type=Bearer

I want to grab that id_token value to sign use in and initiate session in cognito.

Then ask the session manager for the id_token to make http requests using standard http client (say Ajax call, or axios) to endpoints secured with cognito in API gateway adding the token manually to the headers.

Any help is appreciated.

Answer 1

If you are using API REST service they mention here

https://docs.amplify.aws/lib/restapi/authz/q/platform/js#request-headers

I agree its confusing how you go from custom Auth UI and the JWT you can get from that to passing it to these other API clients....

the react "withAuthenticator" seems to do it magically somehow, but if not using that its confusing as hell.

Answer 2

What about the Amplify header customization docs? Specifically:

You can use the JWT token provided by the Authentication API to authenticate against API Gateway directly when using a custom authorizer. You can achieve this by retrieving the JWT token from the (await Auth.currentSession()).getIdToken().getJwtToken()

Note that the Cognito JWT referenced by the docs is the id_token returned in the URL by a successful Cognito User Pool auth.