which recipe are you using?

Via react component override:

ts
ThirdPartyEmailPassword.init({
    override: {
        emailVerification: {
            components: {
                EmailVerificationSendVerifyEmail_Override: ({ DefaultComponent, ...props }) => {
                    // this is the screen which shows that an email verification email has been sent
                    return <DefaultComponent {...props}/>
                },
                EmailVerificationVerifyEmailLinkClicked_Override: ({ DefaultComponent, ...props }) => {
                    // this is the screen which is shown when the user clicks on the email
                    // verification link
                    return <DefaultComponent {...props}/>
                },
            }
        }
    }
})

Method 2) You can disable the default UI and make your own:

ts
ThirdPartyEmailPassword.init({
    emailVerificationFeature: {
        disableDefaultUI: true
    }
})

Method 3) Change style / CSS:

ts
ThirdPartyEmailPassword.init({
    emailVerificationFeature: {
        sendVerifyEmailScreen: {
            style: {...}
        },
        verifyEmailLinkClickedScreen: {
            style: {...}
        }
    }
})

Also, in the callback page, make sure to check if a session exists, if not, you should ask the user to click on a button or something before calling that function cause otherwise it has the risk that some email clients would verify the email by auto opening the links.

yeah makes sense about the auto-opening

thanks for the details @rp_st

I mean, you don't need to check the token yourself.. just call that function and it will do it's thing

but yea.. if calling that function is what you meant, then you are right

thanks again