https://supertokens.com/ logo
Custom form
v

Vaiva

11/05/2022, 9:11 PM
Hello. I really need help. I'm trying to fully overwrite forms frontend and leave default backend. I'm using this: https://supertokens.com/docs/thirdpartyemailpassword/advanced-customizations/react-component-override/usage. Is there a way to connect totally separate custom form (without DefaultComponent) to have the same logic as the default one does? How do I connect inputs or email verification function?
r

rp

11/06/2022, 5:31 AM
Hey @Vaiva
Hey @Vaiva
What do you mean by connect separate forms?
v

Vaiva

11/06/2022, 3:51 PM
I made the form myself. Overwrote the frontend part with EmailPasswordSignInHeader_Override. and I want to know how to connect inputs and email verification logic it with SuperTokens existing backend.
r

rp

11/06/2022, 4:00 PM
ah i see. So you can checkout the build your own UI section in the docs. Just one thing, the code snippets in there use
supertokens-web-js
as the import statement. You can still use
supertokens-auth-react
instead.
v

Vaiva

11/06/2022, 5:31 PM
Unfortunately this always gives me this error: Error: No instance of ThirdPartyEmailPassword found. Make sure to call the ThirdPartyEmailPassword.init method.
r

rp

11/06/2022, 5:31 PM
What is the import statement?
v

Vaiva

11/06/2022, 5:33 PM
import { emailPasswordSignUp } from "supertokens-auth-react/recipe/thirdpartyemailpassword"
r

rp

11/06/2022, 5:34 PM
Ok that’s fine
v

Vaiva

11/06/2022, 5:34 PM
I think it's mayybe because in frontend config I use: EmailPassword.init({ override: { components: { EmailPasswordSignUp_Override: ({ DefaultComponent, ...props }) => {
r

rp

11/06/2022, 5:34 PM
At right
v

Vaiva

11/06/2022, 5:34 PM
and not: ThirdPartyEmailPassword.init({ override: { components: {
r

rp

11/06/2022, 5:34 PM
So you have initialised a different recipe
For email password, checkout the emailpassword recipe docs
v

Vaiva

11/06/2022, 5:35 PM
but ThirdPartyEmailPassword is not able to overwrite full form. just header, footer and so on
r

rp

11/06/2022, 5:35 PM
You can disable the entire sign up / sign in ui, and then just make your own
Which recipe do you want to use? Thirdaprtyemailpassword or emailpassword?
v

Vaiva

11/06/2022, 5:37 PM
I want to use emailpassword recipe because it's the other one wasn't able to overwrite form completely. And I just want to find the function which I could pass to button click on submit. I don't even need to customise it. Maybe it's somewhere hidden in the library.
r

rp

11/06/2022, 5:39 PM
Checkout the emailpassword docs then. Same section in there
Since you are using the emailpassword recipe
v

Vaiva

11/06/2022, 5:42 PM
omg you are my saviour. Thank you very much. Support 10/10
g

Garrett

11/08/2022, 11:09 PM
I'm actually seeing the same error, but I'm calling
ThirdPartyEmailPassword.init()
I see it when trying to call getAuthorisationURLWithQueryParamsAndSetState() for
google
. I'm following the guide here: https://supertokens.com/docs/thirdpartyemailpassword/custom-ui/thirdparty-login. Any idea what I might be missing?
r

rp

11/09/2022, 4:02 AM
Hey @Garrett This usually happens if you have forgotten to call the init function, or, if you are doing server side rendering, then make sure that this function, and the init call both only happen on the frontend.
And if you are using supertokens-auth-react SDK, then instead of using the web-js import, use auth-react import.
g

Garrett

11/09/2022, 6:23 AM
The import was it. I was importing the recipe from
supertoken-auth-react
but the
getAuthorisationURL...
from
web-js
r

rp

11/09/2022, 6:23 AM
Cool!