david_sun
06/17/2022, 12:13 PMjs
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} />
}
}
},
rp_st
06/17/2022, 12:14 PMrp_st
06/17/2022, 12:15 PMpasswordConfirm
and name
Ids on the backend as well?david_sun
06/17/2022, 12:21 PMrp_st
06/17/2022, 12:32 PMdavid_sun
06/17/2022, 12:46 PMdavid_sun
06/17/2022, 12:46 PMrp_st
06/17/2022, 12:47 PMdavid_sun
06/17/2022, 12:49 PMdavid_sun
06/17/2022, 12:49 PMrp_st
06/17/2022, 12:54 PMrequiredAuth
or requireAuth
?rp_st
06/17/2022, 12:55 PMrp_st
06/17/2022, 12:55 PMrequireAuth
david_sun
06/17/2022, 12:57 PMdavid_sun
06/17/2022, 12:57 PMrp_st
06/17/2022, 12:57 PMrp_st
06/17/2022, 12:58 PMrp_st
06/17/2022, 12:58 PMdavid_sun
06/17/2022, 1:00 PMrp_st
06/17/2022, 1:01 PMdavid_sun
06/17/2022, 1:05 PMrp_st
06/17/2022, 1:05 PMrp_st
06/17/2022, 1:06 PMdavid_sun
06/17/2022, 1:09 PMrp_st
06/17/2022, 1:11 PM<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.david_sun
06/17/2022, 1:12 PMdavid_sun
06/17/2022, 1:12 PMrp_st
06/17/2022, 1:12 PMdavid_sun
06/17/2022, 1:16 PMrp_st
06/17/2022, 1:17 PMdavid_sun
06/17/2022, 1:17 PMjs
<SessionAuth requireAuth={false}>
<GridItem w="full" colStart={4}>
<DestroyButton />
</GridItem>
<GridItem w="full" colStart={5}>
<AuthButton />
</GridItem>
</SessionAuth>
rp_st
06/17/2022, 1:19 PMrp_st
06/17/2022, 1:20 PM<SessionAuth>
<GridItem w="full" colStart={4}>
<DestroyButton />
</GridItem>
<GridItem w="full" colStart={5}>
<AuthButton />
</GridItem>
</SessionAuth>
david_sun
06/17/2022, 1:20 PMrp_st
06/17/2022, 1:20 PMrequireAuth={false}
david_sun
06/17/2022, 1:21 PMrp_st
06/17/2022, 1:21 PMrp_st
06/17/2022, 1:22 PM<SessionAuth requireAuth={false}>
<>
<GridItem w="full" colStart={4}>
<DestroyButton />
</GridItem>
<GridItem w="full" colStart={5}>
<AuthButton />
</GridItem>
</>
</SessionAuth>
rp_st
06/17/2022, 1:24 PMdavid_sun
06/17/2022, 1:24 PMrp_st
06/17/2022, 1:41 PMdavid_sun
06/17/2022, 1:46 PMrp_st
06/17/2022, 1:46 PMdavid_sun
06/17/2022, 2:20 PMrp_st
06/17/2022, 2:20 PMrp_st
06/17/2022, 2:21 PMrp_st
06/17/2022, 2:21 PMporcellus
06/17/2022, 2:32 PMimport { SessionAuth } from "supertokens-auth-react/recipe/session";
david_sun
06/17/2022, 2:36 PMdavid_sun
06/17/2022, 2:44 PMrp_st
06/17/2022, 2:46 PM