0Pricing
React Academy · Aula

Gerenciamento de sessões e hook useSession

Acesse dados da sessão em componentes de servidor e cliente e proteja páginas com base no estado de autenticação.

Gerenciamento de sessões e hook useSession é uma aula grátis de React Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.

Tipos de sessão no Auth.js

O Auth.js oferece suporte a duas estratégias de sessão: JWT (padrão, token sem estado em um cookie) e banco de dados (registro de sessão no banco de dados, que pode ser invalidado no servidor).

useSession em Componentes de cliente

useSession() é um gancho de Componente de cliente que lê a sessão atual. Ele retorna data (sessão), status ('loading' | 'authenticated' | 'unauthenticated') e uma função update.

'use client';
import { useSession } from 'next-auth/react';

export function UserAvatar() {
  const { data: session, status } = useSession();
  if (status === 'loading') return <Spinner />;
  if (status === 'unauthenticated') return <Link href="/login">Sign in</Link>;
  return <img src={session.user?.image ?? ''} alt={session.user?.name ?? ''} />;
}

Configurando o SessionProvider

Envolva seu aplicativo (ou uma subárvore de Componente de cliente) em SessionProvider para que useSession possa acessar o contexto da sessão.

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

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

// app/layout.tsx
import { Providers } from './providers';
export default function RootLayout({ children }) {
  return <html><body><Providers>{children}</Providers></body></html>;
}

auth() em Componentes de servidor

Para Componentes de servidor, use auth() diretamente — sem gancho e sem provedor. Ele lê a sessão do cookie no servidor.

import { auth } from '@/auth';

export default async function Header() {
  const session = await auth();
  return (
    <nav>
      {session ? (
        <span>Hello, {session.user?.name}</span>
      ) : (
        <Link href="/login">Sign in</Link>
      )}
    </nav>
  );
}

Protegendo rotas de cliente

Use useSession com a opção required: true para redirecionar automaticamente usuários não autenticados à página de entrada.

'use client';
import { useSession } from 'next-auth/react';

export default function ProtectedPage() {
  const { data: session } = useSession({ required: true });
  // session is never null here — unauthenticated users are redirected
  return <div>Welcome, {session?.user?.name}</div>;
}

Atualizando a sessão

Chame a função update() retornada por useSession para atualizar a sessão (por exemplo, após uma atualização do perfil) sem sair e entrar novamente.

const { data: session, update } = useSession();

async function handleNameChange(newName: string) {
  await updateUserName(newName); // API call
  await update({ user: { name: newName } }); // refresh session
}

Retornos de chamada de sessão JWT

Use o retorno de chamada jwt para adicionar dados personalizados ao token JWT durante a entrada, e o retorno de chamada session para expô-los no objeto da sessão.

callbacks: {
  async jwt({ token, user }) {
    if (user) token.role = user.role; // add on first sign-in
    return token;
  },
  async session({ session, token }) {
    session.user.role = token.role as string;
    return session;
  },
},

Expiração da sessão

Configure a idade máxima da sessão na configuração do Auth.js. As sessões JWT são atualizadas automaticamente a cada solicitação enquanto estão ativas.

export const { handlers, auth } = NextAuth({
  session: {
    strategy: 'jwt',
    maxAge: 30 * 24 * 60 * 60, // 30 days
    updateAge: 24 * 60 * 60,   // refresh if older than 1 day
  },
});

Invalidando sessões do banco de dados

As sessões do banco de dados podem ser revogadas no servidor (útil para forçar o encerramento da sessão). Exclua o registro da sessão do banco de dados para invalidá-la imediatamente.

// Server Action to log out all devices:
async function logOutAllDevices() {
  'use server';
  const session = await auth();
  if (session) await db.session.deleteMany({ where: { userId: session.user.id } });
  redirect('/login');
}

Acesso baseado em funções em Componentes de cliente

Leia a função da sessão com useSession e renderize condicionalmente a interface com base nela.

const { data: session } = useSession();
const isAdmin = session?.user?.role === 'admin';

return (
  <>
    {isAdmin && <AdminPanel />}
    <UserContent />
  </>
);

Verificação rápida

Qual provedor precisa envolver seu aplicativo para que useSession() funcione em Componentes de cliente?

Recapitulação

Use auth() para acessar a sessão em Componentes de servidor e useSession() em Componentes de cliente envolvidos por SessionProvider. Adicione dados personalizados por meio dos retornos de chamada de JWT e sessão, atualize as sessões no cliente com update() e configure maxAge para a expiração da sessão.

Perguntas Frequentes

A aula “Gerenciamento de sessões e hook useSession” é grátis?

Sim — o texto completo de “Gerenciamento de sessões e hook useSession” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.

O que vou aprender em “Gerenciamento de sessões e hook useSession”?

Acesse dados da sessão em componentes de servidor e cliente e proteja páginas com base no estado de autenticação. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar React Academy?

Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Gerenciamento de sessões e hook useSession”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de React Academy?

Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Configurando Auth.js no App Router do Next.js
  2. Gerenciamento de sessões e hook useSession
  3. Provedor de credenciais e login personalizado
  4. Proteção de rotas baseada em middleware
← Voltar para React Academy