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.

Example#

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            }        }    }});
important

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

Which component I can override?#

For the full list of components available for override in EmailPassword recipe, refer to auth-react EmailPassword override docs.

Finding which component will be overridden#

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

Example#

  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>                }            }        }    }})
info

For the full list of components to override for email verification, refer to auth-react EmailVerification override docs.