Skip to main content

How to use

  1. You will need to modify the EmailPassword.init(...) function call.
  2. Component overrides can be configured at override.components config object.
  3. Pick a component that you'd like to override by its key.
  4. Supply a React component against the key you have picked. Your custom component will get the original component as a prop.


EmailPassword.init({    override: {        components: {            /**             * In this case, the <EmailPasswordSignIn> will render the original component             * wrapped in div with octocat picture above it.             */            EmailPasswordSignIn: ({ DefaultComponent, ...props }) => {                return (                    <div>                        <img src="octocat.jpg" />                        <DefaultComponent {...props} />                    </div>                );            },        },        emailVerification: {            components: {                // Please refer to Overriding email verification components below            }        }    }});

Please make sure that the file in which this config is specified is a .tsx or .jsx file type.

Finding which component will be overridden#

To do that, you should use React Developer Tools extension which provides a component tree inspector.


  1. Look for the names defined in component override config
  2. Ensure that's the component you want to override
  3. Overide the component as stated above.

How do I render the original component#

Because the override function receives the original component as a parameter, you can render it. To do this, simply use it in JSX. Don't forget to supply original props by spreading them.

const overrideFn = ({ DefaultComponent, ...props }) => {    return (        <>            <h1>I'm a header that you added above original component</h1>            <DefaultComponent {...props} />        </>    )}

Overriding email verification components#

You can also override components related to email verification. To do that, nest the override configuration like:

EmailPassword.init({    // notice that we are passing the components    // object inside the emailVerification object    override: {        emailVerification: {            components: {                EmailVerificationSendVerifyEmail: ({ DefaultComponent, ...props }) => {                    return <div>                        <DefaultComponent {...props} />                    <div>                }            }        }    }})