Simple Login & Register with Firebase Authentication using JavaScript | HTML | CSS

Hey guys and gurls this is a banger of a tutorial!! I'll be showing you how to create a login system with Firebase Authentication that saves users to Firebase Realtime Database. Not only will it login users but we have a register function that updates our database with new data.
Sit back because this is how to make a simple login & register with Firebase authentication using JavaScript, HTML and CSS. Plus Store users to Firebase Database.
Source Code: rhymbil.netlify.app/
Firebase: firebase.google.com/
Background Beat: • Dope Sampled Soulful F...
Email Validation:
masteringjs.io/tutorials/fund...
/^[^@]+@\w+(\.\w+)+\w$/.test(str);
Database Rules:
firebasetutorials.com/firebas...
"users": {
"$uid": {
".read": "$uid === auth.uid",
".write": "$uid === auth.uid"
}
}

Пікірлер: 201

  • @emresalur4216
    @emresalur42168 ай бұрын

    Absolute legend. Finally someone who explains this stuff simply. I am trying to a case study for a job and this seems like it will help a lot. Much better than the 1 hour tutorials. Thanks!

  • @malco-
    @malco-2 жыл бұрын

    FINALLY A TUTORIAL THAT WORKS! THANK YOU!

  • @MiniMeGaming

    @MiniMeGaming

    Жыл бұрын

    wish it worked for me 1year later and firebase is 1mil percent different

  • @jonharzi

    @jonharzi

    Жыл бұрын

    @@MiniMeGaming it seems to be working for me

  • @parthmandale54

    @parthmandale54

    Жыл бұрын

    ​@@jonharzireally??

  • @hazush_
    @hazush_11 ай бұрын

    bro searching for an firebase video, and found the best video, the other ones are not explaining good as you. subsribed :)

  • @Aalok464
    @Aalok4643 жыл бұрын

    Eagerly I was waiting for this tutorial

  • @CodingJourney
    @CodingJourney3 жыл бұрын

    Sweet 😉 Great tutorial mate, thanks!! 💙

  • @MelvinAdekanye

    @MelvinAdekanye

    3 жыл бұрын

    You're welcome 😊

  • @robertdonnan2893
    @robertdonnan28935 ай бұрын

    Exactly what I was looking for to start my project. Thank you so much.

  • @renkazuki8177
    @renkazuki81779 ай бұрын

    Somehow, when I tried it, it didn't work for me. Could you maybe have an updated version of this?

  • @maxwell1007
    @maxwell1007 Жыл бұрын

    Hey im getting an erro "uncaught referenceError: initializeapp is not defined" how do i fix this?

  • @kozkiroify
    @kozkiroify2 жыл бұрын

    ok but, how do I get the data of the currently logged user?

  • @MohamedAli-vf3vy
    @MohamedAli-vf3vy Жыл бұрын

    I can't connect that code to my own project. Help?

  • @VicmmaEntertainment
    @VicmmaEntertainment Жыл бұрын

    Pls can you tell me how to get the info of the users, I tried user.full_name but it keeps giving me undefined

  • @Luka83829
    @Luka83829 Жыл бұрын

    Doesnot work for me. 4 errors in syntax from web console. Please help

  • @himanshumishra5857
    @himanshumishra5857 Жыл бұрын

    This tutorial is awesome 🔥🔥♥♥

  • @user-vs9kx6nj5y
    @user-vs9kx6nj5y11 ай бұрын

    is the storing of their info in the database secure?

  • @mralc9848
    @mralc98483 ай бұрын

    How can i implement this for a website which i builded already in Intelij?Let s say that i have already Login and Register integrated in my website but for some reasons i cannot register new user .And now my backend is connected with Mongodb database.How can i implement this to my already existing project in the way that ,to connect Register Form to Firebase etc etc?

  • @prof.markbachman
    @prof.markbachman7 ай бұрын

    Excellent video, quite enjoyable and easy to understand.

  • @EpicZeus
    @EpicZeus4 ай бұрын

    Thank you so much, explaining every step helped a lot, A lot.

  • @tazulislam2698
    @tazulislam26982 жыл бұрын

    how to submit multiple like php?

  • @kelvinsolution
    @kelvinsolution10 ай бұрын

    Mine didn’t work 😢 what’s the solution please I checked everything and it’s correct

  • @guillermopegoraro449
    @guillermopegoraro4496 ай бұрын

    how to save data in sesion to mage obligatori ave a mail to pas indes2.html

  • @SelloaneMosebo
    @SelloaneMosebo3 ай бұрын

    can someone please help me with a code for login,sign in ,firebase and dashboard for blood donation app,im having hard time

  • @dofuskingdom1423
    @dofuskingdom1423 Жыл бұрын

    can i please get help guys i did the same what he did in the video with newer sdk and even instaled with npm install firebase but it gives me this error firebase-app.js:2515 Uncaught SyntaxError: Unexpected token 'export' firebase-auth.js:1 Uncaught SyntaxError: Cannot use import statement outside a module firebase-database.js:1 Uncaught SyntaxError: Cannot use import statement outside a module login.js:11 Uncaught SyntaxError: Cannot use import statement outside a module in conso

  • @NahzCoding101
    @NahzCoding1013 ай бұрын

    hi bro i;ve run into a problem my login is working but my register isnt working

  • @SamsonIyida
    @SamsonIyida3 ай бұрын

    how to get the user details when login

  • @awtoshi
    @awtoshi Жыл бұрын

    Sir which software u used here

  • @elioghanem2190
    @elioghanem219010 ай бұрын

    can I login after I register??

  • @Catothemodern
    @Catothemodern10 ай бұрын

    Honestly thank you, since I did not knew how I can educate myself about firebase I looked everywhere I hoped I can find something good. Plurasight, Udemy and many KZreadrs explained it in a way I did not understand it, but you did. Thank you very much my friend!

  • @davebalino
    @davebalino Жыл бұрын

    Hi I'm a new subscriber, is it secured from username and password hacks? Are the apiKeys visible when inspected?

  • @MohamadMeerasa
    @MohamadMeerasa Жыл бұрын

    For me its not getting Register someone please help me

  • @White444_Indian
    @White444_Indian Жыл бұрын

    FINALLY A TUTORIL THAT WORKS

  • @MelvinAdekanye

    @MelvinAdekanye

    Жыл бұрын

    Thanks for the positivity!!

  • @user-fg1ig1px7m
    @user-fg1ig1px7m5 ай бұрын

    plx reply my register and login button is not working plx reply

  • @SamsonIyida
    @SamsonIyida3 ай бұрын

    best tutorial ever

  • @burakalkan6553
    @burakalkan65534 ай бұрын

    legend... it was so great dude thanks a lot

  • @MelvinAdekanye

    @MelvinAdekanye

    Ай бұрын

    You're welcome!

  • @overtheyears1744
    @overtheyears17443 жыл бұрын

    why are we checking for (field.length

  • @MelvinAdekanye

    @MelvinAdekanye

    3 жыл бұрын

    That makes sure the input field isn't empty. Yes. If the user just typed in spaces it would pass the test even if 'nothing is there. To fix that use (field.trim().length

  • @MaxProgramming
    @MaxProgramming3 жыл бұрын

    Firebase is very easy! You make it easier

  • @MelvinAdekanye

    @MelvinAdekanye

    3 жыл бұрын

    So true! Thanks

  • @CalySkyvolt
    @CalySkyvoltАй бұрын

    yo bro, amazing video thing is firebase has updated some things and currently wont work for me so could we get an updated version?

  • @onereasonstudiosarg
    @onereasonstudiosarg2 жыл бұрын

    hi bro, you have team viewer? i get no errors but when i try to press the button register notthing happens, i really apreciate your help.

  • @MelvinAdekanye

    @MelvinAdekanye

    2 жыл бұрын

    No worries. First check if you have any errors in your console.log.

  • @LeVerPlay
    @LeVerPlay2 жыл бұрын

    Hello, I have question, how can I make the code that when after i created new account and then sucessfully logged in to it and it takes me to the main page(index) and i shows for example the text "Your account" and for example it is clickable and it can take you to your personal account tab on you web. if you respond i would be thankful

  • @MohitJakhotra

    @MohitJakhotra

    2 жыл бұрын

    I have the same questions bro tell me if you found any solution please

  • @Rassy_

    @Rassy_

    9 ай бұрын

    You guys should probably do a refresh course on html. To go to another page is as simple as -> window.location.href = "your_page.html";

  • @krishdev196
    @krishdev1962 жыл бұрын

    Awesome Sir

  • @user-bq6gp2or3x
    @user-bq6gp2or3x5 ай бұрын

    wowwwwww!!thank you bro

  • @user-cs1ld9hn2k
    @user-cs1ld9hn2kАй бұрын

    Why validate the email address when using input type email in html does it for you?..and setting as required will make sure something is in the fields.

  • @MelvinAdekanye

    @MelvinAdekanye

    Ай бұрын

    The HTML email type does validate. However, there's no harm in validating on the JS side of things as well. Considering if someone edited the HTML page with inspect element.

  • @sjeremy
    @sjeremy2 жыл бұрын

    How to connect login form, with the chat website?

  • @_SoulSpeak_

    @_SoulSpeak_

    Жыл бұрын

    you can in the function when the mail and password is validated do window.open("url")

  • @sunnydowari
    @sunnydowari Жыл бұрын

    thank you so much mate!

  • @MelvinAdekanye

    @MelvinAdekanye

    Жыл бұрын

    You're welcome!

  • @ryan.t5059
    @ryan.t50592 жыл бұрын

    Hi are you able to help me with this I tried both tutorials of urs but they don’t work

  • @MelvinAdekanye

    @MelvinAdekanye

    2 жыл бұрын

    Sure. Hit me with an email.

  • @NIRBHAYSINGH-jq7ri
    @NIRBHAYSINGH-jq7ri2 ай бұрын

    bro how to get source code of this file

  • @minecraftviatr5009
    @minecraftviatr50092 жыл бұрын

    right so i have a webpage whith a '

  • @MelvinAdekanye

    @MelvinAdekanye

    2 жыл бұрын

    I got you. Did you check your console (Right click, Hit inspect, tab over to console)? If so, what's the error message?

  • @minecraftviatr5009

    @minecraftviatr5009

    2 жыл бұрын

    @@MelvinAdekanye idk how i forgot to check console, anyway it's throwing out a 404 error: "Failed to load resource: the server responded with a status of 404 ()"

  • @MelvinAdekanye

    @MelvinAdekanye

    2 жыл бұрын

    Hmmm. That is pretty weird. Try this: www.titanwolf.org/Network/q/52997101-9e26-4094-952f-afc8ba245f66/y

  • @darylestrada9836

    @darylestrada9836

    2 жыл бұрын

    @@MelvinAdekanye i've got the same problem here, when i go to console here's error that i've got : Uncaught SyntaxError: Unexpected token 'export' firebase-auth.js:1 Uncaught SyntaxError: Cannot use import statement outside a module firebase-database.js:1 Uncaught SyntaxError: Cannot use import statement outside a module index.js:12 Uncaught ReferenceError: firebase is not defined at index.js:12:1 this error would be gone when i change my SDK version form 9.6.9 (newer version) to 8.6.8 (older version) which you are using. after that ressolving the error i still got the same problem i've got every little detail of the code right but nothing happens it does not save anything in the Firebase Auth and Firebase database. hoping for your response thank you.

  • @squaregames9834
    @squaregames98342 жыл бұрын

    i don't know why, but mine won't save the data. i checked the debug log with the inspect panel but it doesn't give me any errors.

  • @amirguliyev7415

    @amirguliyev7415

    2 жыл бұрын

    Same

  • @MelvinAdekanye

    @MelvinAdekanye

    2 жыл бұрын

    It must be your Firebase rules. Are .read and .write set to true or something like "now < blablabla"?

  • @nishatislam3495
    @nishatislam34952 ай бұрын

    yur tutorial nice to follow. thanks

  • @MelvinAdekanye

    @MelvinAdekanye

    Ай бұрын

    You are welcome!

  • @amirguliyev7415
    @amirguliyev74152 жыл бұрын

    Hello Mate, I have run into a problem. I can not enter my config, because firebase changed its config rules. If you are going to help me I can pay you. Thanks beforehand

  • @MelvinAdekanye

    @MelvinAdekanye

    2 жыл бұрын

    For sure. No worries. I'll help you out for free. Email me your question.

  • @benjones3882
    @benjones3882 Жыл бұрын

    Great video. One problem that I have encountered is that the authentication uid is not matching with the database uid, they are mismatched by 1 uid. Any clues on solving that, as this will not update their last_login data.

  • @MelvinAdekanye

    @MelvinAdekanye

    Жыл бұрын

    Thank you. That's quite interesting. I haven't encountered such a problem. Have you been able to solve it?

  • @benjones3882

    @benjones3882

    Жыл бұрын

    @@MelvinAdekanye Hey RymBill, thanks for replying to me. No, I still have not, it somehow lags 1 uid from the authentication to the database still, however when the user logins, it updates the most recent uid from the authentication, so the user's details will be doubled with 2 uids

  • @MelvinAdekanye

    @MelvinAdekanye

    Жыл бұрын

    Interesting. Okay. How about this. Email me the portion of code causing trouble and I'll look to replicate the issue.

  • @_nurdi_8842
    @_nurdi_88422 жыл бұрын

    Thank you bro :) i was searching code like this :0 and how to work with login respect from MoTHerland RUSSIA

  • @andrewsides7250
    @andrewsides72502 жыл бұрын

    When I link the src how you do, I get "Uncaught SyntaxError: Unexpected token 'export' firebase-app.js:1590" and "Uncaught SyntaxError: Cannot use import statement outside a module firebase-auth.js:1"

  • @MelvinAdekanye

    @MelvinAdekanye

    2 жыл бұрын

    That's weird. Do you have the firebase SDK imports in your HTML?

  • @gonan4736

    @gonan4736

    2 жыл бұрын

    The same error and yeh I import sdk to html

  • @ewoutlagendijk7385

    @ewoutlagendijk7385

    2 жыл бұрын

    When I set up Firebase I got a slightly newer version of the SDK. After changing the version number to the one used in this video, those errors went away for me. Think the syntax of variables etc. changed slightly between versions, hope that helps.

  • @bharatkumark9431

    @bharatkumark9431

    2 жыл бұрын

    @@ewoutlagendijk7385 can u tell me how to do that?

  • @ewoutlagendijk7385

    @ewoutlagendijk7385

    2 жыл бұрын

    @@bharatkumark9431 well at 1m40s there are three URL's with 8.6.8 in them, that's what I used (mine was 9.5 or something)

  • @calo95.
    @calo95.2 жыл бұрын

    can you make the updated latest version?

  • @MelvinAdekanye

    @MelvinAdekanye

    2 жыл бұрын

    Of course! Way more to come

  • @karthikeya9803
    @karthikeya98032 жыл бұрын

    I'm not getting any errors in console I copied the code exactly to my website but data is not storing in firebase. Help please...

  • @MelvinAdekanye

    @MelvinAdekanye

    2 жыл бұрын

    Did you insert "your" config code in place of mine?

  • @karthikeya9803

    @karthikeya9803

    2 жыл бұрын

    @@MelvinAdekanye It worked afterwards I forgot what I did but thanks

  • @MelvinAdekanye

    @MelvinAdekanye

    2 жыл бұрын

    @@karthikeya9803 That's great. Glad you figured it out.

  • @aryantiwari2784

    @aryantiwari2784

    2 жыл бұрын

    @@karthikeya9803 how it worked afterwards?? i think i m facing the same problem as yours can u help me out plz

  • @rosesarehank
    @rosesarehank2 жыл бұрын

    Can we use this source code in visual studio ?

  • @MelvinAdekanye

    @MelvinAdekanye

    2 жыл бұрын

    Yes! Of course.

  • @homecookingwithnaturalspic8398
    @homecookingwithnaturalspic8398 Жыл бұрын

    educative, thanks. please can you help solve this problem "firebase.auth()" is not a function

  • @MelvinAdekanye

    @MelvinAdekanye

    Жыл бұрын

    It has to do with your HTML and making sure your firsbase script is above your Js script

  • @joshuajohnson3314
    @joshuajohnson33142 жыл бұрын

    Hey, hope you’re having a good mothers day. I’m writing to you because for some reason, my data is not being stored in firebase. When i try to log in, i am hit with a message from the internet page that says “cannot access ‘database’ before initialization. Not too sure what this means. Can I email you with my code for help? I really need to get this done before tomorrow. I’d truly appreciate the help.

  • @MelvinAdekanye

    @MelvinAdekanye

    2 жыл бұрын

    Yes in fact I did a good mothers day. Sorry for the late reply. I'd love to help if you still need it.

  • @hulk9716
    @hulk97162 жыл бұрын

    where is your source code ???

  • @antoniofuller2331
    @antoniofuller23312 жыл бұрын

    I copied the exact code, except the 'config', and I clicked the "register()" button. An 'alert' saying "undefined" popped up. It didn't even save anything to the database

  • @antoniofuller2331

    @antoniofuller2331

    2 жыл бұрын

    I set the database rules, read and write to true. I didn't use the rules you have in your video description

  • @MelvinAdekanye

    @MelvinAdekanye

    2 жыл бұрын

    Hmm. Are you getting any errors in your console.log

  • @loxplosion95

    @loxplosion95

    2 жыл бұрын

    @@MelvinAdekanye can you do a video on the latest firebase version with username and password

  • @farihafaiz9474
    @farihafaiz94748 ай бұрын

    Hi sir can you give me this complete project in form of zip file

  • @mohamedabdallahabdelhag7220
    @mohamedabdallahabdelhag72202 жыл бұрын

    love you bro

  • @MelvinAdekanye

    @MelvinAdekanye

    2 жыл бұрын

    hehehe. Thanks bro

  • @apktelugu2924
    @apktelugu2924 Жыл бұрын

    Hey, i will mail you the code. Please solve the issue with that . Can I?

  • @redditor6787
    @redditor6787 Жыл бұрын

    underrated video

  • @apurvanand7146

    @apurvanand7146

    Жыл бұрын

    Hi, is this tutorial working for present version of Firebase? I found some changes in the syntax and when I tried it , it me an error saying 'firebase' is not recognized. Did it work for you?

  • @redditor6787

    @redditor6787

    Жыл бұрын

    @@apurvanand7146 yeah, this is working for me and I am currently working on it now. Make sure you did “pip install firebase”

  • @aryantiwari2784
    @aryantiwari27842 жыл бұрын

    I copied the code exactly to my website but data is not storing in firebase , its not registering the data , please help

  • @MelvinAdekanye

    @MelvinAdekanye

    2 жыл бұрын

    Did you set up your credentials on Firebase ?

  • @aryantiwari2784

    @aryantiwari2784

    2 жыл бұрын

    Yes i did nd i copied the scripts correctly

  • @MelvinAdekanye

    @MelvinAdekanye

    2 жыл бұрын

    That's weird. Are you getting any errors in your console?

  • @aryantiwari2784

    @aryantiwari2784

    2 жыл бұрын

    No, i think firebase has been updated since this video is has been for a while now..

  • @MelvinAdekanye

    @MelvinAdekanye

    2 жыл бұрын

    Actually. It'd help to check the console. To check: press(Ctrl + Shift + i). This will show you specific errors with your project. And you're right. Firebase has been updated. But that may not be the issue.

  • @trickoffersintamil4763
    @trickoffersintamil47633 жыл бұрын

    Super

  • @wolfwerks2453
    @wolfwerks24533 жыл бұрын

    This is good and all, but what stops the user from editing the date and time they were last logged in manually and setting it into the future

  • @MelvinAdekanye

    @MelvinAdekanye

    3 жыл бұрын

    Wow. That's a good point. But that's impossible. Although nothing is impossible with Jesus. A user cannot edit the data of "last_login" since it's strictly defined in our code and not from an input box.

  • @wolfwerks2453

    @wolfwerks2453

    3 жыл бұрын

    @@MelvinAdekanye they can edit the source files as it’s a client side script

  • @MelvinAdekanye

    @MelvinAdekanye

    3 жыл бұрын

    @@wolfwerks2453 Well. No. You can't edit a websites source file. But you can edit/play around with your instance of the script Ex: HTML, CSS and Js with the console.

  • @wolfwerks2453

    @wolfwerks2453

    3 жыл бұрын

    @@MelvinAdekanye that’s what I meant, you just said it there, they can edit there instance (for example change the time stamp for a random time of there choice)

  • @MelvinAdekanye

    @MelvinAdekanye

    3 жыл бұрын

    If that's what you meant sure. Here's a challenge. Email me a video of you editing the time to something random (like you claim is possible). If you can't figure it out. Then the average user (who doesn't code) wouldn't even imagine. And also. In real applications with back-ends (Nodejs, Ruby, etc). There would be a validation process to avoid "hacks" (editing the client script). But for something simple as what I made. It would be overkill. But this was a good chat. Let me know how that challenge goes.

  • @CarlinhosKK
    @CarlinhosKK2 жыл бұрын

    Man, thank you for the tutorial, but can you teach us how to make with firestore database

  • @MelvinAdekanye

    @MelvinAdekanye

    2 жыл бұрын

    You're very welcome. For sure. You can expect it.

  • @Huyape7
    @Huyape7 Жыл бұрын

    thanks bro so much, i had tried to make this many times but it didnot work

  • @rivedev
    @rivedev2 ай бұрын

    how can i do username and password instead of email?

  • @rivedev

    @rivedev

    2 ай бұрын

    also i did everything correctly and its not sending any data or sending alerts

  • @MelvinAdekanye

    @MelvinAdekanye

    Ай бұрын

    Shoot me an email. Let's chat!

  • @rivedev

    @rivedev

    Ай бұрын

    ​@@MelvinAdekanye About that, i decided im going to keep email and password (and i fixed the other issue)

  • @StopGuardian
    @StopGuardian Жыл бұрын

    this is good and all but can you show us how to redirect to another page after successful login

  • @fredysorto1839

    @fredysorto1839

    Жыл бұрын

    by any chance did you figure this out? I've been looking into it and still can't figure it out.

  • @tylerhart-pu6dw

    @tylerhart-pu6dw

    Жыл бұрын

    also looking for this information! i feel like its something so simple but i cannot seem to figure it out. someone help us !

  • @maelysguillard1620
    @maelysguillard1620 Жыл бұрын

    bonjour voici la traduction en français / hello, here's the translation in french 0:00 rhinebill est maintenant en ligne hey guys a girl 0:02 Aujourd'hui, je vais vous montrer comment mettre en place 0:04 un système de connexion 0:05 avec firebase auth et ajouter ces utilisateurs 0:08 à la base de données firebase 0:10 c'est parti 0:21 [Musique] 0:25 génial donc ici dans mon code html j'ai mon 0:28 polices de caractères de google 0:29 et en dessous, j'ai ma balise de style dans mon code html 0:32 j'ai quelques conteneurs simples 0:34 le plus important, j'ai des boîtes d'information avec 0:36 des identifiants 0:37 Enfin, j'ai un bouton 0:39 conteneur avec quelques 0:40 des boutons importants pour lesquels nous n'avons pas d'événements de clic 0:43 Bien sûr, le dernier mais non le moindre, j'ai mon 0:45 balise script en dessous de ma balise body 0:47 de façon à ce que le corps se charge en premier et que 0:49 puis notre script 0:51 et ensuite j'ai une belle css dans mon fichier de 0:54 fichier index.css 0:56 juste pour que la page ait l'air un peu 0:57 plus agréable 1:03 [Musique] 1:08 donc la première chose à faire est de 1:10 créer un nouveau projet firebase, je vais 1:12 l'appeler 1:12 se connecter à la base de données firebase 1:16 désactiver google analytics maintenant nous sommes juste 1:19 nous allons le laisser créer 1:21 [Musique] 1:24 Ensuite, nous allons créer un site web. 1:26 Je vais l'appeler de la même façon. 1:28 même chose 1:28 ça n'a pas d'importance et maintenant nous allons 1:30 copier ce html 1:32 dans notre fichier html 1:35 une fois copiée, nous allons aller de l'avant et 1:37 dupliquer la balise de script en la changeant de 1:40 app à auth 1:41 et base de données 1:45 et juste une note en passant, n'oubliez pas ceci 1:47 les scripts doivent être au-dessus de votre index.js 1:50 c'est important pour qu'ils se chargent en premier 1:52 avant de pouvoir les utiliser 1:53 dans votre fichier js enfin nous allons 1:56 copier 1:56 ce fichier de configuration du script et nous allons 1:58 le coller dans notre propre fichier js 2:01 Ensuite, nous allons configurer notre fichier de configuration de script. 2:02 authentification 2:06 pour ce faire, nous allons utiliser l'option simple 2:08 email et mot de passe 2:09 bien sûr vous pouvez en utiliser d'autres mais 2:11 l'email et le mot de passe fonctionnent 2:14 alors mettons en place notre base de données en temps réel 2:16 nous allons aller de l'avant et utiliser 2:18 mode verrouillé parce que nous avons toujours utilisé 2:20 test et nous allons changer le mode verrouillé. 2:22 règles du mode verrouillé 2:23 pour que notre lecture et notre écriture soient égales à true 2:27 bien sûr, cela va nous donner un 2:28 un message d'alerte que nous corrigerons plus tard 2:32 [Musique] 2:35 Nous pouvons maintenant retourner à notre 2:37 index.js et éditer 2:38 ce fichier la première chose que nous allons faire 2:41 est de déclarer deux variables 2:42 la première sera notre authentification qui 2:44 sera égale à firebase.auth 2:46 et en dessous, nous allons définir notre 2:48 la base de données est égale à firebase.database 2:51 très bien donc maintenant nous allons mettre en place notre 2:53 fonction register qui va 2:54 enregistrer les nouveaux utilisateurs 2:56 sur notre site web et n'oubliez pas que nous sommes 2:58 appelons la fonction 2:59 dans notre bouton html 3:02 super donc la première chose que nous allons faire 3:04 c'est de récupérer tous les champs de saisie que nous 3:06 avons 3:07 dans notre fichier html, ce qui inclut notre 3:09 mot de passe de l'email 3:11 nom complet, etc. 3:13 [Musique] 3:17 l'étape suivante est un peu facultative, mais 3:19 c'est toujours une bonne pratique de valider 3:21 vos champs de saisie 3:22 Je vais donc commencer par créer un champ de saisie 3:23 nouvelle fonction pour valider 3:25 notre adresse email et ce qui va se passer 3:27 vérifier si notre adresse email est valide. 3:28 l'adresse électronique est correcte, nous allons donc 3:30 aller sur ce site web et copier cette 3:32 expression qui valide simplement 3:34 en utilisant des regex simples et tout ce que je suis 3:36 vais essentiellement renvoyer 3:37 true s'il correspond à ce format et 3:40 retourner 3:41 false si ce n'est pas le cas, ce qui nous permet de 3:43 valider s'il s'agit d'un 3:44 adresse email correcte ou si ce n'est pas une adresse de 3:47 adresse email 4:05 [Musique] 4:07 à la suite de cela, nous allons devoir 4:08 valider notre mot de passe et firebase est 4:10 très attaché à cela 4:12 et ils veulent toujours que votre mot de passe soit 4:14 au moins six caractères 4:15 et c'est ainsi qu'ils le veulent 4:18 mise en place 4:18 mais vous pouvez aussi l'installer de façon à ce que vous 4:20 de lettres majuscules ou de lettres 4:22 pas de majuscules ou deux chiffres, vous 4:25 peut faire ce que vous voulez 4:26 mais nous allons nous contenter d'un texte simple 4:28 et simple et dire que si notre mot de passe 4:30 est inférieur à 6 caractères, il est 4:32 faux 4:34 [Musique] 4:36 la fonction suivante consiste à valider le 4:38 et tout ce que cela fait, c'est de vérifier si 4:40 s'il y a quelque chose d'écrit dans ces 4:42 champs, donc tant qu'il y a quelque chose 4:44 dans ces champs 4:45 c'est bon 4:58 [Musique] 5:05 génial donc maintenant dans notre fonction d'enregistrement 5:07 nous pouvons dire si 5:08 valider l'email est égal à false ou 5:12 si valider le mot de passe est égal à false 5:15 alors nous retournons 5:16 et nous n'exécutons plus le code 5:19 et bien sûr vous pouvez avoir une alerte 5:21 un message d'alerte à l'intérieur de votre email 5:22 ou le mot de passe n'est pas conforme, mais bien sûr 5:25 vous pouvez être plus précis 5:26 sur ce que l'utilisateur doit faire dans ces 5:29 fonctions individuelles 5:30 ce qui est très bien, alors continuons et 5:33 validons également nos champs de saisie 5:40 [Musique]. 5:45 [Musique] 5:48 Nous pouvons donc maintenant aller de l'avant et 5:50 enregistrer cet utilisateur, nous allons donc 5:52 nous allons devoir taper 5:53 auth dot create user with 5:56 email et le mot de passe et ici nous allons 5:58 passer notre email 5:59 et le mot de passe qui sont des variables que nous avons 6:02 en haut 6:02 et dans cette fonction, l'appel va 6:04 retourner une promesse 6:06 et une promesse doit avoir un point alors 6:09 et un point catch et ce doc then est 6:11 va le gérer quand 6:13 l'information nous est transmise et que la doc 6:16 attraper 6:16 gère les erreurs qui peuvent survenir, ce qui est 6:19 va être firebase qui va vous dire que vous 6:20 que vous vous êtes trompé quelque part 6:22 nous allons donc devoir nous déconnecter. 6:23 aussi 6:27 [Musique]

  • @maelysguillard1620

    @maelysguillard1620

    Жыл бұрын

    6:32 La plupart du temps, il s'agit d'un projet de loi qui a pour but d'améliorer la 6:34 l'utilisateur a été créé 6:36 et tout va bien, nous sommes donc 6:38 allons devoir créer une nouvelle variable et 6:39 l'appeler 6:40 user est égal à auth dot current user 6:44 et ensuite nous pouvons déconnecter l'utilisateur alerte 6:46 créé génial donc maintenant tout ce qu'il nous reste à faire 6:49 est d'enregistrer cet utilisateur dans 6:50 notre base de données firebase, donc maintenant nous allons 6:53 créer une variable 6:54 et l'appeler database ref et nous allons 6:56 la mettre égale à 6:58 notre variable de base de données en haut dot 7:01 ref ensuite, nous allons créer une variable de base de données 7:03 variable user data qui est en fait 7:05 va être un 7:06 objet qui contient notre email complet 7:09 nom 7:10 et etc... et n'oubliez pas de sauvegarder votre 7:13 mot de passe dans la base de données 7:14 c'est le rôle de votre bureau 7:20 [Musique] 7:22 enfin, dans notre objet, nous allons 7:23 créer le dernier login 7:26 et cela va nous permettre de savoir quand l'utilisateur 7:28 s'est connecté pour la dernière fois 7:29 maintenant nous pouvons aller de l'avant et sauvegarder notre utilisateur 7:31 dans notre base de données 7:33 nous allons donc les sauvegarder sous un sous-ensemble 7:34 classe utilisateurs 7:36 et ici nous allons l'enregistrer à 7:39 notre utilisateur 7:40 l'identifiant unique de l'utilisateur afin de ne pas avoir de 7:43 problèmes à l'avenir 7:44 nous allons donc taper user dot uid 7:47 qui est fourni avec firebase awesome 7:49 donc quand nous retournons sur notre site web 7:51 rafraîchir, nous pouvons maintenant taper de fausses 7:53 données 7:54 et le voir à l'œuvre. 7:58 voyons qu'il est sauvegardé dans notre base de données 8:04 et aussi dans notre authentification, donc maintenant 8:06 revenons en arrière et travaillons sur 8:08 notre fonction de connexion 8:16 la première chose que nous allons devoir faire 8:17 dans notre fonction de connexion, c'est d'attraper notre 8:20 email et notre mot de passe 8:21 et nous allons ensuite les valider. 8:24 les 8:24 ci-dessous 8:29 [Musique] 8:33 pour s'inscrire comme dans notre registre 8:35 nous allons devoir taper le mot de passe 8:37 auth dot sign in with email 8:41 et le mot de passe et ici nous allons 8:43 retourner une promesse 8:44 comme nous l'avons fait auparavant, alors allons-y 8:46 et copions toutes les fonctions catch 8:58 et puisque nous allons être comme facebook 9:00 nous allons devoir mettre à jour 9:01 notre paramètre de connexion perdu pour cet utilisateur 9:04 donc nous allons aller de l'avant et copier tous les 9:06 la base de données et nous allons supprimer 9:08 tout le reste sauf notre dernier login 9:14 n'oubliez pas d'indiquer votre email et votre nom d'utilisateur. 9:15 mot de passe à notre fonction de promesse 9:20 et remplacez set par update 9:23 enfin, nous allons devoir passer un mot de passe à la fonction 9:25 à notre fonction catch 9:28 [Musique] 9:31 super, donc quand nous retournons sur notre site web 9:33 rafraîchissez, mettez votre email et votre mot de passe 9:35 On clique sur login 9:37 vous pouvez maintenant voir que notre utilisateur est connecté 9:39 et nous pouvons également attraper la base de données firebase 9:41 la base de données met à jour notre dernière connexion 9:43 paramètres 9:44 ce qui est très bien et c'est tout, mais il y a des 9:46 une autre chose que nous devons couvrir, c'est 9:48 les règles de notre base de données 9:50 de la base de données, donc un site web que j'ai trouvé qui 9:53 communes 9:53 de la base de données firebase et pour celui-ci 9:56 nous allons utiliser 9:57 cette règle et cette règle stipule que sous notre 10:00 utilisateurs 10:01 dans notre base de données firebase 10:04 et sous la catégorie de cet utilisateur, nous avons 10:06 notre uid qui est exactement comme nous l'avons défini 10:09 dans notre base de données firebase 10:11 et nous ne pouvons lire et écrire que si notre 10:14 actuel 10:14 auth uid est égal à l'uid 10:18 de l'uid de cette base de données, donc en gros les autres 10:21 les utilisateurs ne peuvent pas modifier 10:23 paramètres des autres utilisateurs 10:32 donc maintenant nous changeons nos règles, nous allons juste 10:33 nous assurer que tout fonctionne toujours 10:37 [Musique] 10:41 et génial il le fait, il l'enregistre dans notre fichier de 10:43 base de données firebase 10:45 et l'utilisateur est également inscrit dans notre base de données 10:47 système d'authentification 10:49 et c'est tout les gars, c'est comme ça qu'on crée 10:51 un système de connexion avec firebase 10:52 l'authentification 10:54 et enregistrer ces utilisateurs dans firebase 10:56 base de données 10:57 J'espère que vous avez trouvé cela utile et 10:59 à la prochaine fois 11:00 rime ci-dessous

  • @Bortven

    @Bortven

    6 ай бұрын

    @@maelysguillard1620 merci beaucoup

  • @PGSCHOOLFORPROGRAMMING
    @PGSCHOOLFORPROGRAMMING2 жыл бұрын

    WOW This tutorial is benefit anyone

  • @MelvinAdekanye

    @MelvinAdekanye

    2 жыл бұрын

    That's awesome. Glad you liked it.

  • @j4eg3r47
    @j4eg3r47 Жыл бұрын

    Firebase not defined error.

  • @apurvanand7146

    @apurvanand7146

    Жыл бұрын

    I am facing same error. Have you resolved it? If yes then please help me.

  • @Aalok464
    @Aalok4643 жыл бұрын

    RhymBill are you trying to rickroll us I visited website and at first it was Never Gonna Give You Up Then it was back to normal video

  • @MelvinAdekanye

    @MelvinAdekanye

    3 жыл бұрын

    Haha. Maybe, maybe not. 😃😂 That's awesome you noticed it.

  • @connorflewitt8377
    @connorflewitt83772 жыл бұрын

    Good video! Should do a V9 version.

  • @MelvinAdekanye

    @MelvinAdekanye

    2 жыл бұрын

    Thanks! And for sure.

  • @SportsHQ4128
    @SportsHQ4128 Жыл бұрын

    THAANK YOU I LOVEEEEEEEEEEEEEEEEEE YOUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  • @viduimanthika3746
    @viduimanthika3746 Жыл бұрын

    good

  • @LeftClickMage
    @LeftClickMage27 күн бұрын

    FYI for future viewers. The import script tags no longer works. This video is a bit outdated. Check the new ways to import firebase! Edit: this video is actually extremely outdated and could show people the wrong way to do this. Would be helpful back then but right now kind of a waste of time. Only the first part of setting up the firebase was useful.

  • @zarrinkhaliq6453
    @zarrinkhaliq6453 Жыл бұрын

    can ADMIN see the passwords on the back end

  • @MelvinAdekanye

    @MelvinAdekanye

    Жыл бұрын

    No, I believe the passwords are hashed on Firebase

  • @ShubhamYadav-it7tw
    @ShubhamYadav-it7tw Жыл бұрын

    bro it is not working for me its saying register method is not found

  • @MelvinAdekanye

    @MelvinAdekanye

    Жыл бұрын

    "register method is not found" is that displayed in your console?

  • @ShubhamYadav-it7tw

    @ShubhamYadav-it7tw

    Жыл бұрын

    @@MelvinAdekanye ys I have seen in console

  • @ShubhamYadav-it7tw

    @ShubhamYadav-it7tw

    Жыл бұрын

    @@MelvinAdekanye How I can solve it pls reply

  • @apurvanand7146

    @apurvanand7146

    Жыл бұрын

    @@ShubhamYadav-it7tw Hi, did the above code work for you? The syntaxes have changed now. I am getting an error as 'firebase' is not found. Did you receive any error of this sort? If yes, how did you overcome it? I want to overcome it urgently for my internship project.

  • @ShubhamYadav-it7tw

    @ShubhamYadav-it7tw

    Жыл бұрын

    @@apurvanand7146 Ys have solve it

  • @tristanbbbbbbb
    @tristanbbbbbbb2 жыл бұрын

    Thank you daddy omg you saved my computer science project

  • @MelvinAdekanye

    @MelvinAdekanye

    2 жыл бұрын

    Hahaha. You're most welcome!

  • @SLSubs
    @SLSubs2 жыл бұрын

    i like your creativity and voice 😍😍😜

  • @MelvinAdekanye

    @MelvinAdekanye

    2 жыл бұрын

    Wow! Thanks.

  • @otrrsuns3t
    @otrrsuns3t Жыл бұрын

    So used to writing c++. I was screaming in semi colons

  • @MelvinAdekanye

    @MelvinAdekanye

    Жыл бұрын

    Hahaha - welcome to the non-semi colon life 🤣

  • @viralvaghela8402
    @viralvaghela8402 Жыл бұрын

    This is not working 2023

  • @MelvinAdekanye

    @MelvinAdekanye

    Жыл бұрын

    What aspect isn't working for you? Are you getting any errors in you console?

  • @kopanogould4070
    @kopanogould40702 жыл бұрын

    Hey thanks for the video could you please share all the code ?

  • @MelvinAdekanye

    @MelvinAdekanye

    2 жыл бұрын

    Glad you liked it. You can find the source code here: rhymbil.netlify.app/

  • @kopanogould4070

    @kopanogould4070

    2 жыл бұрын

    @@MelvinAdekanye okay thanks alot so i only go copy the web app's Firebase configuration var firebaseConfig after i created an new project

  • @MelvinAdekanye

    @MelvinAdekanye

    2 жыл бұрын

    @@kopanogould4070 You're most welcome. Yes exactly.

  • @earldominic3467
    @earldominic3467 Жыл бұрын

    funny how chatgpt can do this in a split sec.

  • @MelvinAdekanye

    @MelvinAdekanye

    Жыл бұрын

    Hahaha

  • @saarza9991

    @saarza9991

    10 ай бұрын

    Sure go ahead make a video of yourself doing it with it then

  • @DoremonCartoonsnotofficial

    @DoremonCartoonsnotofficial

    3 ай бұрын

    Nah I was Trying hours with chat gpt I couldn't

  • @allenfx1431
    @allenfx14312 жыл бұрын

    U r fooling all

  • @jadigger8695
    @jadigger8695 Жыл бұрын

    mashaalah thank you

  • @MelvinAdekanye

    @MelvinAdekanye

    Жыл бұрын

    You're welcome!

  • @CarlinhosKK
    @CarlinhosKK2 жыл бұрын

    Hello man, can you help me, I tried to follow your tutorial, but Firebase has acquired a lot of new updates, and when I tried to put the rules on firestore database, they are quite differente, can you help me to use them? What can I do right here? rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read, write: if true; } } }

  • @MelvinAdekanye

    @MelvinAdekanye

    2 жыл бұрын

    That seems to be Firestore and not the realtime database. For that, take a look at: firebase.google.com/docs/firestore/security/get-started

  • @sagrant5699
    @sagrant56992 жыл бұрын

    please how can i contact you? you have telegram or icq or jabber?

  • @MelvinAdekanye

    @MelvinAdekanye

    2 жыл бұрын

    Email would be perfect!

  • @aDpAdeebPulath
    @aDpAdeebPulath2 жыл бұрын

    How do I keep a user logged into a firebase web app after refresh ?

  • @LetTheRupeeRoll

    @LetTheRupeeRoll

    5 ай бұрын

    cookies