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!
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.
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]
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
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 TH-camrs explained it in a way I did not understand it, but you did. Thank you very much my friend!
Should the login and database stuff be the first things I should do while making a website? Cause I already made everything else. I'm going to be able to connect one project with another, right?
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
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
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?
I get it. I've been trying for so long. I'm just going to try making a new project and transfering everything from my old project to the new one. Hopefully, it works.
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.
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.
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?
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
@@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 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.
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 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.
@@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)
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.
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
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"
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.
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 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
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.
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.
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
@@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.
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; } } }
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!
FINALLY A TUTORIAL THAT WORKS! THANK YOU!
wish it worked for me 1year later and firebase is 1mil percent different
@@MiniMeGaming it seems to be working for me
@@jonharzireally??
@@MiniMeGaming It seems to be working for me mate, maybe you went to a different website?
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.
bro searching for an firebase video, and found the best video, the other ones are not explaining good as you. subsribed :)
Sweet 😉 Great tutorial mate, thanks!! 💙
You're welcome 😊
Somehow, when I tried it, it didn't work for me. Could you maybe have an updated version of this?
Exactly what I was looking for to start my project. Thank you so much.
Eagerly I was waiting for this tutorial
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]
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
@@maelysguillard1620 merci beaucoup
Excellent video, quite enjoyable and easy to understand.
This
Video
Is
Awesome! dude
🥳😎😍👏👍
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 TH-camrs explained it in a way I did not understand it, but you did. Thank you very much my friend!
This tutorial is awesome 🔥🔥♥♥
legend... it was so great dude thanks a lot
You're welcome!
Thank you so much, explaining every step helped a lot, A lot.
FINALLY A TUTORIL THAT WORKS
Thanks for the positivity!!
Mine didn’t work 😢 what’s the solution please I checked everything and it’s correct
Should the login and database stuff be the first things I should do while making a website? Cause I already made everything else. I'm going to be able to connect one project with another, right?
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
I have the same questions bro tell me if you found any solution please
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";
@@Rassy_ They’re just skids.
ok but, how do I get the data of the currently logged user?
Firebase is very easy! You make it easier
So true! Thanks
Hi I'm a new subscriber, is it secured from username and password hacks? Are the apiKeys visible when inspected?
plx reply my register and login button is not working plx reply
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
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?
How to connect login form, with the chat website?
you can in the function when the mail and password is validated do window.open("url")
I can't connect that code to my own project. Help?
I get it. I've been trying for so long. I'm just going to try making a new project and transfering everything from my old project to the new one. Hopefully, it works.
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.
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.
best tutorial ever
Hey im getting an erro "uncaught referenceError: initializeapp is not defined" how do i fix this?
hi bro i;ve run into a problem my login is working but my register isnt working
Pls can you tell me how to get the info of the users, I tried user.full_name but it keeps giving me undefined
underrated video
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?
@@apurvanand7146 yeah, this is working for me and I am currently working on it now. Make sure you did “pip install firebase”
yo bro, amazing video thing is firebase has updated some things and currently wont work for me so could we get an updated version?
yur tutorial nice to follow. thanks
You are welcome!
You probably should secure the sensitive stuff so others cannot save data to your database. if you going to follow this tutorial
why are we checking for (field.length
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
Doesnot work for me. 4 errors in syntax from web console. Please help
right so i have a webpage whith a '
I got you. Did you check your console (Right click, Hit inspect, tab over to console)? If so, what's the error message?
@@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 ()"
Hmmm. That is pretty weird. Try this: www.titanwolf.org/Network/q/52997101-9e26-4094-952f-afc8ba245f66/y
@@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.
is the storing of their info in the database secure?
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
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.
@@MelvinAdekanye they can edit the source files as it’s a client side script
@@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.
@@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)
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.
how to save data in sesion to mage obligatori ave a mail to pas indes2.html
can you make the updated latest version?
Of course! Way more to come
educative, thanks. please can you help solve this problem "firebase.auth()" is not a function
It has to do with your HTML and making sure your firsbase script is above your Js script
can someone please help me with a code for login,sign in ,firebase and dashboard for blood donation app,im having hard time
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.
No worries. First check if you have any errors in your console.log.
thank you so much mate!
You're welcome!
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
I set the database rules, read and write to true. I didn't use the rules you have in your video description
Hmm. Are you getting any errors in your console.log
@@MelvinAdekanye can you do a video on the latest firebase version with username and password
where is your source code ???
Man, thank you for the tutorial, but can you teach us how to make with firestore database
You're very welcome. For sure. You can expect it.
how to get the user details when login
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"
That's weird. Do you have the firebase SDK imports in your HTML?
The same error and yeh I import sdk to html
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.
@@ewoutlagendijk7385 can u tell me how to do that?
@@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)
So used to writing c++. I was screaming in semi colons
Hahaha - welcome to the non-semi colon life 🤣
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.
Same
It must be your Firebase rules. Are .read and .write set to true or something like "now < blablabla"?
can I login after I register??
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
Haha. Maybe, maybe not. 😃😂
That's awesome you noticed it.
Awesome Sir
Thank you bro :) i was searching code like this :0 and how to work with login
respect from MoTHerland RUSSIA
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...
Did you insert "your" config code in place of mine?
@@MelvinAdekanye It worked afterwards I forgot what I did but thanks
@@karthikeya9803 That's great. Glad you figured it out.
@@karthikeya9803 how it worked afterwards?? i think i m facing the same problem as yours can u help me out plz
How do I keep a user logged into a firebase web app after refresh ?
cookies
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.
Thank you. That's quite interesting. I haven't encountered such a problem. Have you been able to solve it?
@@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
Interesting. Okay. How about this. Email me the portion of code causing trouble and I'll look to replicate the issue.
how to submit multiple like php?
Hi are you able to help me with this I tried both tutorials of urs but they don’t work
Sure. Hit me with an email.
Hey, i will mail you the code. Please solve the issue with that . Can I?
WOW This tutorial is benefit anyone
That's awesome. Glad you liked it.
I copied the code exactly to my website but data is not storing in firebase , its not registering the data , please help
Did you set up your credentials on Firebase ?
Yes i did nd i copied the scripts correctly
That's weird. Are you getting any errors in your console?
No, i think firebase has been updated since this video is has been for a while now..
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.
For me its not getting Register someone please help me
thanks bro so much, i had tried to make this many times but it didnot work
Can we use this source code in visual studio ?
Yes! Of course.
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.
Yes in fact I did a good mothers day. Sorry for the late reply. I'd love to help if you still need it.
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
For sure. No worries. I'll help you out for free. Email me your question.
wowwwwww!!thank you bro
how can i do username and password instead of email?
also i did everything correctly and its not sending any data or sending alerts
Shoot me an email. Let's chat!
@@MelvinAdekanye About that, i decided im going to keep email and password (and i fixed the other issue)
Sir which software u used here
I think he's using Node js Text Editor or something like that.
Hi sir can you give me this complete project in form of zip file
bro it is not working for me
its saying register method is not found
"register method is not found" is that displayed in your console?
@@MelvinAdekanye ys I have seen in console
@@MelvinAdekanye How I can solve it pls reply
@@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.
@@apurvanand7146 Ys have solve it
can ADMIN see the passwords on the back end
No, I believe the passwords are hashed on Firebase
Firebase not defined error.
I am facing same error. Have you resolved it? If yes then please help me.
bro how to get source code of this file
Just follow the code tutorial, you need to learn what the code does.
i like your creativity and voice 😍😍😜
Wow! Thanks.
THAANK YOU I LOVEEEEEEEEEEEEEEEEEE YOUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
love you bro
hehehe. Thanks bro
Thank you daddy omg you saved my computer science project
Hahaha. You're most welcome!
This is not working 2023
What aspect isn't working for you? Are you getting any errors in you console?
Hey thanks for the video could you please share all the code ?
Glad you liked it. You can find the source code here: rhymbil.netlify.app/
@@MelvinAdekanye okay thanks alot so i only go copy the web app's Firebase configuration
var firebaseConfig after i created an new project
@@kopanogould4070 You're most welcome. Yes exactly.
Super
funny how chatgpt can do this in a split sec.
Hahaha
Sure go ahead make a video of yourself doing it with it then
Nah I was Trying hours with chat gpt I couldn't
Why are you using gpt to program?
Funny how chatgpt is going to replace you.
good
U r fooling all
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;
}
}
}
That seems to be Firestore and not the realtime database. For that, take a look at: firebase.google.com/docs/firestore/security/get-started
mashaalah thank you
You're welcome!
please how can i contact you? you have telegram or icq or jabber?
Email would be perfect!