How to use Amplify Auth in Nuxt JS

2 min readNov 10, 2020

Vue JS is a frontend framework often extended with Nuxt JS to get great SSO value out of the box. AWS Amplify allows you to add authentication to your Vue web app with ease as shown in a previous article. In this article, I demonstrate how to add Cognito authentication with Amplify to a Nuxt web app.

Why are we even using Nuxt JS and Amplify?

Nuxt JS extends upon Vue JS with the following useful features:

Universal app means SSO value
Static site generation
Automatic route generation

Amplify is an AWS framework which can be included in a Vue JS app to connect to AWS resources for Authentication, APIs plus much more. Amplify enables the use of Congito authentication, meaning the system can be serverless and makes it simple to add authorisation on APIs, too.

The Setup

Assuming the existence of a Congito User Pool:

The basic structure of this project follows the steps of a Nuxt project

yarn create nuxt-app <project-name>

Adding Amplify:

yarn add aws-amplify @aws-amplify/ui-vue

The Problem

In the tutorial for Vue JS Amplify, you add your configuration into main.js, but this isn’t a thing in Nuxt…

The Solution

Add amplify.js to /plugins in your Nuxt project

Configure this to match your setup — I have configured a Congito User Pool and an API which is only accessible to logged in users.

import Vue from 'vue'
import '@aws-amplify/ui-vue'
import Amplify, { Auth } from 'aws-amplify'Amplify.configure({
  Auth: {
    region: 'EU-WEST-1',
    userPoolId: process.env.userPoolId,
    userPoolWebClientId: process.env.userPoolWebClientId,
    mandatorySignIn: false,
    oauth: {
      scope: ['email', 'openid'],
      redirectSignIn: `https://${process.env.rootDomain}/`,
      redirectSignOut: `https://${process.env.rootDomain}/`,
      responseType: 'code'
    }
  },
  API: {
    endpoints: [
      {
        name: 'UserAPI',
        endpoint: `https://${process.env.userApiDomain}`,
        custom_header: async () => {
          return { Authorization: `Bearer ${(await Auth.currentSession()).getIdToken().getJwtToken()}` }
        }
      }
    ]
  }
})Vue.prototype.$Amplify = Amplify

2. Add the following snippet to your nuxt.config.js

plugins: [{ src: "~/plugins/aws-amplify.js", ssr: false }]

The Conclusion

Had I read the Nuxt docs better, I might have known how to do it.

The fun doesn’t stop here and you can add all of your favourite Vue JS modules this way, including Vuetify and Vue-Clipboard.

Or, go further with Nuxt and add modules like Sitemap Generator.

Thanks For Reading

I hope you have enjoyed this article. If you like the style, check out T3chFlicks.org for more tech focused educational content (YouTube, Instagram, Facebook, Twitter).