Como criar um login do Firebase e se inscrever no React

O Firebase é um sistema que oferece muitas plataformas para desenvolvedores criarem aplicativos da web. Um dos elementos essenciais em um aplicativo é criar usuários e permitir que eles façam login. Vamos ver como podemos escrever um login do Firebase completo, mas muito simples de implementar.

Crie seu aplicativo Firebase

Primeiro você precisa criar um projeto de aplicativo do Firebase, então vá para o console do Firebase e adicione um novo projeto. Você adicionará o aplicativo aqui.

https://console.firebase.google.com/

Ele lançará um assistente que perguntará o nome do projeto.

A próxima tela perguntará se você deseja ativar a análise. Desative-o e clique no botão Criar projeto. Levará um tempo para provisionar seu projeto e, depois disso, você receberá um botão para Continuar, que o levará à visão geral do projeto.

Agora você precisa adicionar um aplicativo do Firebase ao projeto do Firebase. Faz sentido? Um projeto do Firebase permite que você contenha vários aplicativos do Firebase para iOS, Android, Web e Unity. Por enquanto, vamos criar um aplicativo da Web, pois usaremos o React para criar nosso login do Firebase.

Você será solicitado a nomear este aplicativo e receberá as chaves que precisará usar para se conectar ao Firebase. Eles serão algo como:

var firebaseConfig = {
    apiKey: "1A2B3C4D5E6F7G",
    authDomain: "appname-a123b.firebaseapp.com",
    databaseURL: "https://appname-a123b.firebaseio.com",
    projectId: "appname-a123b",
    storageBucket: "appname-a123b.appspot.com",
    messagingSenderId: "1234567890",
};

Usaremos essas chaves em nosso aplicativo React para configurar um provedor que nos permitirá acessar o Firebase em qualquer componente do provedor.

Por fim, vá para Autenticação na barra lateral esquerda, na guia Método de login e ative a autenticação de e- mail/senha .

Você está pronto!

Instalar dependências do Firebase

O Firebase está disponível para diferentes pilhas, incluindo JavaScript e Node.js, que é o que vamos usar agora. Vamos instalar apenas duas dependências com npm:

• firebase, que nos permitirá acessar coisas como a authbiblioteca, que usaremos para realizar o login e também criar um novo usuário
• reactfire, uma coleção de ferramentas úteis para trabalhar com o Firebase no React. Usaremos seu useFirebaseApppara se conectar ao contexto e acessar o Firebase

Vamos instalá-los com

npm i firebase reactfire

A estrutura do app React será bem simples, como segue:

|-- index.js
|-- App.js
|-- FirebaseUser
    |-- index.js

e eles serão relacionados da seguinte forma:

Configurar o provedor Firebase

Vamos escrever o primeiro arquivo para login e inscrição do Firebase! Na verdade, não precisamos escrevê-lo, pois isso deve ser adicionado ao arquivo em que você está emitindo ReactDOM.render(), no nosso caso será index.js:

import { FirebaseAppProvider } from 'reactfire';

const firebaseConfig = {
    apiKey: "1A2B3C4D5E6F7G",
    authDomain: "appname-a123b.firebaseapp.com",
    databaseURL: "https://appname-a123b.firebaseio.com",
    projectId: "appname-a123b",
    storageBucket: "appname-a123b.appspot.com",
    messagingSenderId: "925199572988",
    appId: "1:123456789:web:12a34b56c78d90e"
};

Isso importa FirebaseAppProvidere adiciona as chaves de configuração que você passará para ele. Agora você pode encapsular o componente raiz, que no nosso caso está Appcom o provedor:

ReactDOM.render(, document.getElementById('root')
);

Excelente! Agora todos os componentes abaixo poderão acessar o Firebase!

Use o componente de login e inscrição do Firebase

Vamos escrever agora o Appcomponente onde vamos importar e usar o FirebaseUsercomponente para criar e logar um usuário. Não há nada realmente relacionado ao Firebase aqui. Vamos implementar um login e uma inscrição usando o mesmo componente para que você possa ver como podemos reutilizar o código, então neste componente implementaremos um par de botões que, quando clicados, renderizarão o FirebaseUsermodo de login ou modo de inscrição:

Configure o login do Firebase e inscreva-se

Vamos criar um componente para isso. Primeiro precisamos importar alguns módulos:

import React, { useState } from 'react';
import { useFirebaseApp } from 'reactfire';
import 'firebase/auth';

Vamos useStatepor algumas coisas, desde saber se o usuário está autenticado até definir erros. Vamos usar o useFirebaseAppgancho para acessar a conexão do Firebase. Isso só é possível porque configuramos o provedor Firebase na etapa anterior e ele só está disponível na hierarquia em que foi adicionado. Por fim, importaremos a authbiblioteca para que possamos chamar os métodos do Firebase para criar usuários e fazer login. Esta é uma maneira eficiente porque estamos carregando apenas esta biblioteca, e não outras como firestorepara o banco de dados NoSQL ou messagingpara mensagens e notificações.

Em seguida, adicionaremos um gancho rápido para gerenciar nossos campos de entrada:

E finalmente o componente completo, que vamos detalhar abaixo para apontar as partes mais interessantes, aquelas relacionadas ao login e inscrição do Firebase.

Primeiro, conectamos à instância do Firebase:

const firebase = useFirebaseApp();

Como apontado anteriormente, isso é possível porque anteriormente agrupamos o Appcomponente com o provedor Firebase. Agora que estamos conectados ao Firebase, podemos usar a authfuncionalidade e chamar signInWithEmailAndPassword:

Quando for bem-sucedido, ele definirá os dados retornados e os campos do formulário serão substituídos por

Logged in as ${ auth?.user.email ?? '' }

Os dados retornados são um objeto grande com propriedades muito interessantes, então vale a pena adicionar um console.log()à nossa setReceivedData()função para ver o que mais ele inclui.

O processo para criar um usuário é semelhante, exceto que usamos a função createUserWithEmailAndPassword().

Conclusão

Para testar nosso login do Firebase e se inscrever, você pode tentar fazer login para um usuário que não existe para ver os erros. Depois disso, crie um usuário e faça login como o usuário.

Demonstração do login e inscrição do Firebase.
Curiosidade: o Chrome reclama que a senha 123456 que estou usando para teste está comprometida, o que é verdade.

Se agora você voltar para o aplicativo Firebase > Autenticação > Usuários, verá o novo usuário (talvez seja necessário usar o botão de atualização ao lado de Adicionar usuário).

Para recapitular, as etapas essenciais para integrar o Firebase em nosso aplicativo React são:

• configure o provedor Firebase e envolva o componente raiz (ou a raiz da hierarquia em que você deseja usá-lo)
• hook para o provedor Firebase usandouseFirebaseApp
• use as funções de autenticação!

Verifique o repositório do GitHub em https://github.com/eliorivero/firebase-login-sign-up. A única diferença com este é que estou carregando as chaves para configurar o Firebase a partir de um arquivo .env para evitar expô-los publicamente.

Se você tiver alguma dúvida, deixe-me saber nos comentários abaixo!