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

[@TranThanh-ug5mx]

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

[@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

[@yashbudhe97]

Thank You So Much Man!🤩🤩

[@VectorM]

Happy to help

[@theliterarian6521]

Thank you sir for your wonderful tutorial! It has worked wonders for my web app. Many thanks!

[@VectorM]

U welcome , I appreciate the comment 🙏💯.

[@JasmeetKaur-gr6ij]

How can I solve cors origin blocked error?

[@YourLevioHok]

"go away now " at the end was personal hehe😆

[@VectorM]

Bruh 😂 , appreciate u stickin around till the very end.

[@villangamer6391]

This video is helpful ❤

[@VectorM]

Glad you think so!

[@santiagovalencia4871]

Gracias amigo, cae bien el proceso actualizado

[@VectorM]

Gracias por comentar

[@thething6268]

thank you bro

[@VectorM]

You're welcome!

[@ThiagoSilva-jn6ov]

good video my man

[@VectorM]

Appreciate it

[@adhitamaputra-73]

😅

[@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 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

[@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

[@MKhalidchouhangujjar]

bro my addevenlistener is not working please help in error handling

[@CocukHikayeleri-om8uy]

Yes i had same problem here im trying to fix. i will write here when i did it

[@MKhalidchouhangujjar]

So can you tell me about it and how to solve it

[@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

[@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

[@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

[@thalagasidwel1339]

🫡💥🔥🔥

[@VectorM]

🔥🤝