如何从JavaScript文件向Svelte文件传递Supabase登录错误信息？

你的问题出在两个核心点：异步函数的执行时序，以及非响应式变量无法被Svelte感知更新。

问题原因 #

1. 异步执行顺序问题：login是异步函数，调用后代码会直接执行后续的console.log(errorMessage)，此时登录请求还未完成，errorMessage仍保持初始值。
2. 非响应式变量限制：你在JS文件中导出的errorMessage是普通变量，不是Svelte的响应式变量或Store，即使后续赋值，组件也无法检测到变化，自然不会更新DOM显示错误。

解决方案 #

方案一：让登录函数直接返回错误（适合单一组件场景） #

修改supabaseClient.js：

export const login = async (email, password) => {
    const { data, error } = await supabase.auth.signInWithPassword({
        email,
        password
    })
    return error; // 直接返回错误结果
}

修改Svelte组件：

<script>
import { login } from '$lib/supabaseClient.js'

let email = '';
let password = '';
let errorMessage = null;

// 用async/await处理异步逻辑
const handleLogin = async () => {
    errorMessage = await login(email, password);
    console.log(errorMessage); // 此时能获取正确的错误信息
}
</script>

<input type="email" bind:value={email} placeholder="邮箱" />
<input type="password" bind:value={password} placeholder="密码" />
<button on:click={handleLogin}>登录</button>

{#if errorMessage}
<p style="color: red;">{errorMessage.message}</p>
{/if}

方案二：用Svelte Store管理错误信息（适合多组件共享场景） #

如果需要在多个组件中复用错误状态，推荐使用Svelte的可写Store：

修改supabaseClient.js：

import { writable } from 'svelte/store';

// 创建可写Store存储错误信息
export const errorMessage = writable(null);

export const login = async (email, password) => {
    const { data, error } = await supabase.auth.signInWithPassword({
        email,
        password
    })
    // 更新Store的值
    errorMessage.set(error);
}

修改Svelte组件：

<script>
import { login, errorMessage } from '$lib/supabaseClient.js'

let email = '';
let password = '';

const handleLogin = async () => {
    await login(email, password);
    // 用$语法直接访问Store的当前值
    console.log($errorMessage);
}
</script>

<input type="email" bind:value={email} placeholder="邮箱" />
<input type="password" bind:value={password} placeholder="密码" />
<button on:click={handleLogin}>登录</button>

{#if $errorMessage}
<p style="color: red;">{$errorMessage.message}</p>
{/if}

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