Tiago Souza etc-tiago

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 '

[role="navigation"],[role="contentinfo"],.awsui .awsui-app-layout__navigation,.awsui-util-mb-l,.awsui .awsui-util-mb-s,#database-details-tabs,#IDCloudwatch-Legend,.awsui-cards-has-pagination {
    display:none
}

.awsc-pad-bot-above-f-imp {
    padding-top: 0!important;
}

Install teledemic.branch-warnings on vscode
Add on .vscode/settings.json:

{
	"branchwarnings.protectedBranches": ["main"]
}

	const isPDF = (buf) =>
	Buffer.isBuffer(buf) &&
	buf.lastIndexOf('%PDF-') === 0 &&
	buf.lastIndexOf('%%EOF') > -1;

	#!/bin/sh
	RED="\033[1;31m"
	GREEN="\033[1;32m"
	NC="\033[0m"
	linter_exit_code=1
	staged_js_files=$(git diff --cached --diff-filter=d --name-only \| grep .js$)
	./node_modules/.bin/eslint $staged_js_files --quiet --fix
	linter_exit_code=$?
	git add -f $staged_js_files
	if [ $linter_exit_code -ne 0 ]

	const fetch = require("isomorphic-unfetch");

	fetch("https://api.cloudflare.com/client/v4/zones/95bf6374709dc5a530c1e74476b580bc/purge_cache", {
	method: "POST",
	headers: {
	"X-Auth-Email": "YOUR_EMAIL_DASHBOARD_HERE",
	Authorization: "Bearer YOUR_TOKEN_HERE",
	"Content-Type": "application/json",
	},
	body: JSON.stringify({ purge_everything: true }),

	const browserOpen = async (browser, url, headless = true) => {
	const browserRef = await chromium.launch({ headless: false });
	page = await browserRef.newPage();
	await page.goto(url);

	const element = async (selector) => await page.$(selector);
	const click = async (selector) => await page.click(selector);
	const inputFill = async (selector) => await page.click(selector);
	const waitTimeout = async (milliseconds) => await page.waitForTimeout(milliseconds);
	const countElement = async (selector) => await page.$$eval(selector, (el) => el.length);

	var ID = function () {
	// Math.random should be unique because of its seeding algorithm.
	// Convert it to base 36 (numbers + letters), and grab the first 9 characters
	// after the decimal.
	const start = Math.random().toString(36).substr(2, 2);
	const end = Math.random().toString(36).substr(2, 2);
	return '_' + start + end;
	};

	docker exec mongo-docker sh -c 'mongodump -u root -p etc --archive --gzip' > ./mongo.db
	docker exec -i mongo-docker-tests sh -c 'mongorestore -u root -p etc --gzip' < ./mongo.db

	import { readFileSync } from 'fs';
	import path from 'path';

	type Config = {
	envPath: string;
	encoding: BufferEncoding;
	debug: boolean;
	};

	export default ({ envPath = path.resolve(process.cwd(), '.env.json'), encoding = 'utf8', debug = false }: Config) => {