https://supertokens.com/
Join Discord
So my login work in third party then tried to work with my email password login Test it and got 400 ...
# support-questions-legacy
d
So my login work in third party then tried to work with my email password login Test it and got 400 bad request, can't find the problem here are the frontend init
Copy code
js
emailVerificationFeature: {
  mode: "REQUIRED"
 },
signInAndUpFeature: {
  providers: [
    ThirdPartyEmailPasswordReact.Google.init(),
    ThirdPartyEmailPasswordReact.Facebook.init(),
  ],
  signUpForm: {
    formFields: [{
      id: "password",
      label: "Password",
      
      validate: async(value) => {
        const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,20}$/
        if (regex.test(value)) {
          return undefined
        } else {
          return 'Password must be 8-20 characters long, contain at least one number, one uppercase letter, one lowercase letter, and one special character'
        }
      }
    }, {
      id: "passwordConfirm",
      label: "Confirm your Password",
      placeholder: "Please input your password again",

      validate: async(value) => {
        if (value !== document.querySelector("#supertokens-root").shadowRoot.querySelector('input[name="password"]').value) {
          return "Password does not match"
        }
        return undefined
      }
    }, { 
      id: "name",
      label: "Full Name",
      placeholder: "First name and last name",
    }]
  }
},
override:{
  components:{
    EmailPasswordSignUpForm_Override:({DefaultComponent, ...props}) => {
      useEffect(() => {
        let passwordConfirm = document.querySelector("#supertokens-root").shadowRoot.querySelector('input[name="passwordConfirm"]')
        console.log(passwordConfirm) //for checking purpose
        if (passwordConfirm){
          passwordConfirm.setAttribute("type", "password")
        }
      }, [])
      return <DefaultComponent {...props} />
    }
  }
},
r
What's the error message in the API response?
Have you set the 
passwordConfirm
and 
name
Ids on the backend as well?
d
name id is in backend passwordConfirm is not, then I add it and without the validation my website is in loop right now Do I need to add the exact validation as above (using DOM) for passwordConfirm in backend too?
r
No. You don't need to add the same validation on the backend.
d
Okay, tried adding now my app is in loop
refreshing to that page
r
are you using the auth guard around your whole app?
d
no. only the button wrapper in the login button in template navbar. The loop happen after I sign up
like the previous post, the wrapper in navbar not requiredAuth
r
Did you use 
requiredAuth
or 
requireAuth
?
Cause requiredAuth is a typo
it should be 
requireAuth
d
requireAuth as previous fix
because there is no problem in other type
r
ah ok
So you have set requireAuth to false?
And when does it redirect exactly?
d
so the page is in loop pointing to http://localhost:3000/auth/verify-email?rid=thirdpartyemailpassword my redirection url is to /dashboard that page is wrap with default auth
r
So when you visit /auth/verify-email, it reloads the page to the same location?
d
no, accessing any page will redirect to that page and then the page will redirect to itself
r
right yea
are you also rendering your header on the email verification page?
d
can't confirm it but maybe I wrap my template to main app so basically all page will have it
r
ah i see. So that could be the issue. What you want to do is use 
<SessionAuth requireAuth={false}>...</SessionAuth/>
in the header (
import SessionAuth from "supertokens-auth-react/recipe/session"
) instead of using 
ThirdPartyEmailPasswordAuth
. And this is only applicable for the header. For full pages in the app, you want to use 
ThirdPartyEmailPasswordAuth
. There is an open issue about this.
d
Ahh i see
tried it
r
did it work?
d
I change the wrapper in the button to SessionAuth. the page stop looping, and showing the right page But the button is not rendering
r
Can you show me how you have used SessionAuth?
d
Copy code
js
<SessionAuth requireAuth={false}>
  <GridItem w="full" colStart={4}>
    <DestroyButton />
  </GridItem>
  <GridItem w="full" colStart={5}>
    <AuthButton />
  </GridItem>
</SessionAuth>
r
hmm. That does seem right
Can you try:
Copy code
<SessionAuth>
  <GridItem w="full" colStart={4}>
    <DestroyButton />
  </GridItem>
  <GridItem w="full" colStart={5}>
    <AuthButton />
  </GridItem>
</SessionAuth>
d
and there is no error in console
r
so without 
requireAuth={false}
d
still not showing
r
that's strange
Can you try:
Copy code
<SessionAuth requireAuth={false}>
  <>
    <GridItem w="full" colStart={4}>
      <DestroyButton />
    </GridItem>
    <GridItem w="full" colStart={5}>
      <AuthButton />
    </GridItem>
  </>
</SessionAuth>
@porcellus can help here too maybe
d
still not rendering
r
Can we get on a call? Or else can you make some small example where we can replicate this issue?
d
How about I upload my code to git?
r
yea! that would be awesome
d
r
Thanks
Oh. You are using NextJS
Can you try wrapping the sessionAuth component in the next dynamic component with ssr false?
p
also, the SessionAuth component is not imported the right way. it should be:
Copy code
import { SessionAuth } from "supertokens-auth-react/recipe/session";
d
wait
nice...., it work
r
Great! Thanks @porcellus
5 Views
PreviousNext
Powered by

SuperTokens.com

SuperTokens is an open source authentication solution offering features like: Different types of login: Email / password, Passwordless (OTP or Magic link based).

Powered by