tykindsir
04/12/2023, 10:32 AMEmailVerification.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<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 appreciatedrp
04/12/2023, 10:56 AMtykindsir
04/12/2023, 10:57 AMAlisher Aituarov
04/12/2023, 11:01 AM{/* Rest of the JSX */}
with <EmailVerification/>
tykindsir
04/12/2023, 11:03 AMAlisher Aituarov
04/12/2023, 11:04 AM<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>
tykindsir
04/12/2023, 11:05 AM