Integrate Google Sign-In with Your React App in 5 Minutes

Published on Jan 2026 · 5 min read

Google Sign-In is one of the fastest ways to add secure authentication to a React application. In this article, we will integrate Google Sign-In using a modern Vite + React (TypeScript) setup.

This guide intentionally avoids complex global state management. Instead, we pass authentication data between components using React Router.

Step 1: Create a Basic React Project

If you don’t already have a React project, create one using Vite:

npm create vite@latest google-single-signin -- --template react-ts
cd google-single-signin
npm install
npm run dev

Step 2: Configure Application Routing

We will create two routes:

import { createBrowserRouter } from "react-router-dom";
import { Login } from "./features/login/pages/login";
import { LoginSuccess } from "./features/login/pages/login-sucsess";

const router = createBrowserRouter([
  { path: "/login", element: <Login /> },
  { path: "/login-success", element: <LoginSuccess /> }
]);

export default router;

Step 3: Create Login Pages

Login Page

export function Login() {
  return <div>Login</div>;
}

Login Success Page

export function LoginSuccess() {
  return <div>Login Success</div>;
}

Step 4: Install Google OAuth Library

We will use the official Google OAuth library for React:

npm install @react-oauth/google@latest

Step 5: Google Cloud Configuration

Create a Google Cloud project and configure OAuth credentials.

Use Web Application as the application type and add: 

http://localhost:5173

Save and copy your GOOGLE_CLIENT_ID.

Step 6: Add GoogleOAuthProvider

Wrap your application with GoogleOAuthProvider.

import { GoogleOAuthProvider } from "@react-oauth/google";

<GoogleOAuthProvider clientId="GOOGLE_CLIENT_ID">
  <RouterProvider router={router} />
</GoogleOAuthProvider>

Step 7: Implement Google Login

We use a custom login button and navigate on successful authentication. 


import { useGoogleLogin } from "@react-oauth/google";
import { useNavigate } from "react-router-dom";

export function Login() {
  const navigate = useNavigate();

  const loginWithGoogle = useGoogleLogin({
    onSuccess: tokenResponse => {
      navigate("/login-success", {
        state: {
          token: tokenResponse.access_token,
          provider: "google"
        }
      });
    }
  });

  return (
    <button onClick={() => loginWithGoogle()}>
      Login with Google
    </button>
  );
}

Step 8: Fetch User Profile Information

On the success page, we fetch the user’s profile using Google’s UserInfo API. 


import { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";

interface LoginSuccessProps {
  provider: string;
  token: string;
}

export function LoginSuccess() {
  const location = useLocation();
  const state = location.state as LoginSuccessProps | null;

  const [profile, setProfile] = useState<{
    name: string;
    picture: string;
  } | null>(null);

  const handleLoginSuccess = async () => {
    try {
      const res = await fetch(
        "https://www.googleapis.com/oauth2/v3/userinfo",
        {
          headers: {
            Authorization: `Bearer ${state?.token}`
          }
        }
      );

      const userInfo = await res.json();

      setProfile({
        name: userInfo.name,
        picture: userInfo.picture
      });
    } catch (err) {
      console.error("Profile fetch error:", err);
    }
  };

  useEffect(() => {
    handleLoginSuccess();
  }, []);

  return (
    <div>
      <h2>Welcome, {profile?.name}</h2>
      <img
        src={profile?.picture}
        alt="Profile"
        style={{
          borderRadius: "50%",
          width: "120px",
          height: "120px"
        }}
      />
    </div>
  );
}

Remember, the login-sucsess is just an idea for the development, it is not a production code.

That’s it! You now have a fully authenticated Google Sign-In flow. Here I get my authenticated simple view