Web App Login Made Simple | Firebase Google Authentication

[@VectorM]

🔥 Thanks for joining us for "Adding Google Sign-In with Firebase Web Authentication using JavaScript"! If you've got questions or thoughts, drop them below. Download The Source Code 🔥 www.buymeacoffee.com/vectorm/e/201960 Don't forget to subscribe here: bit.ly/VectorM-Subscribe for more tutorials and tech insights. Happy coding! 🚀👨‍💻

[@AbhishekKumar-rj4qq]

@VectorM, plz help i have asked my question below.

[@VectorM]

@@AbhishekKumar-rj4qq noted💯 , apologies for the late response.

[@AbhishekKumar-rj4qq]

Hello @@VectorM ,I hope you're doing well! I've been encountering a particular error while trying to implement Google One-Tap Authentication in my web application, and I was wondering if you could help me understand what might be going wrong. The error message I'm getting in my browser console is: "Cross-Origin-Opener-Policy policy would block the window.close call." Here's a bit about my situation: I have a simple HTML button that triggers the "One Tap Google Auth" function, which I copied directly from Firebase's official website. However, when I click the button, a new Chrome tab opens briefly (for about 1-2 seconds) and then disappears. This error message appears in my browser console. Interestingly, even though I'm getting this error, my email is still being saved in Firebase under the Authentication user section. So, it seems like the signup process is working, but the pop-up window isn't functioning as expected. I'm unable to select the Google account to complete the signup. The tools and languages I'm using are JavaScript, HTML, CSS, Visual Studio Code (with the Live Server plugin), and the Chrome browser. I'm hoping you can shed some light on what might be causing this "Cross-Origin-Opener-Policy" error and why the pop-up window isn't working as intended. Any insights or guidance you can provide would be greatly appreciated! Thank you in advance for your help.

[@CanalDoVerdao]

Download link is now working, theres just a blue button that doenst work!

[@VectorM]

@@CanalDoVerdao Sorry about that , please send me the link or email me a screenshot. I will fix it asap

[@Varavroom]

your were a saviour, watched lot of videos but this was straight on point. Thanks and keep up the same work.

[@VectorM]

Thanks bro💯 , I appreciate that 🤛.

[@CodeR-hn5fh]

dude, i've been looking for this google authentication, and finally it works by your tutorial. Thankyou so much:)

[@VectorM]

Glad It could help bro 🤛🔥 , more Firebase Videos coming.

[@salvindsouza7053]

please avoid DJ music as backgrounds instead try jazz. Easy to focus on your content

[@VectorM]

Will definitely do🤣 , I'll use simple and slower songs in all future videos

[@dantealejo3734]

Very useful and clear, thanks for that :D

[@pedrodavi_05]

Muito obrigado, o Brasil agradece!

[@lorenztan9512]

nice

[@InPixel180]

Thank You so Much! I Love you BROOO!!!! You are a saviour.

[@VectorM]

Thanks for the comment bro 🤛🔥 , I'm glad the work I put into the video was worth it 💯.

[@SalmanShah95]

Keep up the great work man

[@VectorM]

Thanx man💯🤛.

[@ablaoemmanuel8827]

hello i have a question, i encounter a problem. i create a email and password and I'm using my email account, now i use google provider and then when i log in with google the email and password is merging or over righting it now i cannot use the email and password only the google sign-in method

[@VectorM]

Hey Sorry for the late response.. You should create separate files ( google-signin.js and email-password.js ) and handle them separately

[@sudhamd-pu8kg]

this is so helpful and also neat explanation...

[@VectorM]

🤝

[@FellinFx]

User detail's not showing after login success

[@VectorM]

Sorry, Might have explained that Last Step poorly in the video but it's simple. Open this video & skip everything. Look at step 5 : Displaying Data From Firebase: kzbin.info/www/bejne/gp_FlnmclL-FjqMsi=1LlQZ9HysuiNnsh5

[@farizizatri]

love your video. quick question, does it work in 2024? someone said that something has changed on google policy. I got that info from other yt videos, I don't know what it is

[@VectorM]

I appreciate the comment , Yes it still works in 2024 , it's still implemented the same way 💯🔥. I will take down the video and upload an updated version if the implementation changes.

[@farizizatri]

@@VectorM nice, thanks man

[@yohanajohn33]

Thxz

[@serbanpascovici913]

Thanks a lot!

[@VectorM]

Your welcome 🔥

[@user-wq6xw2jz7b]

bro this thing isnt workig i cant see the profile or any other thing

[@VectorM]

the code to see something should also be written by you kam , please find a tutorial on how to fetch and display the data once you're logged in.. best recommendation here , kzbin.info/www/bejne/oZvcfqeXZ5qHg6ssi=c0GAXakNzExPRvu-

[@Muhammadalfagaming]

Why can't mine be clicked on the nhq button

[@VectorM]

Nhq?

[@Muhammadalfagaming]

@@VectorM Why can't the button be clicked correctly? Help me friend

[@Muhammadalfagaming]

@@VectorM typo

[@hritiksharma144]

My page is just reloading it self and no pop out is coming.

[@VectorM]

Open the console and check the error message , its most likely an authorised domain.

[@user-kt9od1vg5o]

great video!!

[@VectorM]

Thanx 🔥🤛

[@pshycocoder]

i have impplemented this in react it works. i want to make todo list with auth and crud operations,how can i implement this can make it.Please help

[@VectorM]

I have a to-do list tutorial with Firebase 🔥. Here's the complete app , tasksync.netlify.app/ , and here's the code. github.com/VectorM2/Task-Sync . I used email and password to login , and the Firebase realtime database to add the list items. I made this as part of the Firebase Playlist but didn't finish the playlist yet.

[@themusicaldanish]

Please help me not working my site does not give any respnse please help me

[@VectorM]

Which part are you currently at?

[@tahaahusain4865]

Hey bro, Does this keeps user logged in even after closing browser. Or they have to log in again and again?

[@VectorM]

They have to login in , you can enable persistence for the user to login only once.

[@BlackSharkBytes]

where did you link the update js file

[@VectorM]

Good question , I link it in the HTML file it's used in only , in this case dashboard.html , That way I avoid errors like this or that element doesn't defined in Js.

[@BlackSharkBytes]

@@VectorM thanks 😊 bro good work

[@parasjain7243]

buddy i got the error of auth/configuration-not-found

[@VectorM]

i see buddy , go to your firebase project settings and copy your project configs.

[@-MrHow-]

where is the code sources?can you paste it?i just get link to github

[@VectorM]

Haven't uploaded yet , give me 5 minutes , I'll upload the code and update the link

[@-MrHow-]

where the link?@@VectorM

[@VectorM]

@@-MrHow- bro , the code for that tutorial is on a computer I left home but I'll look for it once I get home and edit it onto this comment.

[@MysteryMan-wg5db]

@@VectorM hey bro are u back, i really need the source code....

[@VectorM]

@@MysteryMan-wg5db yeah I am , I did the project on a school PC , left it there but I will code it again and upload it today.

[@AbidMA]

I’m stuck, the pop up alert5 doesn’t show up for me? Can u help

[@VectorM]

Yeah I'd love to help but KZbin doesn't allow screenshot 🤦. But which popup are you referring to? Which step?

[@AbidMA]

@@VectorMthe part at 4:05. When I click it nothing pops up

[@VectorM]

​@@AbidMA alright I see , please open the inspector on the site , click on the button and check the console ( make sure there's no error there ). Make sure your script ( JavaScript) is linked properly and it's type is module. Make sure you have the right name written to select the button.

[@VectorM]

​@@AbidMAsorry for the late responses , Currently working on another video. I think I'll make another Firebase video on how to upload pictures/music/files to Firebase and how do retrieve them.

[@AbidMA]

@@VectorM ok I’ll try, it’s just the pop up that’s the issue. The code all seems well. BTW I’m on MacBook

[@WHY-su5nq]

Hello, does it also work on a web application?

[@VectorM]

Yes it does , this video focusing on web application but it also works in Python, Android , Node etc.

[@AbidMA]

For the last part where the user details show I don’t understand what you did in order to show it, you skipped a few steps

[@VectorM]

Ok to show user details create another html file , where you'll redirect users once they are logged in. In this html file write some empty elements with IDs , we'll overwrite these with the users details. Link a new Js Script to the file. In the new Js Script , copy the previous code and import onAuthChanged. ( This contains a function called update which fetches user data.) If the user exists when update the details , else we promt them to login.

[@AbidMA]

@@VectorM wdym by copy the previous code?

[@AbidMA]

@@VectorM can you make a quick video?

[@VectorM]

@@AbidMA Yeah definitely, on what? How to fetch user data from firebase?

[@AbidMA]

@@VectorMhow to fetch that data and show it on that page. Like you did on the last part I’m still confused

[@user-wd9rq4ge4c]

This a not useful because a lot of things you uncleared it and you cut many things ! so we should avoid this video

[@VectorM]

Alright , what specifically do you think was cut and what's unclear?😭