@policiarcc/rccsystem-atlas-oidc-vanilla

Cliente de Login com o RCCSystem para JavaScript puro. createAtlasVanillaAuth() fornece um store pequeno com login, completeCallback, logout, subscribe e getSnapshot, sem depender de React ou Vue.

O que este pacote é

Ele atende uma SPA pública. Portanto, pode conter clientId, mas nunca clientSecret ou API Key. A transação PKCE fica em sessionStorage; tokens e identidade ficam apenas em memória. Para painel administrativo ou autorização por grupo/cargo atual, adicione um backend/BFF.

Cadastro e instalação

Cadastre no Atlas uma SPA pública com callback exato:

http://localhost:8080/auth/callback
https://portal.parceiro.com/auth/callback

npm install @policiarcc/rccsystem-atlas-oidc @policiarcc/rccsystem-atlas-oidc-vanilla

Use Vite, Parcel ou outro bundler ESM. Não tente esconder segredo com minificação/ofuscação: qualquer JavaScript entregue ao browser é público.

Cliente e store

import { createAtlasClient } from "@policiarcc/rccsystem-atlas-oidc/client";
import { createAtlasVanillaAuth } from "@policiarcc/rccsystem-atlas-oidc-vanilla";

const atlas = createAtlasClient({
  issuer: "https://atlas.policercc.com.br",
  clientId: "oidc_public_...",
  redirectUri: `${window.location.origin}/auth/callback`,
  scopes: ["openid", "profile_basic", "profile_rcc"],
});

export const auth = createAtlasVanillaAuth(atlas);

Login e callback

import { auth } from "./auth.js";

document
  .querySelector("#login")
  .addEventListener("click", () => void auth.login());
auth.subscribe((snapshot) => {
  if (snapshot.status === "error")
    showError("Não foi possível concluir o login.");
});

import { auth } from "./auth.js";

const snapshot = await auth.completeCallback();
if (snapshot.status === "authenticated") {
  renderDashboard(snapshot.session);
} else if (snapshot.status === "error") {
  renderLoginError();
} else {
  renderLogin();
}

Mantenha o callback na mesma SPA ou em um roteador client-side. Redirecionar para uma página HTML nova recria o JavaScript e descarta a sessão em memória, como esperado.

Estado e logout

const current = auth.getSnapshot();
if (current.status === "authenticated") {
  document.querySelector("#username").textContent =
    current.session.identity.username ?? "militar";
}

document.querySelector("#logout").addEventListener("click", () => {
  auth.logout();
  renderLogin();
});

Esta é uma proteção de interface, não de backend. Não use o estado da SPA para liberar dados sigilosos ou ações de maior impacto. Para isso, implemente um BFF com createAtlasServer e sessão opaca.

Problemas comuns

• unauthorized_client: callback, host, porta ou tipo public_spa estão incorretos no Atlas.
• Callback sem transação: usuário abriu outra aba ou o sessionStorage foi apagado; reinicie login.
• Não logue URL de callback, authorization code, tokens ou headers.

Guia completo: SDK para JavaScript puro.