Firebase身份验证应用程序——电话、谷歌和电子邮件/密码与人工智能聊天
具有AI聊天功能的全栈身份验证系统。使用React（前端）、Node.js+Express（后端）、Python FastAPI（MCP服务器）、Firebase身份验证和Supabase数据库构建。支持电话OTP、谷歌登录和带有帐户链接的电子邮件/密码，以及ChatGPT风格的人工智能助手。
特性
- 电话OTP（带Firebase reCAPTCHA）
- 谷歌登录
- 电子邮件/密码登录
- 账户链接（电话+谷歌+电子邮件）
- 安全会话Cookie（HttpOnly、Secure、SameSite=严格）
- Firestore规则强制每个用户隔离
- AI聊天助手 由Gemini 2.5 Pro提供动力
- ChatGPT风格的对话管理 带侧边栏
- 对话隔离 -每个聊天都保持单独的上下文
- 用户感知AI -AI知道你的名字和个人资料信息
- 已为Firebase模拟器套件做好准备
先决条件
- Node.js>=18
- Python 3.10+和pip
- Firebase项目（免费层就足够了）
- Supabase帐户（用于数据库）
- Firebase命令行界面(
npm install -g firebase-tools) - Gemini API密钥（用于AI功能）
入门指南
按照以下步骤在本地计算机上启动并运行项目。
1.克隆存储库
git clone https://github.com/your-username/my-auth-app.git
cd my-auth-app2.安装依赖项
# Backend
cd backend && npm install
# Frontend
cd ../frontend && npm install
# MCP Server (Python)
cd ../mcp_server
python -m venv venv
source venv/bin/activate # On Windows, use `venv\Scripts\activate`
pip install -r requirements.txt3.Firebase项目设置
a.创建Firebase项目
- 转到 Firebase控制台.
- 单击“添加项目”并按照步骤创建新项目。
b.启用身份验证提供程序
- 在您的新项目中，请转到 认证 部分（来自左侧菜单）。
- 单击“登录方法”选项卡。
- 启用以下提供程序：
- 电子邮件/密码 - 谷歌 - 电话
c.获取前端配置
- 去你的 项目设置 （单击“项目概述”旁边的齿轮图标）。
- 在“常规”选项卡中，向下滚动到“您的应用程序”。
- 点击 网络 图标(``)创建一个新的web应用程序。
- 给它一个昵称并注册该应用程序。
- Firebase将为您提供
firebaseConfig对象。您将需要这些值frontend/.env文件。
d.获取后端配置（服务帐户）
- 在你的 项目设置，转到“服务帐户”选项卡。
- 点击“生成新私钥”。这将下载一个JSON文件。
- 将此文件重命名为
serviceAccount.json并将其放置在backend目录。
e.获取手机验证的reCAPTCHA密钥
- 电话身份验证使用reCAPTCHA来防止滥用。
- 转到 谷歌云控制台 并设置新的reCAPTCHA v3密钥。
- 您将获得一个“站点密钥”。这是的值
VITE_RECAPTCHA_SITE_KEY在你的frontend/.env文件。
f.设置消防站
- 在Firebase控制台中，转到 Firestore数据库 部分。
- 点击“创建数据库”并开始 测试模式.
4.数据库设置
a.创建一个Supabase项目
- 转到 Supabase仪表板 并创建一个新项目。
- 创建项目后，导航到 项目设置 > API 部分。
- 您需要此页面中的两条信息
.env文件夹：
- 项目Url （看起来像 https://.supabase.co) - 服务角色密钥 （在“API项目密钥”下）。此密钥绕过行级安全，应保密。
b.创建数据库架构
- 在您的Supabase项目中，请访问 SQL 编辑器.
- 点击 新建查询.
- 复制的全部内容
mcp_server/db/schema.sql文件并将其粘贴到SQL编辑器中。 - 点击 跑 执行脚本。这将创建
users,conversations,messages，以及embeddings桌子。
5.Gemini API设置
- 转到 谷歌人工智能工作室 获取Gemini API密钥。
- 创建一个新的API密钥并复制它-MCP服务器配置需要这个密钥。
6.配置环境变量
创建一个 .env 文件在 frontend, backend，以及 mcp_server 目录。
frontend/.env
VITE_API_BASE_URL=http://localhost:4000
VITE_FIREBASE_API_KEY=your-api-key-from-step-3c
VITE_FIREBASE_AUTH_DOMAIN=your-project-id.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your-project-id
VITE_FIREBASE_APP_ID=your-app-id
VITE_RECAPTCHA_SITE_KEY=your-recaptcha-site-key-from-step-3ebackend/.env
PORT=4000
FIREBASE_PROJECT_ID=your-project-id
GOOGLE_APPLICATION_CREDENTIALS=./serviceAccount.json
SESSION_COOKIE_NAME=__session
SESSION_EXPIRES_IN=432000000 # 5 days in ms
MCP_SERVER_URL=http://localhost:8000
NODE_ENV=developmentmcp_server/.env
SUPABASE_URL=your-supabase-project-url
SUPABASE_SERVICE_ROLE_KEY=your-supabase-service-role-key
GEMINI_API_KEY=your-gemini-api-key
NODE_ENV=development7.部署Firestore规则
要部署Firestore的安全规则，请从项目的根目录运行以下命令：
firebase deploy --only firestore:rules运行应用程序
您需要在单独的终端中同时运行所有三个服务。
启动后端
cd backend
npm run dev后端服务器将于启动 http://localhost:4000.
启动MCP服务器
cd mcp_server
source venv/bin/activate # On Windows, use `venv\Scripts\activate`
uvicorn main:app --reloadMCP服务器将启动 http://localhost:8000.
启动前端
cd frontend
npm run dev前端开发服务器将启动，通常在 http://localhost:5173.
使用Firebase模拟器运行
要在不连接到实时Firebase项目的情况下进行本地开发，可以使用Firebase Emulator Suite。
firebase emulators:start --only auth,firestore存储库结构
/my-auth-app
/backend
/src
/routes
/middleware
/services
/frontend
/src
/components
/pages
/services
/mcp_server
/tools
/db
/docs
README.md
firebase.json
firebase.rules测试
- 单元测试： Jest+Supertest（后端），React测试库（前端）
- E2E： 剧作家或Cypress与Firebase模拟器
安全
- 会话Cookie是HttpOnly、安全、SameSite=Strict
- 手机OTP需要reCAPTCHA
- 电子邮件/密码的强密码策略
- Firestore规则防止跨用户访问
AI聊天功能
- Gemini 2.5 Pro集成：由谷歌最新的人工智能模型提供支持
- 会话管理：带有对话历史记录的ChatGPT风格侧边栏
- 上下文隔离：每个对话都保持单独的上下文
- 用户意识：AI知道您的姓名和个人资料信息
- 消息历史记录：Supabase中存储的持久聊天记录
- 实时聊天：带有加载指示器的即时响应
- 全屏模式：沉浸式聊天体验
- 对话CRUD：创建、切换和删除对话
路线图
- 密码重置和电子邮件验证
- 角色（管理员/用户）
- 多因素身份验证（MFA）
- 人工智能对话搜索和过滤
- 消息导出功能
- 部署（Netlify+渲染/云运行）
许可证
麻省理工学院