Implementando Autenticação com Google Login em Aplicações Web

google-login-nextjs-react-sem-nextauto.md

Nos dias de hoje, a autenticação é um aspecto crucial em quase todas as aplicações web. Oferecer aos usuários a capacidade de fazer login de maneira fácil e segura é fundamental para fornecer uma experiência de usuário positiva. Uma maneira popular de implementar a autenticação é através do Google Login. Neste artigo, vamos explorar como podemos implementar a autenticação com Google Login em nossas aplicações web, utilizando React no frontend e Express no backend.

Por que Google Login?

O Google Login oferece uma forma conveniente e segura para os usuários acessarem as aplicações, sem precisarem se lembrar de mais uma senha. Além disso, é uma opção confiável, uma vez que muitos usuários já têm contas do Google e estão familiarizados com o processo de login.

Frontend com React

No lado do frontend, vamos usar React, uma biblioteca JavaScript popular para construir interfaces de usuário. Para facilitar a integração do Google Login, utilizaremos a biblioteca @react-oauth/google.

import React from 'react';
import { GoogleLogin } from '@react-oauth/google';

const GoogleLoginButton = ({ onSuccess, onFailure }) => {
  const clientId = 'SEU_CLIENT_ID_DO_GOOGLE';

  const handleSuccess = (response) => {
    onSuccess(response);
  };

  const handleFailure = (error) => {
    onFailure(error);
  };

  return (
    <GoogleLogin
      clientId={clientId}
      buttonText="Login com Google"
      onSuccess={handleSuccess}
      onFailure={handleFailure}
    />
  );
};

export default GoogleLoginButton;

Backend com Express

No lado do backend, vamos utilizar o Express, um framework Node.js minimalista e flexível para construir APIs. Para autenticar os usuários com o Google, vamos utilizar a biblioteca google-auth-library.

const express = require('express');
const { OAuth2Client } = require('google-auth-library');

const app = express();

const CLIENT_ID = 'SEU_CLIENT_ID_DO_GOOGLE';
const client = new OAuth2Client(CLIENT_ID);

// Rota de autenticação
app.post('/auth/google', async (req, res) => {
  const { token } = req.body;

  try {
    const ticket = await client.verifyIdToken({
      idToken: token,
      audience: CLIENT_ID,
    });

    const payload = ticket.getPayload();
    // Aqui você pode salvar o usuário no banco de dados ou retorná-lo para o frontend
    return res.status(200).json(payload);
  } catch (error) {
    console.error('Erro ao verificar o token:', error);
    return res.status(401).json({ message: 'Token inválido' });
  }
});

// Inicialização do servidor
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

Backend com Express

import { OAuth2Client } from 'google-auth-library'
import { NextResponse } from 'next/server'

export async function POST(request: Request) {
  const body: any = await request.json()
  const oAuth2Client = new OAuth2Client({
    clientId: process.env.GOOGLE_CLIENT_ID,
    clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    redirectUri: 'http://localhost:3200/api/oauth/google',
  })

  console.log({ GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, ...body })

  try {
    const ticket = await oAuth2Client.verifyIdToken({
      idToken: body.credential,
      audience: GOOGLE_CLIENT_ID,
    })
    const payload = ticket.getPayload()
    return NextResponse.json(payload)
  } catch (error) {
    console.error('Erro ao obter tokens:', error)
    return NextResponse.json({ error: 'Erro ao obter tokens' }, { status: 400 })
  }
}

Conclusão

Implementar a autenticação com Google Login em nossas aplicações web é uma maneira eficaz de fornecer aos usuários uma experiência de login sem atritos. Com o uso do React no frontend e do Express no backend, podemos criar uma solução robusta e segura para autenticar usuários de forma rápida e fácil. Espero que este artigo tenha sido útil para você começar a implementar o Google Login em suas próprias aplicações!

Demo em produção

Acesse ClínicaWork para verificar em produção