File length: 13347
# References - Frontend SDKs - User Interface -  UI showcase
Source: https://supertokens.com/docs/references/frontend-sdks/prebuilt-ui/ui-showcase

## 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 px="4">

## Default sign in form

<img src="/img/emailpassword-sign-in.png" alt="Sign in form UI for email password login" />

## Default sign up form

<img src="/img/emailpassword-sign-up.png" alt="Sign up form UI for email password login" />

## 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="/img/emailpassword-field-validation-error.png" alt="Sign up form field error UI" />

## 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="/img/emailpassword-wrong-cred.png" alt="Sign in form wrong credentials UI" />

## General error UI
If there are network related errors, or the backend sends a status code >= 300, then the following UI appears.

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

</Accordion>

---

## Email verification

<Accordion px="4">

## Email sent screen UI

Once the user visits the email verification screen, this is what they see.

<img src="/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: `<WEBSITE_DOMAIN>/<WEBSITE_BASE_PATH>/verify-email?token=...&tenantId=....`

## 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="/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="/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="/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).

## General error UI
If there are network related errors, or the backend sends a status code >= 300, then the following UI appears.

<img src="/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="/img/email-verification-link-generic-error.png" alt="Email verification link clicked generic error" />

## 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="/img/emailpassword/email-verify-email.png" />

</Accordion>

---

## Password reset

<Accordion px="4">

## 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="/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="/img/reset-password-email-sent.png" alt="Email sent in reset password form" />

## 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="/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="/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="/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.
:::

## General error UI
If there are network related errors, or the backend sends a status code >= 300, then the following UI appears.

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

<img src="/img/new-password-general-error.png" alt="Enter new password general error" />

## 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="/img/emailpassword/pass-reset-email.png" />

</Accordion>

---

## Passwordless login

<Accordion px="4">

## 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="/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).

## Only email input UI
If the `contactMethod` is `EMAIL`, the user sees the following UI when they visit the login page.

<img src="/img/passwordless-email.png" alt="Email only passwordless login" />

## Only phone input UI
If the `contactMethod` is `PHONE`, the user sees the following UI when they visit the login page.

<img src="/img/passwordless-phone.png" alt="Phone only passwordless login" />

## Invalid email or phone input UI
If the user enters an invalid phone or email, they see the following message

<img src="/img/passwordless-invalid-phone-email.png" alt="Invalid phone or email" />

## 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="/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).

## Magic link clicked screens

The magic link is of the format: `<WEBSITE_DOMAIN>/<WEBSITE_BASE_PATH>/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="/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="/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="/img/passwordless-magic-link-expired.png" alt="Invalid magic link" />

## 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="/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="/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="/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.

## 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.

## 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="/img/passwordless-passwordless-general-error.png" alt="Login screen general error" />

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

<img src="/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="/img/email-verification-link-generic-error.png" alt="Email verification link clicked generic error" />

</Accordion>

---

## Social login

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

<Accordion px="4">

## Default social login button UI

<img src="/img/thirdparty-sign-in-custom-provider.png" alt="Sign in form UI for social login" />

## 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="/img/thirdparty-thirdparty-callback.png" alt="Callback screen from third party provider." />

## 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="/img/thirdparty-no-email.png" alt="No email UI for provider" />

## 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="/img/thirdparty-general-error.png" alt="Sign in form general error" />

</Accordion>