如何在ASP.NET API与React中结合使用Supabase认证系统？

完全可以实现，核心是利用Supabase基于JWT的认证机制，让React端获取认证令牌后，在请求ASP.NET API时携带令牌，API端验证令牌有效性即可完成共享认证。以下是具体实现步骤：

核心逻辑 #

React端通过Supabase客户端完成登录/注册，获取JWT令牌；后续请求API时将令牌放在Authorization请求头中；ASP.NET API端配置JWT认证中间件，验证令牌的合法性，以此识别用户身份。

React端集成Supabase认证 #

1. 安装Supabase JS客户端

npm install @supabase/supabase-js

2. 初始化Supabase客户端
   在项目中创建全局Supabase实例（比如supabaseClient.js）：

import { createClient } from '@supabase/supabase-js'

// 替换为你的Supabase项目URL和匿名公钥（从Supabase控制台获取）
const supabaseUrl = 'https://your-project-id.supabase.co'
const supabaseKey = 'your-anon-public-key'
export const supabase = createClient(supabaseUrl, supabaseKey)

3. 实现基础认证逻辑
   以邮箱密码登录为例：

async function handleLogin(email, password) {
  const { data, error } = await supabase.auth.signInWithPassword({
    email,
    password,
  })
  if (error) {
    console.error('登录失败:', error.message)
    return
  }
  // 登录成功后，会话信息（含JWT）会自动存在Supabase客户端中
  alert('登录成功')
}

4. 请求API时携带JWT
   封装API请求函数，自动从Supabase会话中获取令牌并添加到请求头：

async function callApi(endpoint) {
  const { data: { session } } = await supabase.auth.getSession()
  if (!session) {
    throw new Error('用户未登录')
  }

  const response = await fetch(`/api/${endpoint}`, {
    headers: {
      'Authorization': `Bearer ${session.access_token}`
    }
  })

  if (!response.ok) {
    throw new Error('API请求失败')
  }
  return response.json()
}

ASP.NET API端验证Supabase JWT #

1. 安装JWT认证依赖

dotnet add package Microsoft.AspNetCore.Authentication.JwtBearer

2. 配置JWT认证中间件
   在Program.cs中添加认证和授权配置：

using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.IdentityModel.Tokens;
using System.Text.Json;

var builder = WebApplication.CreateBuilder(args);

// 添加JWT认证服务
builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddJwtBearer(options =>
    {
        // 替换为你的Supabase项目URL
        options.Authority = "https://your-project-id.supabase.co";
        options.Audience = "authenticated";
        options.TokenValidationParameters = new TokenValidationParameters
        {
            ValidateIssuerSigningKey = true,
            ValidateIssuer = true,
            ValidateAudience = true,
            ValidateLifetime = true,
            // 从Supabase的JWKS端点动态获取签名密钥，避免硬编码
            IssuerSigningKeyResolver = (token, securityToken, kid, validationParameters) =>
            {
                using var httpClient = new HttpClient();
                var jwksResponse = httpClient.GetFromJsonAsync<JsonWebKeySet>($"{options.Authority}/auth/v1/jwks").Result;
                return jwksResponse?.Keys;
            }
        };
    });

// 添加授权服务
builder.Services.AddAuthorization();

builder.Services.AddControllers();

var app = builder.Build();

// 启用认证和授权中间件（注意顺序：先认证后授权）
app.UseAuthentication();
app.UseAuthorization();

app.MapControllers();

app.Run();

3. 在API接口中启用身份校验
   在需要认证的控制器或方法上添加[Authorize]特性，并从Claims中获取用户信息：

[ApiController]
[Route("api/[controller]")]
public class UserController : ControllerBase
{
    [HttpGet("profile")]
    [Authorize]
    public IActionResult GetUserProfile()
    {
        // 从Claims中提取Supabase返回的用户信息
        var userId = User.FindFirst("sub")?.Value;
        var email = User.FindFirst("email")?.Value;
        var userName = User.FindFirst("name")?.Value;

        return Ok(new 
        {
            UserId = userId,
            Email = email,
            Name = userName
        });
    }
}

关键注意事项 #

• Supabase配置检查：在Supabase控制台的「Authentication → Settings」中，确认JWT过期时间、允许的认证方式等配置符合需求。
• 会话过期处理：React端Supabase客户端会自动刷新JWT，但如果会话失效，需监听authStateChange事件，引导用户重新登录。
• 密钥动态获取：API端通过JWKS端点获取签名密钥，避免硬编码，保证Supabase更新密钥时无需修改代码。

内容的提问来源于stack exchange，提问作者32 denka