如何在继续指令之前等待我的插入被提交？

Question

我使用凭据进行了 NextAuth 身份验证。当我使用登录页面时它工作正常。

const handleSubmit = async (event:FormEvent) => {
    event.preventDefault();
    await signIn("credentials", { 
        username: inputs.username, 
        password: inputs.password, 
        callbackUrl: '/home',
    });
}

然后，我尝试让用户在创建帐户后立即登录。

表单正在运行，并且在数据库中创建了帐户，但用户没有自动登录，并且我收到凭据错误。

我的猜测是，在我的代码尝试登录之前，新创建的帐户尚未提交到数据库。

我为 NextAuth SignIn 功能添加了

setTimeout

，效果很好。所以我的猜测应该是正确的，但使用

setTimeout

似乎不是正确的方法。

我尝试使用等待语法来使登录在

CreateUser()

完成后发生。这不起作用。我认为就是这样，但我显然误解了一些东西。

const submitUser = async (userData: FormData) => {
    if (validatePass()) {
        await CreateUser(userData)
        signIn("credentials", { 
            username: userData.get("username"),
            password: userData.get("password"),
            callbackUrl: '/home',
        });
    }
}

export async function CreateUser(userData: FormData) {

    bcrypt.hash(userData.get("password") as string, 12, async function(err, hash) {
        try {
            await query(
                `INSERT INTO users(username, password) VALUES ($1, $2)`,
                [userData.get("username"), hash]
            )
        } catch(error) {
            return {
                message: "Error in insert"
            }
        }
    });
};

Answer 1

问题在于

CreateUser

函数将 callback 传递给

bcrypt.hash()

，但在调用回调之前返回。因此，API 请求会在该行插入数据库之前返回。 假设您正在使用 npm 中的

bcrypt

包，它还允许您仅

await 它的功能

，而不是传递回调：

export async function CreateUser(userData: FormData) {
  try {
    const hash = await bcrypt.hash(userData.get("password") as string, 12);
    await query(`INSERT INTO users(username, password) VALUES ($1, $2)`, [
      userData.get("username"),
      hash,
    ]);
  } catch (error) {
    return {
      message: "Error in insert",
    };
  }
}

进行这些更改后，您的代码片段应该可以工作：

await CreateUser(userData)
await signIn("credentials", { 
    username: userData.get("username"),
    password: userData.get("password"),
    callbackUrl: '/home',
});