Adding Authentication to a Nuxt App with AWS Amplify
Tags: nuxt, vue, awsamplify, jamstack
Published: 2020-10-14 13:23:11

---
title: Adding Authentication to a Nuxt App with AWS Amplify
published: true
description: In this post you'll learn how to add authentication to a Nuxt app using Amplify and the Amplify UI Component Library
tags: nuxt, vue, awsamplify, jamstack
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/71auif3nnl5dbaai5o6x.jpg
---

> The code for this app is located [here](https://github.com/dabit3/amplify-nuxt-auth-example)

[AWS Amplify](https://docs.amplify.aws/) 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:

```sh
npm install -g @aws-amplify/cli

amplify configure
```

> For help on configuring the Amplify CLI, check out the docs [here](https://docs.amplify.aws/start/getting-started/installation/q/integration/vue) or the video walkthrough [here](https://www.youtube.com/watch?v=fWbM5DLh25U).

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

```sh
npx create-nuxt-app nuxt-auth-app

cd nuxt-auth-app
```

Install the Amplify JS and Amplify Vue UI libraries:

```js
npm install aws-amplify @aws-amplify/cli
```

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

```sh
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:

```js
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:

```js
// 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:

```js
<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:

```js
<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:

```sh
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:

```sh
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:

```js
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](https://docs.amplify.aws/ui/q/framework/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](https://docs.amplify.aws/lib/auth/emailpassword/q/platform/js) or the [main Amplify docs](https://docs.amplify.aws/).

## 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:

```sh
amplify update auth

> Choose "Apply default configuration with Social Provider"
```

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

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

To learn more about how to set this up, check out [the documentation](https://docs.amplify.aws/lib/auth/social/q/platform/js).

---

> Cover image by [Matt Gross](https://unsplash.com/@mattkgross)