https://supertokens.com/ logo
Hi I m utilising Nodejs for my backend
t

tykindsir

04/12/2023, 10:32 AM
Hi :). I'm utilising Nodejs for my backend and Reactjs for my Frontend, everything is working quite well but I am not attempting to use the EmailVerification feature. I have got it embedded in my page with
EmailVerification.init({
            mode: "REQUIRED",
            disableDefaultUI: true
        }),

AND


<div className="max-w-md mx-auto">
                <EmailVerification onRender={onChildRender} />
              </div>
But the component takes some time to render. It works fine and I can verify an email but I just want to be able to display a loading icon as the components load. How could I look to do this? The EmailVerification component does not provide any callbacks so I attempted to make one based on some searching I did in the discord. Maybe I have done it wrong? (it's for the page that says 'Verify your email address Please click on the link in the email we just sent you to confirm your email address.')
EmailVerification.init({
      mode: "REQUIRED",
      disableDefaultUI: true,
      override: {
        emailVerification: {
          components: {
            EmailVerificationSendVerifyEmail_Override: ({
              DefaultComponent,
              ...props
            }) => {

              // It does not reach here, but the component still renders. Is this the correct override? 
              useEffect(() => {
                // Call the callback function passed from the parent component
                props.onRender();
              }, [onRender]);
              // this is the screen which shows that an email verification email has been sent
              return <DefaultComponent {...props} />;
            },
          },
        },
      },
    }),
Any help would be appreciated
I've additionally tried to render the component as suggested inhttps://supertokens.com/docs/emailpassword/advanced-customizations/react-component-override/usage. But the component does not render at all
<div className="max-w-md mx-auto">
                <EmailVerificationComponentsOverrideProvider
                  components={{
                    // In this case, the <EmailVerificationSendVerifyEmail_Override>
                    // will render the original component
                    EmailVerificationSendVerifyEmail_Override: ({
                      DefaultComponent,
                      ...props
                    }) => {
                      console.log("hi");
                      return (
                        <div>
                          <DefaultComponent {...props} />
                        </div>
                      );
                    },
                  }}
                >
                  {/* Rest of the JSX */}
                </EmailVerificationComponentsOverrideProvider>
              </div>
Any help would be appreciated
r

rp

04/12/2023, 10:56 AM
hey @tykindsir which version of the auth-react SDK are you using?
@Alisher Aituarov can help here.
t

tykindsir

04/12/2023, 10:57 AM
Looks to be ^0.31.5
a

Alisher Aituarov

04/12/2023, 11:01 AM
@tykindsir hi, please try replacing
{/* Rest of the JSX */}
with
<EmailVerification/>
t

tykindsir

04/12/2023, 11:03 AM
Beautiful
a

Alisher Aituarov

04/12/2023, 11:04 AM
For future references
<div className="max-w-md mx-auto">
                <EmailVerificationComponentsOverrideProvider
                  components={{
                    // In this case, the <EmailVerificationSendVerifyEmail_Override>
                    // will render the original component
                    EmailVerificationSendVerifyEmail_Override: ({
                      DefaultComponent,
                      ...props
                    }) => {
                      console.log("hi");
                      return (
                        <div>
                          <DefaultComponent {...props} />
                        </div>
                      );
                    },
                  }}
                >
                  <EmailVerification /> 
                </EmailVerificationComponentsOverrideProvider>
              </div>
t

tykindsir

04/12/2023, 11:05 AM
Thanks for the quick help @Alisher Aituarov and @rp