2024-02-07
2263
#react
Chimezie Innocent
127181
Feb 7, 2024 ⋅ 8 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:

Developing Web Extensions With Wxt

Developing web extensions with the WXT library

Browser extensions are an important part of the web ecosystem. They make our lives easier and enhance our web browsing […]

Debjyoti Banerjee
May 24, 2024 ⋅ 8 min read
Bulma Css Adoption Guide: Overview, Examples, And Alternatives

Bulma CSS adoption guide: Overview, examples, and alternatives

Explore how Bulma CSS simplifies frontend development with its ease of use and customizable, responsive, pre-designed UI elements.

Timonwa Akintokun
May 23, 2024 ⋅ 10 min read
Using Mountaineer To Develop A React App With Python

Using Mountaineer to develop a React app with Python

Develop a React app with Python using the Mountaineer framework for building a simple app with integrated your frontend and backend database.

Rosario De Chiara
May 23, 2024 ⋅ 7 min read
Enhance CSS View Transitions With Velevette

Enhance CSS view transitions with Velvette

Velvette is a utility library developed to make working with view transitions easier.

David Omotayo
May 22, 2024 ⋅ 9 min read
View all posts

30 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

  8. Perfect source of knowledge. Only one remark for TS users only:

    onSuccess: (codeResponse) => setUser(codeResponse)

    that line might suggest type CodeResponse for var codeResponse, while in fact it is TokenResponse

  9. La forma en como maneja la obtención de datos esta persona es interesante, evita hacer la llamada al API de Google para obtener la información del usuario.

Leave a Reply