Using AWS Cognito Vuejs

Question

I have built a backend API in Expressjs app, I am hosting it on AWS EC2. I have built a frontend application in Vuejs to communicate with the Express API.

I need to create Authorization for users to sign-in, and have decided AWS Cognito for user management.

Looking through the docs, do not really give much on how to authenticate from a front-end application to the backendAPI.

I know I can authenticate the Vuejs but that still leaves my routes open to be called directly.

So my question is how do I sign in from a frontend application like VueJS and verify the Auth token in the backend API endpoints.

Looking for any logic or possible docs on how to accomplish this, or if I am not looking at this correctly if someone can gives some tips.

Answer 1

First, you will to authenticate your users with Cognito:

• either using their hosted UI (https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-app-integration.html)
• or with Amplify (https://aws-amplify.github.io/docs/js/authentication)
• or with AWS SDK if you want to go low-level (https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_InitiateAuth.html)

At that point you will have a set of JWT tokens (ID token, access token and, depending on auth flow you choose, refresh token).

You can now pass ID/access token to your backend API and verify it:

• using API Gateway Lambda authorizer if that's applicable (https://docs.aws.amazon.com/apigateway/latest/developerguide/apigateway-integrate-with-cognito.html)
• verifying the token and claims manually (https://docs.aws.amazon.com/cognito/latest/developerguide/amazon-cognito-user-pools-using-tokens-verifying-a-jwt.html). You can find implementations of this on Github.
  If you're using Node, one of the options is cognito-jwt-verifier - a tiny npm package to verify ID and access JWT tokens obtained from AWS Cognito in your node/Lambda backend with minimal dependencies (disclaimer - I'm the author of the package).