DEV Community
·
2025年完美的本地SvelteKit与Supabase设置
💡
原文英文，约1000词，阅读约需4分钟。
📝
内容提要
本文提供了Supabase与SvelteKit的详细设置步骤，包括创建SvelteKit应用、安装Supabase依赖、初始化Supabase、配置环境变量、生成类型文件、设置TypeScript和钩子，以及用户验证和错误处理的方法，旨在帮助开发者更顺利地使用这两个工具。
🎯
关键要点
- Supabase与SvelteKit的设置步骤包括创建应用、安装依赖、初始化Supabase等。
- 创建SvelteKit应用的命令为：npx sv create my-app。
- 安装Supabase依赖的命令为：npm i -D supabase@latest @supabase/ssr@latest @supabase/supabase-js@latest。
- 初始化Supabase的命令为：npx supabase init。
- 需要在config.toml中更新Supabase的API URL和站点URL。
- 设置.env文件以包含Supabase的公共URL和匿名密钥。
- 生成类型文件的命令为：npm run types，并可通过npm run reset重置数据库并生成类型。
- 在/src/app.d.ts文件中设置TypeScript以导入数据库类型和用户会话。
- 在/src/hooks.server.ts文件中设置钩子以创建Supabase客户端并处理会话。
- 创建根布局文件/src/routes/+layout.server.ts以加载用户和会话信息。
- 可选的可重用函数requireUser用于检查用户是否登录。
- 创建/auth/callback/+page.server.ts文件以处理OAuth回调和错误处理。
- 在登录页面中需要手动处理next参数以确保用户登录后重定向到正确页面。
❓
延伸问答
如何创建一个SvelteKit应用？
使用命令npx sv create my-app来创建SvelteKit应用。
如何安装Supabase依赖？
使用命令npm i -D supabase@latest @supabase/ssr@latest @supabase/supabase-js@latest来安装Supabase依赖。
如何初始化Supabase？
使用命令npx supabase init来初始化Supabase。
如何配置Supabase的环境变量？
在.env文件中设置PUBLIC_SUPABASE_URL和PUBLIC_SUPABASE_ANON_KEY。
如何生成类型文件？
使用命令npm run types来生成类型文件。
如何处理用户登录和会话信息？
在/src/hooks.server.ts文件中设置钩子以创建Supabase客户端并处理会话。
➡️
