Second problem, regarding protecting route in Next...
# support-questions
a
Second problem, regarding protecting route in Next JS so I made a wrapper for Guard.jsx
Copy code
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.
Copy code
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
r
hey!
Can you explain the situation in some more detail?
a
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
I can make a video for that
if needed
r
Whats the value of
requireAuth
when you visit the auth route?
Oh btw, you can use
useSessionContext
only inside a component which is wrapper with the auth wrapper
in your code, you are using it in the AuthButton which is contains
ThirdPartyEmailPasswordAuth
vs AuthButton being wrapped by
ThirdPartyEmailPasswordAuth
a
ahhh so it must be
Copy code
js
in navbar function
<ThirdPartyEmailPasswordAuth>
  <authButton>
</ThirdPartyEmailPasswordAuth>

instead in authbutton
r
yea. try that
a
Copy code
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
r
perhaps @porcellus can help
a
tried exporting Authwrapper directly still the same
p
hi, so the header also appears on the
/auth
routes right?
a
yes
it is template navbar
p
requiredAuth
should be
requireAuth
a
silly me.... And that was a day worth of debugging
p
😄 that happens 😄