You want to override the react component to add a custom component in the header that displays the custom error message on some event being fired

Then you want to fire that event when you get a response from the API is sent. You can intercept the response if you override the frontend recipe interface for the sign in API call

If you tell me the recipe name, I can show you specific code snippets for how to do this.

hey @User So you can override the the header component during sign in like this:

ts
EmailPassword.init({
    override: {
        components: {
            EmailPasswordSignInHeader_Override: ({DefaultComponent, ...props}) => {
                return (
                    <div>
                        <DefaultComponent {...props}/>
                        <CustomErrorMessage />
                    </div>
                );
            }
        }
    }
})

And there is also

EmailPasswordSignUp_Override

for sign up header. You will have to make

CustomErrorMessage

such that it listens to a custom even to show the error message you want to show. The custom even can be fired like this:

ts
EmailPassword.init({
    override: {
        functions: (oI) => {
            return {
                ...oI,
                signIn: async function (input) {
                    // make call to backend and if you have your custom error, then fire event
                    // to show the error in the UI
                    // You need to return from this function as per this function's return type
                }
            }
        }
    }
})