Embed Sign In / Up form in a page
#
Step 1: Disable default implementationThis will prevent SuperTokens from displaying the default login UI in the /auth
page.
- ReactJS
- Angular
- Vue
Important
supertokens-auth-react
SDK and will inject the React components to show the UI. Therefore, the code snippet below refers to the supertokens-auth-react
SDK.import SuperTokens from "supertokens-auth-react";
import ThirdParty from "supertokens-auth-react/recipe/thirdparty";
SuperTokens.init({
appInfo: {
apiDomain: "...",
appName: "...",
websiteDomain: "..."
},
recipeList: [
ThirdParty.init({
signInAndUpFeature: {
disableDefaultUI: true,
// ...
},
// ...
}),
// ...
]
});
Important
supertokens-auth-react
SDK and will inject the React components to show the UI. Therefore, the code snippet below refers to the supertokens-auth-react
SDK.import SuperTokens from "supertokens-auth-react";
import ThirdParty from "supertokens-auth-react/recipe/thirdparty";
SuperTokens.init({
appInfo: {
apiDomain: "...",
appName: "...",
websiteDomain: "..."
},
recipeList: [
ThirdParty.init({
signInAndUpFeature: {
disableDefaultUI: true,
// ...
},
// ...
}),
// ...
]
});
import SuperTokens from "supertokens-auth-react";
import ThirdParty from "supertokens-auth-react/recipe/thirdparty";
SuperTokens.init({
appInfo: {
apiDomain: "...",
appName: "...",
websiteDomain: "..."
},
recipeList: [
ThirdParty.init({
signInAndUpFeature: {
disableDefaultUI: true,
// ...
},
// ...
}),
// ...
]
});
If you navigate to /auth
, you should not see the widget anymore.
#
Step 2: Render the component yourselfFor example if you would like to show the login form in our own component which renders custom UI around it, and is shown only if the user is logged in, then we can:
- ReactJS
- Angular
- Vue
Important
supertokens-auth-react
SDK and will inject the React components to show the UI. Therefore, the code snippet below refers to the supertokens-auth-react
SDK.Important
supertokens-auth-react
SDK and will inject the React components to show the UI. Therefore, the code snippet below refers to the supertokens-auth-react
SDK.#
Step 3: Changing the website path for the login UIThe default path for this is component is /{websiteBasePath}/
.
If you are displaying this at some custom path, then you need add additional config on frontend:
- ReactJS
- Angular
- Vue
Important
supertokens-auth-react
SDK and will inject the React components to show the UI. Therefore, the code snippet below refers to the supertokens-auth-react
SDK.import SuperTokens from "supertokens-auth-react";
import ThirdParty from "supertokens-auth-react/recipe/thirdparty";
SuperTokens.init({
appInfo: {
apiDomain: "...",
appName: "...",
websiteDomain: "...",
},
recipeList: [
ThirdParty.init({}),
],
// The user will be taken to the custom path when then need to login.
getRedirectionURL: async (context) => {
if (context.action === "TO_AUTH") {
return "/custom-login-path";
};
}
})
Important
supertokens-auth-react
SDK and will inject the React components to show the UI. Therefore, the code snippet below refers to the supertokens-auth-react
SDK.import SuperTokens from "supertokens-auth-react";
import ThirdParty from "supertokens-auth-react/recipe/thirdparty";
SuperTokens.init({
appInfo: {
apiDomain: "...",
appName: "...",
websiteDomain: "...",
},
recipeList: [
ThirdParty.init({}),
],
// The user will be taken to the custom path when then need to login.
getRedirectionURL: async (context) => {
if (context.action === "TO_AUTH") {
return "/custom-login-path";
};
}
})
import SuperTokens from "supertokens-auth-react";
import ThirdParty from "supertokens-auth-react/recipe/thirdparty";
SuperTokens.init({
appInfo: {
apiDomain: "...",
appName: "...",
websiteDomain: "...",
},
recipeList: [
ThirdParty.init({}),
],
// The user will be taken to the custom path when then need to login.
getRedirectionURL: async (context) => {
if (context.action === "TO_AUTH") {
return "/custom-login-path";
};
}
})
#
Optional: Prevent redirection after SignIn / UpUpon successful login, SuperTokens redirects the user to the return value of getRedirectionURL
provided in the recipe config. By default or when returning undefined
from getRedirectionURL
, the user is redirected to the /
route. If you wish to completely prevent redirection, return null
instead. Typically, this is used if you want to embed the sign in / up component in a popup and want to just dismiss the popup post login.
- ReactJS
- Angular
- Vue
Important
supertokens-auth-react
SDK and will inject the React components to show the UI. Therefore, the code snippet below refers to the supertokens-auth-react
SDK.import SuperTokens from "supertokens-auth-react";
import ThirdParty from "supertokens-auth-react/recipe/thirdparty";
SuperTokens.init({
appInfo: {
apiDomain: "...",
appName: "...",
websiteDomain: "..."
},
recipeList: [
ThirdParty.init({
getRedirectionURL: async (context) => {
// Prevent redirection after successful sign in/up by returning null.
if (context.action === "SUCCESS") {
return null;
};
},
})
],
})
Important
supertokens-auth-react
SDK and will inject the React components to show the UI. Therefore, the code snippet below refers to the supertokens-auth-react
SDK.import SuperTokens from "supertokens-auth-react";
import ThirdParty from "supertokens-auth-react/recipe/thirdparty";
SuperTokens.init({
appInfo: {
apiDomain: "...",
appName: "...",
websiteDomain: "..."
},
recipeList: [
ThirdParty.init({
getRedirectionURL: async (context) => {
// Prevent redirection after successful sign in/up by returning null.
if (context.action === "SUCCESS") {
return null;
};
},
})
],
})
import SuperTokens from "supertokens-auth-react";
import ThirdParty from "supertokens-auth-react/recipe/thirdparty";
SuperTokens.init({
appInfo: {
apiDomain: "...",
appName: "...",
websiteDomain: "..."
},
recipeList: [
ThirdParty.init({
getRedirectionURL: async (context) => {
// Prevent redirection after successful sign in/up by returning null.
if (context.action === "SUCCESS") {
return null;
};
},
})
],
})
note
To avoid redirection for failed claims, such as Email Verification, reach out to us on Discord for assistance.
#
Optional: Rendering Auth components together in a popup and pageYou may choose to display the Auth UI in a full page and in a popup in the same app. For the full-page Auth UI, redirection after a successful login is preferred, whereas in the popup, it is not. In this scenario, you have the option to check either the current URL or the userContext
object in getRedirectionURL
to decide whether to return null or not.