Merge pull request #870 from supertokens/feat/quickstart-change

Add the new quickstart docs

v2/community/reusableMD/custom-ui/frontend-custom-ui-email-password-sign-in.mdx

@@ -0,0 +1,152 @@
+
+import FrontendCustomUITabs from "/src/components/tabs/FrontendCustomUITabs"
+import FrontendMobileSubTabs from "/src/components/tabs/FrontendMobileSubTabs"
+import NpmOrScriptTabs from "/src/components/tabs/NpmOrScriptTabs"
+import WebJsInjector from "/src/components/webJsInjector"
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import AppInfoForm from "/src/components/appInfoForm"
+
+<FrontendCustomUITabs>
+<TabItem value="web">
+
+For the **Sign In** flow you will have to first add the UI elements which will render your form.
+After that, call the following function when the user submits the form that you have previously created. 
+
+<NpmOrScriptTabs>
+<TabItem value="npm">
+
+```tsx
+import { signIn } from "supertokens-web-js/recipe/emailpassword";
+
+async function signInClicked(email: string, password: string) {
+    try {
+        let response = await signIn({
+            formFields: [{
+                id: "email",
+                value: email
+            }, {
+                id: "password",
+                value: password
+            }]
+        })
+
+        if (response.status === "FIELD_ERROR") {
+            response.formFields.forEach(formField => {
+                if (formField.id === "email") {
+                    // Email validation failed (for example incorrect email syntax).
+                    window.alert(formField.error)
+                }
+            })
+        } else if (response.status === "WRONG_CREDENTIALS_ERROR") {
+            window.alert("Email password combination is incorrect.")
+        } else if (response.status === "SIGN_IN_NOT_ALLOWED") {
+            // the reason string is a user friendly message
+            // about what went wrong. It can also contain a support code which users
+            // can tell you so you know why their sign in was not allowed.
+            window.alert(response.reason)
+        } else {
+            // sign in successful. The session tokens are automatically handled by
+            // the frontend SDK.
+            window.location.href = "/homepage"
+        }
+    } catch (err: any) {
+        if (err.isSuperTokensGeneralError === true) {
+            // this may be a custom error message sent from the API by you.
+            window.alert(err.message);
+        } else {
+            window.alert("Oops! Something went wrong.");
+        }
+    }
+}
+```
+
+</TabItem>
+<TabItem value="script">
+
+```tsx
+import supertokensEmailPassword from "supertokens-web-js-script/recipe/emailpassword";
+async function signInClicked(email: string, password: string) {
+    try {
+        let response = await supertokensEmailPassword.signIn({
+            formFields: [{
+                id: "email",
+                value: email
+            }, {
+                id: "password",
+                value: password
+            }]
+        })
+
+        if (response.status === "FIELD_ERROR") {
+            // one of the input formFields failed validation
+            response.formFields.forEach(formField => {
+                if (formField.id === "email") {
+                    // Email validation failed (for example incorrect email syntax).
+                    window.alert(formField.error)
+                }
+            })
+        } else if (response.status === "WRONG_CREDENTIALS_ERROR") {
+            window.alert("Email password combination is incorrect.")
+        } else if (response.status === "SIGN_IN_NOT_ALLOWED") {
+            // the reason string is a user friendly message
+            // about what went wrong. It can also contain a support code which users
+            // can tell you so you know why their sign in was not allowed.
+            window.alert(response.reason)
+        } else {
+            // sign in successful. The session tokens are automatically handled by
+            // the frontend SDK.
+            window.location.href = "/homepage"
+        }
+    } catch (err: any) {
+        if (err.isSuperTokensGeneralError === true) {
+            // this may be a custom error message sent from the API by you.
+            window.alert(err.message);
+        } else {
+            window.alert("Oops! Something went wrong.");
+        }
+    }
+}
+```
+
+</TabItem>
+</NpmOrScriptTabs>
+
+</TabItem>
+
+<TabItem value="mobile">
+
+<AppInfoForm askForAPIDomain showMultiTenancyTab>
+
+
+For the **Sign In** flow you will have to first add the UI elements which will render your form.
+After that, call the following API when the user submits the form that you have previously created. 
+
+```bash
+curl --location --request POST '^{form_apiDomain}^{form_apiBasePath}/signin' \
+--header 'Content-Type: application/json; charset=utf-8' \
+--data-raw '{
+    "formFields": [{
+        "id": "email",
+        "value": "[email protected]"
+    }, {
+        "id": "password",
+        "value": "somePassword123"
+    }]
+}'
+```
+
+</AppInfoForm>
+
+The response body from the API call has a `status` property in it:
+- `status: "OK"`: User sign in was successful. The response also contains more information about the user, for example their user ID.
+- `status: "WRONG_CREDENTIALS_ERROR"`: The input email and password combination is incorrect.
+- `status: "FIELD_ERROR"`: This indicates that the input email did not pass the backend validation - probably because it's syntactically not an email. You want to show the user an error next to the email input form field.
+- `status: "GENERAL_ERROR"`: This is only possible if you have overriden the backend API to send back a custom error message which should be displayed on the frontend.
+- `status: "SIGN_IN_NOT_ALLOWED"`: This can happen during automatic account linking or during MFA. The `reason` prop that's in the response body contains a support code using which you can see why the sign in was not allowed.
+
+</TabItem>
+
+</FrontendCustomUITabs>
+
+On success, the backend will send back session tokens as part of the response headers which will be automatically handled by our frontend SDK for you.