Reset password custom theme

Disable default implementation 🔐

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

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

Add component 📃

Start by importing the ResetPasswordUsingToken feature component from supertokens-auth-react/recipe/emailpassword and render it anywhere in your application:

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

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

Create a Reset password custom theme

Create a ResetPasswordUsingTokenTheme React component:

import React from "react";

/*
 * ResetPasswordUsingTokenTheme
 * props given from ResetPasswordUsingToken feature component: https://github.com/supertokens/supertokens-auth-react/blob/6210816e5d4f0058d2699d1c8aa15acf3cd8d1ff/lib/ts/recipe/emailpassword/types.ts#L511
 */

export default function ResetPasswordUsingTokenTheme(props){
 /*
  *  Your custom implementation goes here.
  * 
  */
}

In your Authentication component:

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

class Authentication extends React.Component {
    render() {
        return (
            <ResetPasswordUsingToken>
                <ResetPasswordUsingTokenTheme>
            </ResetPasswordUsingToken>
        )
    }
}

Styling

Please refer to the corresponding section for styling Sign-up / Sign-in

API

Please refer to the corresponding section for API Sign-up / Sign-in

Implementing a generic Reset Password

Please refer to the corresponding section for generic implementation of a Sign-up / Sign-in theme