Second problem, regarding protecting route in Next JS so I made a wrapper for Guard.jsx

js
import React from 'react'
import dynamic from 'next/dynamic'
import { ThirdPartyEmailPasswordAuth } from "supertokens-auth-react/recipe/thirdpartyemailpassword"

const AuthWrapper = dynamic(
  new Promise((res) => res(ThirdPartyEmailPasswordAuth)),
  {ssr: false}
)

export default function Guard({children, requiredAuth}) {
  return <AuthWrapper requiredAuth={requiredAuth}>{children}</AuthWrapper>
}

Then I apply in a auth button, the problem is the page will be in infinite loop pointing to auth page. This auth button is is in navbar template so it is happening in everypage.

js
export default function AuthButton(){
  let {doesSessionExist} = useSessionContext()
  console.log(doesSessionExist)

  return(
    <>
    <Guard requiredAuth={false}>
      {doesSessionExist ? 
        <Button w="full" size="lg" colorScheme="red" onClick={e => logout(e)}>Logout</Button> 
      : 
        <Button w="full" size="lg" colorScheme="green" onClick={e => login(e)}>Sign-In / Sign-Up</Button>
      }
    </Guard>
    </>
  )
}

And because the code in here too, problem three is doesSessionExist always return false

hey!

So basically I'm folowing this method https://supertokens.com/docs/thirdpartyemailpassword/nextjs/protecting-route but instead using ThirdPartyEmailPassword directly I build a wrapper component for that. Then I wrap it in a button for header navbar. Suddenly my page is in loop nonstop refresh pointing to http://localhost:3000/auth?rid=thirdpartyemailpassword&redirectToPath=%2Fauth. Accessing everywhere will point there and start looping refresh

Whats the value of

requireAuth

when you visit the auth route?

ahhh so it must be

js
in navbar function
<ThirdPartyEmailPasswordAuth>
  <authButton>
</ThirdPartyEmailPasswordAuth>

instead in authbutton

yea. try that

js
<GridItem w="full" colStart={5}>
  <Guard requiredAuth={false}>
    <AuthButton />
  </Guard>
</GridItem>

still the same, looping still there and the console value is not appear because the button is not rendering

perhaps @porcellus can help

tried exporting Authwrapper directly still the same

hi, so the header also appears on the

/auth

routes right?

yes

requiredAuth

should be

requireAuth

silly me.... And that was a day worth of debugging

😄 that happens 😄