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:

Glowing 3D cube with the MediaPipe and React logos overlaid, symbolizing integration of AI and web development

How to build better AI apps in React with MediaPipe’s latest APIs

Learn how to integrate MediaPipe’s Tasks API into a React app for fast, in-browser object detection using your webcam.

Emmanuel John
Jul 17, 2025 â‹… 10 min read
Vercel AI SDK logo on a 3D black grid background

How to build unified AI interfaces using the Vercel AI SDK

Integrating AI into modern frontend apps can be messy. This tutorial shows how the Vercel AI SDK simplifies it all, with streaming, multimodal input, and generative UI.

Ikeh Akinyemi
Jul 16, 2025 â‹… 13 min read
how to prepare for a software engineering interview

How to prep for a software dev interview: Advice from a dev leader

Interviewing for a software engineering role? Hear from a senior dev leader on what he looks for in candidates, and how to prepare yourself.

Andrew Evans
Jul 16, 2025 â‹… 12 min read
Next.js Real-Time Video Streaming: HLS.js And Alternatives

Next.js real-time video streaming: HLS.js and alternatives

Set up real-time video streaming in Next.js using HLS.js and alternatives, exploring integration, adaptive streaming, and token-based authentication.

Jude Miracle
Jul 15, 2025 â‹… 19 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