O que é um ID de cliente?
Um ID de cliente do Google (ou ClientID) é um identificador exclusivo atribuído a um aplicativo/usuário. É usado para autenticar clientes e servidores usando OAuth (Auth 2.0).

Para obter um ID de cliente do Google, abra o Console do Google Cloud e inicie um novo projeto. Para este tutorial, nomearemos o projeto como "GoogleReact Sign-In", mas você pode escolher qualquer nome de sua preferência.

Depois de criar o projeto, navegue até a seção Credenciais no menu API e Serviços. Aqui, você encontrará um painel onde o nome do seu projeto atual deve estar visível no canto superior esquerdo, próximo ao logotipo do Google Cloud.

Agora, antes de criar suas credenciais, vamos para a tela de consentimento do OAuth para configurar a tela de consentimento.

Configure uma tela de consentimento de login do Google.

A tela de consentimento, como o nome indica, é uma página que exige que o usuário faça login por meio de uma biblioteca externa ou de terceiros. Este pop-up informa ao usuário que ele está saindo da página raiz do seu aplicativo e concedendo acesso a uma página de terceiros. exemplo de tela de consentimento de login do Google mostrado abaixo

Simplificando, quando você utiliza o OAuth 2.0 para autorização, seu aplicativo solicita que o usuário autorize um ou mais escopos de acesso usando sua conta do Google. Os escopos de acesso incluem quaisquer informações ou atividades que seu aplicativo esteja autorizado a acessar ou realizar na conta do usuário.

Para configurar a página de consentimento do Google para seu aplicativo React, navegue até a guia "Tela de consentimento do OAuth" no menu esquerdo do Console do Google Cloud.

Uma vez nesta guia, selecione “externo”, a única opção permitida, a menos que você esteja usando uma empresa ou aplicativo verificado pelo Google, e clique no botão “Criar” para gerar sua tela de consentimento.

Em seguida, na mesma página, forneça um nome para sua inscrição e um endereço de e-mail para receber atualizações sobre o status do projeto.

Você pode deixar as necessidades e opções restantes em branco por enquanto, mas se tiver os detalhes disponíveis, poderá adicioná-los durante esta fase.

Por enquanto, você pode pular as seções restantes de registro. Basta rolar para baixo em cada seção, clicar em Salvar e retornar ao painel quando concluído.

Depois de projetar a página de consentimento do OAuth, devemos publicar o aplicativo antes de experimentá-lo ou garantir que a autenticação funcione. Por padrão, seu estado é “Teste” e após a publicação, ele é movido para produção.

Depois de marcar seu aplicativo como "Em produção", ele ficará acessível a todos com uma Conta do Google.

Gere seu ID de cliente web.

Agora voltaremos à opção de Credencial para acessar a página onde você pode criar seu ID de cliente web.
Na tela, selecione CRIAR CREDENCIAIS na parte superior da página e clique no ID do cliente OAuth.

Você será solicitado a escolher um tipo de inscrição conforme mostrado abaixo. Vá para o aplicativo Web se você estiver seguindo estas etapas para React (estamos usando o ID do cliente Google para web).

A seguir, escolheremos um nome para nosso ID de cliente para identificar ou especificar o link de ID específico para um único aplicativo, esse nome é usado. Para distinguir entre IDs da Web, iOS e Android, podemos colocar "ID da Web", "ID do Android", "ID do iOS" e assim por diante em suas convenções de nomenclatura:

Em seguida, apresentaremos dois tipos de URLs: origens JavaScript autorizadas e URLs de redirecionamento autorizados.

O “URL de origem JavaScript autorizado” é o URL a partir do qual seu aplicativo efetua login. Para desenvolvedores React, é localhost (localhost:3000) ou seu URL hospedado, se você hospedou seu aplicativo.

O “URL de redirecionamento autorizado” é o link para o qual o Google retornará o usuário depois que você fizer login com sucesso. Por exemplo, você pode devolvê-lo ao link original ou redirecioná-lo para um link diferente. Você precisará adicionar o URL aqui.

Adicione os seguintes URLs às origens JavaScript autorizadas e aos URLs de redirecionamento autorizados: http://localhost:3000 e http://localhost, respectivamente:

Para criar um ID de cliente web, você precisará clicar no botão “CRIAR”. Você retornará à página inicial, onde poderá visualizar suas credenciais recém-criadas. Para copiar seu novo ID de cliente web, clique no ícone Copiar.

Agora que construímos com sucesso nosso ID de cliente web, você acessará nosso aplicativo React e adicionará seu ID de cliente ao arquivo .env.