Single SPA: autenticando micro front-ends

Iniciando um módulo utilitário - Apresentação

Olá, estudante! Meu nome é Pedro Mello, sou instrutor de front-end na Alura.

Audiodescrição: Pedro Mello se identifica como um homem branco. Possui olhos castanho-escuros, cabelos curtos e barba, também castanho-escuros. No nariz, tem dois piercings de argola. No corpo, veste uma camiseta preta. Ao fundo, paredes claras com iluminação em tons de azul, além de uma prateleira à direita. Há diversos itens expostos, tanto na prateleira, quanto pendurados e encostados nas paredes

Queremos te dar boas-vindas a mais um curso de front-end na plataforma da Alura.

Conhecendo o projeto

Neste curso, vamos trabalhar em um projeto chamado HomeHub, destinado a um dashboard (painel de controle) para automação de atividades residenciais, como controle de consumo de água, gerenciamento de pessoas usuárias cadastradas em uma família que moram na mesma casa e uma infinidade de possibilidades que podemos explorar.

O que aprenderemos no curso?

Dentro deste projeto, vamos trabalhar especificamente com conceitos de autenticação, pois estamos utilizando uma arquitetura de micro front-ends pelo framework do Single SPA.

Nosso projeto do HomeHub já tem algumas validações de formulário e componentes estilizados pelo Material UI. Portanto, já temos uma base para aprofundar a parte de autenticação e compartilhamento dessas informações de autenticação entre os micro front-ends.

Além disso, vamos trabalhar com um módulo de utilitários, criando, do zero, um novo micro front-end voltado para utilitários com o Single SPA.

Esse conteúdo certamente agregará muito aos seus projetos, pois é interessante e muito requisitado pelo mercado de trabalho - afinal, a arquitetura de micro front-ends é usada por muitas empresas atualmente.

Pré-requisitos

Para este curso, é desejável entender sobre:

• Conhecimentos mais avançados em TypeScript;
• Funcionamento de projetos em React e
• Estilização de componentes utilizando a biblioteca do Material UI.

Além disso, conhecer conteúdos sobre arquitetura de micro front-ends pode ser muito útil para te acompanhar durante este curso. Mas se você não entender nada desse assunto, não tem problema! Vamos estudar passo a passo, devagar, e chegar até o final do curso trabalhando em conjunto e construindo uma aplicação bem interessante.

Vamos mergulhar no mundo dos micro front-ends?

Iniciando um módulo utilitário - Criando o módulo utilitário

Estudante, vamos começar falando sobre autenticação em projetos com micro front-ends. Antes de iniciar o desenvolvimento de um módulo e alguma função específica para tratar a autenticação, vamos rodar o projeto.

Executando os micro front-ends

Com o Visual Studio Code aberto, abriremos mais três instâncias do console de desenvolvimento para iniciar os micro front-ends junto com o orquestrador.

Acessando o terminal, com a primeira instância do console aberto, executaremos cd e entraremos na pasta root.

cd root

Nessa pasta, rodaremos o npm start.

npm start

Em seguida, abriremos uma nova instância do terminal com "Ctrl+Shift+'", e dentro desse terminal, no console, executaremos cd .. para voltar uma pasta.

cd ..

Depois, executaremos cd react-navbar para acessar a pasta de mesmo nome.

cd react-navbar

Dentro dessa pasta do micro front-end "react-navbar", executaremos o seguinte comando:

npm start -- --port 8500

Abriremos a terceira instância do terminal, na qual voltaremos uma pasta digitando cd ... Em seguida, acessaremos a pasta do micro front-end "react-dashboard" com cd react-dashboard.

cd react-dashboard

No interior dessa pasta, executaremos o seguinte comando, informando a porta 8501:

npm start -- --port 8501

Abrindo outro terminal, configuraremos o último micro front-end nesse projeto. Voltaremos novamente uma pasta, com cd .., executaremos cd react-login, e iniciaremos com npm start -- --port 8502.

cd react-login

npm start -- --port 8502

Se surgir alguma dúvida sobre qual porta foi configurada para cada micro front-end, basta consultar o arquivo index.ejs dentro do orquestrador, no caminho de pastas "root > src". Descendo um pouco esse arquivo, dentro da tag <script type="systemjs-importmap">, está o importmap dos micro front-ends, onde passamos a porta que cada micro front-ends vai rodar. Nesse caso, a configuração do projeto informa que:

• O orquestrador root-config rodaria na porta 9000 (default ao rodar o npm start);
• A navbar rodaria na porta 8500;
• A dashboard na porta 8501 e
• A react-login na porta 8502. Então, cada micro front-end possui suas próprias portas configuradas.

Com o projeto rodando, acessaremos o navegador na página da aplicação, executando na porta localhost:9000. Em seu interior, já vemos a interface do HomeHub na tela de login.

Entretanto, para iniciar o desenvolvimento do módulo utilitário responsável pela autenticação, voltaremos ao Visual Studio Code e abriremos uma nova instância do terminal, para entender como utilizar o framework do Single SPA para criar o módulo utilitário.

Criando o módulo utilitário

No Visual Studio Code, abriremos uma nova instância do terminal, separada das quatro que estão rodando os micro front-ends. Na raiz do projeto - ou seja, na pasta que tem o projeto, fora dos micro front-ends -, executaremos o comando abaixo:

npx create-single-spa

Após esse comando, o terminal pedirá o diretório para esse novo projeto micro front-end. Vamos chamá-lo de "utils".

utils

Na sequência, geraremos essa aplicação com o tipo utilitário, a segunda opção oferecida pelo terminal. Recapitulando, temos três opções disponíveis:

• "single-spa application / parcel", que serve para criar uma aplicação ou um parcel (uma aplicação exibida em tela);
• "in-browser utility module", que serve para criar módulos utilitários, como um styleguide, uma API de cache ou um módulo de login;
• "single-spa root config", para criar o orquestrador de micro front-ends.

Vamos selecionar a segunda opção, pois criaremos um módulo de login.

Em seguida, ele exibe opções de tipos de framework para utilizar nesse módulo utilitário. Não vamos utilizar nenhum framework para desenvolver esse módulo utilitário, pois não vamos precisar de nenhum recurso específico deles. Então, seguiremos com a primeira opção, a "none", indicando que nenhum framework será utilizado para a criação do módulo.

Por fim, ele perguntará qual vai ser o gerenciador de pacote. Selecionaremos "npm", o qual temos utilizado nesse projeto.

Em seguida, para seguir com a utilização do TypeScript, passaremos o y como resposta à pergunta exibida. Nas duas últimas perguntas, informaremos o "Organization name" (nome da organização), que será home-hub, e o nome do projeto, que vai ser utils.

home-hub

utils

Após as perguntas, o terminal rodará o comando de instalação e preparará nosso projeto. Enquanto isso, finalizaremos o vídeo para entender no próximo o que foi criado e iniciar a criação da função responsável pelo login e armazenamento de dados no localStorage.

A seguir, continuaremos aprendendo sobre recursos de autenticação em micro front-ends.

Iniciando um módulo utilitário - Adicionando a função de login

Vamos verificar o que esse módulo utilitário criou no projeto.

Verificando a estrutura do módulo

Primeiramente, na raiz do projeto, foi criada uma nova pasta chamada "utils", o nome do projeto que definimos quando estávamos executando o npx create-single-spa.

Esse micro front-end, que é um módulo utilitário, vem com a mesma estrutura dos outros projetos. Ele tem as configurações de Webpack, e por se tratar de um TypeScript, tem um arquivo de declarações dentro do "src", além do tsconfig, do prettier e do babel.

A diferença é que o package.json desse projeto não tem dependência de React, nem as outras de Material que instalamos separadamente. Isso ocorre porque optamos por não basear esse micro front-end de utilitários em nenhum framework. Vamos utilizar somente TypeScript e JavaScript, comunicando com as APIs nativas do navegador.

Dentro da pasta "src", no Visual Studio Code, vamos abrir o arquivo home-hub-utils.ts. Dentro dele, há um comentário na primeira linha, onde ele diz que tudo que foi exportado desse arquivo pode ser importado para ser utilizado como um módulo em browser pelas outras aplicações micro front-ends do projeto.

Isso significa que temos essa ferramenta poderosa à disposição. Esse módulo utilitário, a partir do momento que exportarmos algo dentro desse arquivo, ficará disponível para todos os outros projetos utilizarem.

Testando a função publicApiFunction()

Vamos iniciar testando o funcionamento da função publicApiFunction(), presente na linha 2. Para isso, pressionaremos "Enter" duas vezes entre a abertura e o fechamento das chaves e colocaremos um console.log('Hello World!') na linha 3.

Sabemos que se não fizermos um hello world primeiro, não funciona. Temos que fazê-lo para testar o funcionamento no browser (navegador).

home-hub-utils.ts:

// Anything exported from this file is importable by other in-browser modules.
export function publicApiFunction() {
    console.log('Hello world!');
}

No explorador lateral, vamos expandir a pasta "react-login" desse micro front-end. Dentro de "src", vamos acessar o arquivo App.tsx.

Entre as chaves da export default function Root(), vamos criar uma linha acima do return e chamar a função publicApiFunction(), exportada do arquivo home-hub-utils.

App.tsx:

export default function Root() {
    publicApiFunction();
    return (
        // Código omitido
    );
}

Em seguida, faremos a exportação dessa função abaixo das outras importações, na linha 3. Escreveremos publicApiFunction() from, ../../ para voltar à raiz do projeto, utils/src/home-hub-utils. Finalizamos a importação com ponto e vírgula.

import LoginBox from './components/LoginBox';
import backgroundImg from './components/assets/background.png';
import { publicApiFunction } from '../../utils/src/home-hub-utils';

Uma coisa que pode ser estranha é que estamos utilizando a importação passando o caminho com ../ até voltar para a pasta de utils. Futuramente, poderemos configurar essa importação, mas não vamos nos preocupar com isso agora, pois o intuito é criar as funções e vê-las funcionando.

Importamos a função na linha 3 e a chamamos na dentro do Root() para que o conteúdo dela, que é um console.log, seja disparado na tela.

Voltando à página da aplicação no navegador, vamos abrir o console do desenvolvedor com "F12", selecionar a aba "Console" na barra de menus superior. No corpo da aba, perceberemos o hello world que implementamos no utils abaixo dos dois warnings (avisos) referentes a algo do CDN. Isso indica que podemos iniciar a criação da função de login.

Criando o login em "utils"

Vamos começar removendo essa função de teste publicApiFunction() na primeira linha de dentro do App.tsx. Acessando o explorador lateral, no interior desse mesmo micro front-end, vamos acessar o arquivo index.tsx dentro do caminho de pastas "src > components > LoginForm".

Em seu interior, já temos a função LoginForm() que faz o login, ou seja, esse projeto já veio com etapas configuradas e prontas. Precisamos transferir essa lógica de login para o micro front-end da pasta "utils".

Para isso, vamos copiar a função onSubmit inteira do interior de LoginForm().

const onSubmit = (data: FormValues) => {
    const authId = data.email.replace('@', '').replace('.', '').codePointAt(0);
    localStorage.setItem('auth', JSON.stringify(data));
    location.replace()(`/dashboard/${authId}/`);
};

Retornando ao arquivo home-hub-utils.ts, dentro do micro front-end de "utils", vamos apagar todo o conteúdo, pois não vamos precisar de nada que está dentro da função com o console.log. Em seguida, vamos iniciar uma função de login na linha 1 digitando export const loginFunction, passando uma arrow function (função seta) sem nenhum conteúdo por enquanto.

Entre as chaves da função seta, vamos colar o conteúdo copiado do LoginForm().

home-hub-utils.ts:

export const loginFunction = () => {
    const onSubmit = (data: FormValues) => {
        const authId = data.email.replace('@', '').replace('.', '').codePointAt(0);
        localStorage.setItem('auth', JSON.stringify(data));
        location.replace()(`/dashboard/${authId}/`);
    };
};

Vamos começar copiando o data: FormValues da linha 2 e colar entre os parênteses da função anônima na linha 1. Em seguida, podemos apagar a linha const onSubmit = (data: FormValues) => {, porque já mudamos a chamada da função e o parâmetro.

Vamos aproveitar para apagar os parênteses que fechavam essa função, na linha 5.

export const loginFunction = (data: FormValues) => {
    const authId = data.email.replace('@', '').replace('.', '').codePointAt(0);
    localStorage.setItem('auth', JSON.stringify(data));
    location.replace()(`/dashboard/${authId}/`);
};

Entre as linhas 2 e 4, a função está fazendo exatamente o que o LoginForm() faz: cria um authId a partir do data.email, "setar" (configurar) essas informações dentro do localStorage e fazer um location.replace() para navegar a pessoa usuária assim que ela faz o login para dentro da dashboard, passando o authId como parâmetro da URL.

Copiando a tipagem do formulário de login

Na sequência, precisamos copiar a tipagem do LoginForm() para esse FormValues. Como estamos utilizando as mesmas informações do LoginForm(), não temos a referência dessa tipagem neste arquivo.

Para isso, voltaremos ao arquivo index.tsx da pasta "LoginForm" e copiaremos o bloco type FormValues.

index.tsx:

type FormValues = {
    email: string;
    password: string;
};

Voltando ao arquivo da pasta "utils", home-hub-utils.ts, pularemos duas linhas a partir da linha 1 e colaremos a tipagem copiada do arquivo de formulário.

home-hub-utils.ts:

type FormValues = {
    email: string;
    password: string;
};

export const loginFunction = (data: FormValues) => {
    const authId = data.email.replace('@', '').replace('.', '').codePointAt(0);
    localStorage.setItem('auth', JSON.stringify(data));
    location.replace()(`/dashboard/${authId}/`);
};

Salvaremos esse arquivo e faremos a utilização dessa função de login dentro do LoginForm(). Voltando para o arquivo index.tsx da pasta "LoginForm", entre as chaves de LoginForm, vamos apagar todo o conteúdo da função const onSubmit, a partir das chaves. Em seu lugar, chamaremos o loginFunction() passando data como parâmetro.

index.tsx:

const LoginForm = () => {
    // Código omitido
    
    const onSubmit = (data: FormValues) => loginFunction(data);
    
    // Código omitido
};

Para utilizar essa função, precisamos importá-la. Abaixo do último import no início do arquivo, vamos fazer um import {loginFunction() from '../../../../utils/src/home-hubu-tils'.

import { Box, Button, TextField } from '@mui/material';

import { useForm } from 'react-hook-form';
import { loginFunction } from '../../../../utils/src/home-hub-utils';

Salvaremos esse código e testaremos a implementação dessa função de login na sequência.

Sobre o curso Single SPA: autenticando micro front-ends

O curso Single SPA: autenticando micro front-ends possui 113 minutos de vídeos, em um total de 44 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Iniciando um módulo utilitário
• Utilizando um módulo utilitário nos MFEs
• Incrementando nosso módulo utilitário
• Adicionando a visualização de perfil
• Finalizando o projeto