Como implementar o Google OAuth 2.0 em Next.js 15 com NextAuth: Tutorial completo de 2026

OAuth 2.0 com Google é a maneira mais rápida de adicionar autenticação a um aplicativo Next.js: os usuários fazem login com suas contas do Google, eliminando o gerenciamento de senhas e reduzindo o atrito. Em 2026,PróximoAuth v5 (Auth.js) fornece a integração mais limpa para Next.js 15 App Router. Este tutorial cobre a implementação completa.

Pré-requisitos

• Projeto Next.js 15 (App Router)
• Conta do Console do Google Cloud (gratuita)
• Banco de dados PostgreSQL (opcional, para sessões persistentes)

Etapa 1: configurar as credenciais do Google OAuth

1. Vá paraconsole.cloud.google.com
2. Crie um novo projeto (ou selecione um existente)
3. Navegue atéAPIs e serviços → Credenciais → Criar credenciais → ID do cliente OAuth
4. Tipo de aplicação:Aplicação Web
5. URIs de redirecionamento autorizados:http://localhost:3000/api/auth/callback/google
6. Adicione URI de produção ao implantar:https://yourdomain.com/api/auth/callback/google
7. Salve e copie seuID do cliente eSegredo do cliente

Etapa 2: Instale NextAuth v5

npm install next-auth@beta
# or
pnpm add next-auth@beta

Etapa 3: Configurar Auth.js

Criarauth.ts na raiz do seu projeto:

import NextAuth from "next-auth";
import Google from "next-auth/providers/google";

export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [
    Google({
      clientId:     process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
  ],
  callbacks: {
    async session({ session, token }) {
      // Add user ID to session
      if (token.sub) {
        session.user.id = token.sub;
      }
      return session;
    },
    async jwt({ token, account, profile }) {
      if (account) {
        token.accessToken = account.access_token;
      }
      return token;
    },
  },
  pages: {
    signIn: "/login",    // custom sign-in page
    error:  "/auth/error",
  },
});

Etapa 4: Criar manipulador de rota

Criarapp/api/auth/[...nextauth]/route.ts:

import { handlers } from "@/auth";
export const { GET, POST } = handlers;

Etapa 5: Variáveis de ambiente

# .env.local
GOOGLE_CLIENT_ID=your_client_id_here
GOOGLE_CLIENT_SECRET=your_client_secret_here
AUTH_SECRET=generate_with_openssl_rand_base64_32

# Generate AUTH_SECRET:
# openssl rand -base64 32

Etapa 6: Adicionar entrada/saída à IU

// components/AuthButtons.tsx
import { signIn, signOut } from "@/auth";

export function SignInButton() {
  return (
    <form action={async () => {
      "use server";
      await signIn("google");
    }}>
      <button type="submit">Sign in with Google</button>
    </form>
  );
}

export function SignOutButton() {
  return (
    <form action={async () => {
      "use server";
      await signOut({ redirectTo: "/" });
    }}>
      <button type="submit">Sign out</button>
    </form>
  );
}

Etapa 7: Acesse a sessão nos componentes do servidor

// app/dashboard/page.tsx
import { auth } from "@/auth";
import { redirect } from "next/navigation";

export default async function Dashboard() {
  const session = await auth();

  if (!session?.user) {
    redirect("/login");
  }

  return (
    <main>
      <h1>Welcome, {session.user.name}!</h1>
      <img src={session.user.image!} alt="avatar" width={40} height={40} />
      <p>Email: {session.user.email}</p>
    </main>
  );
}

Etapa 8: Proteger Rotas com Middleware

// middleware.ts
import { auth } from "@/auth";
import { NextResponse } from "next/server";

export default auth((req) => {
  const isLoggedIn = !!req.auth;
  const isProtected = req.nextUrl.pathname.startsWith("/dashboard");

  if (isProtected && !isLoggedIn) {
    const loginUrl = new URL("/login", req.url);
    loginUrl.searchParams.set("callbackUrl", req.nextUrl.href);
    return NextResponse.redirect(loginUrl);
  }
  return NextResponse.next();
});

export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
};

Etapa 9: Integração do banco de dados (opcional, mas recomendado)

npm install @auth/prisma-adapter @prisma/client prisma

// auth.ts with database adapter
import { PrismaAdapter } from "@auth/prisma-adapter";
import { db } from "@/lib/db";  // your Prisma client

export const { handlers, auth, signIn, signOut } = NextAuth({
  adapter: PrismaAdapter(db),
  session: { strategy: "database" },  // store sessions in DB
  providers: [Google(...)],
});

As sessões de banco de dados permitem invalidar sessões do lado do servidor (útil para banir usuários ou sair forçado) e persistir o login durante as reinicializações do servidor – o que não é possível com sessões somente JWT.

Etapa 10: Acesse a sessão nos componentes do cliente

// Wrap your app with SessionProvider in layout.tsx
// app/layout.tsx
import { SessionProvider } from "next-auth/react";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <SessionProvider>{children}</SessionProvider>
      </body>
    </html>
  );
}

// Client component using session
"use client";
import { useSession } from "next-auth/react";

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

  if (status === "loading") return <Skeleton />;
  if (!session) return <SignInButton />;

  return <img src={session.user.image!} alt={session.user.name!} />;
}

Perguntas Frequentes

P: Sessões JWT vs banco de dados – quais devo usar?
R: JWT para aplicativos simples onde você não precisa de invalidação de sessão no servidor. Banco de dados para aplicativos onde você precisa revogar sessões, auditar logins ou armazenar preferências do usuário vinculadas a sessões.

P: Como adiciono mais provedores OAuth?
R: Importe e adicione ao array de provedores:import GitHub from "next-auth/providers/github". NextAuth oferece suporte a mais de 70 provedores com o mesmo padrão.

P: Como posso restringir o login a domínios de e-mail específicos?
R: Use osignIn retorno de chamada:async signIn({ user }) { return user.email?.endsWith("@company.com") ?? false; }

P: O Auth.js (NextAuth v5) está pronto para produção?
R: A partir de 2026, sim — o beta está estável há muitos meses e é amplamente utilizado na produção. A API é estável e recomendada para novos projetos.

P: Como acesso o token de acesso do Google para chamadas de API?
R: Armazene-o no retorno de chamada JWT (token.accessToken = account.access_token) e exponha-o no retorno de chamada da sessão. Acesso viasession.accessToken.

Conclusão

NextAuth v5 + Google OAuth oferece autenticação pronta para produção em Next.js 15 com cerca de 50 linhas de código. O padrão de manipulador de rotas, entrada/saída de ação do servidor, proteção de middleware e adaptador de banco de dados opcional cobrem todos os requisitos de autenticação do mundo real. Adicione GitHub, Discord ou e-mail/senha junto com o Google usando o mesmo padrão – NextAuth lida com a complexidade para que você não precise fazer isso.