Magic link recipe design

[mufassirkazi]

Designs

Sign up / Sign In: https://zpl.io/aME0me3 Something went wrong in Sign Up / Sign in form: https://zpl.io/Vq7exdm Correct email inserted state: https://zpl.io/bPK8dKm Write state: https://zpl.io/awzerzd Error state: https://zpl.io/2E5ojQy Something went wrong when user clicked on resend email or change email links: https://zpl.io/b6nBJAK Email resent successfully state: https://zpl.io/2GD1nqm (the green state should go away after 2 seconds) Email sent screen: https://zpl.io/bPK1rEm Email sent screen links hover state: https://zpl.io/2p8eB9N

Something went wrong after I clicked on the link in the email: https://zpl.io/2p8Pxyr Link expired: zpl.io/bAgnAO8

Note: For above two screens, we need to decide where we redirect the user once he clicks on the 'resend magic link' button. Do we resend the email directly? If yes, then once he clicks the button, send the email and redirect the user to "Email sent screen". If not (which should be the ideal case), we take him back to the main screen where he has to give his email id and go through the whole flow again

Actual Email: https://zpl.io/aXOXG5j

Social login + Magic link: https://zpl.io/2jNxwYA

CC: @makerboiAdi @rishabhpoddar

[makerboiAdi]

1. How will it look with other login mechanisms?
2. Also, since the flow is more or less same for both sign up and sign in, should we have 2 separate screens?
3. For something went wrong (after clicking magic link) and link expiry - how will the user try again? There is no button
4. On “Magic Link sent” screen it says resend email and change email. Why dont we display the email here to see the exact ID?
5. On “Verify-email - 5" screen, it says something went wrong. But its the success state - showing magic link sent successfully. I am confused. Was the link sent or did something go wrong? When does this show? When the user clicks on resend / change email? If yes, then ok
6. I think the email with password link should contain something about the app that is sending the email. Also please let me know where I can write the content for that email

[mufassirkazi]

1. Added the design **
2. I don't think that's a good idea. Because, there is the part where you have to insert "By signing up, you agree to our TOC and PP" which is a part of sign up screen. Now, trying to differentiate that by people who enable that functionality or not adds too much technical complexity.
3. User needs to reload the page. But I think adding a button gives more clarity. Updated the design above.
4. Agreed. So I take it we don't have to keep the change email button anymore, right? Did that and updated in design above
5. Yes, it shows after the user clicks on resend / change email
6. Okay. Doc: https://docs.google.com/document/d/1XT9vxbFkcyAjqZnY7z4tl0VHLxVkh1E3-9KLnuJZTmY/edit?usp=sharing

So now, only copy changes are left.

** Use case for such a scenario is very rare. But for the sake of customisation and flexibility, we will provide users this ability. Although, this should not be a thing that we make right now, but as an added feature when we have everything else built out.

Also, one important thing Rishabh, everything is made out of reusable components. I don't think there is any new element that I have added. So basically you can use all the existing components along with the states which we have for social login / email password recipe

[rishabhpoddar]

1. I agree with @makerboiAdi point number 2. There should be one screen for sign up / in since it's the same flow. The problem @mufassirkazi mentioned with this is the same problem we had when making social login. If we solved it there, we can solve it here too.
2. In the email sent screen, I prefer if we have something like "go back to login" instead of an edit button. The edit button can be confusing?
3. Do we allow users to add custom fields during sign up for this? (like we allow them for emailpassword). If yes, then we will need two different screens for sign in and sign up. Else no.
4. The combination of the screen, it doesn't really make sense to offer email password + magic link.. So that will have social login and magic link option. So this means we can replace the bottom section of the screen to remove email password and put magic links.

[mufassirkazi]

Designs have been updated in the parent comment.

1. We'll have only one screen (sign up / sign in)
2. We have "Change email" instead of "go back to login". Edit button has been removed.
3. No for now.
4. Added that screen.

[tluyben]

Is there a roadmap for this? And/or bounty program? We need it so if we can fork some money...

[filipecatraia]

https://github.com/supertokens/supertokens-core/projects/7 @tluyben

[gabsn]

Any ETA on this? This feature really makes me hesitate with Auth0.

[rishabhpoddar]

@gabsn, perhaps a few months from now... we are currently working on filling up some gaps in our previous recipes and adding support for more tech stacks.

[theweiweiway]

Is the variation of this being considered, where instead of a magic link you get a 6-digit code emailed to your inbox?

[rishabhpoddar]

@theweiweiway , yea. This is being discussed here: https://github.com/supertokens/supertokens-core/issues/253

[rishabhpoddar]

https://medium.com/tresorit-engineering/how-we-designed-file-request-links-c5dd81c034b3

[rishabhpoddar]

Closing in preference to https://github.com/supertokens/for-zenhub/issues/63

[VstageVinny]

@rishabhpoddar Note, https://github.com/supertokens/for-zenhub/ is a private repo, link goes to 404

[rishabhpoddar]

@VinnyFuelhq that discussion is meant to be private :)

We will open public issues which are well thought out soon.