Merge pull request #822 from supertokens/react-bundle-changes

modifies angular and vue integration

v2/emailpassword/advanced-customizations/frontend-functions-override/usage.mdx

@@ -2,22 +2,27 @@
 id: usage
 title: How to use
 hide_title: true
+show_ui_switcher: true
 ---
 
-import FrontendSDKTabs from "/src/components/tabs/FrontendSDKTabs"
+import FrontendPreBuiltUITabs from "/src/components/tabs/FrontendPreBuiltUITabs"
 import TabItem from '@theme/TabItem';
+import {PreBuiltOrCustomUISwitcher, PreBuiltUIContent, CustomUIContent} from "/src/components/preBuiltOrCustomUISwitcher"
 
 # How to use
 
 ## Use the override config
 
+<PreBuiltOrCustomUISwitcher>
+<PreBuiltUIContent>
+
+<FrontendPreBuiltUITabs>
+<TabItem value="reactjs">
+
 :::info
 See all the [functions that can be overrided here](https://supertokens.com/docs/auth-react/modules/recipe_emailpassword.html#RecipeInterface)
 :::
 
-<FrontendSDKTabs>
-<TabItem value="reactjs">
-
 ```tsx
 import SuperTokens from "supertokens-auth-react";
 import EmailPassword from "supertokens-auth-react/recipe/emailpassword";
@@ -54,8 +59,62 @@ SuperTokens.init({
     ]
 });
 ```
+
 </TabItem>
-</FrontendSDKTabs>
+<TabItem value="angular">
+
+:::info
+See all the [functions that can be overrided here](https://supertokens.com/docs/web-js/modules/recipe_emailpassword.html#RecipeInterface)
+:::
+
+```tsx
+// this goes in the auth route config of your frontend app (once the pre built UI script has been loaded)
+import {init as supertokensUIInit} from "supertokens-auth-react-script";
+import supertokensUIEmailPassword from "supertokens-auth-react-script/recipe/emailpassword";
+supertokensUIInit({
+    appInfo: {
+        apiDomain: "...",
+        appName: "...",
+        websiteDomain: "...",
+    },
+    recipeList: [
+        supertokensUIEmailPassword.init({
+            // highlight-start
+            override: {
+                functions: (originalImplementation) => {
+                    return {
+                        ...originalImplementation,
+
+                        // we will only be overriding what happens when a user
+                        // clicks the sign in button.
+                        signIn: async function (input) {
+                            // TODO: some custom logic
+
+                            // or call the default behaviour as show below
+                            return originalImplementation.signIn(input);
+                        },
+                        // ...
+                        // TODO: override more functions
+                    }
+                }
+            }
+            // highlight-end
+        })
+    ]
+});
+```
+</TabItem>
+</FrontendPreBuiltUITabs>
 
 - `originalImplementation` is an object that contain functions that have the original implementation for this recipe. They can be used in your functions as a way to use the SuperTokens' default behaviour.
-- In the above code snippet, we override the `signIn` function of this recipe. This means that when the user clicks the sign in button in the UI, your function will be called with the relevant `input` object.
+- In the above code snippet, we override the `signIn` function of this recipe. This means that when the user clicks the sign in button in the UI, your function will be called with the relevant `input` object.
+
+</PreBuiltUIContent>
+<CustomUIContent>
+
+:::caution
+Not applicable since you need to build custom UI anyway, so when you call the functions from our SDK, or call the API directly, you can run pre / post logic in your own code.
+:::
+
+</CustomUIContent>
+</PreBuiltOrCustomUISwitcher>

v2/emailpassword/advanced-customizations/frontend-hooks/handle-event.mdx

@@ -2,16 +2,21 @@
 id: handle-event
 title: Handle Event Hook
 hide_title: true
+show_ui_switcher: true
 ---
 
-import FrontendSDKTabs from "/src/components/tabs/FrontendSDKTabs"
+import FrontendPreBuiltUITabs from "/src/components/tabs/FrontendPreBuiltUITabs"
 import TabItem from '@theme/TabItem';
+import {PreBuiltOrCustomUISwitcher, PreBuiltUIContent, CustomUIContent} from "/src/components/preBuiltOrCustomUISwitcher"
 
 # Handle Event Hook
 
+<PreBuiltOrCustomUISwitcher>
+<PreBuiltUIContent>
+
 This function is called for various user actions. It can be used for logging, analytics or any side effect purposes (these are essentially fire and forget events).
 
-<FrontendSDKTabs>
+<FrontendPreBuiltUITabs>
 <TabItem value="reactjs">
 
 ```tsx
@@ -38,9 +43,48 @@ EmailPassword.init({
     }
 })
 ```
+
 </TabItem>
-</FrontendSDKTabs>
+<TabItem value="angular">
+
+```tsx
+// this goes in the auth route config of your frontend app (once the pre built UI script has been loaded)
+import supertokensUIEmailPassword from "supertokens-auth-react-script/recipe/emailpassword";
+supertokensUIEmailPassword.init({
+    onHandleEvent: (context) => {
+        if (context.action === "PASSWORD_RESET_SUCCESSFUL") {
+
+        } else if (context.action === "RESET_PASSWORD_EMAIL_SENT") {
+
+        } else if (context.action === "SUCCESS") {
+            if (context.createdNewSession) {
+                let user = context.user;
+                if (context.isNewRecipeUser && context.user.loginMethods.length === 1) {
+                    // sign up success
+                } else {
+                    // sign in success
+                }
+            } else {
+                // this is during second factor login of step up auth flow
+            }
+        }
+    }
+})
+```
+
+</TabItem>
+</FrontendPreBuiltUITabs>
 
 :::info
 Also checkout the [session recipe handle event hook](/docs/session/advanced-customizations/frontend-hooks/handle-event).
-:::
+:::
+
+</PreBuiltUIContent>
+<CustomUIContent>
+
+:::caution
+Not applicable since you need to build custom UI anyway, so when you call the functions from our SDK, or call the API directly, you can run pre / post logic in your own code.
+:::
+
+</CustomUIContent>
+</PreBuiltOrCustomUISwitcher>

v2/emailpassword/advanced-customizations/frontend-hooks/pre-api.mdx

@@ -59,6 +59,45 @@ EmailPassword.init({
 ```
 
 
+</TabItem>
+
+<TabItem value="angular">
+
+```tsx
+// this goes in the auth route config of your frontend app (once the pre built UI script has been loaded)
+import supertokensUIEmailPassword from "supertokens-auth-react-script/recipe/emailpassword";
+supertokensUIEmailPassword.init({
+    preAPIHook: async (context) => {
+        let url = context.url;
+
+        // is the fetch config object that contains the header, body etc..
+        let requestInit = context.requestInit;
+
+        let action = context.action;
+        if (action === "EMAIL_EXISTS") {
+
+        } else if (action === "SEND_RESET_PASSWORD_EMAIL") {
+
+        } else if (action === "EMAIL_PASSWORD_SIGN_IN") {
+
+        } else if (action === "EMAIL_PASSWORD_SIGN_UP") {
+
+        } else if (action === "SUBMIT_NEW_PASSWORD") {
+
+        } else if (action === "VERIFY_EMAIL") {
+
+        }
+
+        // events such as sign out are in the 
+        // session recipe pre API hook (See the info box below)
+        return {
+            requestInit, url
+        };
+    }
+})
+```
+
+
 </TabItem>
 
 :::info

v2/emailpassword/advanced-customizations/frontend-hooks/redirection-callback.mdx

@@ -2,16 +2,21 @@
 id: redirection-callback
 title: Redirection Callback Hook
 hide_title: true
+show_ui_switcher: true
 ---
 
-import FrontendSDKTabs from "/src/components/tabs/FrontendSDKTabs"
+import FrontendPreBuiltUITabs from "/src/components/tabs/FrontendPreBuiltUITabs"
 import TabItem from '@theme/TabItem';
+import {PreBuiltOrCustomUISwitcher, PreBuiltUIContent, CustomUIContent} from "/src/components/preBuiltOrCustomUISwitcher"
 
 # Redirection Callback Hook
 
+<PreBuiltOrCustomUISwitcher>
+<PreBuiltUIContent>
+
 This function is used to change where the user is redirected to post certain actions. For example, you can use this to redirect a user to a specific URL post sign in / up. If you're embedding the sign in / up components in a popup and wish to disable redirection entirely, simply return `null`.
 
-<FrontendSDKTabs>
+<FrontendPreBuiltUITabs>
 <TabItem value="reactjs">
 
 ```tsx
@@ -61,5 +66,68 @@ SuperTokens.init({
     ]
 });
 ```
+
 </TabItem>
-</FrontendSDKTabs>
+<TabItem value="angular">
+
+```tsx
+// this goes in the auth route config of your frontend app (once the pre built UI script has been loaded)
+import {init as supertokensUIInit} from "supertokens-auth-react-script";
+import supertokensUIEmailPassword from "supertokens-auth-react-script/recipe/emailpassword";
+supertokensUIInit({
+    appInfo: {
+        appName: "SuperTokens",
+        apiDomain: "http://localhost:3000",
+        websiteDomain: "http://localhost:3000",
+    },
+    getRedirectionURL: async (context) => {
+        if (context.action === "TO_AUTH") {
+            // This is called when we want to navigate to the login page.
+            // By default, this will go to the configured websiteBasePath (/auth)
+        } else if (context.action === "SUCCESS" && context.newSessionCreated) {
+            // This is called when the user has successfully signed in / signed up.
+            // By default, this will go to "/" or to 
+            // the redirectToPath if it is set (the page from which the user was redirected to the auth page).
+            let redirectToPath = context.redirectToPath;
+            if (redirectToPath !== undefined) {
+                // we are navigating back to where the user was before they authenticated
+                return redirectToPath;
+            }
+            if (context.createdNewUser) {
+                // user signed up
+                return "/onboarding"
+            } else {
+                // user signed in
+                return "/dashboard"
+            }
+        }
+        // return undefined to let the default behaviour play out
+        return undefined;
+    },
+    recipeList: [
+        supertokensUIEmailPassword.init({
+            getRedirectionURL: async (context) => {
+                if (context.action === "RESET_PASSWORD") {
+                    // called when the user clicked on the forgot password button
+                }
+                // return undefined to let the default behaviour play out
+                return undefined;
+            }
+        })
+    ]
+});
+```
+
+</TabItem>
+</FrontendPreBuiltUITabs>
+
+</PreBuiltUIContent>
+<CustomUIContent>
+
+:::caution
+Not applicable since you need to build custom UI anyway, so you can redirect the user after calling our SDK functions / API.
+:::
+
+</CustomUIContent>
+</PreBuiltOrCustomUISwitcher>
+

v2/emailpassword/advanced-customizations/react-component-override/usage.mdx

@@ -2,23 +2,27 @@
 id: usage
 title: How to use
 hide_title: true
+show_ui_switcher: true
 ---
 
-import FrontendSDKTabs from "/src/components/tabs/FrontendSDKTabs"
+import FrontendPreBuiltUITabs from "/src/components/tabs/FrontendPreBuiltUITabs"
 import TabItem from '@theme/TabItem';
+import {PreBuiltOrCustomUISwitcher, PreBuiltUIContent, CustomUIContent} from "/src/components/preBuiltOrCustomUISwitcher"
 import {Answer} from "/src/components/question"
 import {Question}from "/src/components/question"
 
 # How to use
 
+<PreBuiltOrCustomUISwitcher>
+<PreBuiltUIContent>
+
+<FrontendPreBuiltUITabs>
+<TabItem value="reactjs">
+
 1. You will have to use the `EmailPasswordComponentsOverrideProvider` or the `AuthRecipeComponentsOverrideContextProvider` component as shown below. make sure that it render the SuperTokens components inside this component.
 2. [Pick a component](#finding-which-component-will-be-overridden) that you'd like to override by its key.
 3. Supply a React component against the key you have picked. Your custom component will get the original component as a `prop`.
 
-## Example
-<FrontendSDKTabs>
-<TabItem value="reactjs">
-
 <Question
     question="Do you use react-router-dom?">
 <Answer title="Yes">
@@ -117,9 +121,6 @@ Please make sure that the file in which this config is specified is a `.tsx` or
 :::
 
 
-</TabItem>
-</FrontendSDKTabs>
-
 ## Finding which component will be overridden
 To do that, you should use React Developer Tools extension which provides a component tree inspector.
 
@@ -148,3 +149,24 @@ const customComponent = ({ DefaultComponent, ...props }: { DefaultComponent: Rea
 }
 ```
 
+
+
+</TabItem>
+<TabItem value="angular">
+
+:::caution
+Not applicable to non-react apps. You can disable the specific pre built UI component, and then build your own UI instead. 
+:::
+
+</TabItem>
+</FrontendPreBuiltUITabs>
+
+</PreBuiltUIContent>
+<CustomUIContent>
+
+:::caution
+Not applicable to custom UI
+:::
+
+</CustomUIContent>
+</PreBuiltOrCustomUISwitcher>