​
Pré-requisitos

​
Configuração do serviço

O authService.ts é o arquivo central de autenticação do front-end. Ele configura a biblioteca oidc-client-ts para se comunicar com o Kodigos Identity e expõe funções que o resto da aplicação usa: login, logout, renovar token, buscar dados do usuário.
1

Instalação

É preciso instalar a biblioteca que utiliza o protocolo OpenID Connect no navegador, permitindo redirecionar para o Identity Server, processar o callback e armazenar o token.
bash
npm install oidc-client-ts
2

Configurar as variáveis de ambiente

Antes de criar o authService.ts, as variáveis de ambiente precisam estar definidas no arquivo .env na raiz do projeto. Cada variável corresponde a uma configuração da aplicação no painel do Kodigos ID
.env
VITE_AUTH_AUTHORITY=https://seu-kodigos-id.com/identity
VITE_AUTH_CLIENT_ID=seu-client-id
VITE_AUTH_CLIENT_SECRET=seu-client-secret
VITE_AUTH_REDIRECT_URI=http://localhost:5173/auth
VITE_AUTH_POST_LOGOUT_REDIRECT_URI=http://localhost:5173/login
A VITE_AUTH_REDIRECT_URI deve estar cadastrada exatamente igual no painel do Kodigos ID como redirect permitida. Se houver qualquer diferença (incluindo barra final ou protocolo), o login falha com erro de redirect mismatch.
3

Criar o arquivo authService.ts

Com as variáveis configuradas, crie o arquivo em src/auth/authService.ts. O UserManager é a classe principal da oidc-client-ts. A partir dela é poss’ível gerenciar todo o fluxo OAuth2 internamente, desde o redirect até o armazenamento do token.
authService.ts
import { UserManager } from 'oidc-client-ts';

const oidcConfig = {
    // URL a qual o usuário será redirecionado ao fazer login.
    authority: import.meta.env.VITE_AUTH_AUTHORITY,
    // Identificador da aplicação cadastrada no Kodigos ID.
    client_id: import.meta.env.VITE_AUTH_CLIENT_ID,
    // URL para onde o Kodigos ID redireciona após o login.
    // Deve apontar para a rota /auth que processa o callback.
    redirect_uri: import.meta.env.VITE_AUTH_REDIRECT_URI,
    // Tipo de resposta do fluxo OAuth2
    response_type: 'code',

    // Escopos solicitados ao Kodigos ID:
    // 'profile' → dados do usuário (nome)
    // 'roles'   → papéis do usuário
    // 'email'   → email do usuário
    scope: 'profile roles email',

    // URL de redirect após o logout.
    post_logout_redirect_uri: import.meta.env.VITE_AUTH_POST_LOGOUT_REDIRECT_URI,

    // Busca dados adicionais do usuário no endpoint /userinfo.
    loadUserInfo: true,

    // Segredo da aplicação.
    client_secret: import.meta.env.VITE_AUTH_CLIENT_SECRET,

    // Renova o token automaticamente antes de expirar,sem o usuário perceber.
    automaticSilentRenew: true,

    // URL da rota que processa a renovação silenciosa
    silent_redirect_uri: window.location.origin + '/silent-renew'
};

export const userManager = new UserManager(oidcConfig);

// Redireciona o navegador para a tela de login
// Salva a rota atual no parametro state. para, após o login, voltar exatamente para onde estava
export async function login() {
  await userManager.signinRedirect({state: window.location.pathname + window.location.search });
}

// Encerra a sessão tanto na aplicação quanto no Kodigos ID
// Redireciona para post_logout_redirect_uri
export async function logout() {
  await userManager.signoutRedirect();
}

// Renova o token automaticamente sem que o usuário perceba
export async function renewToken() {
    const user = await userManager.signinSilent();
    return user;
}

// Processa o callback após o redirect de volta e armazena a sessão
export async function completeLogin() {
  const user = await userManager.signinRedirectCallback();
  return user;
}

// Retorna o usuário logado com todas as suas informações
// Retorna null se não houver sessão ativa
export async function getUser() {
  return await userManager.getUser();
}

​
Consultar dados do usuário

Após o login, a função getUser() retorna um objeto com todas as informações do usuário autenticado. As claims de permissão ficam dentro do profile
typescript
const user = await getUser();

if (user) {
    user.access_token          // "eyJhbGciOi..." — JWT para enviar à API
    user.expired               // false se o token ainda é válido
    user.expires_at            // Timestamp de expiração

    user.profile.email         // "joao@empresa.com"
    user.profile.name          // "João Silva"
    user.profile.sub           // "user-id-123"

    // Claims de permissão:
    user.profile["Clientes"]   // ["clientes:view", "clientes:edit"]
    user.profile["Projetos"]   // ["projetos:view", "projetos:edit", "projetos:delete"]
}

​
Componentes auxiliares

Além do authService.ts, é necessário implementar componentes auxiliares que processam os redirects do Identity.

​
Callback

O Callback.vue é um componente renderizado quando o Kodigos ID redireciona de volta após o login. Ele chama completeLogin() para trocar o código de autorização por um token de acesso, e depois redireciona o usuário para a rota que ele estava antes do login.
Callback.ts
<template>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { completeLogin } from '../auth/authService';
import { useRouter } from 'vue-router';

const router = useRouter();

onMounted(async () => {
  try {
    const user = await completeLogin();
    const targetPath = user?.state || (import.meta.env.BASE_URL ?? '/');

    setTimeout(() => {
      router.replace(targetPath);
    }, 600);

  } catch (error) {
    console.error("Erro no callback de autenticação:", error);
    router.push('/login');
  }
});
</script>

​
Silent Renew

O SilentRenew.vue é carregado dentro de um iframe oculto quando o token está prestes a expirar. Ele processa a resposta da renovação silenciosa. 
<template>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { userManager } from '../auth/authService';

onMounted(async () => {
  try {
    await userManager.signinSilentCallback();
  } catch (error) {
    console.error("Erro no Silent Renew via Vue:", error);
  }
});
</script>
Ambos os componentes precisam ter suas rotas registradas no router.ts como rotas públicas (sem guard de autenticação).