https://supertokens.com/ logo
Join Discord
Powered by
How can I add a checkbox to the signup UI? Like an...
# support-questions-legacy
t
How can I add a checkbox to the signup UI? Like an "agree to terms and conditions" checkbox
r
You will have to override the react component to add a checkbox yourself. You can also disable the sign up button (using JS dom manipulation) unless the checkbox is clicked. Alternatively, you can add something like "I agree to XYZ" to the end of the form by overriding the react component, and then override the sign-up function on the frontend to check if it's checked and only proceed if it is.
To disable the sign-up button unless the checkbox is clicked, you can add an 
onChange
event to the checkbox and set the 
disabled
attribute of the sign-up button based on the checkbox's state.
t
I'm trying to use the ThirdpartyComponentsOverrideProvider, but nothing shows up when I try to render it
r
are you sure you are overriding the right component? Did you check via the react inpsector?
t
Just withouth the SupertokensWrapper because it already exists in app.ts
*tsx
doing the dynamic NoSSR component works fine
Copy code
js
const SuperTokensComponentNoSSR = dynamic<React.ComponentProps<typeof SuperTokens.getRoutingComponent>>(
    new Promise((res) => res(SuperTokens.getRoutingComponent)),
    { ssr: false }
)
like this
r
Which recipe are you using?
t
I'm using thirdpartyemailpassword
I tried it with that override component too, but it didn't work either
Like this
r
t
This doesn't work

https://cdn.discordapp.com/attachments/1094062367354138715/1095223600707010580/1681192008.png▾

But this does:

https://cdn.discordapp.com/attachments/1094062367354138715/1095223886615957544/1681192096.png▾

r
@alisheraituarov1544 can help with this
a
replacing the comment { * Rest of the JSX * }
t
Looks like that worked! Thank you!
a
awesome
happy to help
r
Can you share the correct code snippet here just for future reference please?
a
Copy code
const SuperTokensComponentNoSSR =
  dynamic <
  React.ComponentProps <
  typeof SuperTokens.getRoutingComponent >>
    (new Promise((res) => res(SuperTokens.getRoutingComponent)),
    { ssr: false });

function Auth() {
  useEffect(() => {
    if (SuperTokens.canHandleRoute() === false) {
      redirectToAuth();
    }
  }, []);
  return (
    <FullPageCentered>
      <ThirdpartyEmailPasswordComponentsOverrideProvider
        components={{
          EmailPasswordSignInHeader_Override: ({
            DefaultComponent,
            ...props
          }) => {
            return (
              <div>
                <div>Overridden header</div>
                <DefaultComponent {...props} />
              </div>
            );
          },
        }}
      >
        <SuperTokensComponentNoSSR />
      </ThirdpartyEmailPasswordComponentsOverrideProvider>
    </FullPageCentered>
  );
}
r
can you format it properly @alisheraituarov ?
like this:
Copy code
<code here>
PreviousNext
Powered by