Skip to main content

Embed in a page

Step 1: Disable the default implementation#

import SuperTokens from "supertokens-auth-react";
import ThirdPartyEmailPassword from "supertokens-auth-react/recipe/thirdpartyemailpassword";

SuperTokens.init({
appInfo: {
apiDomain: "...",
appName: "...",
websiteDomain: "..."
},
recipeList: [
ThirdPartyEmailPassword.init({
resetPasswordUsingTokenFeature: {
disableDefaultUI: true
},
}),
]
});

If you navigate to /auth/reset-password, you should not see the widget anymore.

Step 2: Render the component yourself#

Add the ResetPasswordUsingToken component in your app:

import React from "react";
import {ResetPasswordUsingToken} from 'supertokens-auth-react/recipe/thirdpartyemailpassword/prebuiltui';

class ResetPasswordPage extends React.Component {
render() {
return (
<div>
<ResetPasswordUsingToken/>
</div>
)
}
}

Step 3: Changing the website path for reset password UI (optional)#

The default path for this is component is /{websiteBasePath}/reset-password.

If you are displaying this at some custom path, then you need add additional config on the backend and frontend:

Step A: On the backend#

import SuperTokens from "supertokens-node";
import ThirdPartyEmailPassword from "supertokens-node/recipe/thirdpartyemailpassword";
import { SMTPService } from "supertokens-node/recipe/thirdpartyemailpassword/emaildelivery";

SuperTokens.init({
supertokens: {
connectionURI: "...",
},
appInfo: {
apiDomain: "...",
appName: "...",
websiteDomain: "..."
},
recipeList: [
ThirdPartyEmailPassword.init({
emailDelivery: {
override: (originalImplementation) => {
return {
...originalImplementation,
sendEmail: async function (input) {
if (input.type === "PASSWORD_RESET") {
return originalImplementation.sendEmail({
...input,
passwordResetLink: input.passwordResetLink.replace(
// This is: `${websiteDomain}${websiteBasePath}/reset-password`
"http://localhost:3000/auth/reset-password",
"http://localhost:3000/your/path"
)
})
}
return originalImplementation.sendEmail(input);
}
}
}
}
})
]
});

Step B: On the frontend#

import SuperTokens from "supertokens-auth-react";
import ThirdPartyEmailPassword from "supertokens-auth-react/recipe/thirdpartyemailpassword";

SuperTokens.init({
appInfo: {
apiDomain: "...",
appName: "...",
websiteDomain: "...",
},
recipeList: [
ThirdPartyEmailPassword.init({

// The user will be taken to the custom path when they click on forgot password.
getRedirectionURL: async (context) => {
if (context.action === "RESET_PASSWORD") {
return "/custom-reset-password-path";
};
}
})
]
})