Implementar autenticação por e-mail/senha em React

Sourabh Bagrecha8 min read • Published Aug 24, 2022 • Updated Apr 02, 2024

React Atlas JavaScript

Avalie esse Tutorial

Nota: o GraphQL está obsoleto. Saiba mais.

Bem-vindo de volta à nossa jornada de criação de um aplicativo web completo com o MongoDB Atlas App Services, GraphQL e React!

Na primeira parte da série, configuramos o provedor de autenticação de e-mail/senha em nosso serviço de aplicativos de backend. Neste segundo artigo, integraremos a autenticação em um aplicativo da web criado com o React. Gravaremos apenas uma única linha de código do lado do servidor e deixaremos o aplicativo Service lidar com o resto!

Também criaremos o front-end de nosso aplicativo de gerenciamento de despesas, o Expengo, usando o React. Ao final do tutorial de hoje, teremos o seguinte aplicativo web:

Configure seu aplicativo web React

Certifique-se de ter o Node.js e o npm instalados na sua máquina. Você pode verificar se estão configurados corretamente executando os seguintes comandos em seu emulador de terminal:

Trecho de código

Crie o aplicativo React

Vamos criar um novo aplicativo React. Inicie seu terminal e execute o seguinte comando, onde "expengo" será o nome do nosso aplicativo:

Trecho de código

O processo pode levar até um minuto para ser concluído. Depois de terminar, navegue até seu novo projeto:

Trecho de código

Adicione dependências necessárias

A seguir, instalaremos o Realm Web SDK. O SDK permite que aplicativos baseados em navegador acessem dados armazenados no MongoDB Atlas e interajam com Atlas App Services como Functions, autenticação e GraphQL.

Trecho de código

Também instalaremos alguns outros pacotes npm para facilitar nossa vida:

React-router-dom para gerenciar a navegação em nosso aplicativo:
Trecho de códigonpm install react-router-dom
Material UI para nos ajudar a construir belos componentes sem escrever muito CSS:
Trecho de códigonpm install @mui/material @emotion/styled @emotion/react

Organize a estrutura do aplicativo

Por fim, vamos criar três novos diretórios com alguns arquivos neles. Para fazer isso, usaremos o shell. Você pode usar uma GUI ou seu editor de código, se preferir.

Trecho de código

Abra o diretório expengo no seu editor de código. O diretório do projeto deve ter a seguinte estrutura:

Trecho de código

Conecte seu aplicativo React ao App Services e faça o gerenciamento de usuários

Nesta seção, criaremos funções e componentes React em nosso aplicativo para dar aos usuários a capacidade de se conectar, se cadastrar e desconectar.

Comece copiando o ID do seu aplicativo do App Services:

Agora abra este arquivo: ./src/realm/constants.js

Cole o código a seguir e substitua o espaço reservado pelo seu ID do aplicativo:

Trecho de código

Crie um React Context para o gerenciamento de usuários

Agora vamos adicionar um novo React Context sobre todas as nossas rotas para ter acesso aos detalhes do nosso usuário, como perfil e tokens de acesso. Sempre que precisarmos chamar uma função em nome de um usuário, podemos facilmente fazer isso consumindo esse React Context por meio de componentes filho. O código a seguir também implementa funções que farão todas as interações com nosso servidor do Realm para realizar a autenticação. Confira nos comentários uma descrição específica de cada função.

./src/contexts/user.context.js

Trecho de código

import { createContext, useState } from "react";
import { App, Credentials } from "realm-web";
import { APP_ID } from "../realm/constants";
 
// Creating a Realm App Instance
const app = new App(APP_ID);
 
// Creating a user context to manage and access all the user related functions
// across different components and pages.
export const UserContext = createContext();
 
export const UserProvider = ({ children }) => {
 const [user, setUser] = useState(null);
 
 // Function to log in user into our App Service app using their email & password
 const emailPasswordLogin = async (email, password) => {
   const credentials = Credentials.emailPassword(email, password);
   const authenticatedUser = await app.logIn(credentials);
   setUser(authenticatedUser);
   return authenticatedUser;
 };
 
 // Function to sign up user into our App Service app using their email & password
 const emailPasswordSignup = async (email, password) => {
   try {
     await app.emailPasswordAuth.registerUser(email, password);
     // Since we are automatically confirming our users, we are going to log in
     // the user using the same credentials once the signup is complete.
     return emailPasswordLogin(email, password);
   } catch (error) {
     throw error;
   }
 };
 
 // Function to fetch the user (if the user is already logged in) from local storage
 const fetchUser = async () => {
   if (!app.currentUser) return false;
   try {
     await app.currentUser.refreshCustomData();
     // Now, if we have a user, we are setting it to our user context
     // so that we can use it in our app across different components.
     setUser(app.currentUser);
     return app.currentUser;
   } catch (error) {
     throw error;
   }
 }
 
 // Function to logout user from our App Services app
 const logOutUser = async () => {
   if (!app.currentUser) return false;
   try {
     await app.currentUser.logOut();
     // Setting the user to null once loggedOut.
     setUser(null);
     return true;
   } catch (error) {
     throw error
   }
 }
 
 return <UserContext.Provider value={{ user, setUser, fetchUser, emailPasswordLogin, emailPasswordSignup, logOutUser }}>
   {children}
 </UserContext.Provider>;
}

Crie uma página PrivateRoute

Esta é uma página wrapper que só permitirá que usuários autenticados acessem as páginas privadas do nosso aplicativo. Veremos isso em ação em nosso arquivo ./src/App.js.

./src/pages/PrivateRoute.page.js

Trecho de código

A seguir, vamos adicionar uma página de login.

./src/pages/Login.page.js

Trecho de código

import { Button, TextField } from "@mui/material";
import { useContext, useEffect, useState } from "react";
import { Link, useLocation, useNavigate } from "react-router-dom";
import { UserContext } from "../contexts/user.context";
 
const Login = () => {
 const navigate = useNavigate();
 const location = useLocation();
 
 // We are consuming our user-management context to
 // get & set the user details here
 const { user, fetchUser, emailPasswordLogin } = useContext(UserContext);
 
 // We are using React's "useState" hook to keep track
 //  of the form values.
 const [form, setForm] = useState({
   email: "",
   password: ""
 });
 
 // This function will be called whenever the user edits the form.
 const onFormInputChange = (event) => {
   const { name, value } = event.target;
   setForm({ ...form, [name]: value });
 };
 
 // This function will redirect the user to the
 // appropriate page once the authentication is done.
 const redirectNow = () => {
   const redirectTo = location.search.replace("?redirectTo=", "");
   navigate(redirectTo ? redirectTo : "/");
 }
 
 // Once a user logs in to our app, we don’t want to ask them for their
 // credentials again every time the user refreshes or revisits our app, 
 // so we are checking if the user is already logged in and
 // if so we are redirecting the user to the home page.
 // Otherwise we will do nothing and let the user to login.
 const loadUser = async () => {
   if (!user) {
     const fetchedUser = await fetchUser();
     if (fetchedUser) {
       // Redirecting them once fetched.
       redirectNow();
     }
   }
 }
 
 // This useEffect will run only once when the component is mounted.
 // Hence this is helping us in verifying whether the user is already logged in
 // or not.
 useEffect(() => {
   loadUser(); // eslint-disable-next-line react-hooks/exhaustive-deps
 }, []);
 
 // This function gets fired when the user clicks on the "Login" button.
 const onSubmit = async (event) => {
   try {
     // Here we are passing user details to our emailPasswordLogin
     // function that we imported from our realm/authentication.js
     // to validate the user credentials and log in the user into our App.
     const user = await emailPasswordLogin(form.email, form.password);
     if (user) {
       redirectNow();
     }
   } catch (error) {
       if (error.statusCode === 401) {
          alert("Invalid username/password. Try again!");
      } else {
          alert(error);
      }
 
   }
 };
 
 return <form style={{ display: "flex", flexDirection: "column", maxWidth: "300px", margin: "auto" }}>
   <h1>Login</h1>
   <TextField
     label="Email"
     type="email"
     variant="outlined"
     name="email"
     value={form.email}
     onChange={onFormInputChange}
     style={{ marginBottom: "1rem" }}
   />
   <TextField
     label="Password"
     type="password"
     variant="outlined"
     name="password"
     value={form.password}
     onChange={onFormInputChange}
     style={{ marginBottom: "1rem" }}
   />
   <Button variant="contained" color="primary" onClick={onSubmit}>
     Login
   </Button>
   <p>Don't have an account? <Link to="/signup">Signup</Link></p>
 </form>
}
 
export default Login;

Agora nossos usuários podem fazer login no aplicativo, mas como eles se cadastram? É hora de adicionar uma página de inscrição!

./src/pages/Signup.page.js

Trecho de código

import { Button, TextField } from "@mui/material";
import { useContext, useState } from "react";
import { Link, useLocation, useNavigate } from "react-router-dom";
import { UserContext } from "../contexts/user.context";
 
const Signup = () => {
 const navigate = useNavigate();
 const location = useLocation();
 
 // As explained in the Login page.
 const { emailPasswordSignup } = useContext(UserContext);
 const [form, setForm] = useState({
   email: "",
   password: ""
 });
 
 // As explained in the Login page.
 const onFormInputChange = (event) => {
   const { name, value } = event.target;
   setForm({ ...form, [name]: value });
 };
 
 
 // As explained in the Login page.
 const redirectNow = () => {
   const redirectTo = location.search.replace("?redirectTo=", "");
   navigate(redirectTo ? redirectTo : "/");
 }
 
 // As explained in the Login page.
 const onSubmit = async () => {
   try {
     const user = await emailPasswordSignup(form.email, form.password);
     if (user) {
       redirectNow();
     }
   } catch (error) {
     alert(error);
   }
 };
 
 return <form style={{ display: "flex", flexDirection: "column", maxWidth: "300px", margin: "auto" }}>
   <h1>Signup</h1>
   <TextField
     label="Email"
     type="email"
     variant="outlined"
     name="email"
     value={form.email}
     onInput={onFormInputChange}
     style={{ marginBottom: "1rem" }}
   />
   <TextField
     label="Password"
     type="password"
     variant="outlined"
     name="password"
     value={form.password}
     onInput={onFormInputChange}
     style={{ marginBottom: "1rem" }}
   />
   <Button variant="contained" color="primary" onClick={onSubmit}>
     Signup
   </Button>
   <p>Have an account already? <Link to="/login">Login</Link></p>
 </form>
}
 
export default Signup;

Criar uma página inicial

Nossa página inicial será uma página básica com um botão de título e desconexão.

./src/pages/Home.page.js:

Trecho de código

Resumindo tudo no App.js

Vamos conectar todas as nossas páginas no componente raiz do React: aplicativo.

. /src/App.js

Trecho de código

Inicie seu aplicativo React

Tudo o que você precisa fazer agora é executar o seguinte comando no diretório do seu projeto:

Trecho de código

Quando a compilação for concluída, você poderá acessar seu aplicativo a partir do seu navegador em http://localhost:3000/. Você deve conseguir se cadastrar e fazer login no seu aplicativo agora.

Conclusão

Uau! Fizemos um tremendo progresso. A autenticação é uma parte muito importante de qualquer aplicativo e, uma vez feita, podemos nos concentrar em recursos que facilitarão a vida de nossos usuários. Na próxima parte desta série de blogs, usaremos o App Services GraphQL para realizar operações CRUD. Estou empolgado porque a configuração básica já acabou.

Se você tiver quaisquer dúvidas, fique à vontade para nos procurar nos fóruns da MongoDB Community. Criei um tópico de fórum dedicado para este blog, onde podemos discutir qualquer coisa relacionada a essa série de blogs.

E antes que você pergunte, aqui está o repositório do GitHub também!

Avalie esse Tutorial

{Parte de uma série

Fullstak Web App com MongoDB Atlas App Services, GraphQL e React

Mais nesta série

Configurar autenticação de e-mail/senha no MongoDB Atlas App Services

Relacionado

Tutorial

Usando o driver Node.js MongoDB com AWS Lambda

Jan 23, 2024 | 5 min read

Tutorial

Como otimizar aplicativos LLM com compactação de prompts usando LLMLingua e LangChain

Jun 18, 2024 | 13 min read

Artigo

Como criar aplicativos sem servidor com SST e MongoDB Atlas

Aug 29, 2024 | 3 min read

Tutorial

Descubra seu Airbnb ideal: implementando um Spring Boot e Atlas Search com o driver Kotlin Sync

Aug 06, 2024 | 8 min read

Sumário

Configure seu aplicativo web React
Conecte seu aplicativo React ao App Services e faça o gerenciamento de usuários
Crie uma página PrivateRoute
Criar uma página de login
Criar uma página de inscrição
Criar uma página inicial
Resumindo tudo no App.js
Inicie seu aplicativo React
Conclusão

Atlas

Implementar autenticação por e-mail/senha em React

Configure seu aplicativo web React

Crie o aplicativo React

Adicione dependências necessárias

Organize a estrutura do aplicativo

Conecte seu aplicativo React ao App Services e faça o gerenciamento de usuários

Crie um React Context para o gerenciamento de usuários

Crie uma página PrivateRoute

Criar uma página de login

Criar uma página de inscrição

Criar uma página inicial

Resumindo tudo no App.js

Inicie seu aplicativo React

Conclusão

Fullstak Web App com MongoDB Atlas App Services, GraphQL e React

Mais nesta série

Relacionado

Usando o driver Node.js MongoDB com AWS Lambda

Como otimizar aplicativos LLM com compactação de prompts usando LLMLingua e LangChain

Como criar aplicativos sem servidor com SST e MongoDB Atlas

Descubra seu Airbnb ideal: implementando um Spring Boot e Atlas Search com o driver Kotlin Sync

Sumário