如何在SvelteKit客户端展示Supabase服务端AuthApiError

核心思路 #

服务器端捕获Supabase的AuthApiError后，将友好的错误提示通过fail()方法返回给客户端，客户端借助SvelteKit的表单状态$form获取并展示错误信息。

1. 改造服务器端代码（src/routes/login/+page.server.js） #

在登录action中精准捕获Supabase的认证错误，返回对应友好提示：

import { AuthApiError } from '@supabase/supabase-js';
import { fail, redirect } from '@sveltejs/kit';

export const actions = {
  default: async ({ request, locals }) => {
    const formData = await request.formData();
    const email = formData.get('email');
    const password = formData.get('password');

    // 复用你已完成的输入验证逻辑
    if (!email || !password) {
      return fail(400, { email, password, error: '请填写所有必填字段' });
    }

    try {
      await locals.supabase.auth.signInWithPassword({ email, password });
    } catch (error) {
      // 仅处理Supabase认证类错误
      if (error instanceof AuthApiError) {
        let errorMsg = '登录失败，请重试';
        // 根据错误码返回精准提示
        switch (error.code) {
          case 'invalid_credentials':
            errorMsg = '邮箱或密码错误';
            break;
          case 'user_not_found':
            errorMsg = '该邮箱未注册';
            break;
        }
        // 用fail()返回错误，确保客户端能拿到
        return fail(401, { email, password, error: errorMsg });
      }
      // 处理其他未知错误
      return fail(500, { email, password, error: '服务器异常，请稍后再试' });
    }

    // 登录成功后跳转
    throw redirect(303, '/dashboard');
  }
};

2. 客户端页面改造（src/routes/login/+page.svelte） #

通过$form状态获取服务器返回的错误并展示：

<script>
  import { enhance } from '$app/forms';
  let email = '';
  let password = '';
</script>

<form method="POST" use:enhance>
  <div>
    <label for="email">邮箱</label>
    <input type="email" id="email" name="email" bind:value={email} required />
  </div>
  <div>
    <label for="password">密码</label>
    <input type="password" id="password" name="password" bind:value={password} required />
  </div>
  
  <!-- 错误提示区域 -->
  {#if $form?.error}
    <p style="color: #dc2626; margin: 10px 0;">{$form.error}</p>
  {/if}

  <button type="submit">登录</button>
</form>

关键注意事项 #

• 必须用fail()返回错误：如果直接抛出未处理的错误，SvelteKit会跳转到500错误页，而非将错误传递给表单状态。
• 不要暴露原始错误信息：Supabase的错误对象包含内部细节，需转换为用户易懂的友好提示，同时避免敏感信息泄露。
• 检查网络响应：提交表单后，浏览器网络面板应看到状态码为401/400的响应，且响应体包含error字段，这是客户端能获取错误的前提。

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