🔥 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! 🚀👨💻
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.
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
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.
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
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: ua-cam.com/video/LnbeFf_ZRXA/v-deo.htmlsi=1LlQZ9HysuiNnsh5
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.
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 , ua-cam.com/video/kjyMta25TMI/v-deo.htmlsi=c0GAXakNzExPRvu-
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.
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 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.
@@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.
🔥 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! 🚀👨💻
@VectorM, plz help i have asked my question below.
@@AbhishekKumar-rj4qq noted💯 , apologies for the late response.
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.
Download link is now working, theres just a blue button that doenst work!
@@CanalDoVerdao Sorry about that , please send me the link or email me a screenshot. I will fix it asap
please avoid DJ music as backgrounds instead try jazz. Easy to focus on your content
Will definitely do🤣 , I'll use simple and slower songs in all future videos
your were a saviour, watched lot of videos but this was straight on point. Thanks and keep up the same work.
Thanks bro💯 , I appreciate that 🤛.
dude, i've been looking for this google authentication, and finally it works by your tutorial. Thankyou so much:)
Glad It could help bro 🤛🔥 , more Firebase Videos coming.
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
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.
@@VectorM nice, thanks man
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
Hey Sorry for the late response.. You should create separate files ( google-signin.js and email-password.js ) and handle them separately
Very useful and clear, thanks for that :D
User detail's not showing after login success
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:
ua-cam.com/video/LnbeFf_ZRXA/v-deo.htmlsi=1LlQZ9HysuiNnsh5
Muito obrigado, o Brasil agradece!
Thank You so Much! I Love you BROOO!!!! You are a saviour.
Thanks for the comment bro 🤛🔥 , I'm glad the work I put into the video was worth it 💯.
Keep up the great work man
Thanx man💯🤛.
ive seen some videos that were outdated, is this one of them? im new to firebase so i cant tell the difference
@@michaelkraiton3630 No , Still works the same. I'll always update it if something changes.
this is so helpful and also neat explanation...
🤝
Why can't mine be clicked on the nhq button
Nhq?
@@VectorM Why can't the button be clicked correctly? Help me friend
@@VectorM typo
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
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.
bro this thing isnt workig
i cant see the profile or any other thing
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 , ua-cam.com/video/kjyMta25TMI/v-deo.htmlsi=c0GAXakNzExPRvu-
Hey bro, Does this keeps user logged in even after closing browser. Or they have to log in again and again?
They have to login in , you can enable persistence for the user to login only once.
My page is just reloading it self and no pop out is coming.
Open the console and check the error message , its most likely an authorised domain.
nice
Hello, does it also work on a web application?
Yes it does , this video focusing on web application but it also works in Python, Android , Node etc.
buddy i got the error of auth/configuration-not-found
i see buddy , go to your firebase project settings and copy your project configs.
where did you link the update js file
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.
@@VectorM thanks 😊 bro good work
Thanks a lot!
Your welcome 🔥
Please help me not working my site does not give any respnse please help me
Which part are you currently at?
where is the code sources?can you paste it?i just get link to github
Haven't uploaded yet , give me 5 minutes , I'll upload the code and update the link
where the link?@@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.
@@VectorM hey bro are u back, i really need the source code....
@@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.
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
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.
@@VectorM wdym by copy the previous code?
@@VectorM can you make a quick video?
@@AbidMA Yeah definitely, on what? How to fetch user data from firebase?
@@VectorMhow to fetch that data and show it on that page. Like you did on the last part I’m still confused
great video!!
Thanx 🔥🤛
Thxz
I’m stuck, the pop up alert5 doesn’t show up for me? Can u help
Yeah I'd love to help but UA-cam doesn't allow screenshot 🤦. But which popup are you referring to? Which step?
@@VectorMthe part at 4:05. When I click it nothing pops up
@@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.
@@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.
@@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
This a not useful because a lot of things you uncleared it and you cut many things !
so we should avoid this video
Alright , what specifically do you think was cut and what's unclear?😭