Embed in a page 📑

Two steps to achieving this:

• First we disable the full page default implementation
• Then we render the reset password UI wherever we like

Step 1: Disable default implementation 🔐

ReactJS

SuperTokens.init({
    appInfo: {...},
    recipeList: [
        EmailPassword.init({
            resetPasswordUsingTokenFeature: {
                disableDefaultImplementation: true
            },
        }),
    ]
});

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

Step 2: Add component 📃

Add the ResetPasswordUsingToken component in your app:

ReactJS

import {ResetPasswordUsingToken} from 'supertokens-auth-react/recipe/emailpassword';

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