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:

Gemini CLI tutorial — Will it replace Windsurf and Cursor?

Gemini CLI tutorial — Will it replace Windsurf and Cursor?

Discover how to use Gemini CLI, Google’s new open-source AI agent that brings Gemini directly to your terminal.

Chizaram Ken
Jul 10, 2025 â‹… 8 min read
React & TypeScript: 10 Patterns For Writing Better Code

React & TypeScript: 10 patterns for writing better code

This article explores several proven patterns for writing safer, cleaner, and more readable code in React and TypeScript.

Peter Aideloje
Jul 10, 2025 â‹… 11 min read
A Guide To Wrapper Vs. Container Classes In CSS

A guide to wrapper vs. container classes in CSS

A breakdown of the wrapper and container CSS classes, how they’re used in real-world code, and when it makes sense to use one over the other.

Temitope Oyedele
Jul 7, 2025 â‹… 10 min read
Stagehand and Gemini logos on a gradient background symbolizing AI web automation

How to build a web-based AI agent with Stagehand and Gemini

This guide walks you through creating a web UI for an AI agent that browses, clicks, and extracts info from websites powered by Stagehand and Gemini.

Elijah Asaolu
Jul 4, 2025 â‹… 8 min read
View all posts

33 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

    1. You’re correct, Vicee. profile.length would have been more suited for my use case. Thank you

  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