2022-08-09
2152
#react
Chimezie Innocent
127181
Aug 9, 2022 ⋅ 7 min read

The guide to adding Google login to your React app

Chimezie Innocent I am Chimezie, a software developer based in Nigeria. I am highly skilled in HTML, CSS, and JS to build web-accessible and progressive apps. I'm also skilled with React for web, React Native for Android apps, and Tailwind CSS. I write technical articles, too.

Recent posts:

Using Rust And Leptos To Build Beautiful Declarative User Interfaces

Using Rust and Leptos to build beautiful, declarative UIs

Leptos is an amazing Rust web frontend framework that makes it easier to build scalable, performant apps with beautiful, declarative UIs.

Eze Sunday
Nov 30, 2023 ⋅ 10 min read
5 Best JavaScript Multi-Dimensional Array Libraries

5 best JavaScript multidimensional array libraries

Learn more about the 5 best JavaScript libraries for dealing with multidimensional arrays, such as ndarray, math.js, and NumJs.

Pascal Akunne
Nov 30, 2023 ⋅ 4 min read
Dom Scandinaro Leader Spotlight

Leader Spotlight: Leading by experience with Dom Scandinaro

We spoke with Dom about his approach to balancing innovation with handling tech debt and to learn how he stays current with technology.

Jessica Srinivas
Nov 30, 2023 ⋅ 6 min read
Vite Adoption Guide Overview Examples And Alternatives

Vite adoption guide: Overview, examples, and alternatives

Vite is a versatile, fast, lightweight build tool with an exceptional DX. Let’s explore when and why you should adopt Vite in your projects.

David Omotayo
Nov 29, 2023 ⋅ 16 min read
View all posts

28 Replies to "The guide to adding Google login to your React app"

  1. thanks for the awesome tutorial.

    I have two questions.

    1. we never use the gapi instance in the code below useEffect( ). what is it for?

    2. When the user doesn’t get logged out after clicking logout. when trying to login, the data is stored, and the consent screen doesn’t show up. Any solutions?

    1. Thank you for your kind words.

      To answer your questions;
      1. gapi is simply used to interact or communicate with Google’s APIs one of which is the login Api that we are learning in this article.

      Gapi initializes our clientId and then loads it into our server-side application. We are calling it inside useEffect so that whenever our component renders or mounts, it gets called immediately.

      2. Yes, there is. You only need to add the consent prompt to your login button. See below;

      The prompt makes sure the consent screen shows up so you can select any account you want. Hope this answers your questions.

  2. hi innocent,
    thanks for putting this article up, it really awesome and helpful. I have a question for you, when I was trying to create my consent screen, the changes are not being saved, therefore, i could not proceed to create credentials. it kept on saying “An error saving your app has occurred”. Please, is there any way i can go about this.
    thanks in anticipation

    1. I’m glad you liked the article.

      For your question, I think the issue is because of the App name you are setting it to. It seems it’s not passing for some reason. So, since your project ID is a valid name, you should instead use that as your consent App Name. You can always change it later.

      In a case you don’t know where to find your project ID, simply click on the dropdown on the top bar of your console(where you can see your project name). When the dropdown opens, you should see your project ID on the same line of your project name. See first image of this article(the project ID for this article is nomadic-drummer-355219).

      Let me know in the comment if this fixes your issue.

  3. I just wanted to know how can I store the basic info of user in local storage, beacuse there is lot of info and I can’t get more info at a time.

    1. To save to local storage, you use localStorage.setItem(“user”, res) where “user” is the key you are saving your data as while res is the data you want to save. Both key and value must be strings in order to be saved in your local storage.

      You can save an object or array to your locaStrorage like this; localStorage.setItem(“user”, JSON.stringify(obj)) where you are converting the obj or array to a string.

      Check out this article to learn more about local storage,https://blog.logrocket.com/localstorage-javascript-complete-guide/

  4. The tutorial is very awesome. Any link in Git? Thanks, you
    Any ideas, how Can I fix the belov issue.

    {type: ‘tokenFailed’, idpId: ‘google’, error: ‘server_error’}
    error: “server_error”
    idpId: “google”
    type: “tokenFailed”

    1. No, it’s not. @react-native-google-signin/google-signin is the package you need for react-native and it is easier to integrate too

  5. Thank you for this content, it was very helpful. You really explained every step to the last detail.

  6. please change the code snippet with this “`await axios
    .get(`https://www.googleapis.com/oauth2/v1/userinfo`, {
    headers: {
    Authorization: `Bearer ${tokenResponse.access_token}`,
    Accept: ‘application/json’
    }}
    )“` we don’t need to provide access_token in url, it was giving me 401 so, i removed it

  7. i got that error
    Cross-Origin-Opener-Policy policy would block the window.closed call.
    gq.C @ client:273
    client:273 Cross-Origin-Opener-Policy policy would block the window.closed call.
    gq.C @ client:273

Leave a Reply