Build Auth App using AWS Cognito with NuxtJS and TypeScript

This is a procedure manual to create web application has authentication using AWS Cognito with NuxtJS and TypeScript.

1. Create NuxtJS Project

$ node -v
v14.18.1
$ yarn create nuxt-app <PROJECT_NAME>
✨  Generating Nuxt.js project in nuxt-ts-cognito
? Project name: <PROJECT_NAME>
? Programming language: TypeScript
? Package manager: Yarn
? UI framework: None
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: ESLint, Prettier
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools:
? Continuous integration: None
? Version control system: Git
$ cd <PROJECT_NAME>

To use Vuex store, create store/index.ts file.

$ touch store/index.ts

2. Create AWS Cognito User Pool

In this time, we create user pool with default settings.

After creation, we can see user pool ID. Remember this value.

I’ll call this value as COGNITO_USERPOOL_ID.