Can you please help me understand why do we need this react-google-login? What does it offer other than what the button div code suggested by Google on their portal?
sounds awesome. please check my nextjs course. To get this course as separated lessons with Q/A, Enroll for free here: codingwithbasir.com/p/free-nextjs-course-ecommerce
Thank you for the tutorial. I am not able to understand why are we creating the backend here. We are getting the user data (name, email and profile image) from 'login with google' button itself. If anyone can explain it to me, I would be really thankful.
Very nice and simple tutorial!! How about if I want to make subsequent request to the server as the logged in user? I looked at other tutorials that after upsert, we assign a jwt token and use that as a way to authorize other request. Is that the correct way?
Great suggestion! it can be done by incorporating jsonwebtoken package. in this tutorial I used it: please try my MERN course here: ruclips.net/video/TRCDsB9i3bI/видео.html
glad to hear that. please check my nextjs course. To get this course as separated lessons with Q/A, Enroll for free here: codingwithbasir.com/p/free-nextjs-course-ecommerce
You’re welcome 😊 please check my nextjs course. To get this course as separated lessons with Q/A, Enroll for free here: codingwithbasir.com/p/free-nextjs-course-ecommerce
Glad you enjoyed it please check my nextjs course. To get this course as separated lessons with Q/A, Enroll for free here: codingwithbasir.com/p/free-nextjs-course-ecommerce
Welcome! please check my nextjs course. To get this course as separated lessons with Q/A, Enroll for free here: codingwithbasir.com/p/free-nextjs-course-ecommerce
you are welcome. please check my nextjs course. To get this course as separated lessons with Q/A, Enroll for free here: codingwithbasir.com/p/free-nextjs-course-ecommerce
react-google-login giving error, we also need to add gapi-script package & need to add below code at App.js useEffect(() => { function start() { gapi.client.init({ clientId: process.env.REACT_APP_GOOGLE_CLIENT_ID, scope: '', }); } gapi.load('client:auth2', start); }, []);
Hi, I tried the tutorial, but it doesn't do anything after the choosing the account from the signin popup window. Can you tell me why is this happening? I also tried your code from github but still it doesn't display the email or the logout button.
Welcome! please check my nextjs course. To get this course as separated lessons with Q/A, Enroll for free here: codingwithbasir.com/p/free-nextjs-course-ecommerce
@@linyerin I don't know man. At the end I used a tutorial on Google One Tap login and implemented. It was quite easy. I can get the name, email only now but that's what I wanted. I will share the link in second comment
@@linyerin About this error, I can say that the migration is happening but it's not like it has stopped working. Lakhs of websites still be using the old way. They can't just drop it now.
hello there, thanks for your interest. Please ask this question here: discord.gg/9EkxrZVJJS send screenshot of the error with all details. I answer it on daily basis.
please check my nextjs course. To get this course as separated lessons with Q/A, Enroll for free here: codingwithbasir.com/p/free-nextjs-course-ecommerce
Goog day! I have a question: I added clientId correctly, checked everything hundred times, code is exactly the same, but google button doesn't respond and console says that clientId is missing, can't figure out the actual problem. Can anyone help?
Hi Basir, how about after signing the user, we want to query for instance Google Calendar API on a subsequent request? We should request the token on every request and then verify the token again, then access calendar API?
Hi I'm glad you found it helpful! You can do that using style and className params. Check out here for more details on this package: www.npmjs.com/package/react-google-login Hope this helps!
@@CodingwithBasir Hi. it helped a little bit but i gave some style as i could. Basir i have another question, the app runs very fine in my browser but when i run it from mobile (my phone) i received a Google error message that says: "Authorization error - error 400: invalid request - Permission denied to generate login hint for target domain". i have added "localhost:3000" in my URI redirects and it is working file in my browser, Do i have to do something extra to make the app work fine in the browser of my mobile device?
hello! I cannot connect it to server.js. I already had the server file so I added the code to the existing file but I still cannot login on the server.
hello there, thanks for your interest. what error do you get? Please ask this question here: codingwithbasir.com/questions/ask/ I answer it on daily basis.
man, are u joking telling that u can use only one email mentioned in Google Cloud Conifg API ?? What for are u doing this project then, to login it just by yourself ? ))) 🤨
@@CodingwithBasiryes, of course it works. You did not mention it in video so it caused misunderstanding in my head, probably not only in my. It would better if you told in video this little "+" of using published version ❤
@@CodingwithBasir thank you so much.i have another question. I'm working with react routes and it's not working it redirects to black screen and in the console it gives error saying expected a string or class but got an object. Please help
hello there, sure, will upload soon. in the meantime please check my nextjs course. To get this course as separated lessons with Q/A, Enroll for free here: codingwithbasir.com/p/free-nextjs-course-ecommerce
@@CodingwithBasir I follow you. I would like to follow you in type script. I work in react typescript but I'm not sure if react is better than angular. I work in past with angular and I liked it. It's good
Nice demo, very helpful. When is the Google "Client Secret" used with this process? Never? I see you use the Google Client ID in both Frontend and Backend code, but I'm surprised the "Client Secret" is never needed anywhere. I would have thought the "Client Secret" would be needed somewhere in the backend code.
You're welcome please check my nextjs course. To get this course as separated lessons with Q/A, Enroll for free here: codingwithbasir.com/p/free-nextjs-course-ecommerce
![Eminem - Somebody Save Me (feat. Jelly Roll) [Official Music Video]](http://i.ytimg.com/vi/Vwa0HenQMi4/mqdefault.jpg)
Dependency react-google-login has last commit on master on January of 2021. 150+ open issues. Kinda sus ngl
it still works. do you have better package?
react-google-login is broken dependency, no longer advised to follow this tutorial
yes, I'm using @react-oauth/google.
hello there,
thanks for your interest.
will add a tutorial for this new package soon.
@@CodingwithBasir please add, your video and way of teaching is very nice, please add the video and help me
Thank you so much for this easy yet insightful tutorial.
hello there,
thanks for your interest.
best tutorial - learned a lot, thank you!
hello there,
thanks for your interest.
Please ask any coding questions here:
codingwithbasir.com/questions/ask/
Can you please help me understand why do we need this react-google-login? What does it offer other than what the button div code suggested by Google on their portal?
In summary, It uses the google api to retrieve user data when signed in
hello there, it is easier to work with react compare to pure js button
Excited for it
sounds awesome.
please check my nextjs course. To get this course as separated lessons with Q/A, Enroll for free here:
codingwithbasir.com/p/free-nextjs-course-ecommerce
It doesn't work anymore. This is depreciated version of using it. Good tutorial though.
Please ask this question here:
codingwithbasir.com/questions/ask/
I answer it on daily basis.
hello from jp. Thank you for your awesome video. Very helpful for me !
Hi I'm glad to hear that! Stay tuned for more content like this one!
Thank you for the tutorial. I am not able to understand why are we creating the backend here. We are getting the user data (name, email and profile image) from 'login with google' button itself. If anyone can explain it to me, I would be really thankful.
hey Jayant ! are you interested in opportunities in this technology ?
hello there,
we need to save the login data somewhere. that's why we need backend.
@@CodingwithBasir ok got it. Thank you Basir.
Very nice and simple tutorial!! How about if I want to make subsequent request to the server as the logged in user? I looked at other tutorials that after upsert, we assign a jwt token and use that as a way to authorize other request. Is that the correct way?
Great suggestion!
it can be done by incorporating jsonwebtoken package.
in this tutorial I used it:
please try my MERN course here: ruclips.net/video/TRCDsB9i3bI/видео.html
excited
glad to hear that.
please check my nextjs course. To get this course as separated lessons with Q/A, Enroll for free here:
codingwithbasir.com/p/free-nextjs-course-ecommerce
You said only the users added as testers in Google platform can login .
What about other users in general?
Until your application is verified by google you gonna have to add the users manually. There is cap of 100 in terms of test users
Hey Sumit. have you projects in react before?
Please ask this question here:
codingwithbasir.com/questions/ask/
I answer it on daily basis.
واقعا عالی بود
hello there,
thanks for your interest.
Thank you 🙏
You’re welcome 😊
please check my nextjs course. To get this course as separated lessons with Q/A, Enroll for free here:
codingwithbasir.com/p/free-nextjs-course-ecommerce
Awesome 👍 enjoyed your course
Glad you enjoyed it
please check my nextjs course. To get this course as separated lessons with Q/A, Enroll for free here:
codingwithbasir.com/p/free-nextjs-course-ecommerce
Hey Rahul ! would you be interested in an opportunity in software development ?
@@priyankaroberts1093 i already working in it priyanka
@@ragulkanna2467 alright ! thank you for responding :)
@@priyankaroberts1093 ur from
You show how I can register myselt, but how I can register anyone user by google?
hello there,
you need to publish you app on GCP console like this:
ibb.co/Br9BPHt
Thank you
Welcome!
please check my nextjs course. To get this course as separated lessons with Q/A, Enroll for free here:
codingwithbasir.com/p/free-nextjs-course-ecommerce
Hi, i have a question regarding how to connect that to mongoDB
hello there,
after login you can send the user data by axios.post to an api in a node server and save them in the mongodb using mongoose
Hey I made it!!!! never mind!
sounds great.
That was perfect
you are welcome.
please check my nextjs course. To get this course as separated lessons with Q/A, Enroll for free here:
codingwithbasir.com/p/free-nextjs-course-ecommerce
react-google-login giving error, we also need to add gapi-script package & need to add below code at App.js
useEffect(() => {
function start() {
gapi.client.init({
clientId: process.env.REACT_APP_GOOGLE_CLIENT_ID,
scope: '',
});
}
gapi.load('client:auth2', start);
}, []);
worked for me
hey Rahul ! are you open to any opportunities in software development ?
Please ask this question here:
codingwithbasir.com/questions/ask/
I answer it on daily basis.
Hi, I tried the tutorial, but it doesn't do anything after the choosing the account from the signin popup window. Can you tell me why is this happening? I also tried your code from github but still it doesn't display the email or the logout button.
hello there,
you need to check chrome dev tools > console to see what error do you get there. share it to take a look.
@@CodingwithBasir how to check?
you are the best
hello there,
thanks for your interest.
thank you
Welcome!
please check my nextjs course. To get this course as separated lessons with Q/A, Enroll for free here:
codingwithbasir.com/p/free-nextjs-course-ecommerce
Google sign in is migrating to use a different implementation and packages like react-google-login are affected by their deprecating implementation.
yeah man I am looking for a good tutorial on the new version too.
I kept getting errors like popup_closed_by_users, is it becasue of the sign migration?
@@linyerin I don't know man. At the end I used a tutorial on Google One Tap login and implemented. It was quite easy. I can get the name, email only now but that's what I wanted. I will share the link in second comment
@@linyerin ruclips.net/video/rXNEqnAE2Bk/видео.html
@@linyerin About this error, I can say that the migration is happening but it's not like it has stopped working. Lakhs of websites still be using the old way. They can't just drop it now.
idp_initialization_failed keep getting this error when I try to test the button by console logging the response. Plese help Mosh
In short: clear your browser cache.
In Chrome: Settings → Privacy and security → Clear browsing data → Cached images and files
Thank you so much for this wonderful tutorial sir, could you please share/make a tutorial on how to redirect to another after successfull login
hello there,
thanks for your interest.
Noted
hey Chetan! are you open to opportunities in web development ?
nice one i want tamil
hello there,
thanks for your interest.
Please ask this question here:
discord.gg/9EkxrZVJJS
send screenshot of the error with all details.
I answer it on daily basis.
thank you so much i have a problem when i try to loggin i get this error popup_closed_by_user
hello there,
thanks for your interest.
Please ask this question here:
codingwithbasir.com/questions/ask/
I answer it on daily basis.
I m getting these error {error: "popup_closed_by_user"}
Please ask this question here:
codingwithbasir.com/questions/ask/
I answer it on daily basis.
Hi, thanks for the tutorial. One question : Where should we add scopes for authorization? thank you.
You can add scopes in GoogleLogin props.
@@VishalButolia Thanks a lot
thanks
great !
awesome.
please check my nextjs course. To get this course as separated lessons with Q/A, Enroll for free here:
codingwithbasir.com/p/free-nextjs-course-ecommerce
What is this error comes from?
Error: ENOENT: no such file or directory, stat '/Users/Username/Desktop/Projectfolder/server/build/index.html'
hello there,
you need to run npm run build first,
Very nice and simple tutorial !! How to logout ??
Easy. check this out: developers.google.com/admin-sdk/directory/reference/rest/v1/users/signOut
Goog day! I have a question: I added clientId correctly, checked everything hundred times, code is exactly the same, but google button doesn't respond and console says that clientId is missing, can't figure out the actual problem. Can anyone help?
Please ask this question here:
codingwithbasir.com/questions/ask/
I answer it on daily basis.
its so good. but i dont have a hosting site that has node server so sad
hello there,
you can use heroku free dyno here:
heroku.com
Hi Basir, how about after signing the user, we want to query for instance Google Calendar API on a subsequent request? We should request the token on every request and then verify the token again, then access calendar API?
hello there,
to access more permission you need to search for it the APIs and Credential
check this:
cloud.google.com/docs/authentication/production
@@CodingwithBasir Thank you! Basically we want to connect on behalf of the user rather than using a service account.
Hi Basir,
Login failed {error: 'popup_closed_by_user'}
can u hlp me with above error?
I answered this question here:
codingwithbasir.com/question/google-login-error-login-failed-error-popup_closed_by_user/
is google sign-in free for use in production?
Yes. I think it is free
hey Adwaith ! are you perhaps open for opportunities in this technology?
I cant get the buttonText to work? it just shows nothing but the google logo anyone know the fix?
hello there,
you need to open the console to see what error you get.
Hi, Thanks for your video, very helpful. Do you know if I can give some style to the react-google-login component?
Hi I'm glad you found it helpful!
You can do that using style and className params. Check out here for more details on this package: www.npmjs.com/package/react-google-login
Hope this helps!
@@CodingwithBasir Hi. it helped a little bit but i gave some style as i could. Basir i have another question, the app runs very fine in my browser but when i run it from mobile (my phone) i received a Google error message that says: "Authorization error - error 400: invalid request - Permission denied to generate login hint for target domain". i have added "localhost:3000" in my URI redirects and it is working file in my browser, Do i have to do something extra to make the app work fine in the browser of my mobile device?
How to add both in one app ??
JWT login and google login ?
Please ask this question here:
codingwithbasir.com/questions/ask/
I answer it on daily basis.
sir how can add more auth like github linkdin facebook
hello there,
please ask it on my discord channel here:
discord.gg/cTa74WTG
I will it if students vote for it.
hello! I cannot connect it to server.js. I already had the server file so I added the code to the existing file but I still cannot login on the server.
send screenshot of the error please.
Thank you for a reply! I created server folder and put server.js file inside of the folder. FYI
Why the reply with the link disappear from the comment section?
i got an error ,can somebody help me ?
error: "popup_closed_by_user"
this is the error
what should we do ?
It is outdated version now. It will not work anymore
Please ask this question here:
codingwithbasir.com/questions/ask/
I answer it on daily basis.
why I can't deploy it in netlify?
hello there,
thanks for your interest.
what error do you get?
Please ask this question here:
codingwithbasir.com/questions/ask/
I answer it on daily basis.
man, are u joking telling that u can use only one email mentioned in Google Cloud Conifg API ?? What for are u doing this project then, to login it just by yourself ? ))) 🤨
when you publish your app it works. check this link:
codingwithbasir.com/question/publish-app-in-google-login-projsct/
@@CodingwithBasiryes, of course it works. You did not mention it in video so it caused misunderstanding in my head, probably not only in my. It would better if you told in video this little "+" of using published version ❤
nope, u are stupid :(
Sir the authentication works for the first time but next time the login popup just closes on its own.
did you save the token in the localstorage?
github.com/basir/react-google-login/blob/7dedd57a149268f629d8be3a3f401a13e1e02503/src/App.js#L7
@@CodingwithBasir thank you so much.i have another question. I'm working with react routes and it's not working it redirects to black screen and in the console it gives error saying expected a string or class but got an object. Please help
Good Iranian boy
thanks.
Please watch my courses on Thinkific: basir.thinkific.com
Use coupon SAVE90 for 90% off.
fekr mikonam shoma irani hastid doroste ?
hello there,
thanks for your interest.
Hello Sir I'm getting handle failure how to solve it please tell me sir
Please install gapi-script package & add below code at App.js
useEffect(() => {
function start() {
gapi.client.init({
clientId: process.env.REACT_APP_GOOGLE_CLIENT_ID,
scope: '',
});
}
gapi.load('client:auth2', start);
}, []);
Please ask this question here:
codingwithbasir.com/questions/ask/
I answer it on daily basis.
Please make a video on Sign in With Google button. Google Sign-in is going to be deprecated.
hey Piyush! wanted to know if you're open to opportunities in this technology
sure, will add it soon
make video for
email OTP long in with google firebase
hello there,
sure, will upload soon.
in the meantime please check my nextjs course. To get this course as separated lessons with Q/A, Enroll for free here:
codingwithbasir.com/p/free-nextjs-course-ecommerce
sir please can you make the create new provider an next js vercel app.
hello there,
I didn't get your mean by new provider.
Hey Vinoth, are you interested in opportunities in this technology ?
Sir can you make a video on how to add Paytm gateway using react & node. It is my humble request for you.
hello there,
thanks for your interest.
I will add a video for it after update my courses
Hi Basir. I'm waiting for your typescript code
Will upload soon. currently I am working on angular amazona by typescript in frontend and backend.
@@CodingwithBasir hi. Congrats you are very smart.
The eternal question: angular or react? Which is better?
@@CodingwithBasir I follow you. I would like to follow you in type script. I work in react typescript but I'm not sure if react is better than angular. I work in past with angular and I liked it. It's good
Nice demo, very helpful. When is the Google "Client Secret" used with this process? Never? I see you use the Google Client ID in both Frontend and Backend code, but I'm surprised the "Client Secret" is never needed anywhere. I would have thought the "Client Secret" would be needed somewhere in the backend code.
Please ask this question here:
codingwithbasir.com/questions/ask/
I answer it on daily basis.
Thank you
You're welcome
please check my nextjs course. To get this course as separated lessons with Q/A, Enroll for free here:
codingwithbasir.com/p/free-nextjs-course-ecommerce