Passwordless login
You can see the default UI when you visit the websiteBasePath
(/auth?rid=thirdpartypasswordless
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:
- SMS / Whatsapp / Messenger etc.
- Email and SMS / Whatsapp / Messenger etc.
#
Email or phone input UIIf the contactMethod
is EMAIL_OR_PHONE
, the user will see the following UI when they visit the login page.
![Email and phone passwordless login](/img/thirdpartypasswordless-email-phone.png)
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 UIIf the contactMethod
is EMAIL
, the user will see the following UI when they visit the login page.
![Email only passwordless login](/img/thirdpartypasswordless-email.png)
#
Only phone input UIIf the contactMethod
is PHONE
, the user will see the following UI when they visit the login page.
![Phone only passwordless login](/img/thirdpartypasswordless-phone.png)
#
Invalid email or phone input UIIf the user enters an invalid phone or email, they will see the following message
![Invalid phone or email](/img/thirdpartypasswordless-invalid-phone-email.png)
#
Magic link sent screenIf 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.
![Magic link sent UI](/img/magic-link-sent.png)
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 screensThe magic link is of the format: ${websiteDomain}/${websiteBasePath}/verify?rid=thirdpartypasswordless&tenantId=...&preAuthSessionId=<token1>#<token2>
.
#
On same deviceWhen 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.
![Magic link consumed](/img/magic-link-clicked.png)
#
On different deviceIf 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.
![Magic link consumed on different device](/img/magic-link-clicked-different-device.png)
#
Invalid / expired magic link UIIf 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
![Invalid magic link](/img/thirdpartypasswordless-magic-link-expired.png)
#
Enter OTP screenIf login via OTP is enabled, then the user will see this screen immediately after their enter their phone number / email.
![Enter OTP screen](/img/enter-otp-screen.png)
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).
#
Invalid OTPIf the user enters an incorrect OTP, this is what they see.
![Invalid OTP](/img/enter-otp-invalid.png)
Entering an incorrect OTP too many times results in the user being navigated back to the login screen with the following message.
![Entered invalid OTP too many times](/img/thirdpartypasswordless-too-many-otp-tries.png)
#
Logging in via OTP and Magic link simultaneouslyThere 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.
Since the user is logged in, the enter OTP screen will change to show the UI as shown below
![Magic link and OTP at the same time](/img/otp-magic-link-same-time.png)
#
Default email and SMS templateYou 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 errorsIf 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.
![Login screen general error](/img/thirdpartypasswordless-passwordless-general-error.png)
![Enter OTP screen general error](/img/enter-otp-error.png)
![Enter OTP screen general error](/img/magic-link-sent-error.png)
The error below is shown if something went wrong after the user clicks on the magic link. Reloading the page should result in a reattempt
![Email verification link clicked generic error](/img/email-verification-link-generic-error.png)
#
See also- Replacing, customising or embedding the forms
- Language translation
- Post sign in / sign up action
- Changing the default country for phone number inputs
- Changing the OTP / magic link resend interval or lifetime
- Changing number of retries for OTP
- Changing OTP format
- Adding a terms of services and privacy policy link
- Changing the content of or how emails and / or SMS are sent
- Generating magic links without user action
- Changing email or phone number validation logic
- Customising user ID format