So the problem is I'm currently trying to implement the solution proposed by @porcellus (Creating a custom AuthWrapper). The thing is I cannot quite get it to work, since it always crashes my app (infinite api calls etc.). Right now I am quite unsure about how to implement it or if its even the right way to go (since this issue #560 only appeared after a new supertokens version and was working before)

I did this.

import { useRouter } from 'next/router'
import { ReactElement, useEffect, useState } from 'react'
import { useSessionContext } from 'supertokens-auth-react/recipe/session'
import { isEmailVerified as tpIsEmailVerified } from 'supertokens-auth-react/recipe/thirdpartyemailpassword'

const AuthWrapper = ({ children }: { children: ReactElement }) => {
  const sessionContext = useSessionContext()
  const router = useRouter()
  const [verified, setVerified] = useState<boolean>(false)

  useEffect(() => {
    console.log('running useEffect')

    const redirectToPath = new URL(window.location.href).searchParams.get(
      'redirectToPath'
    )

    async function isEmailVerified() {
      const { isVerified } = await tpIsEmailVerified()
      setVerified(isVerified)
    }

    isEmailVerified()

    if (sessionContext.loading === false) {
      if (sessionContext.doesSessionExist) {
        const atp = sessionContext.accessTokenPayload
        const { isUsernameSet } = atp

        if (isUsernameSet === false) {
          router.replace({
            pathname: '/auth/set-username',
            query: { redirectToPath },
          })
        }

        if (verified === false) {
          router.replace({
            pathname: '/auth/verify-email',
            query: { redirectToPath },
          })
        }

        if (
          router.asPath.includes('/auth') &&
          verified === true &&
          isUsernameSet === true
        ) {
          router.replace(redirectToPath || '/')
        }
      } else {
        router.replace({
          pathname: '/auth/signin',
          query: { redirectToPath },
        })
      }
    }
  }, [router, sessionContext, verified])

  if (sessionContext.loading === true) {
    return null
  }
  return children
}

export default AuthWrapper

The thing is: The issue with Google and Facebook (https://github.com/supertokens/supertokens-auth-react/issues/560) First appeared after this breaking change where the new SupertokensWrapper was introduced.

before that my implementation was working just fine...

how did you update your implementation after the change? just checking

loading

in your components?

I moved the

isEmailVerified

below the

if(sessionContext.doesSessionExist)

and it's still an infinite loop

I just have the

useEffect

hook run infinite

and my curser is blinking 😄

or there is a package called why-did-you-render, that also works.

first on the verify-email route

now just on auth/signin

I mean if this is wrapping the

/auth

route, and a session doesn't exists, then this

useEffect

will keep calling

router.replace

can you comment out the redirections and replace them with console logs?

let me fix that first

one moment

alright so wait a minute

I am fixing the other routes as well

Okay

so this is my new implementation:

const AuthWrapper = ({ children }: { children: ReactElement }) => {
  const sessionContext = useSessionContext()
  const router = useRouter()

  useEffect(() => {
    console.log('running useEffect')

    const redirectToPath = new URL(window.location.href).searchParams.get(
      'redirectToPath'
    )

    if (sessionContext.loading === false) {
      if (sessionContext.doesSessionExist) {
        const atp = sessionContext.accessTokenPayload
        const { isUsernameSet, isEmailVerified } = atp

        if (isUsernameSet === false) {
          console.log('Username is not set')
          if (!router.asPath.includes('/auth/set-username')) {
            router.replace({
              pathname: '/auth/set-username',
              query: { redirectToPath },
            })
          }
        }

        if (isEmailVerified === false) {
          if (!router.asPath.includes('/auth/verify-email')) {
            router.replace({
              pathname: '/auth/verify-email',
              query: { redirectToPath },
            })
          }
        }
        if (
          router.asPath.includes('/auth') &&
          isEmailVerified === true &&
          isUsernameSet === true
        ) {
          router.replace(redirectToPath || '/')
        }
      } else if (!router.asPath.includes('/auth')) {
        router.replace({
          pathname: '/auth/signin',
          query: { redirectToPath },
        })
      }
    }
  }, [router, sessionContext]

  if (sessionContext.loading === true) {
    return null
  }
  return children
}
export default AuthWrapper

The email part only works because I save the thing in the accesstokenpayload on session creation ....

yes

flashes? so the protected page pops in before redirection?

Oh no, actually I didn't do it in the backend...

just tested it with facebook

google*

where the email is already verified on session creation. and i set the accesstokenpayload on session creation

however, if i use any other signup method I cannot update the atp since I don't have access to the session...

so this implementation is not going to work...

I thought it would be smart to store the isEmailVerfied in the atp.

however, this is impossible since I do not have access to the session when I override the VerifyEmailPost route like this:

Override: &tpepmodels.OverrideStruct{
                    EmailVerificationFeature: &evmodels.OverrideStruct{
                        APIs: func(originalImplementation evmodels.APIInterface) evmodels.APIInterface {
                            originalVerifyEmailPOST := *originalImplementation.VerifyEmailPOST

                            (*originalImplementation.VerifyEmailPOST) = func(token string, options evmodels.APIOptions, userContext supertokens.UserContext) (evmodels.VerifyEmailPOSTResponse, error) {
                                resp, err := originalVerifyEmailPOST(token, options, userContext)

                                if err != nil {
                                    return evmodels.VerifyEmailPOSTResponse{}, err
                                }

                                if resp.OK != nil {
                                    // TODO: Update ATP
                                }

                                return resp, nil
                            }
                            return originalImplementation
                        },
                    },
                },

Which in someway makes sense.

So I need to use the classic isEmailVerfied feature...

in the frontend

so you could check for a session there (but make it optional) and update the session there.

also, I think we should focus on one issue at a time, and you could be using the normal isEmailVerified feature

meanwhile

But I cannot use the normal implementation on the frontend since then my solution would look like this:

Which causes infinite redirects since

verified

has to be in the dependency array of

useEffect

plus, you are not really using isVerified anywhere else so you don't necessarily need it as a state outside of the useEffect so that's another solution

will implement

Alright, that's working

However @rp_st could you help me with setting the isEmailVerified in the AccessTokenPayload=

?

Thank you very much!!!! @porcellus

From the session object

And you can use the getSession function or verifySession function to get the session object

Thank you @porcellus @rp_st for the amazing help...