React Google Login Tutorial For Beginner Web Developers: Build React.js App To Login With Google

Поділитися
Вставка
  • Опубліковано 24 гру 2024

КОМЕНТАРІ •

  • @shubhrasrivastava6050
    @shubhrasrivastava6050 2 роки тому +2

    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?

    • @mounteverest4013
      @mounteverest4013 2 роки тому

      In summary, It uses the google api to retrieve user data when signed in

    • @codingwithbasir
      @codingwithbasir  2 роки тому

      hello there, it is easier to work with react compare to pure js button

  • @ljubisaknezevic9040
    @ljubisaknezevic9040 2 роки тому +4

    Dependency react-google-login has last commit on master on January of 2021. 150+ open issues. Kinda sus ngl

  • @sumitprajapati821
    @sumitprajapati821 2 роки тому +1

    You said only the users added as testers in Google platform can login .
    What about other users in general?

    • @codewithsudip
      @codewithsudip 2 роки тому

      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

    • @WinterbearMeow
      @WinterbearMeow 2 роки тому

      Hey Sumit. have you projects in react before?

    • @codingwithbasir
      @codingwithbasir  2 роки тому

      Please ask this question here:
      codingwithbasir.com/questions/ask/
      I answer it on daily basis.

  • @raba650
    @raba650 2 роки тому +2

    Google sign in is migrating to use a different implementation and packages like react-google-login are affected by their deprecating implementation.

    • @piyushaggarwal5207
      @piyushaggarwal5207 2 роки тому

      yeah man I am looking for a good tutorial on the new version too.

    • @linyerin
      @linyerin 2 роки тому +1

      I kept getting errors like popup_closed_by_users, is it becasue of the sign migration?

    • @piyushaggarwal5207
      @piyushaggarwal5207 2 роки тому

      @@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

    • @piyushaggarwal5207
      @piyushaggarwal5207 2 роки тому

      @@linyerin ua-cam.com/video/rXNEqnAE2Bk/v-deo.html

    • @piyushaggarwal5207
      @piyushaggarwal5207 2 роки тому +1

      @@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.

  • @Lindaine
    @Lindaine 3 роки тому +2

    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?

    • @codingwithbasir
      @codingwithbasir  3 роки тому +1

      Great suggestion!
      it can be done by incorporating jsonwebtoken package.
      in this tutorial I used it:
      please try my MERN course here: ua-cam.com/video/TRCDsB9i3bI/v-deo.html

  • @shabeerahamed2129
    @shabeerahamed2129 2 роки тому +9

    react-google-login is broken dependency, no longer advised to follow this tutorial

    • @melania239
      @melania239 2 роки тому +2

      yes, I'm using @react-oauth/google.

    • @codingwithbasir
      @codingwithbasir  2 роки тому +1

      hello there,
      thanks for your interest.
      will add a tutorial for this new package soon.

    • @codeadvocacy
      @codeadvocacy 2 роки тому

      @@codingwithbasir please add, your video and way of teaching is very nice, please add the video and help me

  • @emanhassan8843
    @emanhassan8843 2 роки тому +1

    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.

    • @codingwithbasir
      @codingwithbasir  2 роки тому

      hello there,
      you need to check chrome dev tools > console to see what error do you get there. share it to take a look.

    • @unpamprogramming4497
      @unpamprogramming4497 2 роки тому

      @@codingwithbasir how to check?

  • @adwaithks
    @adwaithks 2 роки тому +1

    is google sign-in free for use in production?

    • @codingwithbasir
      @codingwithbasir  2 роки тому

      Yes. I think it is free

    • @WinterbearMeow
      @WinterbearMeow 2 роки тому

      hey Adwaith ! are you perhaps open for opportunities in this technology?

  • @jayantjayant3554
    @jayantjayant3554 2 роки тому +2

    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.

    • @WinterbearMeow
      @WinterbearMeow 2 роки тому

      hey Jayant ! are you interested in opportunities in this technology ?

    • @codingwithbasir
      @codingwithbasir  2 роки тому

      hello there,
      we need to save the login data somewhere. that's why we need backend.

    • @jayantjayant3554
      @jayantjayant3554 2 роки тому

      @@codingwithbasir ok got it. Thank you Basir.

  • @mooketsimotlhagodi2784
    @mooketsimotlhagodi2784 2 роки тому

    idp_initialization_failed keep getting this error when I try to test the button by console logging the response. Plese help Mosh

    • @codingwithbasir
      @codingwithbasir  2 роки тому

      In short: clear your browser cache.
      In Chrome: Settings → Privacy and security → Clear browsing data → Cached images and files

  • @bhaidar
    @bhaidar 2 роки тому

    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?

    • @codingwithbasir
      @codingwithbasir  2 роки тому

      hello there,
      to access more permission you need to search for it the APIs and Credential
      check this:
      cloud.google.com/docs/authentication/production

    • @bhaidar
      @bhaidar 2 роки тому

      @@codingwithbasir Thank you! Basically we want to connect on behalf of the user rather than using a service account.

  • @rasmuslind2890
    @rasmuslind2890 2 роки тому +1

    Hi, i have a question regarding how to connect that to mongoDB

    • @codingwithbasir
      @codingwithbasir  2 роки тому +1

      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

  • @jeainnykim3812
    @jeainnykim3812 2 роки тому +1

    best tutorial - learned a lot, thank you!

    • @codingwithbasir
      @codingwithbasir  2 роки тому

      hello there,
      thanks for your interest.
      Please ask any coding questions here:
      codingwithbasir.com/questions/ask/

  • @romanryaboshtan9270
    @romanryaboshtan9270 2 роки тому +1

    You show how I can register myselt, but how I can register anyone user by google?

    • @codingwithbasir
      @codingwithbasir  2 роки тому

      hello there,
      you need to publish you app on GCP console like this:
      ibb.co/Br9BPHt

  • @dkarya846
    @dkarya846 2 роки тому +2

    Thank you so much for this easy yet insightful tutorial.

  • @toxolarant
    @toxolarant 2 роки тому

    Hi, thanks for the tutorial. One question : Where should we add scopes for authorization? thank you.

  • @mbaianerad
    @mbaianerad 2 роки тому

    thank you so much i have a problem when i try to loggin i get this error popup_closed_by_user

    • @codingwithbasir
      @codingwithbasir  2 роки тому

      hello there,
      thanks for your interest.
      Please ask this question here:
      codingwithbasir.com/questions/ask/
      I answer it on daily basis.

  • @sultanmakhmudbazarbayev6224
    @sultanmakhmudbazarbayev6224 2 роки тому

    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?

    • @codingwithbasir
      @codingwithbasir  2 роки тому

      Please ask this question here:
      codingwithbasir.com/questions/ask/
      I answer it on daily basis.

  • @m-friend2596
    @m-friend2596 2 роки тому

    What is this error comes from?
    Error: ENOENT: no such file or directory, stat '/Users/Username/Desktop/Projectfolder/server/build/index.html'

    • @codingwithbasir
      @codingwithbasir  2 роки тому

      hello there,
      you need to run npm run build first,

  • @m-friend2596
    @m-friend2596 2 роки тому

    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.

    • @codingwithbasir
      @codingwithbasir  2 роки тому

      send screenshot of the error please.

    • @m-friend2596
      @m-friend2596 2 роки тому

      Thank you for a reply! I created server folder and put server.js file inside of the folder. FYI

    • @m-friend2596
      @m-friend2596 2 роки тому

      Why the reply with the link disappear from the comment section?

  • @rahulsharma-em9go
    @rahulsharma-em9go 2 роки тому +1

    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);
    }, []);

    • @sujeetsharma1980
      @sujeetsharma1980 2 роки тому

      worked for me

    • @WinterbearMeow
      @WinterbearMeow 2 роки тому

      hey Rahul ! are you open to any opportunities in software development ?

    • @codingwithbasir
      @codingwithbasir  2 роки тому

      Please ask this question here:
      codingwithbasir.com/questions/ask/
      I answer it on daily basis.

  • @jomoc6112
    @jomoc6112 2 роки тому

    its so good. but i dont have a hosting site that has node server so sad

    • @codingwithbasir
      @codingwithbasir  2 роки тому

      hello there,
      you can use heroku free dyno here:
      heroku.com

  • @namratadas5569
    @namratadas5569 2 роки тому

    Hi Basir,
    Login failed {error: 'popup_closed_by_user'}
    can u hlp me with above error?

    • @codingwithbasir
      @codingwithbasir  2 роки тому +1

      I answered this question here:
      codingwithbasir.com/question/google-login-error-login-failed-error-popup_closed_by_user/

  • @swagz6440
    @swagz6440 2 роки тому

    I cant get the buttonText to work? it just shows nothing but the google logo anyone know the fix?

    • @codingwithbasir
      @codingwithbasir  2 роки тому

      hello there,
      you need to open the console to see what error you get.

  • @mohammadadilashrafi1664
    @mohammadadilashrafi1664 Рік тому

    sir how can add more auth like github linkdin facebook

    • @codingwithbasir
      @codingwithbasir  Рік тому

      hello there,
      please ask it on my discord channel here:
      discord.gg/cTa74WTG
      I will it if students vote for it.

  • @mosescodes3677
    @mosescodes3677 3 роки тому

    Excited for it

    • @codingwithbasir
      @codingwithbasir  3 роки тому

      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

  • @mohdanas8027
    @mohdanas8027 2 роки тому

    I m getting these error {error: "popup_closed_by_user"}

    • @codingwithbasir
      @codingwithbasir  2 роки тому

      Please ask this question here:
      codingwithbasir.com/questions/ask/
      I answer it on daily basis.

  • @amirv1347
    @amirv1347 2 роки тому

    fekr mikonam shoma irani hastid doroste ?

  • @Lotpite
    @Lotpite Рік тому

    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 ? ))) 🤨

    • @codingwithbasir
      @codingwithbasir  Рік тому +1

      when you publish your app it works. check this link:
      codingwithbasir.com/question/publish-app-in-google-login-projsct/

    • @Lotpite
      @Lotpite Рік тому

      ​@@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 ❤

    • @ktosiek684
      @ktosiek684 Рік тому

      nope, u are stupid :(

  • @AJ-qy5fz
    @AJ-qy5fz 2 роки тому

    How to add both in one app ??
    JWT login and google login ?

    • @codingwithbasir
      @codingwithbasir  Рік тому

      Please ask this question here:
      codingwithbasir.com/questions/ask/
      I answer it on daily basis.

  • @mahdisolish1336
    @mahdisolish1336 2 роки тому

    i got an error ,can somebody help me ?
    error: "popup_closed_by_user"
    this is the error
    what should we do ?

    • @adamjedrzejko
      @adamjedrzejko 2 роки тому

      It is outdated version now. It will not work anymore

    • @codingwithbasir
      @codingwithbasir  2 роки тому

      Please ask this question here:
      codingwithbasir.com/questions/ask/
      I answer it on daily basis.

  • @arnoldoalvarez6057
    @arnoldoalvarez6057 2 роки тому

    Hi, Thanks for your video, very helpful. Do you know if I can give some style to the react-google-login component?

    • @codingwithbasir
      @codingwithbasir  2 роки тому

      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!

    • @arnoldoalvarez6057
      @arnoldoalvarez6057 2 роки тому

      @@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?

  • @vinoth8621
    @vinoth8621 3 роки тому

    sir please can you make the create new provider an next js vercel app.

    • @codingwithbasir
      @codingwithbasir  3 роки тому

      hello there,
      I didn't get your mean by new provider.

    • @priyankaroberts1093
      @priyankaroberts1093 2 роки тому

      Hey Vinoth, are you interested in opportunities in this technology ?

  • @peek-aaa-boo758
    @peek-aaa-boo758 2 роки тому

    Hello Sir I'm getting handle failure how to solve it please tell me sir

    • @rahulsharma-em9go
      @rahulsharma-em9go 2 роки тому

      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);
      }, []);

    • @codingwithbasir
      @codingwithbasir  2 роки тому

      Please ask this question here:
      codingwithbasir.com/questions/ask/
      I answer it on daily basis.

  • @kwentongkeyboard2240
    @kwentongkeyboard2240 2 роки тому

    why I can't deploy it in netlify?

    • @codingwithbasir
      @codingwithbasir  2 роки тому

      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.

  • @araragikyomin5048
    @araragikyomin5048 2 роки тому

    Sir the authentication works for the first time but next time the login popup just closes on its own.

    • @codingwithbasir
      @codingwithbasir  2 роки тому

      did you save the token in the localstorage?
      github.com/basir/react-google-login/blob/7dedd57a149268f629d8be3a3f401a13e1e02503/src/App.js#L7

    • @araragikyomin5048
      @araragikyomin5048 2 роки тому

      @@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

  • @chetanl48
    @chetanl48 2 роки тому

    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

    • @codingwithbasir
      @codingwithbasir  2 роки тому

      hello there,
      thanks for your interest.
      Noted

    • @WinterbearMeow
      @WinterbearMeow 2 роки тому

      hey Chetan! are you open to opportunities in web development ?

  • @adamjedrzejko
    @adamjedrzejko 2 роки тому +2

    It doesn't work anymore. This is depreciated version of using it. Good tutorial though.

    • @codingwithbasir
      @codingwithbasir  2 роки тому

      Please ask this question here:
      codingwithbasir.com/questions/ask/
      I answer it on daily basis.

  • @c0ba1tcoke81
    @c0ba1tcoke81 2 роки тому

    hello from jp. Thank you for your awesome video. Very helpful for me !

    • @codingwithbasir
      @codingwithbasir  2 роки тому

      Hi I'm glad to hear that! Stay tuned for more content like this one!

  • @Liam02
    @Liam02 2 роки тому

    Very nice and simple tutorial !! How to logout ??

    • @codingwithbasir
      @codingwithbasir  2 роки тому

      Easy. check this out: developers.google.com/admin-sdk/directory/reference/rest/v1/users/signOut

  • @babakhatamlou7788
    @babakhatamlou7788 2 роки тому

    واقعا عالی بود

  • @shivasai362
    @shivasai362 3 роки тому

    excited

    • @codingwithbasir
      @codingwithbasir  3 роки тому

      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

  • @piyushaggarwal5207
    @piyushaggarwal5207 2 роки тому

    Please make a video on Sign in With Google button. Google Sign-in is going to be deprecated.

    • @WinterbearMeow
      @WinterbearMeow 2 роки тому

      hey Piyush! wanted to know if you're open to opportunities in this technology

    • @codingwithbasir
      @codingwithbasir  2 роки тому

      sure, will add it soon

  • @m-friend2596
    @m-friend2596 2 роки тому

    Hey I made it!!!! never mind!

  • @ragulkanna2467
    @ragulkanna2467 3 роки тому

    Awesome 👍 enjoyed your course

    • @codingwithbasir
      @codingwithbasir  3 роки тому

      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

    • @priyankaroberts1093
      @priyankaroberts1093 2 роки тому +1

      Hey Rahul ! would you be interested in an opportunity in software development ?

    • @ragulkanna2467
      @ragulkanna2467 2 роки тому

      @@priyankaroberts1093 i already working in it priyanka

    • @priyankaroberts1093
      @priyankaroberts1093 2 роки тому

      @@ragulkanna2467 alright ! thank you for responding :)

    • @ragulkanna2467
      @ragulkanna2467 2 роки тому

      @@priyankaroberts1093 ur from

  • @vittoriomorellini1939
    @vittoriomorellini1939 3 роки тому

    Hi Basir. I'm waiting for your typescript code

    • @codingwithbasir
      @codingwithbasir  3 роки тому +1

      Will upload soon. currently I am working on angular amazona by typescript in frontend and backend.

    • @vittoriomorellini1939
      @vittoriomorellini1939 3 роки тому

      @@codingwithbasir hi. Congrats you are very smart.
      The eternal question: angular or react? Which is better?

    • @vittoriomorellini1939
      @vittoriomorellini1939 3 роки тому

      @@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

  • @binarypresence
    @binarypresence 2 роки тому

    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.

    • @codingwithbasir
      @codingwithbasir  2 роки тому

      Please ask this question here:
      codingwithbasir.com/questions/ask/
      I answer it on daily basis.

  • @acetv9648
    @acetv9648 3 роки тому

    make video for
    email OTP long in with google firebase

    • @codingwithbasir
      @codingwithbasir  3 роки тому

      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

  • @hosseinfathi9465
    @hosseinfathi9465 2 роки тому

    you are the best

  • @acetv9648
    @acetv9648 3 роки тому

    Thank you 🙏

    • @codingwithbasir
      @codingwithbasir  3 роки тому

      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

  • @anho340
    @anho340 3 роки тому

    Thank you

    • @codingwithbasir
      @codingwithbasir  3 роки тому

      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

  • @AminSani
    @AminSani 3 роки тому

    That was perfect

    • @codingwithbasir
      @codingwithbasir  3 роки тому +2

      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

  • @manodwipkundu3276
    @manodwipkundu3276 3 роки тому

    Sir can you make a video on how to add Paytm gateway using react & node. It is my humble request for you.

    • @codingwithbasir
      @codingwithbasir  3 роки тому

      hello there,
      thanks for your interest.
      I will add a video for it after update my courses

  • @shafimohamed3745
    @shafimohamed3745 Рік тому

    nice one i want tamil

    • @codingwithbasir
      @codingwithbasir  Рік тому

      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.

  • @juhandvan
    @juhandvan 3 роки тому

    great !

    • @codingwithbasir
      @codingwithbasir  3 роки тому

      awesome.

    • @codingwithbasir
      @codingwithbasir  3 роки тому

      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

  • @tbienvvv
    @tbienvvv Рік тому

    Good Iranian boy

    • @codingwithbasir
      @codingwithbasir  Рік тому

      thanks.
      Please watch my courses on Thinkific: basir.thinkific.com
      Use coupon SAVE90 for 90% off.

  • @yeanglobal5440
    @yeanglobal5440 3 роки тому

    Thank you

    • @codingwithbasir
      @codingwithbasir  3 роки тому

      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

  • @HelsaAlvaro
    @HelsaAlvaro 3 роки тому

    thank you

    • @codingwithbasir
      @codingwithbasir  3 роки тому

      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