Como fazer autenticação com React e Firebase – Criando um login

Neste post vamos aprender autenticação com React, uma das bibliotecas JavaScript mais populares, e Firebase, uma plataforma do Google que facilita a autenticação de usuários.

Ao final, você terá um sistema de login funcional e pronto para ser integrado ao seu app! Vamos começar entendendo o que é React e Firebase, e depois adentrar a parte prática!

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

Para fazer o download do(s) arquivo(s) utilizados na aula, preencha com o seu e-mail:

Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.

Neste post vamos aprender autenticação com React, uma das bibliotecas JavaScript mais populares, e Firebase, uma plataforma do Google que facilita a autenticação de usuários.

Ao final, você terá um sistema de login funcional e pronto para ser integrado ao seu app! Vamos começar entendendo o que é React e Firebase, e depois adentrar a parte prática!

Para fazer autenticação com React e Firebase, crie um projeto no Firebase Console, habilite o login com Google na seção Authentication e instale o SDK com npm install firebase. Depois, guarde as credenciais em um arquivo firebaseConfig.js e use signInWithPopup para entrar, signOut para sair e onAuthStateChanged para saber quem está logado no seu app React.

O que é React?

React.js é uma biblioteca JavaScript criada pelo Facebook para construir interfaces de usuário (UI) de forma eficiente.

Com React, você pode criar componentes reutilizáveis, o que facilita a manutenção e a escalabilidade do seu projeto. Ele é amplamente utilizado em aplicações modernas, desde pequenos projetos até grandes plataformas como Instagram e Netflix.

Uma das grandes vantagens do React é a sua capacidade de criar interfaces dinâmicas e responsivas com facilidade. Ele utiliza um conceito chamado "Virtual DOM", que torna a atualização da interface mais rápida e eficiente.

Além disso, a comunidade em torno do React é enorme, o que significa que há uma infinidade de bibliotecas, tutoriais e ferramentas disponíveis para ajudar no desenvolvimento.

O que é Firebase?

Firebase é uma plataforma de desenvolvimento de aplicativos oferecida pelo Google. Ela fornece diversas ferramentas para facilitar o desenvolvimento, como banco de dados em tempo real, hospedagem e, claro, autenticação de usuários.

Com o Firebase Auth, você pode implementar sistemas de login com e-mail, Google, Facebook e outros provedores de forma rápida e segura.

Uma das principais vantagens do Firebase é que ele elimina a necessidade de configurar e gerenciar um backend complexo. Tudo é feito de forma simplificada, com uma interface amigável e documentação detalhada.

Isso permite que desenvolvedores foquem mais na experiência do usuário e menos na infraestrutura do projeto.

JavaScript Impressionador

Como usar JavaScript em qualquer empresa e qualquer área, com exemplos totalmente aplicados à realidade do Mercado de Trabalho, seja para se tornar um Desenvolvedor Front End, Backend, Full Stack ou Mobile.

Começar agora

Criando um sistema de login com React e Firebase

Agora que você já sabe o básico sobre React e Firebase, vamos colocar a mão na massa! Primeiro, você precisa configurar um projeto no Firebase e instalar as dependências necessárias no seu projeto React. Depois, criaremos um formulário de login e integraremos com o Firebase Auth para autenticar os usuários.

Passo a passo:

Configuração do Firebase

1. Acesse o Firebase Console e crie um novo projeto.
   • Adicione um app web ao projeto e obtenha as credenciais de configuração.
   • No painel do Firebase, vá até a seção "Authentication" e habilite o método de login com Google.

Instalação das dependências

No seu projeto React (se você quer aprender do zero a criar um projeto no react, veja nosso passo a passo), instale o SDK do Firebase usando npm ou yarn:

npm install firebase

Criação do arquivo de configuração do Firebase

Crie um arquivo chamado firebaseConfig.js no seu projeto e cole as credenciais obtidas no Firebase Console:

import { initializeApp } from "firebase/app";
import { getAuth, GoogleAuthProvider } from "firebase/auth";
const firebaseConfig = {
  apiKey: "SUA_API_KEY",
  authDomain: "SEU_DOMINIO.firebaseapp.com",
  projectId: "SEU_PROJECT_ID",
  storageBucket: "SEU_STORAGE_BUCKET",
  messagingSenderId: "SEU_SENDER_ID",
  appId: "SEU_APP_ID"
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const provider = new GoogleAuthProvider();
export { auth, provider };

Esse arquivo será responsável por inicializar o Firebase no seu projeto e configurar a autenticação com o Google.

Implementando o login com Google

Crie um componente chamado Login.js para gerenciar a autenticação:

import { signInWithPopup } from "firebase/auth";
import { auth, provider } from "./firebaseConfig";
const Login = () => {
  const handleLogin = async () => {
    try {
      const result = await signInWithPopup(auth, provider);
      const user = result.user;
      console.log("Usuário logado:", user);
    } catch (error) {
      console.error("Erro ao fazer login:", error);
    }
  };
  return (
    <div>
      <button onClick={handleLogin}>Entrar com Google</button>
    </div>
  );
};
export default Login;

Esse componente exibe um botão que, ao ser clicado, abre um pop-up para o usuário fazer login com sua conta do Google.

Implementando o logout

Crie um componente chamado Logout.js para gerenciar o logout:

import { signOut } from "firebase/auth";
import { auth } from "./firebaseConfig";
const Logout = ({ user }) => {
  const handleLogout = () => {
    signOut(auth).then(() => {
      console.log("Usuário deslogado");
    });
  };
  return (
    <div>
      <p>Olá, {user.displayName}</p>
      <button onClick={handleLogout}>Sair</button>
    </div>
  );
};
export default Logout;

Esse componente exibe uma mensagem de boas-vindas com o nome do usuário e um botão para fazer logout.

Gerenciando o estado de autenticação

Use o hook useEffect para monitorar o estado de autenticação e renderizar os componentes corretos:

import { useEffect, useState } from "react";
import { auth } from "./firebaseConfig";
import Login from "./Login";
import Logout from "./Logout";
const App = () => {
  const [user, setUser] = useState(null);
  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
      setUser(user);
    });
    return () => unsubscribe();
  }, []);
  return (
    <div>
      <h1>Autenticação com Firebase</h1>
      {user ? <Logout user={user} /> : <Login />}
    </div>
  );
};
export default App;

Esse código gerencia o estado do usuário (logado ou não) e renderiza o componente apropriado com base nesse estado.

Algumas dicas

• Testes e validações: Sempre teste seu sistema de autenticação em diferentes cenários, como erros de conexão ou credenciais inválidas.
• Segurança: O Firebase já cuida da segurança para você, mas é importante seguir boas práticas, como não expor suas chaves de API publicamente.
• Expansão: Você pode adicionar outros métodos de autenticação, como login com Facebook, Twitter ou e-mail e senha.

Perguntas frequentes

Conclusão

Pronto! Agora você tem um sistema de login funcional usando React e Firebase. Este é apenas o começo, mas com essa base, você pode expandir e adicionar mais funcionalidades, como autenticação com redes sociais ou recuperação de senha.

Baixe o projeto completo na descrição e comece a integrar essa solução nos seus projetos!