Implementar oAuth 2.0 da google

[fabiobrasileiroo]

💰 Custo

• Gratuito: A autenticação via Google OAuth 2.0 é gratuita para a maioria dos casos de uso.

• Verificação de Aplicativo: Se sua aplicação solicitar escopos sensíveis ou for acessada por muitos usuários, o Google pode exigir uma verificação adicional, que pode incluir auditorias de segurança.

---

⚙️ Implementação no Next.js

1. Obter Credenciais OAuth 2.0

• Acesse o [Google Cloud Console](https://console.cloud.google.com/).

• Crie um novo projeto ou selecione um existente.

• Vá em APIs e serviços > Credenciais.

• Clique em Criar credenciais > ID do cliente OAuth.

• Escolha Aplicativo da Web como tipo de aplicativo.

• Configure os URIs autorizados:

  • Origem JavaScript autorizada: http://localhost:3000

  • URI de redirecionamento autorizado: http://localhost:3000/api/auth/callback/google

• Após salvar, você receberá um Client ID e um Client Secret.

2. Configurar Variáveis de Ambiente

No arquivo .env.local do seu projeto Next.js, adicione:

GOOGLE_CLIENT_ID=seu_client_id
GOOGLE_CLIENT_SECRET=seu_client_secret

3. Criar Rota de Autenticação

Em pages/api/auth/google.js:

export default function handler(req, res) {
  const redirectUri = 'http://localhost:3000/api/auth/callback/google';
  const scope = 'https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email';
  const authUrl = `https://accounts.google.com/o/oauth2/v2/auth?response_type=code&client_id=${process.env.GOOGLE_CLIENT_ID}&redirect_uri=${redirectUri}&scope=${encodeURIComponent(scope)}&access_type=offline&prompt=consent`;
  res.redirect(authUrl);
}

4. Criar Rota de Callback

Em pages/api/auth/callback/google.js:

import axios from 'axios';

export default async function handler(req, res) {
  const code = req.query.code;
  const redirectUri = 'http://localhost:3000/api/auth/callback/google';

  try {
    // Trocar o código de autorização por tokens
    const tokenResponse = await axios.post('https://oauth2.googleapis.com/token', {
      code,
      client_id: process.env.GOOGLE_CLIENT_ID,
      client_secret: process.env.GOOGLE_CLIENT_SECRET,
      redirect_uri: redirectUri,
      grant_type: 'authorization_code',
    });

    const { access_token } = tokenResponse.data;

    // Obter informações do usuário
    const userResponse = await axios.get('https://www.googleapis.com/oauth2/v2/userinfo', {
      headers: {
        Authorization: `Bearer ${access_token}`,
      },
    });

    const user = userResponse.data;

    // Aqui, você pode criar ou autenticar o usuário no seu sistema
    // Por exemplo, criar uma sessão, gerar um JWT, etc.

    res.status(200).json({ user });
  } catch (error) {
    res.status(500).json({ error: 'Erro ao autenticar com o Google' });
  }
}

5. Adicionar Botão de Login

No seu componente de login:
Implementing Google Authentication in Next.js: A Comprehensive Guide | by Rasim Çetin | Medium

import React from 'react';

export default function Login() {
  return (
    <div>
      <h1>Login</h1>
      <a href="/api/auth/google">
        <button>Entrar com Google</button>
      </a>
    </div>
  );
}

---

🔐 Considerações de Segurança

• Armazenamento Seguro: Armazene tokens de forma segura, utilizando práticas recomendadas de segurança, como criptografia em repouso e em trânsito.

• Verificação de Aplicativo: Se sua aplicação solicitar escopos sensíveis ou for acessada por muitos usuários, o Google pode exigir uma verificação adicional, que pode incluir auditorias de segurança.

• Limites de Tokens: O Google impõe um limite de 50 tokens de atualização ativos por usuário por cliente OAuth. Se esse limite for excedido, o token mais antigo será revogado automaticamente.

• Verificar se um usuário cadastrado: Verificar se o usuário já estar cadastrado sem ser pelo provider do google. E fazer um vinculo.