Refactor: automatically validate the email verification code #3648
Conversation
🎉 Snyk checks have passed. No issues have been found so far.✅ security/snyk check is complete. No issues have been found. (View Details) |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
PR Summary
This PR improves the signup UX by automatically validating email verification codes as they are entered, removing the need for manual verification button clicks.
- Removed manual verification button and related props from
frontend/src/components/auth/CodeInputStep.tsx - Added automatic code validation in
frontend/src/pages/auth/SignUpPage/SignUpPage.tsxthrough handleCodeChange function - Potential security consideration: Ensure rate limiting is in place for automatic verification attempts to prevent brute force attacks
- Consider adding documentation in
/docsto highlight this UX improvement for users - Recommend adding error handling for network failures during automatic validation
💡 (2/5) Greptile learns from your feedback when you react with 👍/👎!
2 file(s) reviewed, 3 comment(s)
Edit PR Review Bot Settings | Greptile
| @@ -79,6 +64,21 @@ export const SignUpPage = () => { | |||
| })(); | |||
| }, [step]); | |||
|
|
|||
| const handleCodeChange = async (value: string) => { | |||
| setCodeError(false); | |||
| if (value.length === 6 && step === 2 && !isCodeInputCheckLoading) { | |||
There was a problem hiding this comment.
logic: Race condition possible if user types quickly and triggers multiple validations before isCodeInputCheckLoading is reset
| } catch (err) { | ||
| setCodeError(true); | ||
| } |
There was a problem hiding this comment.
style: Error should be logged or handled more specifically than just setting codeError=true
| const incrementStep = async () => { | ||
| if (step === 1 || step === 3 || step === 4) { | ||
| setStep(step + 1); | ||
| } else if (step === 2) { | ||
| setIsCodeInputCheckLoading(true); | ||
| // Checking if the code matches the email. | ||
| try { | ||
| const { token } = await mutateAsync({ email, code }); | ||
| SecurityClient.setSignupToken(token); | ||
| setStep(3); | ||
| } catch (err) { | ||
| console.error(err); | ||
| setCodeError(true); | ||
| } | ||
| setIsCodeInputCheckLoading(false); | ||
| } | ||
| }; |
There was a problem hiding this comment.
syntax: Extra indentation on line 49 should be removed
| const incrementStep = async () => { | |
| if (step === 1 || step === 3 || step === 4) { | |
| setStep(step + 1); | |
| } else if (step === 2) { | |
| setIsCodeInputCheckLoading(true); | |
| // Checking if the code matches the email. | |
| try { | |
| const { token } = await mutateAsync({ email, code }); | |
| SecurityClient.setSignupToken(token); | |
| setStep(3); | |
| } catch (err) { | |
| console.error(err); | |
| setCodeError(true); | |
| } | |
| setIsCodeInputCheckLoading(false); | |
| } | |
| }; | |
| const incrementStep = async () => { | |
| setStep(step + 1); | |
| }; |
|
/lgtm |
Description 📣
Automatically validate the email verification code (no need to press or click the
Verifybutton).Fixes #1528
Type ✨
Tests 🛠️