RCCSystem Login Button

Componente visual oficial para iniciar o Login com RCCSystem. Ele preserva a identidade do RCCSystem em React, Next.js, Vue, Nuxt, Angular, Svelte, Astro, HTML estático e qualquer stack que renderize HTML e CSS.

Documentação completa · Componente no Figma · Repositório

O que este pacote faz

• Entrega as variantes oficiais default, light e dark.
• Embute a Rajdhani Bold oficial no CSS, sem pedir Google Fonts ou configuração de fonte ao parceiro.
• Usa 18px, ícone de 30px e área de clique confortável por padrão; cada medida pode ser ajustada sem alterar a identidade visual.
• Mantém área de clique, foco de teclado, contraste e movimento reduzido.
• Funciona como link de navegação, que é a semântica correta para iniciar login.
• Não conhece, recebe ou armazena API Key, client_secret, callback, authorization code ou tokens.

O seu aplicativo continua responsável pelo OIDC. Use como href a rota de início de login do seu próprio site, que gera state, nonce e PKCE antes de redirecionar ao RCCSystem.

Instalação

npm install @policiarcc/rccsystem-login-button

Com pnpm:

pnpm add @policiarcc/rccsystem-login-button

Com Yarn:

yarn add @policiarcc/rccsystem-login-button

React, Next.js e Remix

Importe o CSS uma vez no layout global ou na entrada do app.

import '@policiarcc/rccsystem-login-button/styles.css';
import { RCCSystemLoginButton } from '@policiarcc/rccsystem-login-button/react';

export function LoginPage() {
  return <RCCSystemLoginButton href="/api/auth/login" variant="default" />;
}

O componente aceita os atributos normais de um link React, como id, aria-describedby e onClick, além de:

| Prop | Tipo | Padrão | Uso | | --- | --- | --- | --- | | href | string | obrigatório | Rota local que inicia o OIDC. | | variant | default \| light \| dark | default | Variante visual oficial. | | size | default \| compact | default | Versão para cabeçalhos. | | fullWidth | boolean | false | Ocupa toda a largura do contêiner. | | fontSize | number \| string | 18 | Tamanho da fonte; números são convertidos para px. | | logoSize | number \| string | 30 | Tamanho do ícone; números são convertidos para px. | | padding | number \| string | 12px 18px | Espaçamento interno; use string para valores vertical e horizontal. |

<RCCSystemLoginButton
  href="/api/auth/login"
  variant="light"
  size="compact"
  fontSize={16}
  logoSize={26}
  padding="10px 16px"
  aria-describedby="login-explanation"
/>

Vue 3 e Nuxt

<script setup lang="ts">
import '@policiarcc/rccsystem-login-button/styles.css';
import { RCCSystemLoginButton } from '@policiarcc/rccsystem-login-button/vue';
</script>

<template>
  <RCCSystemLoginButton href="/api/auth/login" variant="dark" />
</template>

As props são as mesmas da versão React: href, variant, size, fullWidth, fontSize, logoSize e padding. Em Nuxt, faça a importação do CSS em nuxt.config.ts ou no layout global.

JavaScript puro

import '@policiarcc/rccsystem-login-button/styles.css';
import { createRCCSystemLoginButton } from '@policiarcc/rccsystem-login-button/vanilla';

document.querySelector('#login-area')?.append(
  createRCCSystemLoginButton({
    href: '/api/auth/login',
    fullWidth: true,
    fontSize: 20,
    logoSize: 34,
    padding: '14px 22px',
    variant: 'default',
  }),
);

HTML, Svelte, Astro, Angular, Laravel e outros

Carregue o CSS e use o markup. O componente não exige JavaScript em runtime.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@policiarcc/[email protected]/dist/styles.css"
/>

<a class="rccsystem-login-button rccsystem-login-button--light" href="/api/auth/login">
  <span aria-hidden="true" class="rccsystem-login-button__mark"></span>
  <span class="rccsystem-login-button__label">Entre com o RCCSystem</span>
</a>

Em HTML puro, ajuste somente as variáveis de escala permitidas:

<a
  class="rccsystem-login-button rccsystem-login-button--default"
  href="/api/auth/login"
  style="--rccsystem-login-button-font-size: 20px; --rccsystem-login-button-mark-size: 34px; --rccsystem-login-button-padding: 14px 22px;"
>
  <span aria-hidden="true" class="rccsystem-login-button__mark"></span>
  <span class="rccsystem-login-button__label">Entre com o RCCSystem</span>
</a>

Exemplo Svelte:

<script>
  import '@policiarcc/rccsystem-login-button/styles.css';
</script>

<a class="rccsystem-login-button rccsystem-login-button--dark" href="/api/auth/login">
  <span aria-hidden="true" class="rccsystem-login-button__mark"></span>
  <span class="rccsystem-login-button__label">Entre com o RCCSystem</span>
</a>

Exemplo Angular:

<a class="rccsystem-login-button rccsystem-login-button--default" href="/api/auth/login">
  <span aria-hidden="true" class="rccsystem-login-button__mark"></span>
  <span class="rccsystem-login-button__label">Entre com o RCCSystem</span>
</a>

Importe o CSS globalmente em angular.json, styles.scss, no layout Astro ou no ponto de entrada do seu framework.

Variantes e personalização permitida

| Variante | Quando usar | | --- | --- | | default | Fundo amarelo. É a variante principal e recomendada na maioria das telas. | | light | Fundo branco, para superfícies escuras ou blocos institucionais claros. | | dark | Fundo escuro, para cabeçalhos ou superfícies claras que precisam de contraste. |

O pacote oferece size="compact" e fullWidth para adaptação de layout. Posicione o componente pelo contêiner da página, mas não troque logo, texto, cores ou estados com CSS próprio: as três variantes já são a personalização visual suportada.

Acessibilidade

• Use o componente como link; não troque por div clicável.
• O texto visível é mantido para leitores de tela e o ícone é decorativo.
• O foco de teclado é sempre visível.
• A animação é desativada quando a pessoa usa prefers-reduced-motion.
• Não abra o fluxo em outra aba. O callback deve voltar para a mesma sessão e origem.

Segurança OIDC

Pessoa -> botão -> /api/auth/login do parceiro -> RCCSystem -> callback do parceiro

O botão deve apontar para /api/auth/login ou rota equivalente do parceiro. Não monte manualmente a URL de /oidc/authorize em um componente visual e nunca inclua client_secret, API Key, token ou redirect_uri no HTML, JavaScript público ou atributo do botão.

Leia a documentação OIDC antes de integrar a autenticação.

Versões

Use uma versão fixa no CDN. Mudanças compatíveis entram na mesma versão principal; qualquer quebra de HTML, classes ou API vira uma versão principal nova. Consulte as releases do repositório antes de atualizar.