Hi. I want to implement a passwordless flow where the user enters a pre-shared user id where the bac...
p
Hi. I want to implement a passwordless flow where the user enters a pre-shared user id where the backend already has the email for this user. So the front end needs to display a form where the user enters their user Id, which will call the be to create the otp and send it to the known email address. Is this possible?
r
Hey!
Yea! You can modify the label in the form using the language translation feature that we have. You can then change the way the email is validated on the frontend to check for the user ID format instead of the email format. See the
validateEmailAddress
config in passwordless.init function on the frontend. Now this userID will be sent to the backend instead of the email. You can then override the createCodePOST API to read this userID from the request object and fetch the associated email for it from your db. Then call the original implementation with the email. In case the userID doesn't have an associated email, then you can send back a response like this which will show the message to the user:
Copy code
json
{
  status: "GENERAL_ERROR",
  message: "Unknown user ID"
}
@pitchash
p
Ok thanks. I still need the email standard email flow to work as well but I can probably detect which format is being used and take the relevant action
r
yea that works.
p
The other option I have is to switch to using session auth and generate my own otp’s..
Using translation to rename the form isn’t quite enough as I want to hide the form entirely and just have a button… the user details is in the url params so the frontend doesn’t need anything more than a button to trigger the otp email
r
ahh i see. Then you can disable the default UI for that form, and make your own component on that page. In your component, you check if the query params has the userId and if it does, then you can query the API directly with the info. Else you can show our form (checkout the embed in a page docs)
p
Is there an example of a custom component that fully works with the frontend sdk? We tried a custom login before using our own api calls but it wasn’t working
r
So here is an example of how we customised the passwordless login form to be a second factor auth form: https://github.com/supertokens/supertokens-auth-react/blob/master/examples/with-thirdpartyemailpassword-2fa-passwordless/src/SecondFactor/index.tsx Maybe it helps..
> e tried a custom login before using our own api calls but it wasn’t working What issues were you facing?
p
The issues were around all the various cookies and refreshing etc. we were not using the frontend sdk at all, just direct api calls.
r
ahh i see.. yea thats complex then
without using the frontend sdk, it can get difficult
we do have a supertokens-web-js SDK now that has no UI stuff and just sessions + helper functions that you can use for your own UI
p
Another option is we use our own auth and generate a session token with limited roles and permissions
Where are the docs on this? We would probably prefer our own ui
r
You could also override the backend session recipe to use simple JWTs instead of access / refresh tokens and it would work easily on the frontend as well without using our frontend SDK: https://github.com/supertokens/supertokens-auth-react/tree/master/examples/with-jwt-localstorage/api-server > Where are the docs on this? We would probably prefer our own ui In progress.. but here is the SDK reference: https://supertokens.io/docs/web-js
p
Ok thanks
Ill take a look at all these docs / options
r
cool
p
do passwordless and password recipes share the same user database? I seem to remeber the session recipe uses a different user collection?
r
they don't share the same user database. So if the same email is used for both, they will be two diff user IDs
p
is there a way to tell which type of user it is from the session?
r
Not directly. But you could save that info in the session during session creation