Integrar com React

Adicione autenticação OIDC à sua SPA React em menos de 10 minutos usando react-oidc-context.

Esta integração usa o fluxo Authorization Code + PKCE sem client secret — adequado para SPAs onde o código-fonte é público. Registre o cliente em sentinel-admin → OAuth2 Clients → New Client.

Instalar react-oidc-context

Adicione o oidc-client-ts e o react-oidc-context ao seu projeto. O oidc-client-ts é o peer dependency que implementa o protocolo PKCE; o react-oidc-context fornece o AuthProvider e os hooks React.

Terminal

npm install oidc-client-ts react-oidc-context

Configurar o AuthProvider

Envolva o componente raiz da sua aplicação com <AuthProvider>. Passe a authority, o clientId obtido no sentinel-admin e o redirectUri apontando para a rota de callback da sua SPA.

src/main.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { AuthProvider } from 'react-oidc-context';
import App from './App';

const oidcConfig = {
  authority: 'https://auth.sentinel-identity.com',
  client_id: '<SEU_CLIENT_ID>',
  redirect_uri: 'http://localhost:5173/callback',
  scope: 'openid profile email',
};

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <AuthProvider {...oidcConfig}>
      <App />
    </AuthProvider>
  </React.StrictMode>,
);

Substitua <SEU_CLIENT_ID> pelo Client ID gerado em sentinel-admin → OAuth2 Clients → New Client. Certifique-se de adicionar http://localhost:5173/callback nas Allowed Redirect URIs do cliente.

Usar o hook useAuth

O hook useAuth expõe o estado de autenticação e os métodos de login/logout. Use auth.isAuthenticated para verificar se o usuário está logado e auth.user para acessar os claims do token.

src/components/AuthButton.tsx

import { useAuth } from 'react-oidc-context';

export function AuthButton() {
  const auth = useAuth();

  if (auth.isLoading) {
    return <span>Carregando...</span>;
  }

  if (auth.error) {
    return <span>Erro: {auth.error.message}</span>;
  }

  if (auth.isAuthenticated) {
    return (
      <div>
        <p>Olá, {auth.user?.profile.name ?? auth.user?.profile.email}</p>
        <button onClick={() => auth.removeUser()}>Sair</button>
      </div>
    );
  }

  return (
    <button onClick={() => auth.signinRedirect()}>
      Entrar com Sentinel
    </button>
  );
}

Proteger rotas

Use o HOC withAuthenticationRequired para proteger páginas inteiras. Qualquer usuário não autenticado será redirecionado automaticamente para o fluxo de login antes de acessar o componente.

src/pages/Dashboard.tsx

import { withAuthenticationRequired } from 'react-oidc-context';

function Dashboard() {
  return (
    <main>
      <h1>Dashboard</h1>
      <p>Conteúdo restrito a usuários autenticados.</p>
    </main>
  );
}

export default withAuthenticationRequired(Dashboard, {
  OnRedirecting: () => <span>Redirecionando para o login...</span>,
});

Se sua SPA usa React Router, importe e renderize o componente protegido na rota correspondente normalmente — o HOC cuida do redirecionamento.

Acessar o token para chamar APIs

Após a autenticação, o access_token fica disponível em auth.user?.access_token. Passe-o no header Authorization de cada requisição às suas APIs protegidas.

src/api/client.ts

import { useAuth } from 'react-oidc-context';

export function useApiClient() {
  const auth = useAuth();

  async function get(path: string) {
    const token = auth.user?.access_token;

    if (!token) {
      throw new Error('Usuário não autenticado');
    }

    const response = await fetch(`https://api.minha-app.com${path}`, {
      headers: {
        Authorization: `Bearer ${token}`,
        'Content-Type': 'application/json',
      },
    });

    if (!response.ok) {
      throw new Error(`Erro ${response.status}: ${response.statusText}`);
    }

    return response.json();
  }

  return { get };
}

O access_token tem validade configurável no sentinel-admin. A biblioteca react-oidc-context pode renovar o token silenciosamente via silent_redirect_uri — consulte a documentação para configurar o refresh automático.

Outros quickstarts

Next.js Angular Express.js Spring Boot .NET / ASP.NET