DEV Community

Erik Hanchett
Erik Hanchett

Posted on

Add Auth To Your Nuxt 3 App in Minutes With Amplify

Nuxt 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, 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!

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

npx nuxi init nuxt3-app
Enter fullscreen mode Exit fullscreen mode

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

cd nuxt3-app
Enter fullscreen mode Exit fullscreen mode

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

npm i @aws-amplify/ui-vue aws-amplify
Enter fullscreen mode Exit fullscreen mode

If this is the first time using Amplify you'll need to install the Amplify CLI. This tool will help us setup and add Amplify's services.

npm i @aws-amplify/cli
Enter fullscreen mode Exit fullscreen mode

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

Don't have an AWS account? Sign up and get 12 months free!

amplify configure
Enter fullscreen mode Exit fullscreen mode

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

amplify init
Enter fullscreen mode Exit fullscreen mode

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.

amplify add auth
Enter fullscreen mode Exit fullscreen mode

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

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.
Enter fullscreen mode Exit fullscreen mode

Now we can push our changes to Amplify!

amplify push
Enter fullscreen mode Exit fullscreen mode

Choose Y!

? Are you sure you want to continue? (Y/n) y
Enter fullscreen mode Exit fullscreen mode

If you look inside your folder structure in your Nuxt app, you may notice some new folders. 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.

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

Enter fullscreen mode Exit fullscreen mode

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.

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,
    },
  };
});
Enter fullscreen mode Exit fullscreen mode

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 to our application. This will be in our app.vue file.

<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>
Enter fullscreen mode Exit fullscreen mode

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

npm run dev
Enter fullscreen mode Exit fullscreen mode

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

Image description

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

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 backed by Lambda, storage, and even AppSync our managed GraphQL service!

Leave a comment below on what you'd like to learn next! Or tweet me at @ErikCH with what you learned and I'll pick someone at random for a special prize!

Top comments (0)