ashlite
06/15/2022, 2:09 PMjs
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 falserp
06/15/2022, 2:11 PMashlite
06/15/2022, 2:16 PMrp
06/15/2022, 2:17 PMrequireAuth
when you visit the auth route?useSessionContext
only inside a component which is wrapper with the auth wrapperThirdPartyEmailPasswordAuth
vs AuthButton being wrapped by ThirdPartyEmailPasswordAuth
ashlite
06/15/2022, 2:23 PMjs
in navbar function
<ThirdPartyEmailPasswordAuth>
<authButton>
</ThirdPartyEmailPasswordAuth>
instead in authbutton
rp
06/15/2022, 2:23 PMashlite
06/15/2022, 2:28 PMjs
<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 renderingrp
06/15/2022, 2:29 PMashlite
06/15/2022, 2:32 PMporcellus
06/15/2022, 2:34 PM/auth
routes right?ashlite
06/15/2022, 2:34 PMporcellus
06/15/2022, 2:35 PMrequiredAuth
should be requireAuth
ashlite
06/15/2022, 2:37 PMporcellus
06/15/2022, 2:46 PM