https://supertokens.com/ logo
a

ashlite

06/15/2022, 2:09 PM
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

rp

06/15/2022, 2:11 PM
hey!
Can you explain the situation in some more detail?
a

ashlite

06/15/2022, 2:16 PM
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

rp

06/15/2022, 2:17 PM
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

ashlite

06/15/2022, 2:23 PM
ahhh so it must be
Copy code
js
in navbar function
<ThirdPartyEmailPasswordAuth>
  <authButton>
</ThirdPartyEmailPasswordAuth>

instead in authbutton
r

rp

06/15/2022, 2:23 PM
yea. try that
a

ashlite

06/15/2022, 2:28 PM
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

rp

06/15/2022, 2:29 PM
perhaps @porcellus can help
a

ashlite

06/15/2022, 2:32 PM
tried exporting Authwrapper directly still the same
p

porcellus

06/15/2022, 2:34 PM
hi, so the header also appears on the
/auth
routes right?
a

ashlite

06/15/2022, 2:34 PM
yes
it is template navbar
p

porcellus

06/15/2022, 2:35 PM
requiredAuth
should be
requireAuth
a

ashlite

06/15/2022, 2:37 PM
silly me.... And that was a day worth of debugging
p

porcellus

06/15/2022, 2:46 PM
😄 that happens 😄