Supabase Auth Helpers 项目教程

1. 项目的目录结构及介绍

Supabase Auth Helpers 项目的目录结构如下：

supabase/auth-helpers/
├── examples/
│   ├── nextjs/
│   ├── nextjs-pages/
│   ├── sveltekit/
│   ├── sveltekit-email-password/
│   ├── sveltekit-magic-link/
│   └── remix/
├── packages/
│   ├── @supabase/auth-helpers-nextjs/
│   ├── @supabase/auth-helpers-react/
│   ├── @supabase/auth-helpers-sveltekit/
│   ├── @supabase/auth-helpers-remix/
│   ├── shared/
│   ├── config/
│   └── tsconfig/
├── development.md
├── README.md
└── LICENSE

目录结构介绍

• examples/: 包含不同框架的示例应用，如 Next.js、SvelteKit 和 Remix。

  • nextjs/: 使用 App Router 的 Next.js 应用示例。
  • nextjs-pages/: 使用 Pages Router 的 Next.js 应用示例。
  • sveltekit/: SvelteKit 应用示例。
  • sveltekit-email-password/: 带有电子邮件和密码登录的 SvelteKit 应用示例。
  • sveltekit-magic-link/: 带有魔法链接的 SvelteKit 应用示例。
  • remix/: Remix 应用示例。

• packages/: 包含不同框架的 Auth 辅助库。

  • @supabase/auth-helpers-nextjs/: 用于 Next.js 应用的 Supabase Auth 辅助库。
  • @supabase/auth-helpers-react/: 用于 React 应用的 Supabase Auth 辅助库。
  • @supabase/auth-helpers-sveltekit/: 用于 SvelteKit 应用的 Supabase Auth 辅助库。
  • @supabase/auth-helpers-remix/: 用于 Remix 应用的 Supabase Auth 辅助库。
  • shared/: 共享的 TypeScript 类型定义。
  • config/: ESLint 配置文件（包含 eslint-config-next 和 eslint-config-prettier）。
  • tsconfig/: 项目中使用的 tsconfig.json 文件。

• development.md: 开发指南，包含本地设置、测试和发布准备等信息。

• README.md: 项目的主文档，包含项目介绍、安装指南和使用说明。

• LICENSE: 项目的开源许可证（MIT 许可证）。

2. 项目的启动文件介绍

Supabase Auth Helpers 项目没有统一的启动文件，因为每个框架的示例应用都有自己的启动文件。以下是一些常见的启动文件示例：

Next.js 示例应用

在 examples/nextjs/ 目录下，启动文件通常是 pages/_app.js 或 pages/_app.tsx，用于初始化应用的全局状态和布局。

SvelteKit 示例应用

在 examples/sveltekit/ 目录下，启动文件通常是 src/routes/+layout.svelte，用于定义应用的布局和全局状态。

Remix 示例应用

在 examples/remix/ 目录下，启动文件通常是 app/root.tsx，用于定义应用的根组件和全局状态。

3. 项目的配置文件介绍

Supabase Auth Helpers 项目的配置文件主要集中在 packages/ 目录下，每个框架的辅助库都有自己的配置文件。

Next.js 配置文件

在 packages/@supabase/auth-helpers-nextjs/ 目录下，主要的配置文件包括：

• tsconfig.json: TypeScript 配置文件，定义了 TypeScript 编译选项。
• eslintrc.json: ESLint 配置文件，定义了代码风格和 linting 规则。

SvelteKit 配置文件

在 packages/@supabase/auth-helpers-sveltekit/ 目录下，主要的配置文件包括：

• tsconfig.json: TypeScript 配置文件，定义了 TypeScript 编译选项。
• svelte.config.js: SvelteKit 配置文件，定义了应用的构建和开发选项。

Remix 配置文件

在 packages/@supabase/auth-helpers-remix/ 目录下，主要的配置文件包括：

• tsconfig.json: TypeScript 配置文件，定义了 TypeScript 编译选项。
• remix.config.js: Remix 配置文件，定义了应用的构建和开发选项。

这些配置文件确保了项目在不同框架下的统一性和可维护性。