Adding Authentication to a Nuxt App with AWS Amplify

The code for this app is located here

AWS Amplify offers a comprehensive set of tools and services that enable mobile and front-end web developers to quickly and easily build secure, scalable full stack applications, powered by AWS services.

In this post you'll learn how to add authentication to a Nuxt app using AWS Amplify.

Getting started

To get started, install and configure the Amplify CLI if you have not already done so:

npm install -g @aws-amplify/cli

amplify configure

For help on configuring the Amplify CLI, check out the docs here or the video walkthrough here.

Next, create a new Nuxt app and change into the directory:

npx create-nuxt-app nuxt-auth-app

cd nuxt-auth-app

Install the Amplify JS and Amplify Vue UI libraries:

npm install aws-amplify @aws-amplify/cli

From inside the directory of the new project, initialize a new Amplify project:

amplify init

? Enter a name for the project: nuxtauth
? Enter a name for the environment: dev
? Choose your default editor: <your-default-text-editor>
? Choose the type of app that you're building: javascript
? What javascript framework are you using: vue
? Source Directory Path: .
? Distribution Directory Path: dist
? Build Command:  npm run-script generate
? Start Command: npm run-script start

Next, add authentication using the add command:

amplify add auth

? Do you want to use the default authentication and security configuration? Default configuration
? How do you want users to be able to sign in? Username
? Do you want to configure advanced settings? No, I am done.

Configuring Amplify with Nuxt

Next, we need to configure the Amplify project we just created to be recognized by the Nuxt app. To do so, create a new file in the plugins directory called amplify.js and add the following code:

// plugins/amplify.js
import Amplify from 'aws-amplify'
import '@aws-amplify/ui-vue';
import config from '../src/aws-exports'
Amplify.configure(config)

Adding authentication

Now that the authentication service has been created and Amplify has been configured, we can add the code to create the authentication flow.

Create a file called profile.js and add the following code:

<template>
  <div>
    <amplify-authenticator v-if="authState !== 'signedin'" class="container" />
    <div v-if="authState === 'signedin' && user">
      <h1>Hello, {{user.username}}</h1>
      <button v-on:click="signOut">Sign Out</button>
    </div>
  </div>
</template>

<script>
import { onAuthUIStateChange } from '@aws-amplify/ui-components'
import { Auth }  from 'aws-amplify';

export default {
  created() {
    onAuthUIStateChange((authState, authData) => {
      this.authState = authState;
      this.user = authData;
    })
  },
  data() {
    return { user: undefined, authState: undefined }
  },
  methods: {
    signOut: async () => Auth.signOut()
  },
  beforeDestroy() {
    return onAuthUIStateChange;
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
}

:root {
  --amplify-primary-color: #4287f5;
  --amplify-primary-tint: #005cf0;
  --amplify-primary-shade: #005cf0;
}
</style>

Next, open layouts/default.vue and update the template to add links that enable navigation between the main page and the new profile page:

<template>
  <div>
    <nuxt-link to="/">Home</nuxt-link>
    <nuxt-link to="/profile">Profile</nuxt-link>
    <Nuxt />
  </div>
</template>

To test it out, run the dev command:

npm run dev

When the app runs, you should be able to navigate to /profile and sign up.

🎉 Congrats, you've successfully added authentication to your Next app!

Deploying to AWS

If you'd like to deploy the app to AWS, you can do so using the CLI:

amplify add hosting

? Select the plugin module to execute: Hosting with Amplify Console
? Choose a type: Manual deployment

You can then deploy the site and subsequent updates using the publish command:

amplify publish

Creating a custom Authentication flow

In this guide you've learned how to add authentication using the AWS Amplify UI library for Vue. In many cases though you may need to build a custom authentication configuration to have complete control over your authentication flow.

To create a custom authentication flow, you can use the Auth class directly for complete control over user management.

To learn more, check out the the documentation for Amplify authentication or the main Amplify docs.

Social Sign In

Amplify also supports OAuth support for social sign in.

To update your project to implement social sign in, run the update command:

amplify update auth

> Choose "Apply default configuration with Social Provider"

Once configured, you can then sign in users in using the Auth class:

Auth.federatedSignIn({provider: 'Google'})

To learn more about how to set this up, check out the documentation.

Cover image by Matt Gross