Skip to main content

Embed Sign In / Up form in a page

What type of UI are you using?

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?

In the above code snippet, we:

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

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?

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?

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.