用户登录认证

HappyShip 使用 NextAuth.js 提供现代化的用户认证系统，支持 Google OAuth 登录，自动管理用户账户和积分系统。

🔐
认证系统概述

HappyShip 模板的认证系统特点：

NextAuth.js - 业界标准的 Next.js 认证库
Google OAuth - 安全的第三方登录
JWT 策略 - 无状态会话管理
自动用户创建 - 首次登录自动分配积分
Supabase 集成 - 用户数据存储和管理

📁
核心文件结构

# 认证系统文件结构

src/lib/auth.ts # NextAuth.js 配置

src/components/auth/SignInDialog.tsx # 登录弹窗组件

src/components/providers/SessionProvider.tsx # 会话提供者

src/app/api/auth/[...nextauth]/route.ts # API 路由处理

types/next-auth.d.ts # TypeScript 类型定义

🔧 配置文件

auth.ts 包含 Google OAuth 配置和用户创建逻辑

🎨 UI 组件

SignInDialog 提供美观的模态登录界面

🔄
用户登录流程

点击登录按钮

用户在需要登录时点击登录按钮，弹出登录对话框

Google OAuth 认证

重定向到 Google 进行安全认证，用户授权应用访问基本信息

用户账户处理

系统检查用户是否存在，新用户自动创建账户并分配 3 积分

会话建立

生成 JWT Token，用户登录成功，可以使用所有功能

⚙️
快速配置

📝 环境变量设置

# .env.local

GOOGLE_CLIENT_ID=your_google_client_id

GOOGLE_CLIENT_SECRET=your_google_client_secret

NEXTAUTH_SECRET=your_nextauth_secret

NEXTAUTH_URL=http://localhost:3000

🔧 Google OAuth 设置

前往 Google Cloud Console 创建 OAuth 应用

配置回调 URL：/api/auth/callback/google

获取客户端 ID 和密钥，添加到环境变量

💡
代码使用示例

在组件中获取用户会话

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

export default function MyComponent() {

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

if (status === 'loading') return 'Loading...';

if (!session) return 'Please sign in';

return `Hello, {session.user.name}!`;

}

在 API 路由中验证用户

import { getServerSession } from 'next-auth';

import { authOptions } from '@/lib/auth';

export async function POST() {

const session = await getServerSession(authOptions);

if (!session) {

return Response.json({ error: 'Unauthorized' }, { status: 401 });

}

// 处理已认证用户的请求

}

🎯 认证系统总结

HappyShip 的认证系统简单而强大，开箱即用的 Google 登录为用户提供安全便捷的认证体验。系统自动处理用户创建、积分分配和会话管理，让你专注于核心业务功能开发。

🚀 快速集成

只需配置 Google OAuth，即可拥有完整认证系统

🔒 安全可靠

基于 NextAuth.js 和 JWT，业界标准安全实践

⚡ 自动化

自动用户创建、积分分配，无需额外开发

🔐 让用户轻松登录，专注于创造价值！

HappyShip