Client de comunicação com Keycloak e Axios interceptor

O pacote possui um componente de login que se comunica com o Keycloak e utiliza o Axios interceptor para validação de tokens no front-end

Iniciando o projeto

Para instalar a library da página de login

npm i keycloak-auth-client

Ou se já estiver instalado, realizar o update do pacote NPM para verificar se não há alguma nova versão

npm update keycloak-auth-client

Agora no arquivo main.js, que é o ponto de entrada principal da aplicação, fazemos o import do componente presente na library instalada

import LoginInput from "keycloak-auth-client";
import "keycloak-auth-client/dist/style.css";

No mesmo arquivo, criamos uma instância do componente na aplicação Vue.js

const app = createApp(App);
app.use(LoginInput);

Utilizando no projeto

Agora conseguimos utilizá-lo globalmente apenas chamando o componente em alguma das páginas

<login-input></login-input>
<LoginInput />

Estrutura

├── src/components        # Componentes disponibilizados na library
├── src/helpers           # Helper que realiza o mascaramento de atributos
├── src/services          # Axios interceptor para validar tokens de acesso e refresh token
├── composer.json         # Listar as dependências do projeto e suas versões

Dependências

| Recurso | Versão | |--------------------|-----------| | vue.js | ^3.4.21 | | axios | ^1.6.1 | | js-cookie | 3.0.5 |

Guias:

• Publish a Vue Component to NPM // Vite and Vue 3
• Building a Vue 3 component library