Vite React+Supabase：注册创建会话及创建前获取用户数据问题

背景说明 #

我基于Vite React和Supabase开发项目，已实现登录注册功能，但未使用Supabase Auth（因无法满足需求），而是直接通过insert操作写入自定义users表。目前遇到两个核心问题：

1. 如何在用户数据插入Supabase前获取并处理这些数据
2. 注册时无法创建可靠的会话，GPT提供的方法适配旧版Supabase，不适用于当前版本

现有注册代码（Signup.tsx） #

const createUser = async () => {    // 校验头像是否存在，无头像则提示错误
        if(!formData.avatar){
            setError(true)
            setTimeout(() => {
                setError(false)
            },5000) 
        }
        else{
            try{
                const res = await supabase.from("users").insert([  // 将表单数据插入users表
                    {                                             
                        profilepic: `${formData.avatar}`,
                        name: `${formData.firstName}`,
                        last_name: `${formData.lastName}`,
                        email: `${formData.email}`,
                        password: `${formData.password}`,
                    }
                ])
                if(res.error){
                    throw res.error
                }
                if (res.status === 201) {            // 尝试通过sessionStorage模拟会话
                    setStatus(true);                 
                    setFormData(initialState);
                    sessionStorage.setItem('supabaseSession', JSON.stringify(formData))
                    setTimeout(() => {
                        setStatus(false);
                    }, 5000);
                }
            }
            catch(error){
                console.error(error.message)
            }
            setTimeout(() => {
                navigate('/')                       // 注册后跳转首页
            },2000)
        }
    }

尝试过的旧版方法（不可靠） #

if (res.status === 201) {
                    const userId = res.data[0].id

                    setStatus(true);
                    setFormData(initialState);
                    sessionStorage.setItem('supabaseSession', JSON.stringify(formData))
                    sessionStorage.setItem('userId', JSON.stringify(userId))

                    setTimeout(() => {
                        setStatus(false);
                    }, 5000);
                }

解决方案 #

1. 用户创建前获取数据 #

在调用supabase.from("users").insert()之前，直接从formData中读取即可，这就是即将插入的用户数据。如果需要预处理（比如加密密码、格式化字段），可以在插入前先处理：

// 插入前获取并处理数据
const userToCreate = {
    profilepic: formData.avatar,
    name: formData.firstName,
    last_name: formData.lastName,
    email: formData.email,
    password: await encryptPassword(formData.password) // 示例：密码加密
};
// 这里可以直接使用userToCreate做任何前置操作
console.log("即将创建的用户数据：", userToCreate);

// 再执行插入
const res = await supabase.from("users").insert([userToCreate]);

2. 可靠创建会话（适配新版Supabase） #

新版Supabase的insert返回结构有所变化，正确获取插入后用户数据的方式是使用res.data，同时模拟会话需要保证数据准确性：

if (res.data && res.data.length > 0) {
    const createdUser = res.data[0];
    setStatus(true);
    setFormData(initialState);
    
    // 存储会话数据，建议只存必要字段（比如id、email、name），不要存密码
    const sessionData = {
        userId: createdUser.id,
        email: createdUser.email,
        name: createdUser.name,
        profilepic: createdUser.profilepic
    };
    sessionStorage.setItem('userSession', JSON.stringify(sessionData));
    
    setTimeout(() => {
        setStatus(false);
    }, 5000);
}

另外，模拟会话需要在全局状态（比如Context或Redux）中维护用户登录状态，而不仅仅依赖sessionStorage，避免页面刷新后状态丢失。同时注意：

• 不要在前端存储明文密码，插入前务必加密
• 登录时需要查询users表验证邮箱密码，匹配成功后再创建会话

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