{"_id":"o-auth-google-dbc-1","_rev":"7-de05e70133403c0d5ba701b099c5345f","name":"o-auth-google-dbc-1","dist-tags":{"latest":"1.0.7"},"versions":{"1.0.0":{"name":"o-auth-google-dbc-1","version":"1.0.0","keywords":[],"author":"","license":"ISC","_id":"o-auth-google-dbc-1@1.0.0","maintainers":[{"name":"jhonatanrodrigues","email":"jhonatan07tr@gmail.com"}],"dist":{"shasum":"870df3400259a958fd50af0b7150616b7f4d50b0","tarball":"https://registry.npmjs.org/o-auth-google-dbc-1/-/o-auth-google-dbc-1-1.0.0.tgz","fileCount":4,"integrity":"sha512-al10bLm3Q+deXD4VINUWT7tK1ijsH9Ur/EWzGvfOPuAURN3CkKZulgnKcmAGb3TiidEtDJDJRF3/Gaqm8faoDA==","signatures":[{"sig":"MEUCICzVej3VK7oD3R1jaLS0qaG+v2RR58yqqsGE7Bo3cgclAiEAkns4DpJXe2EbzT3hICol0TU66g6pMuCpUyzcv23491w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":10628},"main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"jhonatanrodrigues","email":"jhonatan07tr@gmail.com"},"_npmVersion":"10.7.0","description":"## Introdução Esta documentação fornece instruções para integrar o login do Google ao seu sistema, permitindo que os usuários façam login ou se cadastrem com suas contas do Google. Usamos a biblioteca `@react-oauth/google` no React para realizar a autenti","directories":{},"_nodeVersion":"20.14.0","dependencies":{"next":"14.2.14","react":"^18","react-dom":"^18","@react-oauth/google":"^0.12.1"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5","@types/node":"^20","@types/react":"^18","@types/react-dom":"^18"},"_npmOperationalInternal":{"tmp":"tmp/o-auth-google-dbc-1_1.0.0_1728909409752_0.685770768155495","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"o-auth-google-dbc-1","version":"1.0.1","keywords":[],"author":"","license":"ISC","_id":"o-auth-google-dbc-1@1.0.1","maintainers":[{"name":"jhonatanrodrigues","email":"jhonatan07tr@gmail.com"}],"dist":{"shasum":"f1eaf7dcf8522e559432338684a228a2f74f885c","tarball":"https://registry.npmjs.org/o-auth-google-dbc-1/-/o-auth-google-dbc-1-1.0.1.tgz","fileCount":4,"integrity":"sha512-oI+KpDwvNWM9GeEt3HAk+JZw2/hVJGwQKJHzKiepnxolIrE+m9ru1UM54fVCF85J20azdX2qd7wk/qD+u794AQ==","signatures":[{"sig":"MEUCIDzWYMeedGVcxydUZOgvCLjLRZqVGQ1PCG196zCSRje3AiEAsWG+Sf1GJ7MCZqxsaRdE2xTQ+FW33/izWi78Xfn78W8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":10628},"main":"index.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"jhonatanrodrigues","email":"jhonatan07tr@gmail.com"},"_npmVersion":"10.7.0","description":"## Introdução Esta documentação fornece instruções para integrar o login do Google ao seu sistema, permitindo que os usuários façam login ou se cadastrem com suas contas do Google. Usamos a biblioteca `@react-oauth/google` no React para realizar a autenti","directories":{},"_nodeVersion":"20.14.0","dependencies":{"next":"14.2.14","react":"^18","react-dom":"^18","@react-oauth/google":"^0.12.1"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5","@types/node":"^20","@types/react":"^18","@types/react-dom":"^18"},"_npmOperationalInternal":{"tmp":"tmp/o-auth-google-dbc-1_1.0.1_1728910856515_0.005640770049080368","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"o-auth-google-dbc-1","version":"1.0.2","keywords":[],"author":"","license":"ISC","_id":"o-auth-google-dbc-1@1.0.2","maintainers":[{"name":"jhonatanrodrigues","email":"jhonatan07tr@gmail.com"}],"dist":{"shasum":"105fbdbeccc9756ee3736b3becdf4990f19b9759","tarball":"https://registry.npmjs.org/o-auth-google-dbc-1/-/o-auth-google-dbc-1-1.0.2.tgz","fileCount":7,"integrity":"sha512-bkDjztT+Qskz33Fh2aINzx4jL56qqdJCYW6Z7RLrg+8kts9ue5Tjq0kNk+oVNH2/suO2gQ7tFRDtIy/nqnpwkg==","signatures":[{"sig":"MEQCIEAC1gK5yXUuzOmQQYHcIbdjJlyejOyYhxOS7ZRq0IJWAiBqk9xxGOObrM4pILQVYgUym3X8HQRXPw4Yi6t4ss/B/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12372},"main":"index.ts","scripts":{"build":"tsc","prepublishOnly":"npm run build"},"_npmUser":{"name":"jhonatanrodrigues","email":"jhonatan07tr@gmail.com"},"_npmVersion":"10.7.0","description":"## Introdução Esta documentação fornece instruções para integrar o login do Google ao seu sistema, permitindo que os usuários façam login ou se cadastrem com suas contas do Google. Usamos a biblioteca `@react-oauth/google` no React para realizar a autenti","directories":{},"_nodeVersion":"20.14.0","dependencies":{"next":"14.2.14","react":"^18","react-dom":"^18","@react-oauth/google":"^0.12.1"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.6.3","@types/node":"^20","@types/react":"^18","@types/react-dom":"^18"},"_npmOperationalInternal":{"tmp":"tmp/o-auth-google-dbc-1_1.0.2_1728912307354_0.02300187686657318","host":"s3://npm-registry-packages"}},"1.0.3":{"name":"o-auth-google-dbc-1","version":"1.0.3","keywords":[],"author":"","license":"ISC","_id":"o-auth-google-dbc-1@1.0.3","maintainers":[{"name":"jhonatanrodrigues","email":"jhonatan07tr@gmail.com"}],"dist":{"shasum":"ededb49b973292fa6552c61fbbabad0a672e4cd1","tarball":"https://registry.npmjs.org/o-auth-google-dbc-1/-/o-auth-google-dbc-1-1.0.3.tgz","fileCount":4,"integrity":"sha512-33EGYf+J0wOUw5hOI1g0c02uwazQTtagtp2fSYI86NBIzJxSx3ZTynWdG4hLG4a9A5UmS8SKRF9TeR6zFnfJiA==","signatures":[{"sig":"MEUCIB7QsaXpX2GY8OdTaiBpb+ybpkgP+Zvot8KTH+behsttAiEAsaz9zFiKKnoLCbvUFSmrMb1IC0jWUQtuf/mB0P6epLA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":10627},"main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"jhonatanrodrigues","email":"jhonatan07tr@gmail.com"},"_npmVersion":"10.7.0","description":"## Introdução Esta documentação fornece instruções para integrar o login do Google ao seu sistema, permitindo que os usuários façam login ou se cadastrem com suas contas do Google. Usamos a biblioteca `@react-oauth/google` no React para realizar a autenti","directories":{},"_nodeVersion":"20.14.0","dependencies":{"next":"14.2.14","react":"^18","react-dom":"^18","@react-oauth/google":"^0.12.1"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5","@types/node":"^20","@types/react":"^18","@types/react-dom":"^18"},"_npmOperationalInternal":{"tmp":"tmp/o-auth-google-dbc-1_1.0.3_1728914897459_0.8249759985694265","host":"s3://npm-registry-packages"}},"1.0.4":{"name":"o-auth-google-dbc-1","version":"1.0.4","keywords":[],"author":"","license":"ISC","_id":"o-auth-google-dbc-1@1.0.4","maintainers":[{"name":"jhonatanrodrigues","email":"jhonatan07tr@gmail.com"}],"dist":{"shasum":"7ab6749a429851ef29c6d71195949be4c148aaf8","tarball":"https://registry.npmjs.org/o-auth-google-dbc-1/-/o-auth-google-dbc-1-1.0.4.tgz","fileCount":4,"integrity":"sha512-XaXXKtvVZcSIj60lKLDsEM3FfQRzn/xo9GS02fkuLUx7q6CgwV18zSLFBVj5ZV4XUcZCez0mcbGPILLEG+u7Uw==","signatures":[{"sig":"MEYCIQDOLQp8je2rLOxTdqLUzQ2gBVncsdGF2QHWEyAj/vzTywIhAIh9tgQWDC/h0lDKNuBb8RAeB5bNcKh/22zUfJSXsBHu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":10627},"main":"index.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"jhonatanrodrigues","email":"jhonatan07tr@gmail.com"},"_npmVersion":"10.7.0","description":"## Introdução Esta documentação fornece instruções para integrar o login do Google ao seu sistema, permitindo que os usuários façam login ou se cadastrem com suas contas do Google. Usamos a biblioteca `@react-oauth/google` no React para realizar a autenti","directories":{},"_nodeVersion":"20.14.0","dependencies":{"next":"14.2.14","react":"^18","react-dom":"^18","@react-oauth/google":"^0.12.1"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5","@types/node":"^20","@types/react":"^18","@types/react-dom":"^18"},"_npmOperationalInternal":{"tmp":"tmp/o-auth-google-dbc-1_1.0.4_1728914915727_0.49526947148672984","host":"s3://npm-registry-packages"}},"1.0.5":{"name":"o-auth-google-dbc-1","version":"1.0.5","keywords":[],"author":"","license":"ISC","_id":"o-auth-google-dbc-1@1.0.5","maintainers":[{"name":"jhonatanrodrigues","email":"jhonatan07tr@gmail.com"}],"dist":{"shasum":"fd7a1a2425b37c6660de8207c04d546f582ca9e4","tarball":"https://registry.npmjs.org/o-auth-google-dbc-1/-/o-auth-google-dbc-1-1.0.5.tgz","fileCount":5,"integrity":"sha512-/S9c8QP1mp8BLYrwAphpsDSaivLdf/42AWxAdfumdvQuUW2l/z7sqG9ce+PBWifTohP0vKgwBWhgFkbzH9Bo+w==","signatures":[{"sig":"MEUCIQDnVry4mYbgqk2X+gQXpAkvi30gXWvu33hInC/l/UyycgIgR69FirsJFPANkgdfbGmpRzgyo78cM8S8TZoNjV5nIuU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":10841},"main":"index.ts","types":"./index.d.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"jhonatanrodrigues","email":"jhonatan07tr@gmail.com"},"_npmVersion":"10.7.0","description":"## Introdução Esta documentação fornece instruções para integrar o login do Google ao seu sistema, permitindo que os usuários façam login ou se cadastrem com suas contas do Google. Usamos a biblioteca `@react-oauth/google` no React para realizar a autenti","directories":{},"_nodeVersion":"20.14.0","dependencies":{"next":"14.2.14","react":"^18","react-dom":"^18","@react-oauth/google":"^0.12.1"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5","@types/node":"^20","@types/react":"^18","@types/react-dom":"^18"},"_npmOperationalInternal":{"tmp":"tmp/o-auth-google-dbc-1_1.0.5_1728915893123_0.426574887169757","host":"s3://npm-registry-packages"}},"1.0.6":{"name":"o-auth-google-dbc-1","version":"1.0.6","keywords":[],"author":"","license":"ISC","_id":"o-auth-google-dbc-1@1.0.6","maintainers":[{"name":"jhonatanrodrigues","email":"jhonatan07tr@gmail.com"}],"dist":{"shasum":"7e568da5f94d29bb01014b127c1fde887640c9b6","tarball":"https://registry.npmjs.org/o-auth-google-dbc-1/-/o-auth-google-dbc-1-1.0.6.tgz","fileCount":5,"integrity":"sha512-piHVvKuqD1blx4Pi+AEpl3MeFg6/8JJtXLaBvHqS4zlJ0SAd1PsA93TTDaiva8JU196aFMrmJIbfrwpMj+Lulw==","signatures":[{"sig":"MEUCIQC2yunB1RODPUdOwefKq8+5ReoX7Dq59yKRdwbDoHVJHAIgPAIOntlKImDuTfROSf/26MVZzyWn9q3kFEFCMRKdY6A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":10871},"main":"index.ts","types":"./index.d.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"jhonatanrodrigues","email":"jhonatan07tr@gmail.com"},"_npmVersion":"10.7.0","description":"## Introdução Esta documentação fornece instruções para integrar o login do Google ao seu sistema, permitindo que os usuários façam login ou se cadastrem com suas contas do Google. Usamos a biblioteca `@react-oauth/google` no React para realizar a autenti","directories":{},"_nodeVersion":"20.14.0","dependencies":{"next":"14.2.14","react":"^18","react-dom":"^18","@react-oauth/google":"^0.12.1"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5","@types/node":"^20","@types/react":"^18","@types/react-dom":"^18"},"_npmOperationalInternal":{"tmp":"tmp/o-auth-google-dbc-1_1.0.6_1728916302011_0.4928813913370427","host":"s3://npm-registry-packages"}},"1.0.7":{"name":"o-auth-google-dbc-1","version":"1.0.7","description":"## Introdução Esta documentação fornece instruções para integrar o login do Google ao seu sistema, permitindo que os usuários façam login ou se cadastrem com suas contas do Google. Usamos a biblioteca `@react-oauth/google` no React para realizar a autenti","main":"index.ts","dependencies":{"@react-oauth/google":"^0.12.1","next":"14.2.14","react":"^18","react-dom":"^18"},"devDependencies":{"@types/node":"^20","@types/react":"^18","@types/react-dom":"^18","typescript":"^5"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":[],"author":"","license":"ISC","_id":"o-auth-google-dbc-1@1.0.7","types":"./index.d.ts","_nodeVersion":"20.14.0","_npmVersion":"10.7.0","dist":{"integrity":"sha512-HYLzfHkRsXIbBEn/3qEwQuf0bQ6hyX4R97hv0Y4jfJ/UHoJiFqtMw6KVBA+HMs5qKLjYy43sBSjVdfdxFK1Iwg==","shasum":"7c15e0a7856a63817c7fb651c3a27fb989afe3b4","tarball":"https://registry.npmjs.org/o-auth-google-dbc-1/-/o-auth-google-dbc-1-1.0.7.tgz","fileCount":5,"unpackedSize":10867,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC7BEBFvq9v/f9MyX3EvujmWRP5EpLcfL942j2wIQnkUAiEA2SdBpLj+DTgW51DTu/qBvl5JmFLlbhxNH92HszLMeN8="}]},"_npmUser":{"name":"jhonatanrodrigues","email":"jhonatan07tr@gmail.com"},"directories":{},"maintainers":[{"name":"jhonatanrodrigues","email":"jhonatan07tr@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/o-auth-google-dbc-1_1.0.7_1728916450716_0.9505622561919973"},"_hasShrinkwrap":false}},"time":{"created":"2024-10-14T12:36:49.752Z","modified":"2024-10-14T14:34:11.121Z","1.0.0":"2024-10-14T12:36:49.941Z","1.0.1":"2024-10-14T13:00:56.733Z","1.0.2":"2024-10-14T13:25:07.540Z","1.0.3":"2024-10-14T14:08:17.725Z","1.0.4":"2024-10-14T14:08:35.948Z","1.0.5":"2024-10-14T14:24:53.326Z","1.0.6":"2024-10-14T14:31:42.219Z","1.0.7":"2024-10-14T14:34:10.930Z"},"license":"ISC","keywords":[],"description":"## Introdução Esta documentação fornece instruções para integrar o login do Google ao seu sistema, permitindo que os usuários façam login ou se cadastrem com suas contas do Google. Usamos a biblioteca `@react-oauth/google` no React para realizar a autenti","maintainers":[{"name":"jhonatanrodrigues","email":"jhonatan07tr@gmail.com"}],"readme":"# Como Usar a API de Login do Google para Autenticação e Cadastro\n\n## Introdução\nEsta documentação fornece instruções para integrar o login do Google ao seu sistema, permitindo que os usuários façam login ou se cadastrem com suas contas do Google. Usamos a biblioteca `@react-oauth/google` no React para realizar a autenticação.\n\n## Requisitos\nAntes de começar, você precisará:\n- Uma conta no Google Cloud Console.\n- Um Client ID da API OAuth 2.0 do Google.\n- Um projeto React configurado.\n\n## Passos para Obter o Client ID\n1. Acesse o [Google Cloud Console](https://console.cloud.google.com/).\n2. Crie um novo projeto ou selecione um projeto existente.\n3. No menu, vá para **APIs e Serviços > Credenciais**.\n4. Clique em **Criar credencial > ID do cliente OAuth 2.0**.\n5. Configure a tela de consentimento OAuth se ainda não tiver feito isso.\n6. No tipo de aplicativo, selecione **Aplicativo da Web**.\n7. Defina as **URIs de redirecionamento autorizados** para o seu ambiente (por exemplo, `http://localhost:3000`).\n8. Salve e copie o **Client ID** gerado.\n\n## Instalação da Biblioteca\nInstale a biblioteca `@react-oauth/google` no seu projeto React:\n\n\nnpm install @react-oauth/google\n\nCaso não saiba a versão exata, você pode consultar o npm com o seguinte comando para verificar as versões disponíveis:\nnpm view @react-oauth/google versions\n\n\nImplementação do Componente de Login\n\nPasso 1: Utilizar o Componente de Login com o Google\nVocê não precisa criar o componente manualmente, pois já disponibilizamos uma versão pronta do componente no npm. O exemplo abaixo é apenas ilustrativo, mostrando como o componente foi implementado e como você pode utilizá-lo.\n\nBasta instalar a biblioteca publicada no npm e utilizá-la diretamente no seu projeto.\n\nExemplo do componente de login com Google:\n\n``` TSX\nimport React from 'react';\nimport { GoogleOAuthProvider, GoogleLogin, CredentialResponse } from '@react-oauth/google';\n\ninterface GoogleLoginComponentProps {\n  clientId: string;\n  onSuccess: (response: CredentialResponse) => void;\n  onError?: () => void;\n}\n\nconst GoogleLoginComponent: React.FC<GoogleLoginComponentProps> = ({ clientId, onSuccess, onError }) => {\n  return (\n    <GoogleOAuthProvider clientId={clientId}>\n      <GoogleLogin\n        onSuccess={(response) => onSuccess(response)}\n        onError={() => {\n          if (onError) {\n            onError();\n          } else {\n            console.error('Erro ao fazer login com o Google');\n          }\n        }}\n      />\n    </GoogleOAuthProvider>\n  );\n};\n\nexport default GoogleLoginComponent;\n```\n\n\nPasso 2: Utilizando o Componente no App\nAgora, no componente principal (ou onde for necessário), você pode usar este componente para lidar com o login.\n\n```TSX\nimport React from 'react';\nimport GoogleLoginComponent from './GoogleLoginComponent';\n\nconst App: React.FC = () => {\n  const handleSuccess = (response: any) => {\n    console.log('Login com sucesso:', response);\n    // Aqui você pode tratar o token e as informações do usuário\n  };\n\n  const handleError = () => {\n    console.error('Erro no login com o Google');\n  };\n\n  return (\n    <div>\n      <h1>Login com Google</h1>\n      <GoogleLoginComponent\n        clientId=\"SUA_GOOGLE_CLIENT_ID\"\n        onSuccess={handleSuccess}\n        onError={handleError}\n      />\n    </div>\n  );\n};\n\nexport default App;\n```\n\n\nPasso 3: Tratamento do Token\nApós o login bem-sucedido, o Google retorna um token JWT. Você pode usá-lo para autenticar o usuário no seu sistema, enviando-o ao seu servidor para validação e/ou criação de conta.\n\n```TSX\nconst handleSuccess = (response: any) => {\n  const token = response.credential;\n  console.log('Token JWT recebido:', token);\n\n  // Envie o token para o seu backend para autenticar ou registrar o usuário\n  fetch('https://seuservidor.com/api/login-google', {\n    method: 'POST',\n    headers: {\n      'Content-Type': 'application/json',\n    },\n    body: JSON.stringify({ token }),\n  })\n    .then(res => res.json())\n    .then(data => {\n      console.log('Usuário autenticado ou registrado com sucesso:', data);\n    })\n    .catch(error => {\n      console.error('Erro ao autenticar:', error);\n    });\n};\n```\n\n\nFluxo de Autenticação\n1. O usuário clica no botão de login do Google.\n2. O Google autentica o usuário e retorna um token JWT.\n3. O token JWT é enviado para o seu backend.\n4. O backend valida o token e retorna as informações do usuário ou registra o usuário se for um novo cadastro.\nSegurança\nValidação do Token\nNo backend, é fundamental validar o token JWT recebido. Isso pode ser feito usando bibliotecas como google-auth-library no Node.js. Abaixo está um exemplo de como fazer isso:\n\n```TSX\nconst { OAuth2Client } = require('google-auth-library');\nconst client = new OAuth2Client(CLIENT_ID);\n\nasync function verify(token) {\n  const ticket = await client.verifyIdToken({\n    idToken: token,\n    audience: CLIENT_ID,  // Especifique o CLIENT_ID do seu projeto\n  });\n  const payload = ticket.getPayload();\n  return payload;\n}\n```\n\n\nApós validar o token, você pode usar as informações do payload para autenticar o usuário em sua aplicação.\n\nConclusão\nEssa integração permite que você adicione uma forma simples e segura de autenticação e registro de usuários usando o Google. Lembre-se de sempre validar o token no backend para garantir a segurança do processo de autenticação.\n\nReferências\nGoogle Identity Platform\nOAuth 2.0 Documentation\n@react-oauth/google\n\n### Um breve exemplo usando o login do google em um formulario\nPasso 1: Criar o Componente do Formulário de Login\n```TSX\nimport React, { useState } from 'react';\nimport { GoogleOAuthProvider, GoogleLogin, CredentialResponse } from '@react-oauth/google';\n\nconst LoginForm: React.FC = () => {\n  const [email, setEmail] = useState('');\n  const [password, setPassword] = useState('');\n\n  // Função para tratar o sucesso do login via Google\n  const handleGoogleSuccess = (response: CredentialResponse) => {\n    const token = response.credential;\n    console.log('Login com Google bem-sucedido. Token JWT:', token);\n\n    // Aqui você enviaria o token para o backend para autenticação\n    fetch('https://seuservidor.com/api/login-google', {\n      method: 'POST',\n      headers: {\n        'Content-Type': 'application/json',\n      },\n      body: JSON.stringify({ token }),\n    })\n    .then(res => res.json())\n    .then(data => {\n      console.log('Usuário autenticado com sucesso via Google:', data);\n    })\n    .catch(error => {\n      console.error('Erro ao autenticar com o Google:', error);\n    });\n  };\n\n  const handleGoogleError = () => {\n    console.error('Erro no login com Google');\n  };\n\n  // Função para tratar o login tradicional\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n    console.log('Tentando login com email e senha:', { email, password });\n\n    // Envie os dados para o backend para autenticação\n    fetch('https://seuservidor.com/api/login', {\n      method: 'POST',\n      headers: {\n        'Content-Type': 'application/json',\n      },\n      body: JSON.stringify({ email, password }),\n    })\n    .then(res => res.json())\n    .then(data => {\n      console.log('Usuário autenticado com sucesso:', data);\n    })\n    .catch(error => {\n      console.error('Erro ao autenticar:', error);\n    });\n  };\n\n  return (\n    <GoogleOAuthProvider clientId=\"SUA_GOOGLE_CLIENT_ID\">\n      <div>\n        <h2>Login</h2>\n        <form onSubmit={handleSubmit}>\n          <div>\n            <label>Email:</label>\n            <input\n              type=\"email\"\n              value={email}\n              onChange={(e) => setEmail(e.target.value)}\n              required\n            />\n          </div>\n          <div>\n            <label>Senha:</label>\n            <input\n              type=\"password\"\n              value={password}\n              onChange={(e) => setPassword(e.target.value)}\n              required\n            />\n          </div>\n          <button type=\"submit\">Login</button>\n        </form>\n\n        <h3>Ou faça login com o Google</h3>\n        <GoogleLogin\n          onSuccess={handleGoogleSuccess}\n          onError={handleGoogleError}\n        />\n      </div>\n    </GoogleOAuthProvider>\n  );\n};\n\nexport default LoginForm;\n```\n\nPasso 2: Utilizar o Formulário no App\nAgora, basta usar o LoginForm no seu componente principal:\n\n```TSX\nimport React from 'react';\nimport LoginForm from './LoginForm';\n\nconst App: React.FC = () => {\n  return (\n    <div>\n      <h1>Sistema de Login</h1>\n      <LoginForm />\n    </div>\n  );\n};\n\nexport default App;\n```\n\n\nConclusão:\n\nEste guia fornece um exemplo de como implementar autenticação com o Google usando Next.js e a biblioteca @react-oauth/google. Certifique-se de sempre validar o token no backend para garantir a segurança do processo de autenticação.\n\nSe estiver utilizando React puro ou outro framework, basta remover a diretiva 'use client' e ajustar a implementação para o seu ambiente.","readmeFilename":"README.md"}