Add Auth To Your Nuxt 3 App in Minutes With Amplify
Tags: nuxt, amplify, authentication
Published: 2023-02-03 23:19:42

---
title: Add Auth To Your Nuxt 3 App in Minutes With Amplify
published: true
description: This tutorial will discuss how to use Nuxt.js Auth with Amplify 
tags: Nuxt, Amplify, Authentication
# cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/abmr9sii3lqf573939kv.jpeg
# Use a ratio of 100:42 for best results.
# published_at: 2023-02-03 22:07 +0000
---

[Nuxt](https://nuxtjs.org/) is an intuitive framework that takes your Vue applications and brings it to a new level! It can take your Vue 2/3 app and add static site generation, and server side rendering! In addition, it supports API routes, file system routing, data fetching and more!

[Amplify](https://docs.amplify.aws/), on the other hand, is a set of tools that allows full-stack web and mobile developers the ability to create and build apps using AWS services. 

With these two together you can build some really powerful apps!

_Want to get started now? Check out my video and jump on in!_

{% youtube 46DxCr5w1u0 %}

##What Are We Building?

Today we are building a Nuxt 3 application with authentication backed by Amplify!

We'll imagine that we need our entire application protected, and only authorized users can access it. We'll allow users to login and create an account!

##Setup

We are going to assume you are starting a Nuxt app from scratch without any prior knowledge of Amplify. Feel free to jump to the next section if this is not the case!

Let's begin by creating a brand new app

```bash
npx nuxi init nuxt3-app
```

After the app is generated change directory to the newly created folder.

```bash
cd nuxt3-app
```

Install the `aws-amplify` and `@aws-amplify/ui-vue` dependencies.

```bash
npm i @aws-amplify/ui-vue aws-amplify
```

If this is the first time using Amplify you'll need to install the [Amplify CLI](https://github.com/aws-amplify/amplify-cli). This tool will help us setup and add Amplify's services.

```bash
npm i @aws-amplify/cli
```

Next, we'll run configure. This will connect our CLI tool with our AWS account.

__Don't have an AWS account? [Sign up](https://aws.amazon.com/free) and get 12 months free!__

```bash
amplify configure
```

Finally, we'll run an init command to setup our project!

```bash
amplify init
```

Hit enter through all the defaults and you should be ready to go!

## Adding Authentication

Adding authentication to your application with Amplify only takes one command on the CLI. 

```bash
amplify add auth
```

Make sure to follow the prompts. Choose `Email` and the `Default configuration`.

```bash
Do you want to use the default authentication and security configuration? Default configuration
Do you want to use the default authentication and security configuration? Default configuration
 Warning: you will not be able to edit these selections. 
 How do you want users to be able to sign in? Email
 Do you want to configure advanced settings? No, I am done.
```

Now we can push our changes to Amplify!

```bash
amplify push
```

Choose `Y`!

```bash
? Are you sure you want to continue? (Y/n) y
```

If you look inside your folder structure in your Nuxt app, you may notice some [new folders](https://docs.amplify.aws/cli/reference/files/). Don't worry, these are configuration files for Amplify, we won't need to touch them for this tutorial. 

We are done with the command line for now. Let's setup the Nuxt app so it can use this new authentication resource.

##Nuxt Setup

Let's jump into our `nuxt.config.ts` file and add some configurations for Amplify.

```javascript
// nuxt.config.ts
export default defineNuxtConfig({
  alias: {
    "./runtimeConfig": "./runtimeConfig.browser"
  },
  vite: {
    define: {
      "window.global": {}
    }
  }
});

```

__Nuxt uses `vite` under the covers as a build tool. These options will help Nuxt and Vite properly build.__ 

Let's create a plugin for Amplify. This plugin file will configure Amplify and make it available throughout the app.

Create a new `plugins` folder in the root of the project and add a `amplify.ts` file to it.

```javascript
import { defineNuxtPlugin } from "#app";
import { Amplify, Auth } from "aws-amplify";
import aws_exports from "../src/aws-exports";

export default defineNuxtPlugin((nuxtApp) => {
  Amplify.configure(aws_exports);

  return {
    provide: {
      auth: Auth,
    },
  };
});
```

The `aws_exports` file was generated after you ran `amplify push`. This file holds all the keys needed for the Amplify JavaScript library to access all the resources you created. By adding the `provide` you can now access auth with `$auth` anywhere in your app.

We are now ready to add the [Authenticator](https://ui.docs.amplify.aws/vue/connected-components/authenticator) to our application. This will be in our `app.vue` file.

```html
<script setup lang="ts">
import { Authenticator } from "@aws-amplify/ui-vue";
import "@aws-amplify/ui-vue/styles.css";
</script>
<template>
  <div>
    <Authenticator>
      <template v-slot="{ user, signOut }">
        <h1>Hello {{ user.username }}!</h1>
        <button @click="signOut">Sign Out</button>
      </template>
    </Authenticator>
  </div>
</template>
```

__Don't forget to add the import for styles as seen above! Otherwise your Authenticator will not render properly.__

In the code example above anything between the opening and closing brackets inside the `template` will only appear after the user is logged in. 

## Test It Out!

Go ahead and start your Nuxt app


```bash
npm run dev
```

Congratulations! You now have created a Nuxt.js application with authentication!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k65uury9irysqixk0ngs.png)

Go ahead and try to create an account, and sign in. Make sure to put in a valid email address, so you can verify your account during the sign up process.

After signing in you'll see a message like this!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eu5pfb2ry9bz1h5h811a.png)


##Conclusion

In this post we've created a new Nuxt 3 application, added in Amplify with authentication, and setup our app to use Amplify with the Authenticator connected component!

So your next question probably is, where do we go from here? Well, with Amplify setup we can now add in [authenticated apis](https://docs.amplify.aws/cli/function/) backed by Lambda, [storage](https://docs.amplify.aws/cli/storage/overview/), and even [AppSync](https://docs.amplify.aws/cli/graphql/overview/) our managed GraphQL service! 

Leave a comment below on what you'd like to learn next! Or tweet me at [@ErikCH](https://twitter.com/erikch) with what you learned and I'll pick someone at random for a special prize!