Which UI do you use?
Custom UI
Pre built UI
Redirection Callback Hook
This function is used to change where the user is redirected to post certain actions. For example, you can use this to redirect a user to a specific URL post sign in / up. If you're embedding the sign in / up components in a popup and wish to disable redirection entirely, simply return null
.
- ReactJS
- Angular
- Vue
// this goes in the auth route config of your frontend app (once the pre built UI script has been loaded)
supertokensUIInit("supertokensui", {
appInfo: {
appName: "SuperTokens",
apiDomain: "http://localhost:3000",
websiteDomain: "http://localhost:3000",
},
getRedirectionURL: async (context) => {
if (context.action === "TO_AUTH") {
// This is called when we want to navigate to the login page.
// By default, this will go to the configured websiteBasePath (/auth)
} else if (context.action === "SUCCESS" && context.newSessionCreated) {
// This is called when the user has successfully signed in / signed up.
// By default, this will go to "/" or to
// the redirectToPath if it is set (the page from which the user was redirected to the auth page).
let redirectToPath = context.redirectToPath;
if (redirectToPath !== undefined) {
// we are navigating back to where the user was before they authenticated
return redirectToPath;
}
if (context.createdNewUser) {
// user signed up
return "/onboarding"
} else {
// user signed in
return "/dashboard"
}
}
// return undefined to let the default behaviour play out
return undefined;
},
recipeList: [
supertokensUIEmailPassword.init({
getRedirectionURL: async (context) => {
if (context.action === "RESET_PASSWORD") {
// called when the user clicked on the forgot password button
}
// return undefined to let the default behaviour play out
return undefined;
}
})
]
});
import EmailPassword from "supertokens-auth-react/recipe/emailpassword";
import SuperTokens from "supertokens-auth-react";
SuperTokens.init({
appInfo: {
appName: "SuperTokens",
apiDomain: "http://localhost:3000",
websiteDomain: "http://localhost:3000",
},
getRedirectionURL: async (context) => {
if (context.action === "TO_AUTH") {
// This is called when we want to navigate to the login page.
// By default, this will go to the configured websiteBasePath (/auth)
} else if (context.action === "SUCCESS" && context.newSessionCreated) {
// This is called when the user has successfully signed in / signed up.
// By default, this will go to "/" or to
// the redirectToPath if it is set (the page from which the user was redirected to the auth page).
let redirectToPath = context.redirectToPath;
if (redirectToPath !== undefined) {
// we are navigating back to where the user was before they authenticated
return redirectToPath;
}
if (context.createdNewUser) {
// user signed up
return "/onboarding"
} else {
// user signed in
return "/dashboard"
}
}
// return undefined to let the default behaviour play out
return undefined;
},
recipeList: [
EmailPassword.init({
getRedirectionURL: async (context) => {
if (context.action === "RESET_PASSWORD") {
// called when the user clicked on the forgot password button
}
// return undefined to let the default behaviour play out
return undefined;
}
})
]
});
// this goes in the auth route config of your frontend app (once the pre built UI script has been loaded)
supertokensUIInit("supertokensui", {
appInfo: {
appName: "SuperTokens",
apiDomain: "http://localhost:3000",
websiteDomain: "http://localhost:3000",
},
getRedirectionURL: async (context) => {
if (context.action === "TO_AUTH") {
// This is called when we want to navigate to the login page.
// By default, this will go to the configured websiteBasePath (/auth)
} else if (context.action === "SUCCESS" && context.newSessionCreated) {
// This is called when the user has successfully signed in / signed up.
// By default, this will go to "/" or to
// the redirectToPath if it is set (the page from which the user was redirected to the auth page).
let redirectToPath = context.redirectToPath;
if (redirectToPath !== undefined) {
// we are navigating back to where the user was before they authenticated
return redirectToPath;
}
if (context.createdNewUser) {
// user signed up
return "/onboarding"
} else {
// user signed in
return "/dashboard"
}
}
// return undefined to let the default behaviour play out
return undefined;
},
recipeList: [
supertokensUIEmailPassword.init({
getRedirectionURL: async (context) => {
if (context.action === "RESET_PASSWORD") {
// called when the user clicked on the forgot password button
}
// return undefined to let the default behaviour play out
return undefined;
}
})
]
});