Build a Full Stack authentication app with Nuxt 3, MongoDB, Tailwind CSS

#nuxtauth #nuxt3 #nuxtjs

In this in-depth tutorial, We will build a robust Full Stack authentication app using Nuxt 3, MongoDB, and Tailwind CSS.

📚 Resources Mentioned:

⭐ What You'll Learn:
- Setting up a Nuxt 3 project for Full Stack development.
- Integrating MongoDB for efficient data storage.
- Crafting an Auth UI with Tailwind CSS.
- Implementing user authentication and authorization.
- Securing your application with best practices.

👩‍💻 Who Is This For:
Whether you're a beginner looking to understand the basics or an experienced developer seeking to enhance your Full Stack skills, this tutorial caters to all levels. Clear explanations and hands-on coding make it accessible and engaging for everyone.

⚡ Code Along with Us:
Follow along as we build each component step-by-step. The code is available on GitHub, allowing you to code alongside the tutorial.

👉 Recommended Videos

⏰ Timestamp

00:00 Introduction
00:40 Project Walkthrough
02:12 Project Setup
04:07 Running the Nuxt app
05:00 Installing Essential Dependencies
05:10 Installing nuxt-server-utils
05:53 Installing the nuxt-auth module
06:32 Mongoose Installation
07:30 Connecting to MongoDB
06:30 Module Configuration
13:23 Nuxt Auth Server route configuration
23:09 Use the custom login page in Nuxt Auth
25:25 Defining MongoDB User schema
30:10 Creating the Register Page
42:00 Creating Hashed Password
50:50 Login Page
58:50 Creating custom middleware
01:01:00 Accessing Authenticated User Data
01:03:04 Creating the logout action
01:05:00 Conclusion

[christiankettner]

Underrated! 💎 One of few tutorial channels with a hands-on approach, that codes along (instead of copy pasting), explains thoughts, and solves upcoming problems along the way, without skipping steps.

Keep up the good work!

[JohnSmith-demg]

Thank you so much, Jahid. This was extremely helpful! Wish you all the success!!!

[nickondrako]

Great and relevant Nuxt videos over and over. Great work Jahid - I love that you’re crushing these Nuxt tutorials. I’m going to predict that this becomes a top 3 video on your channel.

[razmatinyan]

Cool video 🤘Keep going with Nuxt 3, tutorials about it are necessary 🤩

[Soup-Digital]

Such a great tutorial, I am currently working through Nuxt3 and love it, but one thing which was a struggle was creating an Auth system without a 3rd party framework. You have now made it so easy to work with and the explanation was fantastic.

One thing which would be great to have is a tutorial on the magic link implementation and password fallback auth using nuxtauth. I think that would be very beneficial for people wanting to get into that form of auth too, I know I do.

Great work otherwise dude! keep up the good work. You have acquired new sub!

[sridharantce]

Thank you so much for this video. This video gives me everything I need for authentication, I just need to follow the information and I get a production ready authentication code.

[eliteengineer]

After hours of research, failures and desperation, i found exactlly what i needed.
Although i dont want to use postgres, hopefully it wont be a problem when i get to that part, fingers crossed.

[AhmadFurqon]

hi Jahid, thanks for the video, its very good
what is the extension that you use for auto suggest snippet in vscode?

[PannapatChanpaisaeng]

Thank you for the video! Does this work with Keycloak OAuth2 strategy SSO?

[unknown_producer]

Thank you for this tutorial, saved me a lot of time.

By the way, Bun has it's own bcrypt functionality (even though they fixed bcrypt at the time of writing):
const bcryptHash = await Bun.password.hash(user.password, {
algorithm: "bcrypt",
cost: 10, // number between 4-31
});

and to verify:
await Bun.password.verify(candidatePassword, this.password)

[HanierMorales]

Crack, only a question, what camera do you use for film this video?

[QuickTale]

I have this error: [worker reload] [worker init] Cannot find package 'next-auth' imported from Can you fix it?

[nirajparmar]

Sir,

Can you please do tutorials on nuxt 3 full stack projects with deployment...that would be very helpful

[mathieumattei]

This is no longer working, installing nuxt-auth module crashes the app, seems to be not working anymore

[codedjango]

Do you have any tutorial on how to use ssr with Vue3? or for ssr do i have to migrate my Vue3 project to Nuxt? Please advise

[andika]

you forget to explain to handle error input in login

[khalednadam]

This doesn't seem like a no-package authentication because you are using sidebase nuxt auth, and you are not handling the JWT by yourself!

[uxgixxt]

I got this Error : ERROR This module cannot be imported in server runtime. [importing @nuxt/kit from