Signup and Login Form in HTML with Firebase🔥 | Firebase Web Authentication Tutorial

This is a step-by-step tutorial on building a Signup and Login Form in HTML using Firebase. Learn how to implement Firebase Authentication for web login with email and password.
Whether you're a beginner or an experienced developer, this tutorial, updated for 2024, provides clear guidance and practical insights into connecting login and signup pages in a web application.
🕒 Timestamps:
0:00 - Firebase Authentication Web Login
0:26 - Login to Firebase & Create New Project
1:10 - Copy Firebase Credentials to Js File
2:00 - Firebase Authentication Methods
3:10 - Link Js File & Code
7:35 - How to login Created User in Firebase?
🚀 Ready to code? Download the source code: [ www.buymeacoffee.com/VectorM/... ]
🔔 Don't forget to Subscribe:
bit.ly/VectorM-Subscribe
🔥 Firebase Documentation:
firebase.google.com/docs/auth...
-----------------[ Patreons / Donations]--------------
✅ Support this channel:
www.buymeacoffee.com/VectorM
👨🏽‍💻 My Fiverr Gigs:
www.fiverr.com/s/P5aZEL
-----------------------[ Affiliate Links ]---------------------
🚀 Get VidIQ:
vidiq.com/VECTORM
🌐 Get Canva Pro:
www.canva.com/join/hmm-wxf-hzs
Happy coding! 🔧💻
#FirebaseLogin
#firebasetutorial
#firebaseauth
#VectorM
🤖All Video Tags🤖:
firebase login authentication web,firebase authentication web login,firebase authentication web login with email, google, facebook html css js,firebase login html in blooger,tela de login com firebase in html,login html firebase,firebase authentication,firebase tutorial,firebase,firebase login and signup web,how to connect login and signup page in firebase in web application,how to make a signup and login page through firebase for web,firebase signup and login web vue,firebase signup and login web,login and signup and css with firebase in web,firebase login authentication web,firebase authentication web login,firebase login html,how to create user authentication with email and phone in firebase

[@MadhaviDharme-Salunkhe]

Thanks gentleman, the perfect solution for beginners with details. Thanks a lot once again.

[@isaielizondo.2503]

This video it's perfect, thank you very much bro

[@TranThanh-ug5mx]

thank you you have just saved my frustrating days getting stuck T.T!!!!!

[@thething6268]

thank you bro

[@yashbudhe97]

Thank You So Much Man!🤩🤩

[@VectorM]

Happy to help

[@santiagovalencia4871]

Gracias amigo, cae bien el proceso actualizado

[@VectorM]

Gracias por comentar

[@ThiagoSilva-jn6ov]

good video my man

[@VectorM]

Appreciate it

[@villangamer6391]

This video is helpful ❤

[@VectorM]

Glad you think so!

[@BellaSaunders23]

How do i check if the user is logged in on my splash screen and if they are to redirect them to home but if not then redirect them to login

[@VectorM]

Use the onAuthStateChanged function , example: proximity-vector.netlify.app/

[@BellaSaunders23]

@@VectorM okay thanks

[@realjude478]

pls after following all the steps , when i click my submit button nothing happens. what do i do ??

[@VectorM]

your js file is probably not linked correctly , please check the steps or google how to link js to html ( 👈)

[@realjude478]

youre correct thanks

[@Mental-Maniac]

i got your download and it will not open. i gave you $3.00 and when I go to unzip it will not unzip the folder

[@VectorM]

Hey sorry for the inconvenience , I'll fix that and get back to you.

[@Mental-Maniac]

ok thank you@@VectorM

[@realjude478]

pls how can a user signout after signing in ?

[@VectorM]

You make a button , then use a Firebase function called signOut , I'll make a tutorial soon , in the meantime check the firebase docs or check out my buy me a coffee page

[@RishiYT-is1ld]

ty brother how to add logout button?

[@VectorM]

Easiest part , add a button in html.
logout
Then in Js grab the button using its ID and add an event listener to it.
Within that even listener add the function.
signOut(auth).then(() => {
// Sign-out successful.
}).catch((error) => {
// An error happened.
});
Firebase Documentation:
firebase.google.com/docs/auth/web/password-auth

[@VectorM]

firebase.google.com/docs/auth/web/password-auth

[@grease3253]

firebase documentation link doesn't work anymore

[@VectorM]

thanks for the heads-up , the link has been updated.

[@user-yk1pf1mt2k]

how to check docs

[@VectorM]

Links in description

[@adibahnafazad9125]

Not working like no arert is showing and not working

[@VectorM]

If you downloaded the source code , here is what you do.
Use Vscode + Live server.
Goto firebase and create a new project , then replace the firebase config with yours.

[@mavstar1]

The login doesn't work

[@VectorM]

Check your if your Js file is linked correctly , then open the page on live server and inspect the page, then click on the console to see errors

[@ShadowOwl3399]

do you provide github code

[@VectorM]

Source code is available on buymeacoffee link in the description.

[@ShadowOwl3399]

@@VectorM thanks

[@Preshhbeats]

Can I do it on mobile please?

[@VectorM]

alright yeah , i think i will.

[@Preshhbeats]

Bro please help me I’m trying to find my website localhost link on mobile

[@VectorM]

@@Preshhbeats Your can serve your website on localhost using termux , i have a video on it.

[@Preshhbeats]

@@VectorM please share video link🙏

[@Preshhbeats]

@@VectorM I’m using an iPhone bro

[@destroyer5604]

whats the use to limit it to locol host what a waste of ,my time

[@VectorM]

Stop being close minded , you can deploy any firebase project online.
Its not restricted to localhost 🤦.

[@destroyer5604]

@@VectorM obviously, I am talking about your tutorial where u showed using only localhost, which is not useful

[@VectorM]

@@destroyer5604 It's not only local host , I just like to use local host for tutorials. Its easier that way.

[@destroyer5604]

@@VectorM easier useful both different things,

[@thalagasidwel1339]

🫡💥🔥🔥

[@VectorM]

🔥🤝