Google Sign-In in React
By Braincuber Team
Published on January 21, 2026
Users hate creating new accounts. They forget passwords, abandon sign-up forms, and bounce from apps that require too much friction. Google Sign-In solves this—one click, instant authentication, no password to remember. For developers, it means delegating identity management to Google's infrastructure while keeping your codebase clean.
This tutorial implements Google OAuth 2.0 in React using the official @react-oauth/google library. You'll create OAuth credentials, configure the provider, decode JWT tokens, and display user profiles. By the end, you'll have a working authentication flow ready for production.
What You'll Build: A React app with a Google Sign-In button that authenticates users, decodes their JWT token, and displays their name, email, and profile picture. No backend required—pure client-side OAuth flow.
Why Use Google Sign-In?
Instant Conversion
Users with Google accounts (2.5B+) sign in with one click. No form filling, no email verification, no abandoned registrations.
Enterprise Security
Google handles password storage, 2FA, breach detection, and account recovery. Your app inherits this security without managing it.
No Password Management
Skip password hashing, reset flows, and breach monitoring. Reduce database attack surface and compliance burden.
Verified Profiles
Access verified email, name, and profile photo. Reduce fake accounts and improve user trust.
Implementation Guide
Create OAuth Credentials
Generate a Client ID from Google Cloud Console.
- Go to Google Cloud Console
- Click Select a project → New Project
- Name it (e.g., "MyReactApp") → Create
- Navigate to APIs & Services → Credentials
- Click + Create Credentials → OAuth 2.0 Client IDs
- Configure consent screen (select External, add app name, email)
- Return to Credentials → Create OAuth Client ID
- Select Web application
- Add authorized origin:
http://localhost:3000 - Copy the Client ID (format:
xxxxx.apps.googleusercontent.com)
Production Setup: For deployment, add your production domain (e.g., https://myapp.com) to Authorized JavaScript origins. Never commit Client IDs to Git—use environment variables.
Initialize React Project
Set up a new React app with Vite (faster than CRA).
npm create vite@latest google-auth-app -- --template react cd google-auth-app npm install npm install @react-oauth/google jwt-decode
Packages installed:
@react-oauth/google: Official Google OAuth library for Reactjwt-decode: Decode JWT tokens to extract user info
Configure OAuth Provider
Wrap your app with GoogleOAuthProvider.
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { GoogleOAuthProvider } from '@react-oauth/google';
const CLIENT_ID = 'YOUR_GOOGLE_CLIENT_ID.apps.googleusercontent.com';
ReactDOM.createRoot(document.getElementById('root')).render(
<GoogleOAuthProvider clientId={CLIENT_ID}>
<App />
</GoogleOAuthProvider>
);
Replace YOUR_GOOGLE_CLIENT_ID with the ID from Step 1. For production, use import.meta.env.VITE_GOOGLE_CLIENT_ID.
Build Login Component
Create a button that triggers Google authentication.
import { useState } from 'react';
import { GoogleLogin } from '@react-oauth/google';
import { jwtDecode } from 'jwt-decode';
function App() {
const [user, setUser] = useState(null);
const handleSuccess = (credentialResponse) => {
const decoded = jwtDecode(credentialResponse.credential);
console.log('User Info:', decoded);
setUser(decoded);
};
const handleError = () => {
console.error('Login Failed');
alert('Authentication failed. Please try again.');
};
const handleLogout = () => {
setUser(null);
};
return (
<div style={{
maxWidth: '600px',
margin: '100px auto',
padding: '2rem',
textAlign: 'center',
fontFamily: 'system-ui, sans-serif'
}}>
<h1 style={{ marginBottom: '2rem' }}>Google Sign-In Demo</h1>
{user ? (
<div>
<img
src={user.picture}
alt="Profile"
style={{
borderRadius: '50%',
width: '100px',
height: '100px',
marginBottom: '1rem'
}}
/>
<h2>Welcome, {user.name}!</h2>
<p style={{ color: '#666' }}>{user.email}</p>
<p style={{ fontSize: '0.875rem', color: '#999' }}>
Email verified: {user.email_verified ? 'Yes' : 'No'}
</p>
<button
onClick={handleLogout}
style={{
marginTop: '1rem',
padding: '0.75rem 1.5rem',
background: '#f44336',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
fontSize: '1rem'
}}
>
Sign Out
</button>
</div>
) : (
<GoogleLogin
onSuccess={handleSuccess}
onError={handleError}
theme="filled_blue"
size="large"
text="signin_with"
shape="rectangular"
/>
)}
</div>
);
}
export default App;
Test the Flow
Run the dev server and verify authentication.
npm run dev
Open http://localhost:5173. Click Sign in with Google. The popup will:
- Show Google account selector
- Request permission to access basic profile
- Return a JWT token on approval
- Display user's name, email, and photo
Understanding JWT Tokens
Google returns a JWT (JSON Web Token) containing user data. The jwtDecode() function parses it:
{
"iss": "https://accounts.google.com",
"sub": "110169484474386276334",
"email": "user@example.com",
"email_verified": true,
"name": "John Silva",
"picture": "https://lh3.googleusercontent.com/...",
"given_name": "John",
"family_name": "Silva",
"iat": 1516239022,
"exp": 1516242622
}
Key Fields: sub = unique user ID, email_verified = Google confirmed this email, exp = token expiration. Store sub as primary key in your database, not email (users can change emails).
Production Considerations
Environment Variables
Never hardcode Client IDs. Use .env:
VITE_GOOGLE_CLIENT_ID=xxx.apps.googleusercontent.com
Access via import.meta.env.VITE_GOOGLE_CLIENT_ID
Server-Side Verification
Always verify tokens server-side. Client-side decode is for display only—never trust it for authorization.
// Backend validates token with Google
fetch('https://oauth2.googleapis.com/tokeninfo?id_token=' + token)
Token Storage
Don't store JWT in localStorage (XSS vulnerable). Use HttpOnly cookies server-side or sessionStorage for short-lived tokens.
Conclusion
Google Sign-In reduces authentication complexity to a few lines of code. Users get instant access without passwords. You get verified profiles without managing credentials. The @react-oauth/google library handles OAuth flows, token management, and popup UX. For production, add server-side token verification and proper session management.
Next Steps: Integrate with your backend (send JWT to API). Store user profiles in your database. Add logout functionality. Implement role-based access control. Handle token refresh for long sessions.