Passwordless login

You can see the default UI when you visit the websiteBasePath (/auth by default) on your website. There are different modes:

Magic link based
OTP based
Magic link and OTP based

You can send magic link / OTP using:

Email
SMS / Whatsapp / Messenger etc.
Email and SMS / Whatsapp / Messenger etc.

Email or phone input UI#

If the contactMethod is EMAIL_OR_PHONE, the user will see the following UI when they visit the login page.

If the user decides to use their phone number and enters a valid phone number with their country code extension, they will go to the next step. Otherwise they will be shown an error message asking them to also enter their country code. The UI will also change to showing a dropdown containing a list of all countries (equal to the "Only phone input UI" shown below).

Only email input UI#

If the contactMethod is EMAIL, the user will see the following UI when they visit the login page.

Only phone input UI#

If the contactMethod is PHONE, the user will see the following UI when they visit the login page.

Invalid email or phone input UI#

If the user enters an invalid phone or email, they will see the following message

Magic link sent screen#

If the value of flowType on the backend is MAGIC_LINK, then after the user has submitted their phone or email, they will see the following UI.

As you can see, there is a timer that makes the user wait for a certain time period (15 seconds by default) before they can resend the sms / email. There is also a button below the input which allows them to change the email / sms (the text on the button changes based on if the user entered an email or phone number).

Magic link clicked screens#

The magic link is of the format: ${websiteDomain}/${websiteBasePath}/verify?tenantId=...&preAuthSessionId=<token1>#<token2>.

On same device#

When the user clicks the magic link and opens it on the same device on which they initiated the flow, they will see the following UI before being redirected to the sign in success page (/ by default). On this screen, SuperTokens will automatically extract the two tokens from the magic link URL and try and consume them on the backend in order to log the user in.

On different device#

If the user opens the magic link on a different device, we ask them to take an action before consuming tokens from the link. This is to prevent email clients from automatically consuming the tokens if they crawl links in the email.

Invalid / expired magic link UI#

If the user clicks on an invalid magic link or if the token in the magic link has expired, they will see the login screen with the following message

Enter OTP screen#

If login via OTP is enabled, then the user will see this screen immediately after their enter their phone number / email.

Invalid OTP#

If the user enters an incorrect OTP, this is what they see.

Entering an incorrect OTP too many times results in the user being navigated back to the login screen with the following message.

Logging in via OTP and Magic link simultaneously#

There is a edge case wherein the end user get's both an OTP and a magic link, and whilst viewing the enter OTP screen, then also click on the magic link separately. The magic link click will open a new tab and will consume the link to log the user in. The enter OTP screen will continue to show the enter OTP UI until user refreshes the page, after which, it will redirect to the post login screen.

Default email and SMS template#

You can find the email and SMS templates along with their UI in one of our GitHub repos.

You can change the content of the email & SMSs and / or how they are sent. For more information on this, please see the links at the end of this page.

General errors#

If there are network related errors, or the backend sends a status code >= 300, then we show the following UI. This UI is also shown if there is a similar error in the callback page.