---
title: UI showcase
description: Discover the UI exposed by the pre-built UI for each authentication flow and recipe.
---

## Overview

The following page shows the interfaces exposed the pre-built UI for each authentication flow and recipe.

---

## Email password login

You can see the default UI when you visit the `websiteBasePath` (`/auth` by default) on your website. The form includes a sign in and a sign up form, and by default, the sign in form appears.

<Accordion>
<AccordionItem title="Default sign in form">
<img src="/docs-assets/img/emailpassword-sign-in.png" alt="Sign in form UI for email password login" />
</AccordionItem>
<AccordionItem title="Default sign up form">
<img src="/docs-assets/img/emailpassword-sign-up.png" alt="Sign up form UI for email password login" />
</AccordionItem>
<AccordionItem title="Field validation error UI">
The sign up form checks if the email is unique and if not, shows an error to the user saying that the email already exists. Likewise, if any of the form field's validation fails, the user sees an error like below.

<img src="/docs-assets/img/emailpassword-field-validation-error.png" alt="Sign up form field error UI" />
</AccordionItem>
<AccordionItem title="Incorrect email / password UI">
In the sign in form, if the user enters an email that doesn't exist, or is an incorrect email & password combination, they see the following error.

<img src="/docs-assets/img/emailpassword-wrong-cred.png" alt="Sign in form wrong credentials UI" />
</AccordionItem>
<AccordionItem title="General error UI">
If there are network related errors, or the backend sends a status code >= 300, then the following UI appears.

<img src="/docs-assets/img/emailpassword-general-error.png" alt="Sign in form general error" />
</AccordionItem>
</Accordion>

---

## Email verification

<Accordion>
<AccordionItem title="Email sent screen UI">
Once the user visits the email verification screen, this is what they see.

<img src="/docs-assets/img/email-verification-send-email.png" alt="Email verification email sent" />

On screen load, SuperTokens automatically sends an email to the user. This way, the user doesn't have to do any interaction before they get an email. Customizing this behavior is possible via the overrides feature.

The email verification link is of the format: `<YOUR_WEBSITE_DOMAIN>//auth/verify-email?token=...&tenantId=....`
</AccordionItem>
<AccordionItem title="Post link clicked screen">
### If a session exists
In this case, the API automatically consumes the email verification link and shows the following UI.

<img src="/docs-assets/img/email-verification-success.png" alt="Email verification success" />

Clicking on the continue button takes the user to the post sign in / up page (`/` by default).

### If a session does not exist
In this case, the user must do an interaction before calling the API to consume the token. This prevents email clients from automatically verifying the email since many of them may crawl the link in the email.

The user first sees this screen

<img src="/docs-assets/img/email-verification-clicked-no-session.png" alt="Email verification no session prompt" />

And then after they click on continue, they see the same screen as when a session did exist.

### Expired link UI

If the user clicks on an email link that has expired, they see the following UI.

<img src="/docs-assets/img/email-verification-link-expired.png" alt="Email verification no session prompt" />

After clicking continue, they return to the email sent screen (if a session exists), or to the sign in page (if a session doesn't exist).
</AccordionItem>
<AccordionItem title="General error UI">
If there are network related errors, or the backend sends a status code >= 300, then the following UI appears.

<img src="/docs-assets/img/email-verification-send-email-generic-error.png" alt="Email verification generic error" />

The below appears if something went wrong when the user clicked on the email verification link. To try again, they have to reload the page.

<img src="/docs-assets/img/email-verification-link-generic-error.png" alt="Email verification link clicked generic error" />
</AccordionItem>
<AccordionItem title="Default email UI">
The default email sent for email verification appears below. The backend SDK sends it, which calls `https://api.supertokens.com` (the API infrastructure). Follow the link at the end of this page to see how you can change the email content or delivery method.

<img alt="Email UI for email verification email" width="450px" src="/docs-assets/img/emailpassword/email-verify-email.png" />
</AccordionItem>
</Accordion>

---

## Password reset

<Accordion>
<AccordionItem title="Enter email form">
This appears when the user clicks on the "Forgot password" button in the sign in form. You can view it if you visit `/${websiteBasePath}/reset-password` path of your website (default is `/auth/reset-password`).

<img src="/docs-assets/img/reset-password-email.png" alt="Enter email in reset password form" />

Once the user enters their email and clicks on the "Email" button, SuperTokens sends them an email only if that email belongs to an account. Regardless, the user always sees a success state:

<img src="/docs-assets/img/reset-password-email-sent.png" alt="Email sent in reset password form" />
</AccordionItem>
<AccordionItem title="Enter new password form">
This form appears when the user clicks on the password reset link sent to their email. To view this form, you can navigate to `/${websiteBasePath}/reset-password?token=test` path of your website (default is `/auth/reset-password?token=test`).

Notice that the URL path is the same as that of the enter email form. However, there is an extra query parameter `token` which tells SuperTokens to show the enter new password form. If you try and submit a new password with the `test` token value, it fails since it's not a valid password reset token.

<img src="/docs-assets/img/reset-password-new-password.png" alt="Enter new password form" />

If the reset token has expired or is invalid, the user sees the following message.

<img src="/docs-assets/img/reset-password-new-password-invalid-token.png" alt="Enter new password for invalid token" />

Once the user has successfully changed their password, they see the following success screen

<img src="/docs-assets/img/password-reset-success.png" alt="Password change successful" />

:::info[Multi tenancy]
For multi tenant use case, the password reset token also includes a `tenantId` query parameter which identifies the tenant for which the system created the password reset token.
:::
</AccordionItem>
<AccordionItem title="General error UI">
If there are network related errors, or the backend sends a status code >= 300, then the following UI appears.

<img src="/docs-assets/img/password-reset-general-error.png" alt="Enter email general error" />

<img src="/docs-assets/img/new-password-general-error.png" alt="Enter new password general error" />
</AccordionItem>
<AccordionItem title="Password reset email UI">
The default email sent for password reset appears below. The backend SDK sends it, which calls `https://api.supertokens.com` (the API infrastructure). See the links at the end of this page to change the email content or delivery method.

<img alt="Email UI for password reset email" width="450px" src="/docs-assets/img/emailpassword/pass-reset-email.png" />
</AccordionItem>
</Accordion>

---

## Passwordless login

<Accordion>
<AccordionItem title="Email or phone input UI">
If the `contactMethod` is `EMAIL_OR_PHONE`, the user sees the following UI when they visit the login page.

<img src="/docs-assets/img/passwordless-email-phone.png" alt="Email and phone passwordless login" />

If the user decides to use their phone number and enters a valid phone number with their country code extension, they proceed to the next step. Otherwise, they see an error message asking them to also enter their country code. The UI also changes to show a dropdown containing a list of all countries (equal to the "Only phone input UI" shown below).
</AccordionItem>
<AccordionItem title="Only email input UI">
If the `contactMethod` is `EMAIL`, the user sees the following UI when they visit the login page.

<img src="/docs-assets/img/passwordless-email.png" alt="Email only passwordless login" />
</AccordionItem>
<AccordionItem title="Only phone input UI">
If the `contactMethod` is `PHONE`, the user sees the following UI when they visit the login page.

<img src="/docs-assets/img/passwordless-phone.png" alt="Phone only passwordless login" />
</AccordionItem>
<AccordionItem title="Invalid email or phone input UI">
If the user enters an invalid phone or email, they see the following message

<img src="/docs-assets/img/passwordless-invalid-phone-email.png" alt="Invalid phone or email" />
</AccordionItem>
<AccordionItem title="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 see the following UI.

<img src="/docs-assets/img/magic-link-sent.png" alt="Magic link sent UI" />

As you can see, a timer makes the user wait for a certain time (15 seconds by default) before they can resend the SMS / email. A button below the input allows them to change the email / SMS (the text on the button changes based on if the user entered an email or phone number).
</AccordionItem>
<AccordionItem title="Magic link clicked screens">
The magic link is of the format: `<YOUR_WEBSITE_DOMAIN>//auth/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 see the following UI before redirecting to the sign in success page (`/` by default). On this screen, SuperTokens automatically extracts the two tokens from the magic link URL. It tries to consume them on the backend to log the user in.

<img src="/docs-assets/img/magic-link-clicked.png" alt="Magic link consumed" />

### On different device

If the user opens the magic link on a different device, they must take an action before consuming tokens from the link. This prevents email clients from automatically consuming the tokens if they crawl links in the email.

<img src="/docs-assets/img/magic-link-clicked-different-device.png" alt="Magic link consumed on different device" />

### 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 see the login screen with the following message

<img src="/docs-assets/img/passwordless-magic-link-expired.png" alt="Invalid magic link" />
</AccordionItem>
<AccordionItem title="Enter OTP screen">
If login via OTP is active, then the user sees this screen immediately after their enter their phone number / email.

<img src="/docs-assets/img/enter-otp-screen.png" alt="Enter OTP screen" />

As you can see, a timer makes the user wait for a certain time (15 seconds by default) before they can resend the SMS / email. A button below the input 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 OTP

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

<img src="/docs-assets/img/enter-otp-invalid.png" alt="Invalid OTP" />

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

<img src="/docs-assets/img/passwordless-too-many-otp-tries.png" alt="Entered invalid OTP too many times" />

### Logging in via OTP and Magic link simultaneously 

An edge case occurs wherein the end user gets both an OTP and a magic link. Whilst viewing the enter OTP screen, they also click on the magic link. The magic link click opens a new tab and consumes the link to log the user in. The enter OTP screen continues to show the enter OTP UI until the user refreshes the page. After the refresh, it redirects to the post login screen.
</AccordionItem>
<AccordionItem title="Default email and SMS template">
You can find the email and SMS templates along with their UI [in one of the GitHub repositories](https://github.com/supertokens/email-sms-templates).

You can change the content of the email & SMSs and / or how they send. For more information on this, please see the links at the end of this page.
</AccordionItem>
<AccordionItem title="General errors">
If there are network related errors, or the backend sends a status code >= 300, then the following UI shows. This UI also appears if there is a similar error in the callback page.

<img src="/docs-assets/img/passwordless-passwordless-general-error.png" alt="Login screen general error" />

<img src="/docs-assets/img/enter-otp-error.png" alt="Enter OTP screen general error" />

<img src="/docs-assets/img/magic-link-sent-error.png" alt="Magic link sent screen general error" />

The error below appears if something went wrong after the user clicks on the magic link. Reloading the page should result in a reattempt

<img src="/docs-assets/img/email-verification-link-generic-error.png" alt="Email verification link clicked generic error" />
</AccordionItem>
</Accordion>

---

## Social login

You can see the default UI when you visit the `websiteBasePath` (`/auth` by default) on your website.

<Accordion>
<AccordionItem title="Default social login button UI">
<img src="/docs-assets/img/thirdparty-sign-in-custom-provider.png" alt="Sign in form UI for social login" />
</AccordionItem>
<AccordionItem title="Callback page UI">
When the user navigates back to your application from the third party provider, they see the following UI. On this screen, SuperTokens takes the authorisation code from the URL (sent by the provider) and sends it to the backend. The backend exchanges that for the user's access token and information.

<img src="/docs-assets/img/thirdparty-thirdparty-callback.png" alt="Callback screen from third party provider." />
</AccordionItem>
<AccordionItem title="Sign in / up unsuccessful UI">
SuperTokens requires that the third party provider gives an email for the user. If that's not the case for a certain provider, the user sees the following UI.

<img src="/docs-assets/img/thirdparty-no-email.png" alt="No email UI for provider" />
</AccordionItem>
<AccordionItem title="General error UI">
If there are network related errors, or the backend sends a status code >= 300, then the following UI shows. This UI also appears if there is a similar error in the callback page.

<img src="/docs-assets/img/thirdparty-general-error.png" alt="Sign in form general error" />
</AccordionItem>
</Accordion>