Got it!

In order to solve the issue with using

supertokens-react-theme

locally inside another repo such as

supertokens-demo-react

, you will have to remove conflicting modules when running locally. Note that this issue is only happening in local environment. That's why it's recommended to simply run

npm run start

when you want to modify a theme, and then from your project, reference the remote package (on github or npm) after you have made your changes. Does that make sense?

I'll give it a shot, thank you for your help.

Is there a doc to change background color of reset your password email button?

Yes. Have you seen https://test.supertokens.io/docs/emailpassword/common-customizations/styling/changing-style

Yes.

I have tried:

resetPasswordUsingTokenFeature: { submitNewPasswordForm: { style: { button: { backgroundColor: "#0B72B9", width: "30%", margin: "0 auto", }, }, }, }, },

But no luck. 😦

I have also tried:

resetPasswordUsingTokenFeature: { sendEmailForm: { style: { button: { backgroundColor: "#0B72B9", width: "30%", margin: "0 auto", }, }, }, },

Okay thanks. I’ll have a look and get back soon

hey @User I got it to work just fine with the below code. It changes the style of the button for the sign up, sign in, reset password (enter email form), reset password (submit new password form). The below is in the frontend code:

EmailPassword.init({
      signInAndUpFeature: {
        signUpForm: {
          style: {
            button: {
              backgroundColor: "#0B72B9",
              width: "30%",
              margin: "0 auto",
            }
          }
        },
        signInForm: {
          style: {
            button: {
              backgroundColor: "#0B72B9",
              width: "30%",
              margin: "0 auto",
            }
          }
        }
      },
      resetPasswordUsingTokenFeature: {
        enterEmailForm: {
          style: {
            button: {
              backgroundColor: "#0B72B9",
              width: "30%",
              margin: "0 auto",
            }
          }
        },
        submitNewPasswordForm: {
          style: {
            button: {
              backgroundColor: "#0B72B9",
              width: "30%",
              margin: "0 auto",
            }
          }
        }
      }
    }),

message has been deleted

message has been deleted

Ok. Thanks

I guess I need both the enterEmailFrom AND the submitNewPasswordForm. I had only tried each of them separately, not both at once.

Actually you shouldn't need both

But try with both, if that works, and then remove one and it stops working, then we can create an issue about it

Ok. With both it works. When I remove the submitNewPasswordForm block it still works. So not sure what that block pertains to.

but thanks for the assist

submitNewPasswordForm pertains to the form that shows up when the user clicks on the link they get in their email.

Is there a way to customize the /auth page futher? i.e. add new text? perhaps a header above the signin block?

also does the route have to be /auth? can that be changed to something else?

You can see that form by going to

http://localhost:9001/auth/reset-password?rid=emailpassword&token=TOKEN

(change the port based on your dev env)

> Is there a way to customize the /auth page futher? i.e. add new text? perhaps a header above the signin block? Yes. You can embed the login page into an existing page, or create a new one from scratch. See https://supertokens.io/docs/emailpassword/common-customizations/styling/themes > also does the route have to be /auth? can that be changed to something else? Yes. See https://supertokens.io/docs/emailpassword/common-customizations/changing-base-path/website-base-path and https://supertokens.io/docs/emailpassword/common-customizations/changing-base-path/api-base-path

ok. thanks

Is there a master list with all the API options in instead of searching/reading through the various help pages?

When you say API options, do you mean the various config options that you can give to the init function? Or something else?