Embed Sign In / Up form in a page
- ReactJS
- Angular
- Vue
caution
Not applicable to non-react apps. Please build your own custom UI instead.
#
Case 1: Rendering the Auth Widget in a pageThe 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 /
).
In the above code snippet, we:
- Disabled the default Auth UI by setting
disableAuthRoute
totrue
. - 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 redirectionThe 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.
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 popupThe following example shows the scenario where you embed the Auth Widget in a popup, and upon successful login, you aim to close the popup.
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 bothThere may be a case where you want to render just one of the login methods on a particular page.
#
Rendering only passwordless UIimport { 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 emailotp-phone
: OTP with phone numberlink-email
: Magic link with emaillink-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 UIimport { 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.
caution
Not applicable to non-react apps. Please build your own custom UI instead.