@zydon/auth v1.0.77

Pacote para lidar autenticação entre aplicativos micro front-ends do Zydon

Como usar?

Instale o pacote no seu projeto

yarn add @zydon/auth

Para atualizar o pacote no seu projeto

yarn upgrade @zydon/auth --latest

Recursos disponíveis

import {
  useAuth,
  Auth,
  AuthData,
  Authed,
  AuthedProps,
  AuthenticationData,
  Token,
  authenticate,
  decodeToken,
  getToken,
  handleRunInDevMode,
  logout,
  refreshToken,
  setToken,
} from '@zydon/auth';

hook: useAuth

Esse hook disponibliza uma série de recursos utéis para uso dentro de componentes:

const {
    isAuthenticated,
    authData,
    authentication,
    loggingIn,
    loginError,
    logout,
    token
  } = useAuth(mode);

• isAuthenticated: variável booleana que mostra se o usuário está logado ou não.
• authData: dados do usuário
• authentication: função para autenticar o usuário authentication({username: '', password: ''})
• loggingIn: variável booleana que mostra se o usuário usuário está logando
• loginError: variável com o erro retornado no serviço de login
• logout: função para deslogar o usuário
• token: token do usuário logado token: string
• Auth: interface com o token e dados do usuário logado
• AuthData: interface com os dados do usuário logado
• Authed: componente wrapper usado para permitir o acesso somente de usuários logados (Deve ser usado somente em aplicações remotas)

<Authed fallback={<Typography variant="h1">Unauthorized access</Typography>}>
  conteúdo que será renderezido somente se o usuário estiver logado
</Authed>

• AuthedProps: interface com as props do componente <Authed />
• AuthenticationData: interface com os dados necessários para login {username: string, password: string}
• authenticate: função para autenticar o usuário authentication({username: '', password: ''})
• decodeToken: função para decoficar o token do usuário
• getToken: função para pegar o token do usuário
• handleRunInDevMode: funcão para lidar com usuário logado em aplicações remotas que estão sendo executadas em modo de desenvolvimento handleRunInDevMode(import.meta.env.DEV, import.meta.env.VITE_DEV_TOKEN)
• logout: função para deslogar o usuário
• refreshToken: função para fazer o refresh token (retorno: Promise<string> como o novo token gerado)
• setToken: função para setar o token do usuário
• getAuthData função que retorna os dados do usuário logado

Configuração @zydon/auth em uma aplicação host

Uma aplicação host não necessista de nenhuma configuração especial para o uso deste pacote. Os recursos disponiveis no hook useAuth já oferecem o básico para lidar com autenticação e permissões que o usuário terá. Exemplos utéis para vc usar/inspirar:

• hook useAuth() como o mode setado: src/hooks/useAuth.ts

import { useAuth as useAuthentication } from '@zydon/auth';

const useAuth = () => {
  const authData = useAuthentication(import.meta.env.MODE);

  return authData;
};

export default useAuth;

• Refreh token e Token setado automaticamente nas requisições (exemplo usando rtk-query: @reduxjs/toolkit/query/react):

import { getToken, logout, refreshToken } from '@zydon/auth';
import {
  BaseQueryFn,
  FetchArgs,
  FetchBaseQueryError,
  createApi,
  fetchBaseQuery,
} from '@reduxjs/toolkit/query/react';
import { Mutex } from 'async-mutex';

const mutex = new Mutex();

const baseQuery = fetchBaseQuery({
  baseUrl: import.meta.env.VITE_API,
  prepareHeaders: headers => {
    headers.set('Authorization', `Bearer ${getToken()}`);

    return headers;
  },
  credentials: 'include',
});

const baseQueryWithReauth: BaseQueryFn<
  string | FetchArgs,
  unknown,
  FetchBaseQueryError
> = async (args, api, extraOptions) => {
  await mutex.waitForUnlock();

  let result = await baseQuery(args, api, extraOptions);

  if (result.error && result.error.status === 401) {
    if (!mutex.isLocked()) {
      const release = await mutex.acquire();

      try {
        await refreshToken(import.meta.env.MODE);
        result = await baseQuery(args, api, extraOptions);
      } catch (err) {
        logout();
      } finally {
        release();
      }
    } else {
      await mutex.waitForUnlock();
      result = await baseQuery(args, api, extraOptions);
    }
  }
  return result;
};

export default createApi({
  reducerPath: 'api',
  baseQuery: baseQueryWithReauth,
  endpoints: () => ({}),
});

Configuração @zydon/auth em uma aplicação remota

As configurações em uma aplicação remota podem seguir o mesmo da configuração de uma aplicação host, com apenas um detalhe especial para se atentar: Como lidar com usuário logado?

Uma aplicação remota não terá uma tela de login, uma vez que após o build ela será executada dentro de uma aplicação host. Dessa forma não é possível saber qual o usuário está logado durante o desenvolvimento. Logo não é possível consumir a maioria dos serviços de um back-end. Nesse cenário tenebroso, você DEV, teria que implementar uma funcionalidade, gerar um build, para então conseguir testar uma integração. Já que executando esse build dentro de uma aplicação host haveria um usuário logado.

Para lidar com essa questão vamos fazer as seguintes configurações:

• criar variáveis ambiente no arquivo .env.development:

VITE_USERNAME=seu usuário aqui
VITE_PASSWORD=sua senha aqui

• no arquivo App.tsx vamos fazer as seguintes configurações:

import React from 'react';
import { Typography } from '@mui/material';
import { Authed } from '@zydon/auth';


const App: React.FC = () => (
  <Authed
    mode={import.meta.env.MODE}
    username={import.meta.env.VITE_USERNAME}
    password={import.meta.env.VITE_PASSWORD}
    fallback={<Typography variant="h1">Unauthorized access</Typography>}
  >
    <>Conteúdo da aplicação aqui...</>
  </Authed>
);

export default App;

Como fazer implementações/correções nesse pacote?

Esse pacote é basicamente um projeto react-vite publicado no npm.\ Para fazer implementações/correções basta clonar o repositório do projeto e subir localmente em sua máquina. Crie uma branch, realize as implementações/correções, depois suba para o repositório e faça merge pra main. As alterações serão publicadas automaticamente no npm em alguns minutos.