Guia definitivo para autenticação React Firebase

A autenticação é uma das medidas de segurança mais importantes de todos os aplicativos.

Neste artigo, falaremos sobre autenticação, tipos de autenticação, compararemos a autenticação com a autorização e demonstraremos como integrar a autenticação do Firebase e a autenticação do Back4app a um aplicativo React.

O que é autenticação?

Autenticação é o processo de verificar se alguém ou alguma coisa é o que diz ser. Quase todos os aplicativos usam alguma forma de autenticação para proteger o acesso a um aplicativo ou a seus dados.

A forma mais simples de autenticação é a autenticação baseada em senha. Esse sistema de autenticação começa com um usuário inserindo seu nome de usuário e senha. Depois de inserir as credenciais, o backend as compara com os registros no banco de dados e concede acesso ao sistema se as credenciais estiverem corretas. O acesso geralmente é concedido na forma de tokens de sessão.

Um sistema de autenticação moderno é mais ou menos assim:

Autenticação vs. Autorização

A autenticação é o processo de verificar quem é o usuário, enquanto a autorização é o processo de verificar a que o usuário tem acesso.

Por exemplo, ao fazer login em um sistema bancário on-line, o sistema primeiro o autenticará, verificando suas credenciais de login. Depois de autenticado, o sistema determinará quais ações você está autorizado a realizar com base nos privilégios da sua conta, como, por exemplo, se você tem permissão para transferir dinheiro ou visualizar extratos de conta.

Tipos de autenticação

Os tipos comuns de autenticação incluem:

• A autenticação baseada em senha é o tipo de autenticação mais comum. Ela envolve um usuário que fornece seu nome de usuário e senha para obter acesso a um sistema ou a um recurso.

• O logon único (SSO) permite que um usuário faça login em vários sites e serviços usando um único conjunto de credenciais. Um exemplo seriam as Contas do Google. Ao criar uma Conta do Google, você obtém acesso ao Gmail, YouTube, AdSense, Firebase e assim por diante.

• A autenticação social é uma forma de logon único que usa informações existentes de um serviço de rede social, como Google, Facebook ou Twitter, para criar uma conta.

• A autenticação baseada em token permite que os usuários insiram suas credenciais uma vez e recebam em troca uma cadeia criptografada exclusiva de caracteres aleatórios.

• A autenticação biométrica se baseia nas características biológicas exclusivas de um indivíduo. Os tipos de autenticação biométrica incluem reconhecimento facial, scanners de impressões digitais, reconhecimento de alto-falantes e scanners de íris.

• A autenticação baseada em certificado usa certificados digitais para verificar a identidade de uma pessoa, organização ou dispositivo para estabelecer uma conexão segura para a troca de informações pela Internet.

Como configurar a autenticação?

Nesta parte do tutorial, primeiro criaremos um aplicativo fictício de autenticação React e, em seguida, veremos como integrá-lo à autenticação Firebase e à autenticação Back4app (Parse).

Usaremos as seguintes ferramentas:

• React v18
• React Router v6.5
• Material UI v5.11
• Firebase v9

Pré-requisitos:

• Experiência com JavaScript ES6
• Um bom conhecimento de React (JSX, Hooks)
• Experiência com React Router e Material UI é um diferencial

Antes de mergulhar no código, vamos examinar as diferenças entre os sistemas de autenticação.

Autenticação do Firebase vs. Autenticação do Back4app

Tanto o Firebase quanto o Back4app oferecem ótimos sistemas de autenticação de usuários para aplicativos móveis e da Web. Ambos são fáceis de usar e vêm com várias funcionalidades, como login social, sistema de verificação de e-mail, sistema de redefinição de senha etc.

A maior diferença entre eles é que o Back4app foi desenvolvido com software de código aberto, enquanto o Firebase usa o software proprietário do Google. Além disso, o Back4app tende a ser mais barato do que o Firebase.

Sugiro que você experimente os dois sistemas de autenticação e depois decida qual deles lhe agrada mais.

Se quiser explorar as diferenças entre o Back4app e o Firebase, dê uma olhada em Back4app vs Firebase.

Configuração do projeto

Terminamos com a teoria. É hora de começar a programar!

Criar aplicativo React

Vamos começar criando um novo aplicativo React.

As etapas a seguir exigirão que você tenha o Node.js instalado. Se ainda não o tiver instalado, faça o download em seu site oficial.

A maneira mais fácil de criar um aplicativo React é por meio do Create React App:

$ npx create-react-app react-firebase-auth
$ cd react-firebase-auth

Isso criará um novo aplicativo React chamado react-firebase-auth e alterará seu diretório de trabalho.

Em seguida, inicie o projeto:

$ npm start

Por fim, abra http://localhost:3000/ para ver seu aplicativo da Web.

Material UI

Para simplificar o processo de criação da interface do usuário, usaremos o Material UI, uma biblioteca de componentes React de código aberto que implementa o Material Design do Google. A biblioteca de componentes inclui uma coleção abrangente de componentes pré-construídos que funcionam imediatamente.

Sinta-se à vontade para trocar a Material UI por uma estrutura de UI diferente, como React Bootstrap ou Ant Design.

Para adicionar o Material UI ao seu projeto, execute:

$ npm install @mui/material @emotion/react @emotion/styled

O Material UI usa a fonte Roboto por padrão. Vamos instalá-la com:

$ npm install @fontsource/roboto

Em seguida, navegue até index.js e adicione as seguintes importações:

// src/index.js

import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';

Roteador React

Nosso aplicativo Web terá os seguintes pontos de extremidade:

1. /login — exibe o formulário de login que permite que o usuário faça login.
2. /register — exibe o formulário de inscrição que permite que o usuário se registre.
3. /user — exibe informações do usuário(e-mail, accessToken, etc.).

Como estamos criando um aplicativo de página única (SPA), precisamos de uma maneira de implementar o roteamento no lado do cliente. A maneira mais fácil de fazer isso com o React é usar o react-router-dom.

$ npm install react-router-dom

Em seguida, crie um diretório chamado routes dentro de src para todos os seus componentes de visualização. Em seguida, adicione os três arquivos a seguir a ele:

// src/routes/login.jsx

export default function Login() {
  return (
    <h1>Login</h1>
  )
}

// src/routes/register.jsx

export default function Register() {
  return (
    <h1>Register</h1>
  )
}

// src/routes/user.jsx

export default function User() {
  return (
    <h1>User</h1>
  )
}

Crie um BrowserRouter e registre-o no index.js da seguinte forma:

// src/index.js

const router = createBrowserRouter([
  {
    path: "/",
    element: <Navigate to="login"/>,
  },
  {
    path: "/login",
    element: <Login/>,
  },
  {
    path: "/register",
    element: <Register/>,
  },
  {
    path: "/user",
    element: <User/>,
  },
]);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RouterProvider router={router}/>
  </React.StrictMode>
);

Não se esqueça de adicionar todas as importações necessárias na parte superior do arquivo:

import {createBrowserRouter, Navigate, RouterProvider} from "react-router-dom";
import Login from "./routes/login";
import Register from "./routes/register";
import User from "./routes/user";

Para cuidar do erro “Not Found (404)”, crie um novo componente em seu diretório src chamado error-page.jsx com o seguinte conteúdo:

// src/error-page.jsx

import {useRouteError} from "react-router-dom";
import {Container, Typography} from "@mui/material";

export default function ErrorPage() {

  const error = useRouteError();
  console.error(error);

  return (
    <Container maxWidth="xs" sx={{mt: 2}}>
      <Typography variant="h5" component="h1" gutterBottom>
        Oops!
      </Typography>
      <Typography variant="p" component="p" gutterBottom>
        Sorry, an unexpected error has occurred.
      </Typography>
      <Typography variant="p" component="p" gutterBottom>
        <i>{error.statusText || error.message}</i>
      </Typography>
    </Container>
  );
}

Em seguida, navegue até index.jsx e adicione errorElement à rota de índice da seguinte forma:

// src/index.js

const router = createBrowserRouter([
  {
    path: "/",
    element: <Navigate to="login"/>,
    errorElement: <ErrorPage/>,  // new
  },
  // ...
]);

Novamente, certifique-se de adicionar a importação necessária:

import ErrorPage from "./error-page";

Nesse ponto, sua estrutura de diretórios deve ter a seguinte aparência:

react-firebase-auth
├── README.md
├── package.json
├── package-lock.json
├── public
│   └── <public files>
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── error-page.jsx
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reportWebVitals.js
    ├── routes
    │   ├── login.jsx
    │   ├── register.jsx
    │   └── user.jsx
    └── setupTests.js

Vamos iniciar o aplicativo e testar se tudo funciona. Executar:

$ npm start

Abra seu navegador da Web favorito e navegue até http://localhost:3000/. Isso deverá redirecioná-lo para a tela de login. Depois disso, navegue até http://localhost:3000/register e você deverá ver a tela de registro.

Formulário

Uma das últimas coisas que temos que fazer é implementar o formulário de login e registro.

Para fazer isso, navegue até o diretório de rotas e altere o login.jsx da seguinte forma:

// src/routes/login.jsx

import {Alert, Box, Button, Container, Link, TextField, Typography} from "@mui/material";
import {useNavigate} from "react-router-dom";
import {useState} from "react";

export default function Login() {

  const navigate = useNavigate();

  const [error, setError] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const onSubmit = async (event) => {
    event.preventDefault();

    // validate the inputs
    if (!email || !password) {
      setError("Please enter your username and password.");
      return;
    }

    // clear the errors
    setError("");

    // TODO: send the login request
    console.log("Logging in...");
  }

  return (
    <Container maxWidth="xs" sx={{mt: 2}}>
      <Typography variant="h5" component="h1" gutterBottom textAlign="center">
        Login
      </Typography>
      {error && <Alert severity="error" sx={{my: 2}}>{error}</Alert>}
      <Box component="form" onSubmit={onSubmit}>
        <TextField
          label="Email"
          variant="outlined"
          autoComplete="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          sx={{mt: 1}}
          fullWidth
        />
        <TextField
          label="Password"
          variant="outlined"
          type="password"
          autoComplete="new-password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          sx={{mt: 3}}
          fullWidth
        />
        <Button variant="contained" type="submit" sx={{mt: 3}} fullWidth>Login</Button>
        <Box sx={{mt: 2}}>
          Don't have an account yet? <Link href="/register">Register</Link>
        </Box>
      </Box>
    </Container>
  )
}

1. Usamos os componentes do Material UI para criar o layout, inclusive o formulário.
2. O estado(e-mail e senha) é tratado por meio do gancho useState() do React.
3. O envio de formulários chama onSubmit(), que valida os dados e exibe possíveis erros.

Em seguida, pegue o código-fonte do GitHub e substitua o conteúdo das outras duas rotas:

• src/routes/register.jsx
• src/routes/user.jsx

Execute o servidor novamente e navegue até seu aplicativo Web. Suas exibições devem ter a seguinte aparência:

Limpeza

Remova os seguintes arquivos que foram criados pelo Create React App e que não são mais necessários:

• src/App.css
• src/App.js
• src/App.test.js
• src/logo.svg

Certifique-se de remover todas as possíveis importações de arquivos como index.js e outros.

Ótimo, nosso aplicativo Web de autenticação fictício está concluído. Nas próximas seções, vamos atualizá-lo adicionando o Firebase Authentication e o Back4app Authentication.

Obtenha o código-fonte para esta parte do artigo no repositório back4app-react-firebase-auth.

Autenticação do React Firebase

Nesta seção do tutorial, veremos como integrar a autenticação do Firebase a um projeto React. Como ponto de partida, usaremos o aplicativo React que criamos na seção “Configuração do projeto”.

Verifique sua compreensão trabalhando com seu próprio projeto React enquanto acompanha o tutorial.

Criar projeto e aplicativo

As etapas a seguir exigirão que você tenha uma conta do Firebase. Se ainda não tiver uma, inscreva-se com sua conta do Google.

Para trabalhar com o Firebase, primeiro precisamos criar um projeto. Para criar um projeto, faça login no Console do Firebase e clique em “Create a project” (Criar um projeto):

Dê a ele um nome personalizado, eu vou chamar o meu de react-firebase-auth.

Aceite todos os termos e condições e pressione “Continue”.

O Firebase levará alguns instantes para preparar tudo o que é necessário para seu projeto. Quando isso for feito, você será redirecionado para o painel do projeto Firebase.

Em seguida, crie um novo aplicativo Firebase. Selecione “Web”, pois estamos usando o React como nosso frontend:

Dê a ele um nome personalizado ou reutilize o nome do seu projeto. Você não precisa ativar o Firebase Hosting, pois não o usaremos.

Em seguida, clique em “Register app” (Registrar aplicativo):

Em seguida, selecione “npm” e anote a configuração do Firebase SDK. Por fim, clique no botão “Continue to the console” (Continuar para o console):

Ativar autenticação

Antes de mergulhar no código, precisamos ativar a autenticação.

No lado esquerdo do console do Firebase, selecione “Build” e, em seguida, “Authentication”. Quando você for redirecionado, clique em “Get started” (Começar):

O Firebase oferece vários métodos de login. Neste tutorial, demonstraremos como usar a autenticação por e-mail e senha para que esse seja o único método que você precisa ativar:

SDK do Firebase

Para usar o Firebase em seu projeto React, primeiro é necessário instalar o Software Developer Kit (SDK).

Instale-o via npm:

$ npm install firebase

Em seguida, crie um novo arquivo na pasta src chamado firebase.js com o seguinte conteúdo:

// src/firebase.js

import { initializeApp } from "firebase/app";
import {createUserWithEmailAndPassword, signInWithEmailAndPassword, getAuth} from "firebase/auth";

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "AIzaSyC4m7VHfM8hy_VUUAlpFCSK3AfrRX4bkQ0",
  authDomain: "react-firebase-auth-d4e6b.firebaseapp.com",
  projectId: "react-firebase-auth-d4e6b",
  storageBucket: "react-firebase-auth-d4e6b.appspot.com",
  messagingSenderId: "1084832623816",
  appId: "1:1084832623816:web:a526bb5b9beff5e26e89fd",
  measurementId: "G-1DXS0RGXPT"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

Certifique-se de substituir o firebaseConfig por sua configuração da etapa anterior.

O Firebase SDK oferece diferentes métodos de autenticação, como:

1. createUserWithEmailAndPassword(email: string, password: string)
2. signInWithEmailAndPassword(email: string, password: string)

Para utilizar esses métodos, vamos criar duas funções de wrapper na parte inferior do arquivo firebase.js:

// firebase.js

// ...

export const createUser = async (email, password) => {
  return createUserWithEmailAndPassword(getAuth(app), email, password);
}

export const signInUser = async (email, password) => {
  return signInWithEmailAndPassword(getAuth(app), email, password);
}

Não se esqueça de adicionar a importação:

import {createUserWithEmailAndPassword, signInWithEmailAndPassword, getAuth} from "firebase/auth";

As funções são autoexplicativas:

1. createUser cria um usuário do Firebase (e retorna uma resposta contendo informações do usuário)
2. signInUser faz login em um usuário existente do Firebase (e retorna uma resposta contendo informações do usuário)

Persistência de sessão

O Firebase não cuida da persistência da sessão nos dispositivos dos clientes como o Parse faz.

Por isso, temos que utilizar o Window.sessionStorage. Quando o usuário faz login, precisamos armazenar seu accessToken e recuperá-lo sempre que quisermos fazer uma solicitação autenticada.

Para facilitar um pouco as coisas, criaremos uma classe auxiliar.

No diretório src, crie um novo arquivo chamado session.js com o seguinte conteúdo:

// src/storage/session.js

export const startSession = (user) => {
  sessionStorage.setItem("email", user.email);
  sessionStorage.setItem("accessToken", user.accessToken);
}

export const getSession = () => {
  return {
    email: sessionStorage.getItem("email"),
    accessToken: sessionStorage.getItem("accessToken"),
  }
}

export const endSession = () => {
  sessionStorage.clear();
}

export const isLoggedIn = () => {
  return getSession().accessToken;
}

Visualizações

A última coisa que precisamos fazer é modificar nossas exibições para utilizar as funções que criamos e configurar a sessão por meio de funções auxiliares em session.js.

Abra o login.jsx e altere o TODO onSubmit() da seguinte forma:

// src/routes/login.jsx

import {signInUser} from "../firebase";
import {startSession} from "../session";

const onSubmit = async (event) => {

  // ...

  try {
    let loginResponse = await signInUser(email, password);
    startSession(loginResponse.user);
    navigate("/user");
  } catch (error) {
    console.error(error.message);
    setError(error.message);
  }
}

Esse código faz o login do usuário e navega para /user ou exibe um erro.

Em seguida, altere o TODO de register.jsx onSubmit() da seguinte forma:

// src/routes/register.jsx

import {createUser} from "../firebase";
import {startSession} from "../session";

const onSubmit = async (event) => {

  // ...

  try {
    let registerResponse = await createUser(email, password);
    startSession(registerResponse.user);
    navigate("/user");
  } catch (error) {
    console.error(error.message);
    setError(error.message);
  }
}

Esse código cria um usuário do Firebase ou exibe um erro. Os possíveis erros incluem:

1. O nome de usuário já está ocupado.
2. A senha não é forte o suficiente.

Por fim, modifique o user.jsx para usar o gancho useEffect() para obter dados do usuário e fazer com que onLogout() destrua a sessão:

// src/routes/user.jsx

import {endSession, getSession, isLoggedIn} from "../session";

useEffect(() => {
  if (!isLoggedIn()) {
    navigate("/login");
  }

  let session = getSession();
  setEmail(session.email);

  console.log("Your access token is: " + session.accessToken);
}, [navigate]);

const onLogout = () => {
  endSession();
  navigate("/login");
}

Teste

Vamos testar o aplicativo Web para ver se tudo funciona.

Inicie o servidor de desenvolvimento com o npm start, abra seu navegador da Web favorito e navegue até http://localhost:3000/register. Digite seu e-mail, escolha uma senha e clique em “Register” (Registrar):

Ao se registrar, você será redirecionado para /user, onde poderá ver as informações da sua conta.

Para ver seu accessToken, abra o console do desenvolvedor do navegador:

Your access token is: 819423a698f9ea9ba3577f20993cb0da98a79ea22ce5d6550b65b69fb36fd438

Por fim, navegue até o painel do projeto Firebase para verificar se um novo usuário foi criado:

Obtenha o código-fonte final para essa abordagem no repositório back4app-react-firebase-auth.

Autenticação React Back4app

Nesta seção do tutorial, veremos como integrar a autenticação do Back4app a um projeto React. Como ponto de partida, usaremos o aplicativo React que criamos na seção “Configuração do projeto”.

Verifique sua compreensão trabalhando com seu próprio projeto React enquanto acompanha o tutorial.

Criar aplicativo

As etapas a seguir exigirão que você tenha uma conta do Back4app. Se já a tiver, faça login, caso contrário, vá em frente e inscreva-se na conta gratuita.

Para trabalhar com o Back4app, primeiro precisamos criar um aplicativo. Ao fazer login em seu painel, você verá a lista de seus aplicativos. Clique em “Build a new app” (Criar um novo aplicativo) para criar um novo aplicativo.

Dê a ele um nome personalizado, escolha seu banco de dados e clique em “Continue”.

A Back4app levará alguns minutos para preparar tudo o que é necessário para o seu aplicativo, como o banco de dados, a camada de aplicativos, o dimensionamento, os backups e a segurança.

Quando o aplicativo estiver pronto, você será redirecionado para o painel de controle do aplicativo.

Chaves do aplicativo

Para conectar seu projeto React ao Back4app, você precisará obter suas chaves de aplicativo. Para obter suas chaves de aplicativo, selecione “App Settings” (Configurações do aplicativo) na barra lateral e, em seguida, “Security & Keys” (Segurança e chaves).

Anote a “ID do aplicativo” e a “chave JavaScript”.

SDK do Parse

Como você já deve saber, o Back4app é baseado no Parse. O Parse é uma estrutura de código aberto para a criação de back-ends de aplicativos. Ele ajuda os desenvolvedores a acelerar o desenvolvimento de aplicativos e reduz a quantidade total de esforço necessário para criar um aplicativo.

Para saber mais sobre o Parse, dê uma olhada em O que é o Parse?

Para configurar a autenticação do Back4app, primeiro precisamos instalar o SDK do Parse. Instale-o via npm:

$ npm install parse

Em seguida, crie um novo arquivo chamado parse.js na pasta src com o seguinte conteúdo:

// src/parse.js

import Parse from "parse/dist/parse";

// Initialize Parse
const PARSE_APPLICATION_ID = '<your_parse_application_id>';
const PARSE_HOST_URL = 'https://parseapi.back4app.com/';
const PARSE_JAVASCRIPT_KEY = '<your_parse_javascript_key>';
Parse.initialize(PARSE_APPLICATION_ID, PARSE_JAVASCRIPT_KEY);
Parse.serverURL = PARSE_HOST_URL;

Certifique-se de substituir PARSE_APPLICATION_ID e PARSE_JAVASCRIPT_KEY pelas chaves da etapa anterior.

O Parse oferece uma classe especializada chamada Parse.User que lida automaticamente com grande parte da funcionalidade necessária para o gerenciamento de contas de usuários. Parse.User é uma subclasse de ParseObject que fornece métodos auxiliares adicionais, como signUp(), current(), getUsername() e assim por diante.

Além disso, o Parse SDK cuida da manipulação da sessão de armazenamento local. Por exemplo, Parse.User.logIn() armazena as informações do usuário no localStorage e Parse.User.signOut() limpa o local storage.

Vamos adicionar algumas funções de wrapper para simplificar ainda mais o trabalho com o sistema de autenticação do Parse.

Adicione o seguinte à parte inferior do parse.js:

// src/parse.js

// ...

export const doUserRegistration = async (username, password) => {
  return Parse.User.signUp(username, password);
};

export const doUserLogIn = async (username, password) => {
  return Parse.User.logIn(username, password);
};

export const isLoggedIn = async () => {
  return Parse.User.current() != null;
}

export const getUser = async () => {
  return Parse.User.current();
}

export const logOut = async () => {
  return Parse.User.logOut();
}

1. doUserRegistration() cria um usuário do Parse (usando um e-mail e uma senha)
2. doUserLogIn() tenta fazer o login do usuário com as credenciais fornecidas
3. isLoggedIn() verifica se o localStorage contém informações da sessão
4. getUser() retorna o usuário conectado do localStorage
5. logOut() limpa o localStorage e, portanto, faz o logout do usuário

Todas as funções são assíncronas e retornam promessas.

Visualizações

Vamos utilizar as funções que criamos na etapa anterior.

Abra o login.jsx e altere o TODO onSubmit() da seguinte forma:

// src/routes/login.jsx

import {doUserLogIn} from "../parse";

const onSubmit = async (event) => {

  // ...

  try {
    let user = await doUserLogIn(email, password);
    navigate("/user");
  } catch (error) {
    console.error(error.message);
    setError(error.message);
  }
}

Esse código faz o login do usuário e navega para /user ou exibe um erro.

Em seguida, altere o TODO de register.jsx onSubmit() da seguinte forma:

// src/routes/register.jsx

import {doUserRegistration} from "../parse";

const onSubmit = async (event) => {

  // ...

  let username = email.split("@")[0];
  try {
    let user = await doUserRegistration(username, password);
    user.setEmail(email).save();
    navigate("/user");
  } catch (error) {
    console.error(error.message);
    setError(error.message);
  }
}

Lembre-se de que, como estamos usando um formulário de registro de e-mail/senha, precisamos extrair o nome de usuário do usuário do e-mail. O nome de usuário é a parte antes de @.

Uma solução melhor seria criar um formulário de registro com nome de usuário/senha.

Esse código cria um usuário do Parse ou exibe um erro. Os possíveis erros incluem:

1. O nome de usuário já está ocupado.
2. A senha não é forte o suficiente.

Por fim, modifique o user.jsx para usar o gancho useEffect() para obter dados do usuário e fazer com que onLogout() chame a função de logout:

// src/routes/user.jsx

import {getUser, isLoggedIn, logOut} from "../parse";

useEffect(() => {
  (async () => {
    let loggedIn = await isLoggedIn();
    if (!loggedIn) {
      navigate("/login");
    }

    let user = await getUser();
    setEmail(user.getEmail());

    console.log("Your session token is: " + user.getSessionToken());
  })();
}, [navigate]);

const onLogout = async () => {
  await logOut();
  navigate("/login");
}

Ótimo, é isso!

Teste

Vamos nos certificar de que nosso sistema de autenticação funcione conforme o esperado.

Inicie o servidor de desenvolvimento com o npm start, abra seu navegador da Web favorito e navegue até http://localhost:3000/register. Digite seu e-mail, escolha uma senha e clique em “Register” (Registrar):

Ao se registrar, você será redirecionado para /user, onde poderá ver as informações da sua conta.

Para ver seu sessionToken, abra o console do desenvolvedor do navegador:

Your session token is: r:90343c307e7bb088e60c348acd8090d1

Por fim, navegue até o Back4app App Dashboard e verifique se foi criado um usuário:

Obtenha o código-fonte final para essa abordagem no repositório back4app-react-firebase-auth.

Conclusão

A autenticação e a autorização são as medidas de segurança mais importantes dos aplicativos modernos. A autenticação é o processo de verificar quem é o usuário, enquanto a autorização é o processo de verificar a que o usuário tem acesso.

Tanto o Firebase quanto o Back4app oferecem ótimos sistemas de autenticação de usuários. Cada um deles tem seus próprios prós e contras que devem ser considerados ao iniciar um projeto.

Leitura adicional

• Analisar a segurança do usuário
• Autenticação social por meio de serviços de terceiros
  • Login do Google
  • Login do Facebook
• Verificação de e-mail
• Redefinição de senha

PERGUNTAS FREQUENTES