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';
useAuth
hook: 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
@zydon/auth
em uma aplicação host
Configuração 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 omode
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: () => ({}),
});
@zydon/auth
em uma aplicação remota
Configuração 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.