Issues with recoverAccount

[markfazzio]

When trying to implement recoverAccount(), I keep getting the "user not found" error. I did not see many docs on this. The error:

code: 404
msg: "User not found"

• I am able to send the reset password email successfully
• I am able to get the token from useIdentityContext() and show my <RecoverAccountModal /> successfully
• Then I call recoverAccount() with the updated password and get a successful user response, which I use to set updated user inside setUser(recoveredUser)

However, it fails when I call updateUser(). When I console.log the user from useIdentityContext() it is undefined, so I know that setUser() is not working properly for me, perhaps not finishing before updateUser() is called. But, it is not a promise, so await will not help. Any assistance would be hugely appreciated. Here is my code:

RecoverAccountModal.tsx

        // ensure passwords match and not empty
         if (password !== '' && password === confirmPassword) {
              // recover account using token from reset password email
              await recoverAccount(true)
                .then(async user => {
                  // log in the current user so we can call updateUser
                  setUser(user);
                  await updateUser({ password })
                    .then(updatedUser => {
                      setMessage('Password updated successfully!');
                    })
                    .catch(error => {
                      console.log('Failed to update user:', error);
                      setMessage(
                        'Password cannot be updated. Please try getting a new recovery link.'
                      );
                    });
                })
                .catch(err => {
                  console.log('Error running recoverAccount()', err);
                });
            } else {
              setMessage('Passwords do not match.');
            }

[swyxio]

i'm afraid i'm not going to spend much time debugging since i've left Netlify, but @jlengstorf or @shortdiv or @cassidoo may be able to help (and i'm happy to transfer ownership)

[markfazzio]

Thanks for the reply @sw-yx! I would love to contribute if possible, but at the moment I am not sure if it is my implementation or if this is an actual issue. I saw one other issue about this listed, but the fix that worked for that developer is not working for me - in fact the code above was pulled from the issue that @dorelljames posted about this same thing, I just slightly modified it for my use case. But it is the same otherwise.

[dorelljames]

@markfazzio Here's what I did. I passed in a boolean true to recoverAccount making it recoverAccount(true). This makes it remember the user as per inspecting the type. Surprisingly, this also sets the user in the context, so you could call updateUser and set the password right there. If it helps, here's a gist you could look at. Good luck.

[markfazzio]

@dorelljames Thank you!!! You saved me bigtime! I was already passing true to recoverAccount(true) -- but the biggest help was calling it inside useEffect() in my index.tsx file before opening my RecoverAccountModal. Everything is working now! Thank you again!

const {
    param: { type },
    recoverAccount
  } = useIdentityContext();

  const isRecoveryMode = type === 'recovery';
  const [isRecoverModalOpen, setIsRecoverModalOpen] = useState(false);

  useEffect(() => {
    if (isRecoveryMode) {
      recoverAccount(true);
      setIsRecoverModalOpen(true);
    }
  }, [recoverAccount, isRecoveryMode]);

And I used some stuff from your code as well, my handleSubmit() looks like this now:

const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (password !== '' && passwordsMatch) {
      setFormState('requesting');
      await updateUser({ password })
        .then(updatedUser => {
          setMessage('Password updated successfully!');
          setFormState('success');
          console.log('Updated user', updatedUser);
        })
        .catch(error => {
          setMessage(`Error: ${error}`);
          setFormState('error');
          console.log('Failed to update user:', error);
        });
    } else {
      setMessage('Passwords do not match.');
      setFormState('error');
    }
  };

@sw-yx - You can close this, as this was just an issue with my implementation! Thanks again to you both!

[dorelljames]

Yay! Glad you made it worked @markfazzio. I'll consider submitting a PR updating the README for the benefit of others as well. 😊