feat: Add email verification flow to in-app wallet #5796
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
github-actions
bot
added
Playground
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
![graphite-app[bot]](https://avatars.githubusercontent.com/in/158384?s=60&v=4){kind=small}
| export function CustomLoginUi() { | ||
| const { connect, isConnecting, error } = useConnect(); | ||
| const { mutate: loginWithCustomAuth } = useMutation({ | ||
| mutationFn: async (email: string) => { | ||
| const wallet = await connect(async () => { | ||
| const wallet = inAppWallet(); | ||
| await wallet.connect({ | ||
| strategy: "auth_endpoint", | ||
| client, | ||
| // your own custom auth payload here | ||
| payload: JSON.stringify({ | ||
| userId: email, | ||
| email, | ||
| }), | ||
| }); | ||
| return wallet; | ||
| const preLogin = async (email: string) => { | ||
| // send email verification code | ||
| await preAuthenticate({ | ||
| client, | ||
| strategy: "email", | ||
| email, | ||
| }); | ||
| }; | ||
| const handleLogin = async (email: string, verificationCode: string) => { | ||
| // verify email with verificationCode and connect | ||
| connect(async () => { | ||
| const wallet = inAppWallet(); | ||
| await wallet.connect({ | ||
| client, | ||
| strategy: "email", | ||
| email, | ||
| verificationCode, | ||
| }); | ||
| return wallet; | ||
| } | ||
| }); | ||
| const handleSubmit = (e: React.FormEvent) => { | ||
| e.preventDefault(); | ||
| loginWithCustomAuth(email); | ||
| }); | ||
| }; | ||
| return ( | ||
| <form onSubmit={handleSubmit}> | ||
| <div> | ||
| <label htmlFor="email"> | ||
| Email Address | ||
| </label> | ||
| <input | ||
| type="email" | ||
| id="email" | ||
| value={email} | ||
| onChange={(e) => setEmail(e.target.value)} | ||
| placeholder="Enter your email" | ||
| required | ||
| /> | ||
| <button | ||
| type="submit" | ||
| disabled={isConnecting || !email} | ||
| > | ||
| {isConnecting ? "Submitting..." : "Submit"} | ||
| </button> | ||
| {error && <p>{error.message}</p>} | ||
| </div> | ||
| </form> | ||
| ); | ||
| } |
There was a problem hiding this comment.
The CustomLoginUi component is missing its UI implementation. While the authentication logic is correct, the component needs to return JSX that renders the email input, verification code input, and submit buttons that call preLogin() and handleLogin(). Consider adding a form similar to the one that was removed, but updated to handle the two-step email verification flow.
Spotted by Graphite Reviewer
Is this helpful? React 👍 or 👎 to let us know.
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #5796 +/- ##
==========================================
+ Coverage 52.99% 53.03% +0.04%
==========================================
Files 1102 1101 -1
Lines 59107 59079 -28
Branches 4809 4812 +3
==========================================
+ Hits 31323 31333 +10
+ Misses 27066 27028 -38
Partials 718 718
*This pull request uses carry forward flags. Click here to find out more.
|
joaquim-verges
deleted the
feat_Add_email_verification_flow_to_in-app_wallet
branch
Problem solved
Fixes TOOL-2785
PR-Codex overview
This PR focuses on enhancing the login functionality in the
CustomLoginFormcomponent by implementing email verification before connecting the wallet, and refactoring the login UI.Detailed summary
handleLoginto send an email verification code before connecting.CustomLoginFormtoCustomLoginUifor clarity.verificationCodeandscreen.