diff --git a/v2/emailpassword/common-customizations/signin-form/changing-field-labels.mdx b/v2/emailpassword/common-customizations/signin-form/changing-field-labels.mdx index 6c5c11ec0..b0817645a 100644 --- a/v2/emailpassword/common-customizations/signin-form/changing-field-labels.mdx +++ b/v2/emailpassword/common-customizations/signin-form/changing-field-labels.mdx @@ -4,46 +4,6 @@ title: Changing Field Labels and Placeholder text hide_title: true --- -import FrontendSDKTabs from "/src/components/tabs/FrontendSDKTabs" -import TabItem from '@theme/TabItem'; +import Redirector from '/src/components/Redirector' -# Changing Field Labels and Placeholder text - -If you would like to modify the fields in the login widget, by changing UI labels or placeholder text, you can do so by modifying the `formFields` property when initializing SuperTokens on the frontend. - - - - -```tsx -import SuperTokens from "supertokens-auth-react"; -import EmailPassword from "supertokens-auth-react/recipe/emailpassword"; -import Session from "supertokens-auth-react/recipe/session"; - -SuperTokens.init({ - appInfo: { - apiDomain: "...", - appName: "...", - websiteDomain: "..." - }, - recipeList: [ - EmailPassword.init({ - signInAndUpFeature: { - signInForm: { - // highlight-start - formFields: [{ - id: "email", - label: "customFieldName", - placeholder: "Custom value" - }] - } - // highlight-end - } - }), - Session.init() - ] -}); -``` - - - -Prebuilt form UI with custom labels and placeholder + \ No newline at end of file diff --git a/v2/emailpassword/common-customizations/signin-form/customising-each-form-field.mdx b/v2/emailpassword/common-customizations/signin-form/customising-each-form-field.mdx new file mode 100644 index 000000000..e52bd3bc0 --- /dev/null +++ b/v2/emailpassword/common-customizations/signin-form/customising-each-form-field.mdx @@ -0,0 +1,195 @@ +--- +id: customising-each-form-field +title: Customising each form field +hide_title: true +show_ui_switcher: true +--- + + + + +import TabItem from '@theme/TabItem' +import {PreBuiltOrCustomUISwitcher, PreBuiltUIContent, CustomUIContent} from "/src/components/preBuiltOrCustomUISwitcher" +import FrontendPreBuiltUITabs from "/src/components/tabs/FrontendPreBuiltUITabs"; + + +# Customising each form field + + + + + + +:::caution Not applicable +This section is not relevant for custom UI, as you will be creating your own UI and already have control over the form fields. +::: + + + + + +* [Modify Labels and Placeholder Text](#modify-labels-and-placeholder-text) +* [Setting Default Values](#setting-default-values) +* [Changing Optional Error Message](#changing-optional-error-message) + + +## Modify Labels and Placeholder Text + +If you would like to modify the fields in the login widget, by changing UI labels or placeholder text, you can do so by modifying the `formFields` property when initializing SuperTokens on the frontend. + + + + +```tsx +import SuperTokens from "supertokens-auth-react"; +import ^{recipeNameCapitalLetters} from "supertokens-auth-react/recipe/^{codeImportRecipeName}"; +import Session from "supertokens-auth-react/recipe/session"; + +SuperTokens.init({ + appInfo: { + apiDomain: "...", + appName: "...", + websiteDomain: "..." + }, + recipeList: [ + ^{recipeNameCapitalLetters}.init({ + signInAndUpFeature: { + signInForm: { + // highlight-start + formFields: [{ + id: "email", + label: "customFieldName", + placeholder: "Custom value" + }] + } + // highlight-end + } + }), + Session.init() + ] +}); +``` + + + +Prebuilt form UI with custom labels and placeholder + + + + + + + + +## Setting Default Values + +To fill in the form fields with preset values in the login widget, add a `getDefaultValue` option to the `formFields` config when initializing SuperTokens on the frontend. + + + + +```tsx +import SuperTokens from "supertokens-auth-react"; +import ^{recipeNameCapitalLetters} from "supertokens-auth-react/recipe/^{codeImportRecipeName}"; +import Session from "supertokens-auth-react/recipe/session"; + +SuperTokens.init({ + appInfo: { + apiDomain: "...", + appName: "...", + websiteDomain: "..." + }, + recipeList: [ + ^{recipeNameCapitalLetters}.init({ + signInAndUpFeature: { + signInForm: { + formFields: [{ + id: "email", + label: "Your Email", + // highlight-start + getDefaultValue: () => "john.doe@gmail.com" + // highlight-end + }] + } + } + }), + Session.init() + ] +}); +``` + + + +Prebuilt signin form UI with default values for fields + + +:::important + +The return value of `getDefaultValue` function must be a string + +::: + + + + + + + + +## Changing Optional Error Message + + +When you try to submit login form without filling in required / non-optional fields, the SDK will, by default, show an error stating that the `Field is not optional`. You can customize this error message with `nonOptionalErrorMsg` property in the formField config. + +Let's see how to achieve it. + + + + +```tsx +import SuperTokens from "supertokens-auth-react"; +import ^{recipeNameCapitalLetters} from "supertokens-auth-react/recipe/^{codeImportRecipeName}"; +import Session from "supertokens-auth-react/recipe/session"; + +SuperTokens.init({ + appInfo: { + apiDomain: "...", + appName: "...", + websiteDomain: "..." + }, + recipeList: [ + ^{recipeNameCapitalLetters}.init({ + signInAndUpFeature: { + signInForm: { + formFields: [{ + id: "email", + label: "Your Email", + placeholder: "Email", + // highlight-start + nonOptionalErrorMsg: "Please add your email" + // highlight-end + }] + } + } + }), + Session.init() + ] +}); +``` + + + +Prebuilt form UI with custom error message + + +Observe how the `password` field displays the standard error message because a custom message wasn't assigned using `nonOptionalErrorMsg` for that field. + +:::tip + +To display an error message for required/non-optional fields, make use of the `nonOptionalErrorMsg` property. +For complex validations of fields, make use of [field validators](/docs/^{docsLinkRecipeName}/common-customizations/signin-form/field-validators). + +::: + + + \ No newline at end of file diff --git a/v2/emailpassword/common-customizations/signup-form/adding-fields.mdx b/v2/emailpassword/common-customizations/signup-form/adding-fields.mdx index 8602ce2ad..26525ec0d 100644 --- a/v2/emailpassword/common-customizations/signup-form/adding-fields.mdx +++ b/v2/emailpassword/common-customizations/signup-form/adding-fields.mdx @@ -2,26 +2,152 @@ id: adding-fields title: Adding Extra Fields hide_title: true +show_ui_switcher: true --- -import FrontendSDKTabs from "/src/components/tabs/FrontendSDKTabs" +import {PreBuiltOrCustomUISwitcher, PreBuiltUIContent, CustomUIContent} from "/src/components/preBuiltOrCustomUISwitcher" +import FrontendPreBuiltUITabs from "/src/components/tabs/FrontendPreBuiltUITabs"; import BackendSDKTabs from "/src/components/tabs/BackendSDKTabs" +import FrontendCustomUITabs from "/src/components/tabs/FrontendCustomUITabs" +import NpmOrScriptTabs from "/src/components/tabs/NpmOrScriptTabs" +import AppInfoForm from "/src/components/appInfoForm" import TabItem from '@theme/TabItem'; # Adding Extra Fields + + ## Step 1: Front End + + + + + + + + + +Ensure that your Custom UI calls the following function with additional fields when the user clicks on the sign up button. + + + + +```tsx +import { ^{webjsEmailPasswordSignUp} } from "supertokens-web-js/recipe/^{codeImportRecipeName}"; + +async function signUpClicked(formData) { + let response = await ^{webjsEmailPasswordSignUp}({ + formFields: [{ + id: "email", + value: formData.email + }, { + id: "password", + value: formData.password + },{ + id: "name", + value: formData.name + }, { + id: "age", + value: formData.age + }, { + id: "country", + value: formData.country + }] + }) + // ... rest of the code +} +``` + + + + +```tsx +import supertokens^{recipeNameCapitalLetters} from "supertokens-web-js-script/recipe/^{codeImportRecipeName}"; +async function signUpClicked(formData) { + let response = await supertokens^{recipeNameCapitalLetters}.^{webjsEmailPasswordSignUp}({ + formFields: [{ + id: "email", + value: formData.email + }, { + id: "password", + value: formData.password + }, { + id: "name", + value: formData.name + }, { + id: "age", + value: formData.age + }, { + id: "country", + value: formData.country + }] + }) + // ... rest of the code +} +``` + + + + + + + + + + +Call the follwing API when the user clicks on the sign up button (the command below can be tried on your terminal). + +```bash +curl --location --request POST '^{form_apiDomain}^{form_apiBasePath}/signup' \ +--header 'rid: ^{codeImportRecipeName}' \ +--header 'Content-Type: application/json; charset=utf-8' \ +--data-raw '{ + "formFields": [{ + "id": "email", + "value": "john@example.com" + }, { + "id": "password", + "value": "somePassword123" + }, { + id: "name", + value: "John Doe" + }, { + id: "age", + value: 27 + }, { + id: "country", + value: "USA" + }] +}' +``` + + + + + + + +:::note + +For more info on how to handle responses above, checkout [Email Password login with Custom UI](../../custom-ui/email-password-login). + +::: + + + + + Currently, your Sign-up form contains only email and password fields. But you might want to get more information from your customers on sign up. Let's see how you can extend the Sign-up form to fit your needs. - + ```tsx import SuperTokens from "supertokens-auth-react"; -import EmailPassword from "supertokens-auth-react/recipe/emailpassword"; +import ^{recipeNameCapitalLetters} from "supertokens-auth-react/recipe/^{codeImportRecipeName}"; import Session from "supertokens-auth-react/recipe/session"; SuperTokens.init({ @@ -31,7 +157,7 @@ SuperTokens.init({ websiteDomain: "..." }, recipeList: [ - EmailPassword.init({ + ^{recipeNameCapitalLetters}.init({ signInAndUpFeature: { // highlight-start signUpForm: { @@ -58,9 +184,13 @@ SuperTokens.init({ }); ``` - + + +Prebuilt form UI with extra custom fields + + -Prebuilt form UI with extra custom fields + ## Step 2: Back End @@ -322,3 +452,4 @@ init( :::caution SuperTokens does not store custom form fields. You need to store them in your db post user sign up. ::: + \ No newline at end of file diff --git a/v2/emailpassword/common-customizations/signup-form/changing-field-labels.mdx b/v2/emailpassword/common-customizations/signup-form/changing-field-labels.mdx index 184b510f3..b0817645a 100644 --- a/v2/emailpassword/common-customizations/signup-form/changing-field-labels.mdx +++ b/v2/emailpassword/common-customizations/signup-form/changing-field-labels.mdx @@ -4,46 +4,6 @@ title: Changing Field Labels and Placeholder text hide_title: true --- -import FrontendSDKTabs from "/src/components/tabs/FrontendSDKTabs" -import TabItem from '@theme/TabItem'; +import Redirector from '/src/components/Redirector' -# Changing Field Labels and Placeholder text - -If you would like to modify the fields in the login widget, by changing UI labels or placeholder text, you can do so by modifying the `formFields` property when initializing SuperTokens on the frontend. - - - - -```tsx -import SuperTokens from "supertokens-auth-react"; -import EmailPassword from "supertokens-auth-react/recipe/emailpassword"; -import Session from "supertokens-auth-react/recipe/session"; - -SuperTokens.init({ - appInfo: { - apiDomain: "...", - appName: "...", - websiteDomain: "..." - }, - recipeList: [ - EmailPassword.init({ - signInAndUpFeature: { - signUpForm: { - // highlight-start - formFields: [{ - id: "email", - label: "customFieldName", - placeholder: "Custom value" - }] - } - // highlight-end - } - }), - Session.init() - ] -}); -``` - - - -Prebuilt form UI with custom labels and placeholder + \ No newline at end of file diff --git a/v2/emailpassword/common-customizations/signup-form/customising-each-form-field.mdx b/v2/emailpassword/common-customizations/signup-form/customising-each-form-field.mdx new file mode 100644 index 000000000..a3df2c349 --- /dev/null +++ b/v2/emailpassword/common-customizations/signup-form/customising-each-form-field.mdx @@ -0,0 +1,430 @@ +--- +id: customising-each-form-field +title: Customising each form field +hide_title: true +show_ui_switcher: true +--- + + + + +import FrontendPreBuiltUITabs from "/src/components/tabs/FrontendPreBuiltUITabs" +import TabItem from '@theme/TabItem' +import {Answer} from "/src/components/question" +import {Question}from "/src/components/question" +import {PreBuiltOrCustomUISwitcher, PreBuiltUIContent, CustomUIContent} from "/src/components/preBuiltOrCustomUISwitcher" + +# Customising each form field + + + + + +:::caution Not applicable +This section is not relevant for custom UI, as you will be creating your own UI and already have control over the form fields. +::: + + + + +* [Modify Labels and Placeholder Text](#modify-labels-and-placeholder-text) +* [Setting Default Values](#setting-default-values) +* [Changing Optional Error Message](#changing-optional-error-message) +* [Creating Custom Components](#creating-custom-components) +* [Changing Field Order](#changing-field-order) + +## Modify Labels and Placeholder Text + +If you would like to modify the fields in the login widget, by changing UI labels or placeholder text, you can do so by modifying the `formFields` property when initializing SuperTokens on the frontend. + + + + +```tsx +import SuperTokens from "supertokens-auth-react"; +import ^{recipeNameCapitalLetters} from "supertokens-auth-react/recipe/^{codeImportRecipeName}" +import Session from "supertokens-auth-react/recipe/session"; + +SuperTokens.init({ + appInfo: { + apiDomain: "...", + appName: "...", + websiteDomain: "..." + }, + recipeList: [ + ^{recipeNameCapitalLetters}.init({ + signInAndUpFeature: { + signUpForm: { + // highlight-start + formFields: [{ + id: "email", + label: "customFieldName", + placeholder: "Custom value" + }] + } + // highlight-end + } + }), + Session.init() + ] +}); +``` + + + +Prebuilt form UI with custom labels and placeholder + + + + + + + + + + + +## Setting Default Values + +To fill in the form fields with preset values, add a `getDefaultValue` option to the `formFields` config when initializing SuperTokens on the frontend. + + + + + +```tsx +import SuperTokens from "supertokens-auth-react"; +import ^{recipeNameCapitalLetters} from "supertokens-auth-react/recipe/^{codeImportRecipeName}" +import Session from "supertokens-auth-react/recipe/session"; + +SuperTokens.init({ + appInfo: { + apiDomain: "...", + appName: "...", + websiteDomain: "..." + }, + recipeList: [ + ^{recipeNameCapitalLetters}.init({ + signInAndUpFeature: { + signUpForm: { + formFields: [{ + id: "email", + label: "Your Email", + // highlight-start + getDefaultValue: () => "john.doe@gmail.com" + // highlight-end + }, { + id: "name", + label: "Full name", + // highlight-start + getDefaultValue: () => "John Doe", + // highlight-end + }] + } + } + }), + Session.init() + ] +}); +``` + + + + +Prebuilt form UI with default values for fields + +:::important + +The return value of `getDefaultValue` function must be a string + +::: + + + + + + + + + + +## Changing Optional Error Message + +When you try to submit signup form without filling in required / non-optional fields, the SDK will, by default, show an error stating that the `Field is not optional`. You can customize this error message with `nonOptionalErrorMsg` property in the formField config. + +Let's see how to achieve it. + + + + +```tsx +import SuperTokens from "supertokens-auth-react"; +import ^{recipeNameCapitalLetters} from "supertokens-auth-react/recipe/^{codeImportRecipeName}" +import Session from "supertokens-auth-react/recipe/session"; + +SuperTokens.init({ + appInfo: { + apiDomain: "...", + appName: "...", + websiteDomain: "..." + }, + recipeList: [ + ^{recipeNameCapitalLetters}.init({ + signInAndUpFeature: { + signUpForm: { + formFields: [{ + id: "email", + label: "Your Email", + placeholder: "Email", + // highlight-start + nonOptionalErrorMsg: "Please add your email" + // highlight-end + }, { + id: "name", + label: "Full name", + placeholder: "Name", + // highlight-start + nonOptionalErrorMsg: "Full name is required", + // highlight-end + }] + } + } + }), + Session.init() + ] +}); +``` + + + +Prebuilt form UI with custom error message + +Observe how the `password` field displays the standard error message because a custom message wasn't assigned using `nonOptionalErrorMsg` for that field. + +:::tip + +To display an error message for required/non-optional fields, make use of the `nonOptionalErrorMsg` property. +For complex validations of fields, make use of [field validators](/docs/^{docsLinkRecipeName}/common-customizations/signup-form/field-validators). + +::: + + + + + + + + + + +## Creating Custom Components + +Currently, your sign-up form contains only email and password fields. +While you can add additional simple input fields, the form also supports the integration of more sophisticated input types. +These enhanced components can be radio buttons, checkboxes, dropdown, sliders, etc allowing for a more comprehensive user registration experience. + +Let's see how you can extend the Sign-up form to fit your needs. + + + + +```tsx +import SuperTokens from "supertokens-auth-react"; +import ^{recipeNameCapitalLetters} from "supertokens-auth-react/recipe/^{codeImportRecipeName}" +import Session from "supertokens-auth-react/recipe/session"; + +SuperTokens.init({ + appInfo: { + apiDomain: "...", + appName: "...", + websiteDomain: "..." + }, + recipeList: [ + ^{recipeNameCapitalLetters}.init({ + signInAndUpFeature: { + // highlight-start + signUpForm: { + formFields: [{ + id: "select-dropdown", + label: "Select Dropdown", + inputComponent: ({ value, name, onChange }) => ( +
+
+ +
+
+ ), + optional: true, + }, + { + id: "terms", + label: "", + optional: false, + nonOptionalErrorMsg: "You must accept the terms and conditions", + inputComponent: ({ name, onChange }) => ( +
+ onChange(e.target.checked.toString())}> + + I agree to the{" "} + + Terms and Conditions + + +
+ ), + }] + } + // highlight-end + } + }), + Session.init() + ] +}); +``` + + + +Prebuilt form UI with custom components + + + + + + + + + + + +## Changing Field Order + +To customize the order of fields in your signup form, you can use the `EmailPasswordSignUpForm_Override` function. This functionality allows you to rearrange the sign-up form fields according to your preferences. + + + + + + + + +```tsx +import React from "react"; +import { SuperTokensWrapper } from "supertokens-auth-react"; +import { ^{recipeComponentsOverrideProviderName} } from "supertokens-auth-react/recipe/^{codeImportRecipeName}"; + +function App() { + return ( + + <^{recipeComponentsOverrideProviderName} + components={{ + // highlight-start + EmailPasswordSignUpForm_Override: ({ DefaultComponent, ...props }) => { + return ( + id === 'name'), + props.formFields.find(({id}) => id === 'email'), + props.formFields.find(({id}) => id === 'password'), + ]} + /> + ); + }, + // highlight-end + }}> + {/* Rest of the JSX */} + + + ); +} +export default App; + +``` + + + + + +```tsx +import React from "react"; +import { SuperTokensWrapper } from "supertokens-auth-react"; +import { ^{recipePreBuiltUINameCapitalLetters} } from "supertokens-auth-react/recipe/^{codeImportRecipeName}/prebuiltui" +import { ^{recipeComponentsOverrideProviderName} } from "supertokens-auth-react/recipe/^{codeImportRecipeName}"; +import { getRoutingComponent, canHandleRoute } from "supertokens-auth-react/ui" + + +function App() { + if(canHandleRoute([^{recipePreBuiltUINameCapitalLetters}])){ + return ( + <^{recipeComponentsOverrideProviderName} + components={{ + // highlight-start + EmailPasswordSignUpForm_Override: ({ DefaultComponent, ...props }) => { + return ( + id === 'name'), + props.formFields.find(({id}) => id === 'email'), + props.formFields.find(({id}) => id === 'password'), + ]} + /> + ); + }, + // highlight-end + }}> + {getRoutingComponent([^{recipePreBuiltUINameCapitalLetters}])} + + ) + } + return ( + + {/* Rest of the JSX */} + + ); +} +export default App; + +``` + + + + + + + + +Prebuilt form UI with custom components + + + + \ No newline at end of file diff --git a/v2/emailpassword/common-customizations/signup-form/field-validators.mdx b/v2/emailpassword/common-customizations/signup-form/field-validators.mdx index b24a8ef5d..1197ee889 100644 --- a/v2/emailpassword/common-customizations/signup-form/field-validators.mdx +++ b/v2/emailpassword/common-customizations/signup-form/field-validators.mdx @@ -2,17 +2,31 @@ id: field-validators title: Adding / Modifying field validators hide_title: true +show_ui_switcher: true --- -import FrontendSDKTabs from "/src/components/tabs/FrontendSDKTabs" +import {PreBuiltOrCustomUISwitcher, PreBuiltUIContent, CustomUIContent} from "/src/components/preBuiltOrCustomUISwitcher" +import FrontendPreBuiltUITabs from "/src/components/tabs/FrontendPreBuiltUITabs"; import BackendSDKTabs from "/src/components/tabs/BackendSDKTabs" import TabItem from '@theme/TabItem'; import CustomAdmonition from "/src/components/customAdmonition" # Adding / Modifying field validators + + + ## Step 1: Front End + + +:::caution Not applicable +For your custom UI, you will have to implement field validation checking yourself. Note that the backend also checks for the same validation logic (see below), so you don't need to implement this on the frontend, but it's good practice to give real time feedback to users, so you should. +::: + + + + Now that you have added new fields to your signup form, let's see how you can add validators to make sure that your users provide the right information. @@ -20,7 +34,7 @@ You can add a `validate` method to any `formFields`. Building up on our [previous example](./adding-fields), let's add an age verification to our form: - + ```tsx @@ -72,16 +86,20 @@ SuperTokens.init({ }); ``` - + Here is what happens if someone tries to register with an age of 17: Prebuilt form UI with custom validation + :::tip Security Front-end validation is great for user experience but you should always make sure that you are also applying these validations on the backend. ::: + + + ## Step 2: Back End In your backend's SuperTokens init method, let's replicate the `validate` functions from above: @@ -224,11 +242,9 @@ Notice the `tenantId` argument passed into the `validate` function. Using that, - -## Changing the default email and password validators +## Changing the default email and password validators By default, SuperTokens adds an email and a password validator to the sign-up form. - - The default email validator makes sure that the provided email is in the correct email format. - The default password validator makes sure that the provided password: - has a minimum of 8 characters. @@ -241,7 +257,17 @@ By default, SuperTokens adds an email and a password validator to the sign-up fo ::: ### Step 1: Front End - + + + +:::caution Not applicable +For your custom UI, you will have to implement field validation checking yourself. Note that the backend also checks for the same validation logic (see below), so you don't need to implement this on the frontend, but it's good practice to give real time feedback to users, so you should. +::: + + + + + ```tsx @@ -281,9 +307,9 @@ SuperTokens.init({ ] }); ``` - - + + ### Step 2: Back End @@ -404,4 +430,5 @@ init( ``` - \ No newline at end of file + + \ No newline at end of file diff --git a/v2/emailpassword/pre-built-ui/further-reading/email-password-login.mdx b/v2/emailpassword/pre-built-ui/further-reading/email-password-login.mdx index 187ebdfc8..a02484813 100644 --- a/v2/emailpassword/pre-built-ui/further-reading/email-password-login.mdx +++ b/v2/emailpassword/pre-built-ui/further-reading/email-password-login.mdx @@ -48,7 +48,7 @@ If there are network related errors, or the backend sends a status code >= 300, - [Showing sign up by default](../auth-redirection#showing-sign-up-by-default) - [Adding extra form fields in sign up](../../common-customizations/signup-form/adding-fields) - [Changing fields validation logic](../../common-customizations/signup-form/field-validators) -- [Changing field labels and place holder](../../common-customizations/signup-form/changing-field-labels) +- [Customising sign in / sign up form fields](../../common-customizations/signup-form/customising-each-form-field) - [Enabling password managers](../../common-customizations/password-managers) - [Password hashing algorithms](../../common-customizations/password-hashing/about) - [Disabling sign up](../../advanced-customizations/apis-override/disabling) diff --git a/v2/emailpassword/sidebars.js b/v2/emailpassword/sidebars.js index d86d0c7b8..59f3d706c 100644 --- a/v2/emailpassword/sidebars.js +++ b/v2/emailpassword/sidebars.js @@ -393,7 +393,7 @@ module.exports = { label: 'Sign Up Form', items: [ "common-customizations/signup-form/adding-fields", - "common-customizations/signup-form/changing-field-labels", + "common-customizations/signup-form/customising-each-form-field", "common-customizations/signup-form/field-validators", ], }, @@ -401,7 +401,7 @@ module.exports = { type: "category", label: "Sign In Form", items: [ - "common-customizations/signin-form/changing-field-labels", + "common-customizations/signin-form/customising-each-form-field", "common-customizations/signin-form/field-validators", ] }, diff --git a/v2/src/plugins/markdownVariables.json b/v2/src/plugins/markdownVariables.json index 82a09f15f..ce3bceaec 100644 --- a/v2/src/plugins/markdownVariables.json +++ b/v2/src/plugins/markdownVariables.json @@ -73,6 +73,7 @@ "rid": "thirdpartyemailpassword", "recipeNameCapitalLetters": "ThirdPartyEmailPassword", "recipePreBuiltUINameCapitalLetters": "ThirdPartyEmailPasswordPreBuiltUI", + "recipeComponentsOverrideProviderName": "ThirdpartyEmailPasswordComponentsOverrideProvider", "goModelName": "tpepmodels", "goModelNameForInit": "&tpepmodels", "goGetUserById": "GetUserById", @@ -221,6 +222,7 @@ "rid": "emailpassword", "recipeNameCapitalLetters": "EmailPassword", "recipePreBuiltUINameCapitalLetters": "EmailPasswordPreBuiltUI", + "recipeComponentsOverrideProviderName": "EmailPasswordComponentsOverrideProvider", "goModelName": "epmodels", "goModelNameForInit": "&epmodels", "goGetUserById": "GetUserByID", diff --git a/v2/static/img/emailpassword/custom-field-name-signup-ep.png b/v2/static/img/emailpassword/custom-field-name-signup-ep.png index 8174c2658..e4b5b1d74 100644 Binary files a/v2/static/img/emailpassword/custom-field-name-signup-ep.png and b/v2/static/img/emailpassword/custom-field-name-signup-ep.png differ diff --git a/v2/static/img/emailpassword/modified-formfields.png b/v2/static/img/emailpassword/modified-formfields.png index c8107e2a9..8ac300f5f 100644 Binary files a/v2/static/img/emailpassword/modified-formfields.png and b/v2/static/img/emailpassword/modified-formfields.png differ diff --git a/v2/static/img/emailpassword/signin-with-custom-error-msg.png b/v2/static/img/emailpassword/signin-with-custom-error-msg.png new file mode 100644 index 000000000..4c35b1d59 Binary files /dev/null and b/v2/static/img/emailpassword/signin-with-custom-error-msg.png differ diff --git a/v2/static/img/emailpassword/signin-with-default-values.png b/v2/static/img/emailpassword/signin-with-default-values.png new file mode 100644 index 000000000..40cfc8877 Binary files /dev/null and b/v2/static/img/emailpassword/signin-with-default-values.png differ diff --git a/v2/static/img/emailpassword/signup-with-custom-components.png b/v2/static/img/emailpassword/signup-with-custom-components.png new file mode 100644 index 000000000..7fe4b64f5 Binary files /dev/null and b/v2/static/img/emailpassword/signup-with-custom-components.png differ diff --git a/v2/static/img/emailpassword/signup-with-custom-error-msg.png b/v2/static/img/emailpassword/signup-with-custom-error-msg.png new file mode 100644 index 000000000..e4d1953c9 Binary files /dev/null and b/v2/static/img/emailpassword/signup-with-custom-error-msg.png differ diff --git a/v2/static/img/emailpassword/signup-with-custom-field-order.png b/v2/static/img/emailpassword/signup-with-custom-field-order.png new file mode 100644 index 000000000..6869f2a0d Binary files /dev/null and b/v2/static/img/emailpassword/signup-with-custom-field-order.png differ diff --git a/v2/static/img/emailpassword/signup-with-default-values.png b/v2/static/img/emailpassword/signup-with-default-values.png new file mode 100644 index 000000000..72ac0ae51 Binary files /dev/null and b/v2/static/img/emailpassword/signup-with-default-values.png differ diff --git a/v2/static/img/thirdpartyemailpassword/custom-field-name-signup-ep.png b/v2/static/img/thirdpartyemailpassword/custom-field-name-signup-ep.png new file mode 100644 index 000000000..392ee8129 Binary files /dev/null and b/v2/static/img/thirdpartyemailpassword/custom-field-name-signup-ep.png differ diff --git a/v2/static/img/thirdpartyemailpassword/modified-formfields.png b/v2/static/img/thirdpartyemailpassword/modified-formfields.png index cab366fbb..0705e5694 100644 Binary files a/v2/static/img/thirdpartyemailpassword/modified-formfields.png and b/v2/static/img/thirdpartyemailpassword/modified-formfields.png differ diff --git a/v2/static/img/thirdpartyemailpassword/signin-with-custom-error-msg.png b/v2/static/img/thirdpartyemailpassword/signin-with-custom-error-msg.png new file mode 100644 index 000000000..724494e0e Binary files /dev/null and b/v2/static/img/thirdpartyemailpassword/signin-with-custom-error-msg.png differ diff --git a/v2/static/img/thirdpartyemailpassword/signin-with-default-values.png b/v2/static/img/thirdpartyemailpassword/signin-with-default-values.png new file mode 100644 index 000000000..aefdc907a Binary files /dev/null and b/v2/static/img/thirdpartyemailpassword/signin-with-default-values.png differ diff --git a/v2/static/img/thirdpartyemailpassword/signup-with-custom-components.png b/v2/static/img/thirdpartyemailpassword/signup-with-custom-components.png new file mode 100644 index 000000000..306a3db7a Binary files /dev/null and b/v2/static/img/thirdpartyemailpassword/signup-with-custom-components.png differ diff --git a/v2/static/img/thirdpartyemailpassword/signup-with-custom-error-msg.png b/v2/static/img/thirdpartyemailpassword/signup-with-custom-error-msg.png new file mode 100644 index 000000000..d9b69a24c Binary files /dev/null and b/v2/static/img/thirdpartyemailpassword/signup-with-custom-error-msg.png differ diff --git a/v2/static/img/thirdpartyemailpassword/signup-with-custom-field-order.png b/v2/static/img/thirdpartyemailpassword/signup-with-custom-field-order.png new file mode 100644 index 000000000..57bd8d3c7 Binary files /dev/null and b/v2/static/img/thirdpartyemailpassword/signup-with-custom-field-order.png differ diff --git a/v2/static/img/thirdpartyemailpassword/signup-with-default-values.png b/v2/static/img/thirdpartyemailpassword/signup-with-default-values.png new file mode 100644 index 000000000..b7cbc90de Binary files /dev/null and b/v2/static/img/thirdpartyemailpassword/signup-with-default-values.png differ diff --git a/v2/static/img/thirdpartyemailpassword/signup-with-name-and-age.png b/v2/static/img/thirdpartyemailpassword/signup-with-name-and-age.png index 60d451fe5..27c5265d5 100644 Binary files a/v2/static/img/thirdpartyemailpassword/signup-with-name-and-age.png and b/v2/static/img/thirdpartyemailpassword/signup-with-name-and-age.png differ diff --git a/v2/thirdpartyemailpassword/common-customizations/signin-form/changing-field-labels.mdx b/v2/thirdpartyemailpassword/common-customizations/signin-form/changing-field-labels.mdx index 2bfda9f28..b0817645a 100644 --- a/v2/thirdpartyemailpassword/common-customizations/signin-form/changing-field-labels.mdx +++ b/v2/thirdpartyemailpassword/common-customizations/signin-form/changing-field-labels.mdx @@ -4,47 +4,6 @@ title: Changing Field Labels and Placeholder text hide_title: true --- -import FrontendSDKTabs from "/src/components/tabs/FrontendSDKTabs" -import BackendSDKTabs from "/src/components/tabs/BackendSDKTabs" -import TabItem from '@theme/TabItem'; +import Redirector from '/src/components/Redirector' -# Changing Field Labels and Placeholder text - -If you would like to modify the fields in the login widget, by changing UI labels or placeholder text, you can do so by modifying the `formFields` property when initializing SuperTokens on the frontend. - - - - -```tsx -import SuperTokens from "supertokens-auth-react"; -import ThirdPartyEmailPassword from "supertokens-auth-react/recipe/thirdpartyemailpassword"; -import Session from "supertokens-auth-react/recipe/session"; - -SuperTokens.init({ - appInfo: { - apiDomain: "...", - appName: "...", - websiteDomain: "..." - }, - recipeList: [ - ThirdPartyEmailPassword.init({ - signInAndUpFeature: { - signInForm: { - // highlight-start - formFields: [{ - id: "email", - label: "customFieldName", - placeholder: "Custom value" - }] - } - // highlight-end - } - }), - Session.init() - ] -}); -``` - - - -Prebuilt sign up form with custom field label and placeholder \ No newline at end of file + \ No newline at end of file diff --git a/v2/thirdpartyemailpassword/common-customizations/signin-form/customising-each-form-field.mdx b/v2/thirdpartyemailpassword/common-customizations/signin-form/customising-each-form-field.mdx new file mode 100644 index 000000000..c95917d47 --- /dev/null +++ b/v2/thirdpartyemailpassword/common-customizations/signin-form/customising-each-form-field.mdx @@ -0,0 +1,195 @@ +--- +id: customising-each-form-field +title: Customising each form field +hide_title: true +show_ui_switcher: true +--- + + + + +import TabItem from '@theme/TabItem' +import {PreBuiltOrCustomUISwitcher, PreBuiltUIContent, CustomUIContent} from "/src/components/preBuiltOrCustomUISwitcher" +import FrontendPreBuiltUITabs from "/src/components/tabs/FrontendPreBuiltUITabs"; + + +# Customising each form field + + + + + + +:::caution Not applicable +This section is not relevant for custom UI, as you will be creating your own UI and already have control over the form fields. +::: + + + + + +* [Modify Labels and Placeholder Text](#modify-labels-and-placeholder-text) +* [Setting Default Values](#setting-default-values) +* [Changing Optional Error Message](#changing-optional-error-message) + + +## Modify Labels and Placeholder Text + +If you would like to modify the fields in the login widget, by changing UI labels or placeholder text, you can do so by modifying the `formFields` property when initializing SuperTokens on the frontend. + + + + +```tsx +import SuperTokens from "supertokens-auth-react"; +import ^{recipeNameCapitalLetters} from "supertokens-auth-react/recipe/^{codeImportRecipeName}"; +import Session from "supertokens-auth-react/recipe/session"; + +SuperTokens.init({ + appInfo: { + apiDomain: "...", + appName: "...", + websiteDomain: "..." + }, + recipeList: [ + ^{recipeNameCapitalLetters}.init({ + signInAndUpFeature: { + signInForm: { + // highlight-start + formFields: [{ + id: "email", + label: "customFieldName", + placeholder: "Custom value" + }] + } + // highlight-end + } + }), + Session.init() + ] +}); +``` + + + +Prebuilt form UI with custom labels and placeholder + + + + + + + + +## Setting Default Values + +To fill in the form fields with preset values in the login widget, add a `getDefaultValue` option to the `formFields` config when initializing SuperTokens on the frontend. + + + + +```tsx +import SuperTokens from "supertokens-auth-react"; +import ^{recipeNameCapitalLetters} from "supertokens-auth-react/recipe/^{codeImportRecipeName}"; +import Session from "supertokens-auth-react/recipe/session"; + +SuperTokens.init({ + appInfo: { + apiDomain: "...", + appName: "...", + websiteDomain: "..." + }, + recipeList: [ + ^{recipeNameCapitalLetters}.init({ + signInAndUpFeature: { + signInForm: { + formFields: [{ + id: "email", + label: "Your Email", + // highlight-start + getDefaultValue: () => "john.doe@gmail.com" + // highlight-end + }] + } + } + }), + Session.init() + ] +}); +``` + + + +Prebuilt signin form UI with default values for fields + + +:::important + +The return value of `getDefaultValue` function must be a string + +::: + + + + + + + + +## Changing Optional Error Message + + +When you try to submit login form without filling in required / non-optional fields, the SDK will, by default, show an error stating that the `Field is not optional`. You can customize this error message with `nonOptionalErrorMsg` property in the formField config. + +Let's see how to achieve it. + + + + +```tsx +import SuperTokens from "supertokens-auth-react"; +import ^{recipeNameCapitalLetters} from "supertokens-auth-react/recipe/^{codeImportRecipeName}"; +import Session from "supertokens-auth-react/recipe/session"; + +SuperTokens.init({ + appInfo: { + apiDomain: "...", + appName: "...", + websiteDomain: "..." + }, + recipeList: [ + ^{recipeNameCapitalLetters}.init({ + signInAndUpFeature: { + signInForm: { + formFields: [{ + id: "email", + label: "Your Email", + placeholder: "Email", + // highlight-start + nonOptionalErrorMsg: "Please add your email" + // highlight-end + }] + } + } + }), + Session.init() + ] +}); +``` + + + +Prebuilt form UI with custom error message + + +Observe how the `password` field displays the standard error message because a custom message wasn't assigned using `nonOptionalErrorMsg` for that field. + +:::tip + +To display an error message for required/non-optional fields, make use of the `nonOptionalErrorMsg` property. +For complex validations of fields, make use of [field validators](/docs/^{docsLinkRecipeName}/common-customizations/signin-form/field-validators). + +::: + + + diff --git a/v2/thirdpartyemailpassword/common-customizations/signup-form/adding-fields.mdx b/v2/thirdpartyemailpassword/common-customizations/signup-form/adding-fields.mdx index ff1b38b4a..cf2da5757 100644 --- a/v2/thirdpartyemailpassword/common-customizations/signup-form/adding-fields.mdx +++ b/v2/thirdpartyemailpassword/common-customizations/signup-form/adding-fields.mdx @@ -2,27 +2,154 @@ id: adding-fields title: Adding Extra Fields hide_title: true +show_ui_switcher: true --- -import FrontendSDKTabs from "/src/components/tabs/FrontendSDKTabs" +import {PreBuiltOrCustomUISwitcher, PreBuiltUIContent, CustomUIContent} from "/src/components/preBuiltOrCustomUISwitcher" +import FrontendPreBuiltUITabs from "/src/components/tabs/FrontendPreBuiltUITabs"; +import FrontendCustomUITabs from "/src/components/tabs/FrontendCustomUITabs" import BackendSDKTabs from "/src/components/tabs/BackendSDKTabs" import TabItem from '@theme/TabItem'; import Tabs from '@theme/Tabs'; +import NpmOrScriptTabs from "/src/components/tabs/NpmOrScriptTabs" +import AppInfoForm from "/src/components/appInfoForm" + # Adding Extra Fields + + ## Step 1: Front End + + + + + + + + + +Ensure that your Custom UI calls the following function with additional fields when the user clicks on the sign up button. + + + + +```tsx +import { ^{webjsEmailPasswordSignUp} } from "supertokens-web-js/recipe/^{codeImportRecipeName}"; + +async function signUpClicked(formData) { + let response = await ^{webjsEmailPasswordSignUp}({ + formFields: [{ + id: "email", + value: formData.email + }, { + id: "password", + value: formData.password + },{ + id: "name", + value: formData.name + }, { + id: "age", + value: formData.age + }, { + id: "country", + value: formData.country + }] + }) + // ... rest of the code +} +``` + + + + +```tsx +import supertokens^{recipeNameCapitalLetters} from "supertokens-web-js-script/recipe/^{codeImportRecipeName}"; +async function signUpClicked(formData) { + let response = await supertokens^{recipeNameCapitalLetters}.^{webjsEmailPasswordSignUp}({ + formFields: [{ + id: "email", + value: formData.email + }, { + id: "password", + value: formData.password + }, { + id: "name", + value: formData.name + }, { + id: "age", + value: formData.age + }, { + id: "country", + value: formData.country + }] + }) + // ... rest of the code +} +``` + + + + + + + + + + +Call the follwing API when the user clicks on the sign up button (the command below can be tried on your terminal). + +```bash +curl --location --request POST '^{form_apiDomain}^{form_apiBasePath}/signup' \ +--header 'rid: ^{codeImportRecipeName}' \ +--header 'Content-Type: application/json; charset=utf-8' \ +--data-raw '{ + "formFields": [{ + "id": "email", + "value": "john@example.com" + }, { + "id": "password", + "value": "somePassword123" + }, { + id: "name", + value: "John Doe" + }, { + id: "age", + value: 27 + }, { + id: "country", + value: "USA" + }] +}' +``` + + + + + + + +:::note + +For more info on how to handle responses above, checkout [Email Password login with Custom UI](../../custom-ui/email-password-login). + +::: + + + + + Currently, your Sign-up form contains only email and password fields. But you might want to get more information from your customers on sign up. Let's see how you can extend the Sign-up form to fit your needs. - + ```tsx import SuperTokens from "supertokens-auth-react"; -import ThirdPartyEmailPassword from "supertokens-auth-react/recipe/thirdpartyemailpassword"; +import ^{recipeNameCapitalLetters} from "supertokens-auth-react/recipe/^{codeImportRecipeName}"; import Session from "supertokens-auth-react/recipe/session"; SuperTokens.init({ @@ -32,7 +159,7 @@ SuperTokens.init({ websiteDomain: "..." }, recipeList: [ - ThirdPartyEmailPassword.init({ + ^{recipeNameCapitalLetters}.init({ signInAndUpFeature: { // highlight-start signUpForm: { @@ -59,10 +186,13 @@ SuperTokens.init({ }); ``` - + + +Prebuilt form UI with extra custom fields -Prebuilt form with extra fields + + ## Step 2: Back End @@ -403,3 +533,4 @@ init( SuperTokens does not store custom form fields. You need to store them in your db post user sign up. ::: + diff --git a/v2/thirdpartyemailpassword/common-customizations/signup-form/changing-field-labels.mdx b/v2/thirdpartyemailpassword/common-customizations/signup-form/changing-field-labels.mdx index f8c487f02..b0817645a 100644 --- a/v2/thirdpartyemailpassword/common-customizations/signup-form/changing-field-labels.mdx +++ b/v2/thirdpartyemailpassword/common-customizations/signup-form/changing-field-labels.mdx @@ -4,47 +4,6 @@ title: Changing Field Labels and Placeholder text hide_title: true --- -import FrontendSDKTabs from "/src/components/tabs/FrontendSDKTabs" -import BackendSDKTabs from "/src/components/tabs/BackendSDKTabs" -import TabItem from '@theme/TabItem'; +import Redirector from '/src/components/Redirector' -# Changing Field Labels and Placeholder text - -If you would like to modify the fields in the login widget, by changing UI labels or placeholder text, you can do so by modifying the `formFields` property when initializing SuperTokens on the frontend. - - - - -```tsx -import SuperTokens from "supertokens-auth-react"; -import ThirdPartyEmailPassword from 'supertokens-auth-react/recipe/thirdpartyemailpassword'; -import Session from 'supertokens-auth-react/recipe/session'; - -SuperTokens.init({ - appInfo: { - apiDomain: "...", - appName: "...", - websiteDomain: "..." - }, - recipeList: [ - ThirdPartyEmailPassword.init({ - signInAndUpFeature: { - signUpForm: { - // highlight-start - formFields: [{ - id: "email", - label: "customFieldName", - placeholder: "Custom value" - }] - } - // highlight-end - } - }), - Session.init() - ] -}); -``` - - - -Prebuilt sign in form with custom field label and placeholder \ No newline at end of file + \ No newline at end of file diff --git a/v2/thirdpartyemailpassword/common-customizations/signup-form/customising-each-form-field.mdx b/v2/thirdpartyemailpassword/common-customizations/signup-form/customising-each-form-field.mdx new file mode 100644 index 000000000..08518d909 --- /dev/null +++ b/v2/thirdpartyemailpassword/common-customizations/signup-form/customising-each-form-field.mdx @@ -0,0 +1,430 @@ +--- +id: customising-each-form-field +title: Customising each form field +hide_title: true +show_ui_switcher: true +--- + + + + +import FrontendPreBuiltUITabs from "/src/components/tabs/FrontendPreBuiltUITabs" +import TabItem from '@theme/TabItem' +import {Answer} from "/src/components/question" +import {Question}from "/src/components/question" +import {PreBuiltOrCustomUISwitcher, PreBuiltUIContent, CustomUIContent} from "/src/components/preBuiltOrCustomUISwitcher" + +# Customising each form field + + + + + +:::caution Not applicable +This section is not relevant for custom UI, as you will be creating your own UI and already have control over the form fields. +::: + + + + +* [Modify Labels and Placeholder Text](#modify-labels-and-placeholder-text) +* [Setting Default Values](#setting-default-values) +* [Changing Optional Error Message](#changing-optional-error-message) +* [Creating Custom Components](#creating-custom-components) +* [Changing Field Order](#changing-field-order) + +## Modify Labels and Placeholder Text + +If you would like to modify the fields in the login widget, by changing UI labels or placeholder text, you can do so by modifying the `formFields` property when initializing SuperTokens on the frontend. + + + + +```tsx +import SuperTokens from "supertokens-auth-react"; +import ^{recipeNameCapitalLetters} from "supertokens-auth-react/recipe/^{codeImportRecipeName}" +import Session from "supertokens-auth-react/recipe/session"; + +SuperTokens.init({ + appInfo: { + apiDomain: "...", + appName: "...", + websiteDomain: "..." + }, + recipeList: [ + ^{recipeNameCapitalLetters}.init({ + signInAndUpFeature: { + signUpForm: { + // highlight-start + formFields: [{ + id: "email", + label: "customFieldName", + placeholder: "Custom value" + }] + } + // highlight-end + } + }), + Session.init() + ] +}); +``` + + + +Prebuilt form UI with custom labels and placeholder + + + + + + + + + + + +## Setting Default Values + +To fill in the form fields with preset values, add a `getDefaultValue` option to the `formFields` config when initializing SuperTokens on the frontend. + + + + + +```tsx +import SuperTokens from "supertokens-auth-react"; +import ^{recipeNameCapitalLetters} from "supertokens-auth-react/recipe/^{codeImportRecipeName}" +import Session from "supertokens-auth-react/recipe/session"; + +SuperTokens.init({ + appInfo: { + apiDomain: "...", + appName: "...", + websiteDomain: "..." + }, + recipeList: [ + ^{recipeNameCapitalLetters}.init({ + signInAndUpFeature: { + signUpForm: { + formFields: [{ + id: "email", + label: "Your Email", + // highlight-start + getDefaultValue: () => "john.doe@gmail.com" + // highlight-end + }, { + id: "name", + label: "Full name", + // highlight-start + getDefaultValue: () => "John Doe", + // highlight-end + }] + } + } + }), + Session.init() + ] +}); +``` + + + + +Prebuilt form UI with default values for fields + +:::important + +The return value of `getDefaultValue` function must be a string + +::: + + + + + + + + + + +## Changing Optional Error Message + +When you try to submit signup form without filling in required / non-optional fields, the SDK will, by default, show an error stating that the `Field is not optional`. You can customize this error message with `nonOptionalErrorMsg` property in the formField config. + +Let's see how to achieve it. + + + + +```tsx +import SuperTokens from "supertokens-auth-react"; +import ^{recipeNameCapitalLetters} from "supertokens-auth-react/recipe/^{codeImportRecipeName}" +import Session from "supertokens-auth-react/recipe/session"; + +SuperTokens.init({ + appInfo: { + apiDomain: "...", + appName: "...", + websiteDomain: "..." + }, + recipeList: [ + ^{recipeNameCapitalLetters}.init({ + signInAndUpFeature: { + signUpForm: { + formFields: [{ + id: "email", + label: "Your Email", + placeholder: "Email", + // highlight-start + nonOptionalErrorMsg: "Please add your email" + // highlight-end + }, { + id: "name", + label: "Full name", + placeholder: "Name", + // highlight-start + nonOptionalErrorMsg: "Full name is required", + // highlight-end + }] + } + } + }), + Session.init() + ] +}); +``` + + + +Prebuilt form UI with custom error message + +Observe how the `password` field displays the standard error message because a custom message wasn't assigned using `nonOptionalErrorMsg` for that field. + +:::tip + +To display an error message for required/non-optional fields, make use of the `nonOptionalErrorMsg` property. +For complex validations of fields, make use of [field validators](/docs/^{docsLinkRecipeName}/common-customizations/signup-form/field-validators). + +::: + + + + + + + + + + +## Creating Custom Components + +Currently, your sign-up form contains only email and password fields. +While you can add additional simple input fields, the form also supports the integration of more sophisticated input types. +These enhanced components can be radio buttons, checkboxes, dropdown, sliders, etc allowing for a more comprehensive user registration experience. + +Let's see how you can extend the Sign-up form to fit your needs. + + + + +```tsx +import SuperTokens from "supertokens-auth-react"; +import ^{recipeNameCapitalLetters} from "supertokens-auth-react/recipe/^{codeImportRecipeName}" +import Session from "supertokens-auth-react/recipe/session"; + +SuperTokens.init({ + appInfo: { + apiDomain: "...", + appName: "...", + websiteDomain: "..." + }, + recipeList: [ + ^{recipeNameCapitalLetters}.init({ + signInAndUpFeature: { + // highlight-start + signUpForm: { + formFields: [{ + id: "select-dropdown", + label: "Select Dropdown", + inputComponent: ({ value, name, onChange }) => ( +
+
+ +
+
+ ), + optional: true, + }, + { + id: "terms", + label: "", + optional: false, + nonOptionalErrorMsg: "You must accept the terms and conditions", + inputComponent: ({ name, onChange }) => ( +
+ onChange(e.target.checked.toString())}> + + I agree to the{" "} + + Terms and Conditions + + +
+ ), + }] + } + // highlight-end + } + }), + Session.init() + ] +}); +``` + + + +Prebuilt form UI with custom components + + + + + + + + + + + +## Changing Field Order + +To customize the order of fields in your signup form, you can use the `EmailPasswordSignUpForm_Override` function. This functionality allows you to rearrange the sign-up form fields according to your preferences. + + + + + + + + +```tsx +import React from "react"; +import { SuperTokensWrapper } from "supertokens-auth-react"; +import { ^{recipeComponentsOverrideProviderName} } from "supertokens-auth-react/recipe/^{codeImportRecipeName}"; + +function App() { + return ( + + <^{recipeComponentsOverrideProviderName} + components={{ + // highlight-start + EmailPasswordSignUpForm_Override: ({ DefaultComponent, ...props }) => { + return ( + id === 'name'), + props.formFields.find(({id}) => id === 'email'), + props.formFields.find(({id}) => id === 'password'), + ]} + /> + ); + }, + // highlight-end + }}> + {/* Rest of the JSX */} + + + ); +} +export default App; + +``` + + + + + +```tsx +import React from "react"; +import { SuperTokensWrapper } from "supertokens-auth-react"; +import { ^{recipePreBuiltUINameCapitalLetters} } from "supertokens-auth-react/recipe/^{codeImportRecipeName}/prebuiltui" +import { ^{recipeComponentsOverrideProviderName} } from "supertokens-auth-react/recipe/^{codeImportRecipeName}"; +import { getRoutingComponent, canHandleRoute } from "supertokens-auth-react/ui" + + +function App() { + if(canHandleRoute([^{recipePreBuiltUINameCapitalLetters}])){ + return ( + <^{recipeComponentsOverrideProviderName} + components={{ + // highlight-start + EmailPasswordSignUpForm_Override: ({ DefaultComponent, ...props }) => { + return ( + id === 'name'), + props.formFields.find(({id}) => id === 'email'), + props.formFields.find(({id}) => id === 'password'), + ]} + /> + ); + }, + // highlight-end + }}> + {getRoutingComponent([^{recipePreBuiltUINameCapitalLetters}])} + + ) + } + return ( + + {/* Rest of the JSX */} + + ); +} +export default App; + +``` + + + + + + + + +Prebuilt form UI with custom components + + + + diff --git a/v2/thirdpartyemailpassword/common-customizations/signup-form/field-validators.mdx b/v2/thirdpartyemailpassword/common-customizations/signup-form/field-validators.mdx index 6af49c619..da8d7ad59 100644 --- a/v2/thirdpartyemailpassword/common-customizations/signup-form/field-validators.mdx +++ b/v2/thirdpartyemailpassword/common-customizations/signup-form/field-validators.mdx @@ -2,18 +2,31 @@ id: field-validators title: Adding / Modifying field validators hide_title: true +show_ui_switcher: true --- -import FrontendSDKTabs from "/src/components/tabs/FrontendSDKTabs" +import {PreBuiltOrCustomUISwitcher, PreBuiltUIContent, CustomUIContent} from "/src/components/preBuiltOrCustomUISwitcher" +import FrontendPreBuiltUITabs from "/src/components/tabs/FrontendPreBuiltUITabs"; import BackendSDKTabs from "/src/components/tabs/BackendSDKTabs" import TabItem from '@theme/TabItem'; import CustomAdmonition from "/src/components/customAdmonition" # Adding / Modifying field validators + + ## Step 1: Front End + + +:::caution Not applicable +For your custom UI, you will have to implement field validation checking yourself. Note that the backend also checks for the same validation logic (see below), so you don't need to implement this on the frontend, but it's good practice to give real time feedback to users, so you should. +::: + + + + Now that you have added new fields to your signup form, let's see how you can add validators to make sure that your users provide the right information. @@ -21,7 +34,7 @@ You can add a `validate` method to any `formFields`. Building up on our [previous example](./adding-fields), let's add an age verification to our form: - + ```tsx @@ -73,19 +86,24 @@ SuperTokens.init({ }); ``` - + Here is what happens if someone tries to register with an age of 17: Prebuilt sign up form with custom validation + :::tip Security Front-end validation is great for user experience but you should always make sure that you are also applying these validations on the backend. ::: + + + ## Step 2: Back End In your backend's SuperTokens init method, let's replicate the `validate` functions from above: + @@ -239,7 +257,17 @@ By default, SuperTokens adds an email and a password validator to the sign-up fo ::: ### Step 1: Front End 🚪 - + + + +:::caution Not applicable +For your custom UI, you will have to implement field validation checking yourself. Note that the backend also checks for the same validation logic (see below), so you don't need to implement this on the frontend, but it's good practice to give real time feedback to users, so you should. +::: + + + + + ```tsx @@ -280,7 +308,8 @@ SuperTokens.init({ }); ``` - + + ### Step 2: Back End 📫 @@ -402,4 +431,5 @@ init( ``` - \ No newline at end of file + + \ No newline at end of file diff --git a/v2/thirdpartyemailpassword/pre-built-ui/further-reading/email-password-login.mdx b/v2/thirdpartyemailpassword/pre-built-ui/further-reading/email-password-login.mdx index 5503d7f41..d57f6afec 100644 --- a/v2/thirdpartyemailpassword/pre-built-ui/further-reading/email-password-login.mdx +++ b/v2/thirdpartyemailpassword/pre-built-ui/further-reading/email-password-login.mdx @@ -50,7 +50,7 @@ If there are network related errors, or the backend sends a status code >= 300, - [Showing sign up by default](../auth-redirection#showing-sign-up-by-default) - [Adding extra form fields in sign up](../../common-customizations/signup-form/adding-fields) - [Changing fields validation logic](../../common-customizations/signup-form/field-validators) -- [Changing field labels and place holder](../../common-customizations/signup-form/changing-field-labels) +- [Customising sign in / sign up form fields](../../common-customizations/signup-form/customising-each-form-field) - [Enabling password managers](../../common-customizations/password-managers) - [Password hashing algorithms](../../common-customizations/password-hashing/about) - [Disabling sign up](../../advanced-customizations/apis-override/disabling) diff --git a/v2/thirdpartyemailpassword/sidebars.js b/v2/thirdpartyemailpassword/sidebars.js index d8ca24e41..120b20975 100644 --- a/v2/thirdpartyemailpassword/sidebars.js +++ b/v2/thirdpartyemailpassword/sidebars.js @@ -403,7 +403,7 @@ module.exports = { label: 'Email password sign up form', items: [ "common-customizations/signup-form/adding-fields", - "common-customizations/signup-form/changing-field-labels", + "common-customizations/signup-form/customising-each-form-field", "common-customizations/signup-form/field-validators", ], }, @@ -411,7 +411,7 @@ module.exports = { type: "category", label: "Email password sign in form", items: [ - "common-customizations/signin-form/changing-field-labels", + "common-customizations/signin-form/customising-each-form-field", "common-customizations/signin-form/field-validators", ] },