Nuxt 3 Secrets for Easy Firebase Authentication
42.3 هزار بار بازدید -
2 سال پیش
-
Discover the power of Nuxt
Discover the power of Nuxt 3 and Vue 3 with Firebase in this informative video. Learn how to set up Firebase authentication and deploy your app with Netlify and Git. Let's unravel the mystery behind Nuxt 3 and take your web development skills to the next level!
This tutorial will show you step by step how to create a Nuxt 3 Auth / Vue 3 project with Firebase email and password authentication. You will learn how to connect your Nuxt 3/Visual Studio code project to a GitHub repo and deploy your app with continuous deployment on Netlify.
Live demo: https://nuxt3-firebase-razorcx.netlif...
GitHub: https://github.com/razorcx-courses/nu...
What's in the box:
00:00 - Nuxt3/Firebase Auth example
01:35 - Setup Firebase project
03:38 - Create Nuxt 3 app
06:17 - Initialize Firebase App in Nuxt 3 plugin
10:55 - Setup Firebase API key with .env file
15:37 - Setup Nuxt runtime config & Setup GitHub repo
17:50 - Install Bulma CSS
20:58 - Add Firebase Auth functions part 1
24:28 - Add Firebase Auth functions part 2
27:17 - Test CreateUser function part 1
29:51 - Enable Firebase Authentication for Email & Password
31:20 - Test CreateUser function part 2
32:14 - Test CreateUser function part 3
33:48 - Test SignIn and SignOut functions
39:07 - Add and test Sign In and Sign Out buttons
42:50 - Commit code to GitHub repo
44:51 - Add user credentials to app template for testing
47:07 - Setup and install continuous deployment on Netlify
49:27 - Add Firebase API key to Netlify Environment variables
54:14 - Change site name on Netlify
55:16 - Add client-only tag and initialize Firebase AuthStateChanged observable
58:13 - Add and test global Firebase User State variable
1:04:00 - Setup firebaseUser state in app template
1:08:04 - Create pages/index.vue and refactor app.vue
1:09:42 - Add and test route middleware as route guards
1:13:44 - Create auth guards and provide Firebase auth globally
1:21:37 - Commit code to GitHub and test on Netlify site
1:23:22 - Test new Firebase page with Register and Sign in forms
1:24:31 - Explain Register and Signup forms
1:33:02 - Commit code to GitHub and test on Netlify site
1:35:57 - Add sign in form to app.vue
1:41:51 - Add register form to app.vue
1:46:13 - Add computed property for sign in/register form button toggle
1:48:11 - Clean up & commit code to GitHub and test on Netlify site
1:53:18 - Add userCookie on client and server with middleware
2:03:10 - Add API endpoint to fetch current user
2:04:54 - Commit code to GitHub and test on Netlify site
2:08:03 - Update API endpoint for current user
2:08:42 - Create secret message API to test server middleware
2:14:19 - Commit code to GitHub and test on Netlify site
2:15:36 - Add Auth api and connect to Firebase Auth change observable
2:23:39 - Commit code to GitHub and test on Netlify site
2:25:36 - Wrap up!
This tutorial will show you step by step how to create a Nuxt 3 Auth / Vue 3 project with Firebase email and password authentication. You will learn how to connect your Nuxt 3/Visual Studio code project to a GitHub repo and deploy your app with continuous deployment on Netlify.
Live demo: https://nuxt3-firebase-razorcx.netlif...
GitHub: https://github.com/razorcx-courses/nu...
What's in the box:
00:00 - Nuxt3/Firebase Auth example
01:35 - Setup Firebase project
03:38 - Create Nuxt 3 app
06:17 - Initialize Firebase App in Nuxt 3 plugin
10:55 - Setup Firebase API key with .env file
15:37 - Setup Nuxt runtime config & Setup GitHub repo
17:50 - Install Bulma CSS
20:58 - Add Firebase Auth functions part 1
24:28 - Add Firebase Auth functions part 2
27:17 - Test CreateUser function part 1
29:51 - Enable Firebase Authentication for Email & Password
31:20 - Test CreateUser function part 2
32:14 - Test CreateUser function part 3
33:48 - Test SignIn and SignOut functions
39:07 - Add and test Sign In and Sign Out buttons
42:50 - Commit code to GitHub repo
44:51 - Add user credentials to app template for testing
47:07 - Setup and install continuous deployment on Netlify
49:27 - Add Firebase API key to Netlify Environment variables
54:14 - Change site name on Netlify
55:16 - Add client-only tag and initialize Firebase AuthStateChanged observable
58:13 - Add and test global Firebase User State variable
1:04:00 - Setup firebaseUser state in app template
1:08:04 - Create pages/index.vue and refactor app.vue
1:09:42 - Add and test route middleware as route guards
1:13:44 - Create auth guards and provide Firebase auth globally
1:21:37 - Commit code to GitHub and test on Netlify site
1:23:22 - Test new Firebase page with Register and Sign in forms
1:24:31 - Explain Register and Signup forms
1:33:02 - Commit code to GitHub and test on Netlify site
1:35:57 - Add sign in form to app.vue
1:41:51 - Add register form to app.vue
1:46:13 - Add computed property for sign in/register form button toggle
1:48:11 - Clean up & commit code to GitHub and test on Netlify site
1:53:18 - Add userCookie on client and server with middleware
2:03:10 - Add API endpoint to fetch current user
2:04:54 - Commit code to GitHub and test on Netlify site
2:08:03 - Update API endpoint for current user
2:08:42 - Create secret message API to test server middleware
2:14:19 - Commit code to GitHub and test on Netlify site
2:15:36 - Add Auth api and connect to Firebase Auth change observable
2:23:39 - Commit code to GitHub and test on Netlify site
2:25:36 - Wrap up!
2 سال پیش
در تاریخ 1400/12/24 منتشر شده
است.
42,365
بـار بازدید شده