BA
Better Auth•4mo ago
Shady M.D

2FA (Two Factor) isn't working returning 401 Unauthorized

I am trying to use TOTP authentication in my express app, I already added the necessary configuration in my backend's better-auth instance as well as in the frontend's react app, but everytime I try to enable to enable two factor, it returns a 401 response even though I am freshly logged in and the better-auth session is present in the cookies. I made sure to add the plugins in both server and client side, the issuer value is the same as well as the password value, but even with all of that, it doesn't seem to work. I tried both authClient.twoFactor.enable() and authClient.twoFactor.getTotpUri() but they both aren't working, here is simple example I working with: 
function TwoFactor() {
  const [password, setPassword] = useState("");
  const navigate = useNavigate();
  
  const handleEnable = async (e) => {
    e.preventDefault();
    const { data: qr } = await authClient.twoFactor.enable({
      password: password,
      issuer: "YNetwork",
      fetchOptions: {
        onSuccess(context) {
          toast.success("Two-factor authentication enabled successfully!");
        },
        onError(context) {
          toast.error(`Error enabling two-factor authentication: ${context.error.message}`);
        },
      }
    });

    if (qr) {
      navigate("/two-factor/verify-totp", { replace: true, state: { totpURI: qr.totpURI } });
    }
  };

  return (
    <div>
      <form onSubmit={handleEnable}>
        <h1>Please enter your password once again</h1>
        <Input type="text" onChange={(e) => setPassword(e.target.value)}  />
        <Button type="submit">Submit</Button>
      </form>
    </div>
  ) 
}
export default TwoFactor
function TwoFactor() {
  const [password, setPassword] = useState("");
  const navigate = useNavigate();
  
  const handleEnable = async (e) => {
    e.preventDefault();
    const { data: qr } = await authClient.twoFactor.enable({
      password: password,
      issuer: "YNetwork",
      fetchOptions: {
        onSuccess(context) {
          toast.success("Two-factor authentication enabled successfully!");
        },
        onError(context) {
          toast.error(`Error enabling two-factor authentication: ${context.error.message}`);
        },
      }
    });

    if (qr) {
      navigate("/two-factor/verify-totp", { replace: true, state: { totpURI: qr.totpURI } });
    }
  };

  return (
    <div>
      <form onSubmit={handleEnable}>
        <h1>Please enter your password once again</h1>
        <Input type="text" onChange={(e) => setPassword(e.target.value)}  />
        <Button type="submit">Submit</Button>
      </form>
    </div>
  ) 
}
export default TwoFactor
Can someone please guide through this and give me some advices if I am missing something. Thank you in advance
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?