Integrar Next.js com Sentinel Identity

Adicione autenticação SSO ao seu app Next.js em minutos usando next-auth v4 e o fluxo Authorization Code com client secret.

next-auth v4
Esta integração usa o fluxo Authorization Code com client secret — adequado para aplicações server-side onde a chave fica no backend. Registre o cliente em sentinel-admin → OAuth2 Clients → New Client.
1

Instalar next-auth

Adicione o next-auth ao seu projeto Next.js. A versão 4 é compatível tanto com o Pages Router quanto com o App Router.

Terminal
npm install next-auth
2

Criar o handler de autenticação

Crie o arquivo de rota do next-auth com um provider OIDC customizado apontando para o Sentinel. Use /pages/api/auth/[...nextauth].ts para o Pages Router ou /app/api/auth/[...nextauth]/route.ts para o App Router.

pages/api/auth/[...nextauth].ts
import NextAuth from 'next-auth';
import type { NextAuthOptions } from 'next-auth';

export const authOptions: NextAuthOptions = {
  providers: [
    {
      id: 'sentinel',
      name: 'Sentinel Identity',
      type: 'oauth',
      wellKnown: `${process.env.OIDC_ISSUER}/.well-known/openid-configuration`,
      clientId: process.env.OIDC_CLIENT_ID,
      clientSecret: process.env.OIDC_CLIENT_SECRET,
      authorization: {
        params: { scope: 'openid profile email' },
      },
      idToken: true,
      profile(profile) {
        return {
          id: profile.sub,
          name: profile.name,
          email: profile.email,
          image: profile.picture ?? null,
        };
      },
    },
  ],
  session: { strategy: 'jwt' },
};

export default NextAuth(authOptions);

App Router: exporte GET e POST usando handlers = NextAuth(authOptions) em /app/api/auth/[...nextauth]/route.ts.

3

Configurar variáveis de ambiente

Crie o arquivo .env.local na raiz do projeto com as credenciais do cliente registrado no sentinel-admin. NEXTAUTH_SECRET deve ser um valor aleatório seguro gerado com openssl.

.env.local
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=<gerado-com-openssl-rand-base64-32>

OIDC_ISSUER=https://auth.sentinel-identity.com
OIDC_CLIENT_ID=<SEU_CLIENT_ID>
OIDC_CLIENT_SECRET=<SEU_CLIENT_SECRET>

Nunca versione o .env.local. Adicione-o ao .gitignore e use variáveis de ambiente do seu provedor de deploy em produção.

4

Adicionar o SessionProvider

Envolva o layout raiz com o SessionProvider para que os componentes cliente possam acessar a sessão via useSession(). No App Router, crie um componente Providers separado marcado com "use client".

app/providers.tsx
'use client';
import { SessionProvider } from 'next-auth/react';

export function Providers({ children }: { children: React.ReactNode }) {
  return <SessionProvider>{children}</SessionProvider>;
}

No layout.tsx importe Providers e envolva {children} com ele. O SessionProvider não pode ser usado diretamente em Server Components.

5

Usar a sessão na aplicação

Em componentes cliente use o hook useSession(). Em Server Components (App Router) use getServerSession() para acessar a sessão sem chamadas adicionais ao servidor.

components/UserButton.tsx
'use client';
import { useSession, signIn, signOut } from 'next-auth/react';

export function UserButton() {
  const { data: session, status } = useSession();

  if (status === 'loading') return <span>Carregando...</span>;

  if (!session) {
    return (
      <button onClick={() => signIn('sentinel')}>
        Entrar com Sentinel
      </button>
    );
  }

  return (
    <div>
      <p>Olá, {session.user?.name}</p>
      <button onClick={() => signOut()}>Sair</button>
    </div>
  );
}
6

Proteger rotas no middleware

Crie o arquivo middleware.ts na raiz do projeto. O withAuth do next-auth intercepta as rotas listadas no matcher e redireciona usuários não autenticados para a página de login.

middleware.ts
import { withAuth } from 'next-auth/middleware';

export default withAuth({
  callbacks: {
    authorized: ({ token }) => !!token,
  },
});

export const config = {
  matcher: [
    '/dashboard/:path*',
    '/profile/:path*',
    '/admin/:path*',
  ],
};

Rotas fora do matcher permanecem públicas. Ajuste os padrões conforme a estrutura do seu projeto.

Outros quickstarts

React (SPA)AngularExpress.jsSpring Boot.NET / ASP.NET