Nuxt 3 + Authentication: How To Add Auth To A Nuxt App in Minutes with Amplify!

Adding authentication to your Nuxt.js web app is easy! In this video I show you how to add in AWS Amplify auth backed by Cognito to your Nuxt.js app in minutes! We also discuss how to setup a Nuxt.js plugin, and how you can use this approach with any Vite or Vue 3 app.
👉Check out my last video getting started with Vuetify 3 + Nuxt
• Vuetify 3 + Nuxt 3 : V...
👉 Sign up and get free Vue cheat sheets and updates!
www.vuecourse....
👉 Need some help with a project, level up your skills, Vuetify or Nuxt bug? Check out my 1-on-1 mentoring!
mentorcruise.c...
Links
aws.amazon.com...
ui.docs.amplif...
ui.docs.amplif...

[@ProgramWithErik]

What do you want to see next?

[@TonyGizer]

Lambda cloud functions!

[@mrrolandlawrence]

vueUse... there are just so many features & functions in that little library.

[@namaefumei]

Erik mate welcome back. I'd love to see some: - advanced Vue 3 best practices - creating a not so small library with Vue 3 - browser extensions - some Svelte - microservices - SAAS tools - no fuss backend something like Supabase -

[@JohnPombo]

A few things would be cool! Show how to deploy it to AWS... including SSR. Another cool thing would be to show how to hook it up to have ci/cd with github. I'd love to see the same setup using the Amplify CDK constructs.

[@laflinwalker1]

Extending a prisma and nuxt 3 app

[@JamesBaddiley]

Great to see you back Eric - your content is the best Vue stuff out there.

[@kissu_io]

Hot topic as of right now (seeing people struggling daily with auth) since the official module is not out yet.

[@ProgramWithErik]

I need to check the status of the official module

[@bartoszsowa5140]

yes, I'm one of them :D thanks for the comment in my stackoverflow question:D

[@cricadev]

I love your Nuxt3 content man, keep it up the good work! Thank you so much

[@ProgramWithErik]

Thanks!

[@tevinrivera4023]

This is perfect timing!!! I was just starting a next project that needs auth. Great content Erik!

[@ProgramWithErik]

Awesome! Let me know how it goes!

[@rhynix3]

Please do a JWT auth with different strategies e.g for admin and normal user

[@atinux]

Thank you for your videos Erik!

[@ProgramWithErik]

Thanks! I appreciate the platform!

[@DanielSanchez-fh7tn]

this is so helpful, thank you very much !

[@kazmuz5916]

Erik could you plz create video with Amplify Gen 2 setup and auth + Nuxt 3 please, thank you in advance😊

[@VELIXYZ]

Thank yoy! What about authentication with metamask sign message & email and supabase

[@RichColemanTx]

I'm confused how I check a user's auth status while in the server-side code of nuxt. With Supabase, you just pass in the `event` param from the defineEventHandler to the serverSupabaseUser function like this: await serverSupabaseUser(event). Can't figure out a way to do this in Amplify Auth.

[@CamHart73]

I'm still getting window is not defined even with the appropriate nuxt.config.ts modifications. Any ideas?

[@yukikatayama8332]

very thx!

[@daviddiazfernandez637]

Does Amplify support Nuxt 3 with SSR and api routes? How should this be done?

[@ProgramWithErik]

It's supports Nuxt3, and in my testing SSR was working. Amplify hosting does not support API routes though. To my knowledge.

[@heanglengtaing5127]

Always love your sharing! a moment ago I visited nuxt module and I saw Nuxt-Auth for Nuxt 3 just come out. It's good that you can explore. Nice Job 👍

[@ProgramWithErik]

Oh nice! I’ll check it out

[@alexkacijan6536]

aws cognito with nuxt-auth module

[@ProgramWithErik]

That’s a good one!

[@kingradical-x]

Can we get a Cognito tutorial without Amplify or at least without the Amplify magic? I think that would be interesting to people who don't use Amplify.

[@kingradical-x]

But I guess this is the wrong channel to request for this. Lol.

[@RichColemanTx]

Wow - this was extremely painful to get all the pieces in place and I still couldn't get it to fully work (login displayed but couldn't create new accounts). Our company is 100% AWS so I was really hoping to get this wired up into my new small Nuxt 3 app but I kept getting stuck saying "did you run amplify push auth yet?" or something along those lines. I'm sure it's my fault missing something minor but as a sanity check, I wired Supabase up in a few minutes with no issues at all and there was no crazy 14+ terminal config commands you needed to do like with Amplify. I tried with Amplify like 4 times from scratch. Did you skip over a bunch? Because mine required a lot more steps than what you showed.

[@ProgramWithErik]

I'm sorry to hear that. Did you ever figure it out?

[@RichColemanTx]

@@ProgramWithEriknot yet. I'm going to circle back around to it after the store is done. Just using supabase for now but will eventually have to use AWS for production.

[@dadadarius]

@@RichColemanTx Not sure if you resolved it by now but just in case anyone else has a similar issue. It seems like you set up the amplify project via the CLI or at least the authentication service. If you set it up via CLI you need to run the "amplify push" command to create the service in the backend. If you set everything up in the AWS console as shown in the video you need to make sure to do the " amplify pull --appId --envName " so that you have the configs in your project.

[@ДенисКуликов-м3о]

Привет