In this video, we create a website with a login page and form with email and password authentication using Nuxt.js and Vuetify. We build a basic login form that we use to sign a user in and also a button to send a password reset link if a user forgot their password. We also added a protected route or dashboard where the user is redirected to and can also log out using a button. VueJS is an easy to use light weight javascript based programming language and is ES5 or ES6 compatible. Using Nuxt.js, we can get started building vue components and progressive web applications faster.

Code repo: https://gitlab.com/codebasetutorials/firebase-email-password-auth-nuxt

Firebase docs: https://firebase.google.com/docs/auth/web/password-auth
Firebase Nuxt docs: https://firebase.nuxtjs.org/
Vuetify docs: https://vuetifyjs.com/en/getting-started/installation/

Chapters:

  • 00:00 What we will build
  • 02:25 Create new NuxtJS app
  • 08:00 Create Firebase app
  • 11:01 Integrate Firebase into our app
  • 17:25 Handle auth state changes in our app
  • 20:57 Middleware to redirect users
  • 22:55 Sign in page and login form
  • 27:20 Sign in with email and password login
  • 32:47 Sign out method and route
  • 36:53 Forgot password method
  • 37:55 Demo of login, logout, forgot password

#firebase #nuxtjs #vuetify #vue #javascript

Email and Password Authentication using Firebase, Nuxtjs and Vuetify
4.70 GEEK