Convex Auth workflow
I'm converting from Remix/ReactRouter7 and Supabase to TanStack Start and Convex. I have this working in the other app and I'm having trouble knowing what to put where in "TanVex" or "ConStack" 🙂
Step 1 - User puts their email in a form for a Magic Link auth (which I have working on its own), and clicks the button.
Step 2 - I need convex to take the submitted email address, query my "people" table and check if (a) the email exists/is connected to a user and (b) the "can_login" boolean for the user is set to true. Here is how I'm capturing the email address and sending it to the query:
const formData = new FormData(event.currentTarget);
const submittedEmail = formData.get("email");
const { data } = useSuspenseQuery(convexQuery(api.personEmails.checkCanLogin, {email_address: submittedEmail}));
I have that happening in the sample login form linked below (between lines 58 and 59). I don't know how to grab and use the submittedEmail in the query I'm working on in the personEmails.checkCanLogin, nor do I know how to return back to the login page that requested it.
Step 3 - If the tests pass, proceed with the magic link process and display a "check your email" message. If the tests fail, show a "that address is not authorized" message.
I was working with the sample login form located here as a template (https://github.com/get-convex/convex-auth-example/blob/main/src/auth/SignInFormEmailLink.tsx). I'm new to both Convex and Tanstack. I haven't figured out how to pass the formData email to the convex query that I've put in a person_emails.ts file. That's where I'm stuck. I'll of course need to return the results.
There are great examples of pulling all rows from a table in the docs. I can't find good examples of accepting, passing, and returning things like this search. I'm guessing its framework specific. I get Remix/RR7 loaders and actions, I'm having trouble bridging the concepts here.6 Replies
Thanks for posting in <#1088161997662724167>.
Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets.
- Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.)
- Use search.convex.dev to search Docs, Stack, and Discord all at once.
- Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI.
- Avoid tagging staff unless specifically instructed.
Thank you!
This is most likely just a react problem. Looking at your code, are you calling the suspense code in a submit handler? You can't do this in react. Depending on your form setup, if you are using something like react hook, you can do something like the below. And assumes you have an emailExists endpoint that returns true if the email exists.
Looking at what I shared earlier, you probably don't want to use form.watch - as that will likely retrigger with every key stroke, and enable the query to be fired for each character added.. You can do something with useConvex, then call convex.query inside the submit handler, like below:
With convex auth, not sure it matters though, as it handles merging your user if it is the same email I think. We used to have this check when we were using clerk. but found that for our setup now with convex-auth, it is not needed. No issues yet.
Thank you. I did realize I was calling the query in the wrong place. The sample form had a kind of function happening as a part of the Submit flow, but I realized what I want to do won't work there so I need to build a separate function and call it.
It's funny, the relative rigidity of something like Remix/RR7 kind of simplifies it. There's bacially only a couple of ways to do it. The example docs pretty much give you what you need. The flexibility of a TanStack (I realize this is a convex discord) means that there are many ways to do something which is great if you aren't a relative newb like me. 🙂 The examples in both platform docs can vary widely because there are so many contexts/needs. Your examples give me what I need to bridge the gap. Thanks so much!
Glad it helped. And I agree with every thing you said. Sometimes, I want to go back to my Angular days, just to get away with the 100 ways of doing things, that make it hard to do properly when you are new to something.
Cheers!