如何在5分钟内使用 Authon 为 Next.js 添加 Google 登录

发布: 18小时前 (2026年3月20日 GMT+8 02:35)

7 分钟阅读

I’m happy to translate the article for you, but I’ll need the full text you’d like translated. Could you please paste the content (excluding the source line you already provided) here? Once I have it, I’ll translate it into Simplified Chinese while preserving the formatting, markdown, and code blocks.

概览

大多数身份验证教程需要 30 分钟，而且往往只能得到一个半成品的设置。这个只需要 5 分钟。

我们将使用 Authon 为 Next.js 15 应用添加 Google 登录——一个拥有 15 个 SDK 的自托管身份验证平台。完成后，你将拥有一个带主题模态框的可用登录流程、受保护的路由以及服务器端会话验证。

您将构建的内容

使用 Google OAuth 登录的 Next.js 应用
ShadowDOM 登录模态框（无 CSS 冲突）
保护私有路由的中间件
API 路由中的服务器端用户验证

前置条件

Node.js 18+
一个 Authon 账户（免费，自托管）或访问托管的 Authon 实例
一个 Google OAuth 客户端 ID 和密钥（来自 Google Cloud Console）

第一步：创建 Next.js 应用

npx create-next-app@latest my-app --typescript --tailwind --app
cd my-app

或者使用 Authon CLI 脚手架工具：

npx create-authon-app my-app --framework nextjs

第2步：安装 Authon SDK

npm install @authon/nextjs @authon/js

@authon/nextjs 包含 React 组件、hooks、中间件和服务器助手。@authon/js 是驱动 ShadowDOM 模态框的核心浏览器 SDK。

第 3 步：设置环境变量

创建一个 .env.local 文件：

NEXT_PUBLIC_AUTHON_KEY=pk_live_your_publishable_key
AUTHON_SECRET_KEY=sk_live_your_secret_key

这些密钥可在创建项目后从 Authon 仪表板获取。可公开的发布密钥可以安全地在浏览器中暴露；秘密密钥则保留在服务器上。

第4步：添加 Provider

在 app/layout.tsx 中使用 AuthonProvider 包裹你的应用：

// app/layout.tsx
import { AuthonProvider } from '@authon/nextjs';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <AuthonProvider>
      {children}
    </AuthonProvider>
  );
}

这将初始化 Authon 客户端并为所有组件提供认证上下文。

第5步：添加中间件

在项目根目录创建 middleware.ts：

// middleware.ts
import { authMiddleware } from '@authon/nextjs';

export default authMiddleware({
  publicRoutes: ['/', '/sign-in', '/about', '/pricing'],
  signInUrl: '/sign-in',
});

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

这会保护除 publicRoutes 中列出的路由之外的所有路由。未认证的用户将被重定向到 /sign-in。

第6步：构建登录页面

// app/sign-in/page.tsx
'use client';

import { SignedOut, useAuthon } from '@authon/react';
import { useRouter } from 'next/navigation';

export default function SignInPage() {
  const { openSignIn } = useAuthon();
  const router = useRouter();

  return (
    <div>
      <h2>Welcome Back</h2>
      <p>Sign in to continue to your dashboard.</p>
      <button
        onClick={async () => {
          await openSignIn();
        }}
        style={{
          padding: '12px 24px',
          fontSize: '16px',
          borderRadius: '8px',
          border: 'none',
          backgroundColor: '#7c3aed',
          color: 'white',
          cursor: 'pointer',
        }}
      >
        Sign in
      </button>
    </div>
  );
}

当用户点击 Sign in 时，Authon 会打开一个包含 Google（以及您配置的其他提供商）的 ShadowDOM 模态框。该模态框与您的应用 CSS 完全隔离——没有样式冲突，也没有 z‑index 争夺。

第 7 步：构建仪表板

// app/dashboard/page.tsx
'use client';

import { SignedIn, UserButton, useUser } from '@authon/react';

export default function DashboardPage() {
  const { user } = useUser();

  return (
    <div>
      <h2>Dashboard</h2>

      <SignedIn>
        <UserButton />
      </SignedIn>

      <h2>Welcome, {user?.displayName || user?.email}!</h2>
      <p>Email: {user?.email}</p>
      <p>
        Member since:{' '}
        {user?.createdAt ? new Date(user.createdAt).toLocaleDateString() : 'N/A'}
      </p>
    </div>
  );
}

UserButton 组件渲染一个头像下拉菜单，包含退出登录、个人资料管理和会话信息。useUser() 钩子返回当前用户对象。

第 8 步：添加服务器端验证（可选）

如果你有需要在服务器端验证用户的 API 路由：

// app/api/me/route.ts
import { currentUser } from '@authon/nextjs/server';

export async function GET() {
  const user = await currentUser();

  if (!user) {
    return new Response('Unauthorized', { status: 401 });
  }

  return Response.json({
    id: user.id,
    email: user.email,
    displayName: user.displayName,
  });
}

currentUser() 辅助函数会从请求的 cookie 或 Authorization 头部读取令牌，并在 Authon API 上进行验证。

第9步：运行它

npm run dev

打开 http://localhost:3000 — 你会看到你的登录页面。
导航到 /dashboard — 中间件会将你重定向到 /sign‑in。
点击 Sign in，在弹窗中选择 Google，即可登录。

添加更多提供商

想要 GitHub、Discord 或 Apple 登录吗？在 Authon 仪表板中启用它们。
它们会自动出现在登录模态框中——无需更改代码。

添加 MFA

想要添加基于 TOTP 的多因素认证吗？

import { useAuthonMfa } from '@authon/react';

function MfaSetup() {
  const { setupMfa, verifyMfaSetup } = useAuthonMfa();

  const handleSetup = async () => {
    const result = await setupMfa();
    // result.qrCodeSvg — render this as an SVG for Google Authenticator
    // result.backupCodes — display these to the user
  };

  const handleVerify = async (code: string) => {
    await verifyMfaSetup(code);
    // MFA is now enabled
  };

  return (
    <div>
      <button onClick={handleSetup}>Enable MFA</button>
    </div>
  );
}

添加 Web3 登录

需要钱包认证？

import { useAuthonWeb3 } from '@authon/react';

function Web3Login() {
  const { connectWallet } = useAuthonWeb3();

  return (
    <button onClick={() => connectWallet('metamask', 'evm')}>
      Sign in with MetaMask
    </button>
  );
}

Authon 支持 MetaMask、WalletConnect、Coinbase Wallet、Trust Wallet（EVM）以及 Phantom（Solana）。

您将获得

Google OAuth 登录，配有主题化、ShadowDOM 隔离的模态框
通过中间件实现受保护的路由
服务器端令牌验证
一个用于登出和个人资料管理的 UserButton 组件
可选地在不更改认证流程代码的情况下添加 MFA、Passkeys、Web3 以及更多提供商

如何在5分钟内使用 Authon 为 Next.js 添加 Google 登录

概览

您将构建的内容

前置条件

第一步：创建 Next.js 应用

第2步：安装 Authon SDK

第 3 步：设置环境变量

第4步：添加 Provider

第5步：添加中间件

第6步：构建登录页面

第 7 步：构建仪表板

第 8 步：添加服务器端验证（可选）

第9步：运行它

添加更多提供商

添加 MFA

添加 Web3 登录

您将获得

下一步

相关文章

我花了4小时调试 Google OAuth……然后我删除了该功能（在构建我的第一个 SaaS 时的教训）

我构建了 JWTLens：一个用于检测 JWT 安全弱点的 Burp Suite 扩展

掌握 TypeScript 中的联合类型和交叉类型：快速指南与示例

为什么 BEM 嵌套在 Tailwind v4 中会失效

概览

您将构建的内容

前置条件

第一步：创建 Next.js 应用

第2步：安装 Authon SDK

第 3 步：设置环境变量

第4步：添加 Provider

第5步：添加中间件

第6步：构建登录页面

第 7 步：构建仪表板

第 8 步：添加服务器端验证（可选）

第9步：运行它

添加更多提供商

添加 MFA

添加 Web3 登录

您将获得

下一步

相关文章

我花了4小时调试 Google OAuth……然后我删除了该功能（在构建我的第一个 SaaS 时的教训）

我构建了 JWTLens：一个用于检测 JWT 安全弱点的 Burp Suite 扩展

掌握 TypeScript 中的联合类型和交叉类型：快速指南与示例

为什么 BEM 嵌套在 Tailwind v4 中会失效

第 3 步：设置环境变量

第 7 步：构建仪表板

第 8 步：添加服务器端验证（可选）