Como fazer login social com Google no React e Node.js (OAuth 2.0 na prática)

“Login com Google” é uma das features mais requisitadas em aplicativos modernos — e uma das que mais intimidam desenvolvedores que nunca implementaram OAuth. A boa notícia: em 2026, com as bibliotecas certas, a implementação é muito mais simples do que parece. Este tutorial implementa autenticação completa com Google, utilizando a biblioteca Passport.js no backend Node.js e @react-oauth/google no frontend React.

Configurando credenciais no Google Cloud Console

Antes de qualquer código, você precisa criar credenciais OAuth 2.0 no Google:

1. Acesse console.cloud.google.com e crie um projeto
2. Navegue para APIs e Serviços → Credenciais
3. Clique em “Criar credenciais” → “ID do cliente OAuth 2.0”
4. Tipo: Aplicativo da web
5. Origens autorizadas em JavaScript: http://localhost:5173
6. URIs de redirecionamento autorizados: http://localhost:3000/auth/google/callback

Você receberá um Client ID e um Client Secret — salve no arquivo .env.

Backend Node.js com Passport.js

npm install express passport passport-google-oauth20 express-session dotenv jsonwebtoken

// app.js
require('dotenv').config()
const express = require('express')
const passport = require('passport')
const GoogleStrategy = require('passport-google-oauth20').Strategy
const jwt = require('jsonwebtoken')
const cors = require('cors')

const app = express()
app.use(cors({ origin: 'http://localhost:5173', credentials: true }))

passport.use(new GoogleStrategy({
  clientID: process.env.GOOGLE_CLIENT_ID,
  clientSecret: process.env.GOOGLE_CLIENT_SECRET,
  callbackURL: '/auth/google/callback'
}, async (accessToken, refreshToken, profile, done) => {
  // Aqui você salvaria/buscaria o usuário no banco
  const usuario = {
    googleId: profile.id,
    nome: profile.displayName,
    email: profile.emails[0].value,
    foto: profile.photos[0].value,
  }
  return done(null, usuario)
}))

app.get('/auth/google',
  passport.authenticate('google', { scope: ['profile', 'email'], session: false })
)

app.get('/auth/google/callback',
  passport.authenticate('google', { session: false, failureRedirect: '/' }),
  (req, res) => {
    // Gera JWT com dados do usuário
    const token = jwt.sign(req.user, process.env.JWT_SECRET, { expiresIn: '7d' })
    // Redireciona para o frontend com o token
    res.redirect(`http://localhost:5173/auth-callback?token=${token}`)
  }
)

app.get('/api/me', (req, res) => {
  const authHeader = req.headers.authorization
  if (!authHeader) return res.status(401).json({ erro: 'Não autorizado' })
  try {
    const token = authHeader.replace('Bearer ', '')
    const usuario = jwt.verify(token, process.env.JWT_SECRET)
    res.json(usuario)
  } catch {
    res.status(401).json({ erro: 'Token inválido' })
  }
})

app.listen(3000)

Frontend React

// Botão de login — redireciona para o fluxo OAuth
function BotaoLoginGoogle() {
  const handleLogin = () => {
    window.location.href = 'http://localhost:3000/auth/google'
  }
  return <button onClick={handleLogin}>Entrar com Google</button>
}

// Página de callback — salva o token e redireciona
import { useEffect } from 'react'
import { useNavigate, useSearchParams } from 'react-router-dom'

function AuthCallback() {
  const [params] = useSearchParams()
  const navigate = useNavigate()

  useEffect(() => {
    const token = params.get('token')
    if (token) {
      localStorage.setItem('token', token)
      navigate('/dashboard')
    }
  }, [])

  return <p>Autenticando...</p>
}

Protegendo rotas autenticadas

Para buscar dados do usuário logado, inclua o token em todas as requisições autenticadas:

const token = localStorage.getItem('token')

const res = await fetch('http://localhost:3000/api/me', {
  headers: { Authorization: `Bearer ${token}` }
})
const usuario = await res.json()

Com essa implementação, você tem autenticação OAuth completa com Google, sem armazenar senhas, com JWT para sessões stateless. O próximo passo natural é salvar os dados do usuário em um banco de dados real (PostgreSQL ou MongoDB) na função callback do Passport, e adicionar outros provedores (GitHub, Facebook) como estratégias adicionais do Passport — o padrão é o mesmo para todos.