Supabase

ShipNow 支持 Supabase Auth 用于安全的用户认证，并支持多种认证提供商

功能特点

🔐 多种认证方式（Google、GitHub 等 20 多种）
🔄 自动刷新的会话管理
🌐 服务端和客户端认证
🛡️ 自定义受保护页面和路由

设置 Supabase 认证

在 Supabase 创建账号并创建项目

从项目的 API Settings 复制 Supabase 项目 URL 和匿名密钥

复制 Supabase 项目 URL 和匿名密钥

将项目 URL 和匿名密钥添加到 .env.local 文件：

.env.local

NEXT_PUBLIC_SUPABASE_URL="https://your-project-id.supabase.co"
NEXT_PUBLIC_SUPABASE_ANON_KEY="eyJxxx"
 
# 启用/禁用提供商
NEXT_PUBLIC_AUTH_GOOGLE_ENABLED=true
NEXT_PUBLIC_AUTH_GITHUB_ENABLED=true

初始化 Supabase 客户端对象

服务端使用

import { createClient } from '@/utils/supabase/server';
 
export async function MyServerComponent() {
  const supabase = await createClient();
  const { data: { user } } = await supabase.auth.getUser();
  
  return <div>你好 {user?.email}</div>;
}

客户端使用

'use client';
 
import { createClient } from '@/utils/supabase/client';
 
export function MyClientComponent() {
  const supabase = createClient();
  
  async function signIn() {
    const { error } = await supabase.auth.signInWithOAuth({
      provider: 'github'
    });
  }
  
  return <button onClick={signIn}>使用 GitHub 登录</button>;
}

下一步

需要帮助？

查看 Supabase Auth 文档
加入我们的 Discord 社区
在 GitHub 上提交 issue

功能特点

设置 Supabase 认证

初始化 Supabase 客户端对象

服务端使用

客户端使用

下一步

需要帮助？

On this page