Skip to main content

If you are using our backend SDK that is lesser than the following versions, please visit the older documentation link here.

Which UI do you use?
Custom UI
Pre built UI

Embed Sign In / Up form in a page

Case 1: Rendering the Auth Widget in a page #

The following example shows the scenario where you have a dedicated route, such as /auth, for rendering the Auth Widget. Upon a successful login, the user will be automatically redirected to the return value of getRedirectionURL (defaulting to /).

Do you use react-router-dom?
YesNo

In the above code snippet, we:

  1. Disabled the default Auth UI by setting disableAuthRoute to true.
  2. Override the getRedirectionURL function inside the config to redirect to /dashboard upon successful login and to /auth when login is required.

Feel free to customize the redirection URLs as needed.

note

When the user visits the /auth page, they will see the SignIn UI by default. To render the SignUp UI, append show=signup as a query parameter to the URL, like/auth?show=signup.

Case 2: Rendering the Auth Widget in a page with no redirection #

The following example shows the scenario where you have a dedicated route, such as /auth, for rendering the Auth Widget. However, upon a successful login, the user will see a logged in UI instead of getting redirected.

Do you use react-router-dom?
YesNo

In the above code snippet, we wrap the logged-in component with Session.SessionAuth to validate all claims before displaying the logged-in UI. For instance, with email verification enabled, if a user's email is unverified, Session.SessionAuth redirects to the email verification page.

note

In the above case, redirection may occur if a claim fails. For instance, in the case of an Email Verification claim, if the user's email is not verified, they will be redirected to the email verification page. To prevent redirection for failed claims, please contact us on Discord for assistance.

Case 3: Rendering the Auth Widget in a popup #

The following example shows the scenario where you embed the Auth Widget in a popup, and upon successful login, you aim to close the popup.

Do you use react-router-dom?
YesNo
note

In the above case, redirection may occur if a claim fails. For instance, in the case of an Email Verification claim, if the user's email is not verified, they will be redirected to the email verification page. To prevent redirection for failed claims, please contact us on Discord for assistance.

Rendering only passwordless / third party login instead of both#

There may be a case where you want to render just one of the login methods on a particular page.

Rendering only passwordless UI#

import { PasswordlessPreBuiltUI } from "supertokens-auth-react/recipe/passwordless/prebuiltui"
import { AuthPage } from "supertokens-auth-react/ui"


function MyAuthPage() {
    return (
        <AuthPage factors={["otp-email"]} preBuiltUIList={[PasswordlessPreBuiltUI]} /* ... */ />
    );
}

The idea behind this is that we provide the factors prop to the AuthPage, which tells it that we only want to render the email OTP UI.

If you want to render other passwordless factors, like:

  • otp-email: OTP with email
  • otp-phone: OTP with phone number
  • link-email: Magic link with email
  • link-phone: Magic link with phone number

you can pass those in the array. For example, if you pass otp-email and otp-phone, the AuthPage component allow the user to type in an email and switch to a phone number input if they want.

The preBuiltUIList prop is still required, and we pass in the PasswordlessPreBuiltUI component to it. We could also pass in the ThirdPartyPreBuiltUI component to it as shown in the code blocks above, but it's not needed.

Rendering only third party login UI#

import { ThirdPartyPreBuiltUI } from "supertokens-auth-react/recipe/thirdparty/prebuiltui"
import { AuthPage } from "supertokens-auth-react/ui"


function MyAuthPage() {
    return (
        <AuthPage factors={["thirdparty"]} preBuiltUIList={[ThirdPartyPreBuiltUI]} /* ... */ />
    );
}

The idea behind this is that we provide the factors prop to the AuthPage, which tells it that we only want to render the third party password UI. The preBuiltUIList prop is still required, and we pass in the ThirdPartyPreBuiltUI component to it. We could also pass in the PasswordlessPreBuiltUI component to it as shown in the code blocks above, but it's not needed.

Looking for older versions of the documentation?
Which UI do you use?
Custom UI
Pre built UI