Тёмный

Register & Login Page (custom authentication) | Firebase v9 | Javascript 

The Amazing Codeverse
Подписаться 12 тыс.
Просмотров 30 тыс.
50% 1

register and login page (from scratch) with authentication using javascript
authentication with validation, encryption and keep me logged in function
firebase authentication
Documentation:
firebase.googl...
More Firebase Javascript Tutorial:
• Google Firebase Versio...
Software Used In Tutorial:
- Visual Code (64-bit) User
Project Description:
- HTML, CSS, Bootstrap 4.4, JavaScript
- Google Firebase Realtime Database

Опубликовано:

 

18 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 151   
@HassaanRaza
@HassaanRaza 11 месяцев назад
ATTENTION: BUG: there is a bug in this code which lets the user sign in, with just the username. REASON: code decrypt the password with passwordInp's value as key, so if you keep the passInp value empty then it will get decripted wrong and decrypting password function ends up return empty string. Solution: function AuthenticateUser() { let user = document.getElementById('userT').value; let pass = document.getElementById('passT').value; if (isNullOrWhiteSpaces(user) || isNullOrWhiteSpaces(pass)) { alert("cannot leave username/password field empty"); return; } const dbRef = ref(db); get(child(dbRef, 'UsersList/' + user)).then((snapshot) => { if (snapshot.exists()) { let dbpass = decPass(snapshot.val().Password, pass); if (dbpass == pass) { login(snapshot.val()); } else { alert("username or password not valid"); } } else { alert("username or password not valid"); } }); } function isNullOrWhiteSpaces(value) { value = value.toString(); return (value == null || value.replaceAll(' ', '').length < 1); }
@226mayanksharma5
@226mayanksharma5 2 месяца назад
Could you provide the complete code?
@lohithm5809
@lohithm5809 2 года назад
Can u please share the code
@daryljeruz9563
@daryljeruz9563 2 года назад
Great content! Well explained! Thanks so much!
@daryljeruz9563
@daryljeruz9563 2 года назад
Can you add a date picker function sir?
@BeyzaAtay-wx6ou
@BeyzaAtay-wx6ou 11 месяцев назад
My codes doesn't work. Please can you send me the codes that you write in your project??
@daryljeruz9563
@daryljeruz9563 11 месяцев назад
@@BeyzaAtay-wx6ou email?
@theloyalstuff
@theloyalstuff 2 года назад
can you please provide me source codes of these 3 files please i will be very great full of you.
@kh4gaming217
@kh4gaming217 2 года назад
Good job bro, Thanks for the video
@patrickjay6434
@patrickjay6434 Год назад
This is really great content, very interesting and well put together. Thank you for sharing!
@HassaanRaza
@HassaanRaza Год назад
glad you liked it, thank you too for taking time to praise it :)
@wisanil9358
@wisanil9358 2 года назад
addEventListener/ button not responding
@senthuranradakrishnan8247
@senthuranradakrishnan8247 2 года назад
Great vid, thank you so much!
@laloflores4492
@laloflores4492 Год назад
it works like a charm. Thanks. 👌😎
@shaneluong9115
@shaneluong9115 Год назад
You are my hero, thank you so much for this video!
@HassaanRaza
@HassaanRaza Год назад
thank for this super nice comment, may you succeed in whatever you are doing.
@messithelegend_
@messithelegend_ Год назад
Sometimes, hero doesn't wear cape
@HassaanRaza
@HassaanRaza Год назад
thanks man, in Karachi its 40°C, so yeah i don't wear cape.
@kh4gaming217
@kh4gaming217 2 года назад
Also, Can you make a video of how to link an html form with the Authentication of firebase, (the java script part). Thanks again
@cbjuztmoments1011
@cbjuztmoments1011 Год назад
25:38 where is that user coming from that you passed to login was it defined first please help............. its urgent................thankyou in advance brother
@HassaanRaza
@HassaanRaza Год назад
if user exist, the user object is returned from database which will be passed into the login function. login function is called from authentication function. 33:44 => line 75
@Urdu_Poetry292
@Urdu_Poetry292 Год назад
I have followed your tutorial very attentively and code exact as same as you did , I am getting user registration details on firebase but unfortunately login page is not working
@HassaanRaza
@HassaanRaza Год назад
check console for errors if any, put console log lines in code to identify which part is causing the issue.
@clevercodeverse993
@clevercodeverse993 2 года назад
Thank you for this tutorial, its very helpfull
@HassaanRaza
@HassaanRaza 2 года назад
thanks for commenting :)
@898_rakeshwaghmare3
@898_rakeshwaghmare3 2 года назад
Can u share source code for this plzzz
@surajtech1100
@surajtech1100 Год назад
when i click on login it shows login alert but after that it gives a pop up of invalid user and password please help me sir.
@jinx1996
@jinx1996 Год назад
I keep getting the error ref is not defined
@HassaanRaza
@HassaanRaza Год назад
it means that at the top, where i am defining firebase library i have defined ref too
@jinx1996
@jinx1996 Год назад
@The Amazing Codeverse I defined mine too, but it doesn't work. Can you please share the code. 😁
@harshtiwari4583
@harshtiwari4583 2 года назад
I have one doubt, how can make that when something is clicked on list , it will open new page and make show details of that object , just like amazon when I click on list and it leads to full page and shows the item info
@HassaanRaza
@HassaanRaza 2 года назад
the next video that im i will post is about a products page, if you click on a page it will show the details of that product, using firebase.
@harshtiwari4583
@harshtiwari4583 2 года назад
@@HassaanRaza Thank you for your response. That video is something I'm looking forward to seeing.
@harshtiwari4583
@harshtiwari4583 2 года назад
@@HassaanRaza What you will use -firebase cloud function or local/session storage for this purpose ?
@brikk7174
@brikk7174 2 года назад
I need the code please, I get errors when running
@codingstars5208
@codingstars5208 2 года назад
Code is not working kindly give the. Source code
@dukeofwhoknowswhere
@dukeofwhoknowswhere Год назад
Hi, thank you so much for your guidance! I am unfortunately having some issues. I believe I have followed your directions very thoroughly, but when I enter name and email in my Register form, it does not show up in my realtime database, I checked my console and it keeps saying: "expression: /^*$/: Nothing to repeat," & "child" is not supported by firebase-auth. Do you have any advice for this?
@jesusgarcia6178
@jesusgarcia6178 Год назад
Hello, thanks for sharing your wisdom. I would like you to make one integrating all CRUD, login, photo ID, etc... Thanks for everything.
@noelpadrigon7141
@noelpadrigon7141 Год назад
Thank you so much bro
@aatishm2792
@aatishm2792 2 года назад
Can you please share the souce code
@jonathanmarquez8693
@jonathanmarquez8693 Год назад
I followed the steps and video accordingly but I can't seem to get my code to work can I see the source code to compare and see what I did wrong?
@4khdtv277
@4khdtv277 Год назад
the project doesnt work it bring up a child error
@hatchhenghorn
@hatchhenghorn Год назад
Why firebase v9.15.0 doesn't working?
@HassaanRaza
@HassaanRaza Год назад
i have checked it works perfectly, there must be some other mistske, one thing is that all firebase libraries used in an app must be the same version so they all should be 9.15.0
@SalmanShah95
@SalmanShah95 2 года назад
Please make a video for phone number authentication.
@djong3775
@djong3775 Год назад
may i ask about the updateprofile can be use or it is useless so we have to save user information in real time database?
@oscarjrdeguzman6667
@oscarjrdeguzman6667 2 года назад
Registration is complete but my login page doesn't work. How can I fix that?
@HassaanRaza
@HassaanRaza 2 года назад
identify the error first
@HassaanRaza
@HassaanRaza 2 года назад
want to use firebase using REACT? ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-1TIVdIOIX64.html
@shivenaggarwal9983
@shivenaggarwal9983 2 года назад
Great video👍 , can you please make a video on login and signup using otp verification in v9 of firebase
@HassaanRaza
@HassaanRaza 2 года назад
i cannot post it soon as other videos are pending, but i'll consider this.
@lugeyoarnaud238
@lugeyoarnaud238 2 года назад
hello. i am facing an issue whereby it says user does not exist and does not let me sign in. some help please.
@surajtech1100
@surajtech1100 Год назад
bro same problem for me please help me.
@bhanubani4221
@bhanubani4221 2 года назад
after the empty field validation it is still adding the details to the database not only the empty field validation it also not working in wrong email, username and name
@subhojyotisingha1427
@subhojyotisingha1427 2 года назад
I have an error like VM2563:1 Uncaught ReferenceError: Signout is not defined at :1:1
@crazyanyone9889
@crazyanyone9889 Год назад
Excellent Work !!!! and Well Explained the content . Can you share the source code for the Ref.
@tikseo
@tikseo 2 года назад
Hello sir! I've managed to fix that error. But at the time of login he did not head to the welcome page. I know it's just a little more. Please advise sir.
@HassaanRaza
@HassaanRaza 2 года назад
can you show what line you write for navigation to home
@tikseo
@tikseo 2 года назад
@@HassaanRaza I've sent you an email.
@mohammaddarmsyladha164
@mohammaddarmsyladha164 2 года назад
I have the same problem, it worked for you ?
@surajtech1100
@surajtech1100 Год назад
i have same problem will you help me if possible
@apex25
@apex25 Год назад
but in this if i creating two account with same email id then also it will creating the account
@devidaskalhapure2040
@devidaskalhapure2040 2 года назад
Hello Brother, can you please create video on how to decompile .ex4 file of mt4 application. Nice to see all your videos. Thanks.
@justwhatever2795
@justwhatever2795 2 года назад
im at 17:18 and when you test it it all works when i do nothing happends no console log no alert nothing in firebase nothin can i have some help or sorce code to see what i did wrong
@HassaanRaza
@HassaanRaza 2 года назад
check for errors, in console in browser's inspect.
@justwhatever2795
@justwhatever2795 2 года назад
I did there is nothing
@justwhatever2795
@justwhatever2795 2 года назад
Might be a problem with html but idk what it is
@HassaanRaza
@HassaanRaza 2 года назад
oh i didnt read your comment correctly send me a screenshot of your code where you think the probelm would be.. message me on Facebook
@justwhatever2795
@justwhatever2795 2 года назад
@@HassaanRaza ok
@S_R29
@S_R29 2 года назад
Hi, I was following your tutorial and it came up with this error: Unhandled Promise Rejection: Error: Permission Denied promiseEmptyOnRejected - Reference_impl.ts:816 promiseReactionJob Because of this I can’t register a user. Pls help it would be really appreciated
@arthurkindermanperesdeoliv1418
@arthurkindermanperesdeoliv1418 2 года назад
how to fix that Cannot set properties of null (setting 'innerHTML') at window.onload
@HassaanRaza
@HassaanRaza 2 года назад
it means the element you are trying to set is not there, you get element then do stuff in JavaScript. so your getting null, which means you might have mistaken with getting element from html. id like Tbox and tbox are not the same.
@nurleliirwan944
@nurleliirwan944 Год назад
why cant the alert show up on my window T-T
@shahramnejad5493
@shahramnejad5493 Год назад
how about Admin role? is this going to be managed by only one admin in backend?
@HassaanRaza
@HassaanRaza Год назад
this video does not talk about roles.
@shahramnejad5493
@shahramnejad5493 Год назад
@@HassaanRaza appreciate the response my friend. I enjoyed your tutorial. Would you consider a role assignment video that will match with what you instructed here?
@shahramnejad5493
@shahramnejad5493 Год назад
I could get one of User's id , then define it as admin. Writing a code, whenever it is logged in, hide submit buttons for example, or make input field read-only. However, i'm afraid anyone can inspects the page and manipulate the page. What do you give me as a solution? Considering i cannot use firebase v9 authentication , no idea why it does not work, but it works with v5.6 in my computer
@HenryfPichardog
@HenryfPichardog Год назад
🥰
@medoxhunter6699
@medoxhunter6699 Год назад
Bro it didn't send to the database although I make everything you say
@galacticevill
@galacticevill Год назад
9:13
@하나비-f7r
@하나비-f7r 2 года назад
I followed the sign-up process well, but the login process did not go well. can you help me?
@surajtech1100
@surajtech1100 Год назад
same with me can you help me if solved it
@apurvanand1557
@apurvanand1557 Год назад
@@surajtech1100 Have you corrected your errors? I am also getting errors ,similar to yours. After I log in, the welcome statement is not visible ,also the username in the navbar shows some erroneous output. I get an error in console saying: Uncaught SyntaxError: "undefined" is not valid JSON at JSON.parse () at getUsername (home.html:74:36) at window.onload (home.html:87:13) If you have corrected your codes, please share only the JSON.parse part of codes of home.html ,here, I need those codes urgently , I was following this video to complete my internship project...
@apurvanand1557
@apurvanand1557 Год назад
I have to submit my project this week,so,its urgent.
@galacticevill
@galacticevill Год назад
@@apurvanand1557 same problem, solved it yet?
@jewelthomas3990
@jewelthomas3990 Год назад
source code
@harshtiwari4583
@harshtiwari4583 2 года назад
once again thanks for awesome video , but I was wondering why don't you have used auth function using firebase authentication in place of using database.
@HassaanRaza
@HassaanRaza 2 года назад
no special reason, i could have used just wanted to elaborate that how to implement logic in javascript.
@harshtiwari4583
@harshtiwari4583 2 года назад
@@HassaanRaza Yeah that is great. Waiting for your next video
@jimitjain6748
@jimitjain6748 Год назад
For some reason my code is not alerting when i try to to enter all numbers as my username and leave all other fields blank
@HassaanRaza
@HassaanRaza Год назад
check console for error, code might not be reaching to that point. put console.log("anything") to check where the code is reaching
@Dipu_bhandari
@Dipu_bhandari Год назад
can you provide the source code
@TheaMakes
@TheaMakes Год назад
Why are you not using firebases authentication that is prebuilt? with an approach like this it would be possible to to request anyones information including their passwords?
@ysflkc
@ysflkc Год назад
idk
@cedricgurimbao3183
@cedricgurimbao3183 2 года назад
Great tutorial sir but can u make the same video using firestore?
@HassaanRaza
@HassaanRaza 2 года назад
that's a good idea, i will. but it can take time as I'm only making videos on weekends and currently focusing on react X firebase.
@cedricgurimbao3183
@cedricgurimbao3183 2 года назад
@@HassaanRaza do u have any account to contact or email? I just want to learn how to create a registration and login using firestore :< badly needed :
@cedricgurimbao3183
@cedricgurimbao3183 2 года назад
@@HassaanRaza I want to be ur apprentice and I'm willing to learn
@INKILU
@INKILU Год назад
what is encription? lol
@HassaanRaza
@HassaanRaza Год назад
thanks for correcting thousands of people have i misguided, oh God forgive me
@timothybathan7965
@timothybathan7965 2 года назад
can you do it to chrome extension?
@rusian1859
@rusian1859 Год назад
Its not working
@adhemkunz9003
@adhemkunz9003 11 месяцев назад
Great video! Thank you! I am having one issue with the login.html, it will let some of my users login with only a username and not a passwod, if I do the wrong password or change the username it won't let them continue untill the right one is added. How can I get help with this / fix my issue? - I've watched the video countless times trying to solve my self. Sorry, this is my last resort.
@HassaanRaza
@HassaanRaza 11 месяцев назад
if password does not work, it should not work for anyone, but you are saying some users are having trouble?
@adhemkunz9003
@adhemkunz9003 11 месяцев назад
@@HassaanRaza Thank you for your response. I apologize if my initial comment was not clear. What I meant to convey is that for some users, they are able to log in with just a username (without providing a password), and this is not the intended behavior. The system should require both a username and a password to be entered correctly for any user to log in successfully. However, when users enter an incorrect password or change the username, it correctly prevents them from logging in until the correct credentials are provided. In summary, the issue is that some users can log in with just a username, and I would like to ensure that the system requires both a username and a password for all users. I appreciate any guidance or assistance you can provide to help me resolve this issue.
@HassaanRaza
@HassaanRaza 11 месяцев назад
it was really easy to find out the error, i just put console.log(user); console.log(pass); in authenticateuser funtion. read the pinned comment.
@adhemkunz9003
@adhemkunz9003 11 месяцев назад
@@HassaanRaza Thank you for your response and for sharing the solution. I followed your instructions and added the code you provided to the AuthenticateUser function. However, I'm still encountering an issue. When I inspect the console, I'm seeing the following error: login.html:73 Uncaught TypeError: Cannot read properties of null (reading 'value') at HTMLButtonElement.AuthenticateUser (login.html:73:56) It seems like the error might be related to this line of code: let user = document.getElementById('userT').value; I'm not quite sure what's causing this error, and I'm wondering if you could provide further guidance to help me resolve it. Your assistance is greatly appreciated!
@HassaanRaza
@HassaanRaza 11 месяцев назад
cannot read properties of null, means that you are trying to use property from a null reference. for example: let user = document.getElementById('userT').value; you tried to get user input box, but for some reason, it was not found on document (html file), might be a spelling mistake in id. now when you try, user.innerhtml, the code will break because it did not find the user in the first place how is he gonna find user.innerhtml. look for the reason the user is getting a null reference put console.log() to find out errors, learn to debug..
@subhojyotisingha1427
@subhojyotisingha1427 2 года назад
I have an error like "VM2563:1 Uncaught ReferenceError: Signout is not defined at :1:1"
@HassaanRaza
@HassaanRaza 2 года назад
may be a capitalization error check your names, if you cannot figure it out point the exact time of video (eg 07:10) where i have shown that line.
@subhojyotisingha1427
@subhojyotisingha1427 2 года назад
@@HassaanRaza no dada same issue, Signout is not defined is it for, signoutlink.href = "javascript:Signout()"; ?
@subhojyotisingha1427
@subhojyotisingha1427 2 года назад
hii sir.... the problem is not solved! please help me na!
@HassaanRaza
@HassaanRaza 2 года назад
@@subhojyotisingha1427 did you forget to define the signout function or it maybe a spelling or capitalization mistake
@HassaanRaza
@HassaanRaza 2 года назад
error is clear, is can't find element with an id of Signout with a capital S
@rnfanczkamazschnofer7417
@rnfanczkamazschnofer7417 2 года назад
12:42
@maleekmsr1624
@maleekmsr1624 2 года назад
Uncaught TypeError: Cannot read properties of null (reading 'value') any solution please?
@HassaanRaza
@HassaanRaza 2 года назад
it means that the value you are trying to retrieve is null, so you cannot do null.value find out what value is null and for what reason.
@maleekmsr1624
@maleekmsr1624 2 года назад
@@HassaanRaza Thanks I already found the solution. but still the keepLoggedIn function not working for me.
@rotimidamilare9379
@rotimidamilare9379 2 года назад
@@maleekmsr1624 am having the same problem . Pls wat was your solution
@ZandiP
@ZandiP Год назад
I have the same problem please help
@apurvanand1557
@apurvanand1557 Год назад
Have you resolved this error? If yes, please share JSON.parse part of codes of home.html here. I need those codes urgently to submit my internship project this week. So, please help.
@juandelacruz6656
@juandelacruz6656 2 года назад
it says enter a valid email even my email is valid in registration, pls help me
@HassaanRaza
@HassaanRaza 2 года назад
have you tried using other emails?
@juandelacruz6656
@juandelacruz6656 2 года назад
plss help me, this is the error in console registration.html:103 Uncaught ReferenceError: child is not defined at HTMLButtonElement.RegisterUser (registration.html:103:7)
@HassaanRaza
@HassaanRaza 2 года назад
@@juandelacruz6656 come to my fb page with screenshot of code at line 103
@TRT_MOOSIC
@TRT_MOOSIC 2 года назад
The registration and login works well.. but the home.html is not working at all please help
@TRT_MOOSIC
@TRT_MOOSIC 2 года назад
i figured it somhow.. but sign out is not possible it says signOut function is not defined
@TRT_MOOSIC
@TRT_MOOSIC 2 года назад
I figured it all on my own.. Thanks fr the great vid
@HassaanRaza
@HassaanRaza 2 года назад
how can you say its not possible (haha), find what you are doing wrong, maybe its just a spelling mistake between signout and signOut, look for the error by right clicking and inspect, goto console tab.
@TRT_MOOSIC
@TRT_MOOSIC 2 года назад
@@HassaanRaza No. Actually the line (signOutLink.href="javascript:SignOut") was not working for me. So I instead added eventListener to it. It worked!!
@TRT_MOOSIC
@TRT_MOOSIC 2 года назад
And btw.. I did not use the same variables u used on the vid..
@TuyenNguyen-jk7ee
@TuyenNguyen-jk7ee 2 года назад
please code
@vlogs8387
@vlogs8387 2 года назад
ya to apna no send kijiye na sir plz kuch urgent kaam hai
@pawewaszkiewicz8109
@pawewaszkiewicz8109 2 года назад
Anyone have sourcecode?
@surajtech1100
@surajtech1100 Год назад
bro give me source code if you got
@NickyAndre
@NickyAndre 2 года назад
Hello when i try to click register it doesnt work nothing happends
@HassaanRaza
@HassaanRaza 2 года назад
well figure out the problem, inspect browser goto console, see of any errors.
@NickyAndre
@NickyAndre 2 года назад
@@HassaanRaza Bro your tutorial is amazing appreciate it i solve this problem but still i cannot apply the encrypt and decrypt on the password
Далее
React User Login and Authentication with Axios
31:37
Просмотров 560 тыс.
Getting started with Firebase Authentication on the web
17:12
Login and Registration using Firebase in Android
36:33
Просмотров 349 тыс.