From 0e2c77369f64703131806c1cbc0ec6d3f7b9dcd3 Mon Sep 17 00:00:00 2001
From: Ankit Tiwari <ankucodes@gmail.com>
Date: Wed, 6 Dec 2023 19:36:35 +0530
Subject: [PATCH 1/7] feat: Add getRedirectionURL docs

---
 .../frontend-hooks/redirection-callback.mdx   |   2 +-
 .../embed-sign-in-up-form.mdx                 | 159 +++++++++++++++++-
 .../frontend-hooks/redirection-callback.mdx   |   2 +-
 .../embed-sign-in-up-form.mdx                 | 158 ++++++++++++++++-
 .../further-reading/passwordless-login.mdx    |   6 +-
 .../frontend-hooks/redirection-callback.mdx   |   2 +-
 .../embed-sign-in-up-form.mdx                 | 156 ++++++++++++++++-
 .../frontend-hooks/redirection-callback.mdx   |   2 +-
 .../embed-sign-in-up-form.mdx                 | 156 ++++++++++++++++-
 .../frontend-hooks/redirection-callback.mdx   |   2 +-
 .../embed-sign-in-up-form.mdx                 | 159 +++++++++++++++++-
 .../further-reading/passwordless-login.mdx    |   6 +-
 12 files changed, 785 insertions(+), 25 deletions(-)

diff --git a/v2/emailpassword/advanced-customizations/frontend-hooks/redirection-callback.mdx b/v2/emailpassword/advanced-customizations/frontend-hooks/redirection-callback.mdx
index 41d3dde59..384a4221a 100644
--- a/v2/emailpassword/advanced-customizations/frontend-hooks/redirection-callback.mdx
+++ b/v2/emailpassword/advanced-customizations/frontend-hooks/redirection-callback.mdx
@@ -9,7 +9,7 @@ import TabItem from '@theme/TabItem';
 
 # Redirection Callback Hook
 
-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.
+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>
 <TabItem value="reactjs">
diff --git a/v2/emailpassword/common-customizations/embed-sign-in-up-form.mdx b/v2/emailpassword/common-customizations/embed-sign-in-up-form.mdx
index 0324be4ab..68eb87968 100644
--- a/v2/emailpassword/common-customizations/embed-sign-in-up-form.mdx
+++ b/v2/emailpassword/common-customizations/embed-sign-in-up-form.mdx
@@ -6,6 +6,8 @@ hide_title: true
 
 import FrontendSDKTabs from "/src/components/tabs/FrontendSDKTabs"
 import TabItem from '@theme/TabItem';
+import {Question, Answer}from "/src/components/question"
+import RRDVersionSubTabs from "/src/components/tabs/RRDVersionSubTabs"
 
 # Embed Sign In / Up form in a page 
 
@@ -46,10 +48,117 @@ If you navigate to `/auth`, you should not see the widget anymore.
 
 ## Step 2: Render the component yourself
 
-For example if you would like to show the login form in our own component which renders custom UI around it, and is shown only of the user is logged in, then we can:
+For example if you would like to show the login form in our own component which renders custom UI around it, and is shown only if the user is logged in, then we can:
 
 <FrontendSDKTabs>
 <TabItem value="reactjs">
+<Question
+    question="Do you use react-router-dom?">
+<Answer title="Yes">
+
+<RRDVersionSubTabs>
+
+<TabItem value="v6">
+
+```tsx
+import React from "react";
+// highlight-start
+import { SignInAndUp } from 'supertokens-auth-react/recipe/emailpassword/prebuiltui';
+import Session from "supertokens-auth-react/recipe/session";
+// highlight-end
+// @ts-ignore
+import Header from "./header";
+// @ts-ignore
+import Footer from "./footer";
+import { useNavigate } from "react-router-dom";
+
+function MyLandingPage() {
+    let sessionContext = Session.useSessionContext();
+    const navigate = useNavigate();
+    if (sessionContext.loading) {
+        return null;
+    }
+    if (sessionContext.doesSessionExist) {
+        // We wrap this with <SessionAuth /> so that
+        // all claims are validated before showing the logged in UI.
+        // For example, if email verification is switched on, and
+        // the user's email is not verified, then <SessionAuth />
+        // will redirect to the email verification page.
+        return (
+            <Session.SessionAuth>
+                <Header />
+                    You are logged in!
+                <Footer />
+            </Session.SessionAuth>
+        )
+    } else {
+        return (
+            <div>
+                <Header />
+                // highlight-next-line
+                <SignInAndUp navigate={navigate} />
+                <Footer />
+            </div>
+        )
+    }
+}
+```
+
+</TabItem>
+
+<TabItem value="v5">
+
+```tsx
+import React from "react";
+// highlight-start
+import { SignInAndUp } from 'supertokens-auth-react/recipe/emailpassword/prebuiltui';
+import Session from "supertokens-auth-react/recipe/session";
+// highlight-end
+// @ts-ignore
+import Header from "./header";
+// @ts-ignore
+import Footer from "./footer";
+import { useHistory } from 'react-router-dom';
+
+function MyLandingPage() {
+    let sessionContext = Session.useSessionContext();
+    const history = useHistory();
+    if (sessionContext.loading) {
+        return null;
+    }
+    if (sessionContext.doesSessionExist) {
+        // We wrap this with <SessionAuth /> so that
+        // all claims are validated before showing the logged in UI.
+        // For example, if email verification is switched on, and
+        // the user's email is not verified, then <SessionAuth />
+        // will redirect to the email verification page.
+        return (
+            <Session.SessionAuth>
+                <Header />
+                    You are logged in!
+                <Footer />
+            </Session.SessionAuth>
+        )
+    } else {
+        return (
+            <div>
+                <Header />
+                // highlight-next-line
+                <SignInAndUp navigate={history} />
+                <Footer />
+            </div>
+        )
+    }
+}
+```
+
+</TabItem>
+
+</RRDVersionSubTabs>
+
+</Answer>
+<Answer title="No">
+
 
 ```tsx
 import React from "react";
@@ -92,6 +201,10 @@ function MyLandingPage() {
     }
 }
 ```
+
+</Answer>
+</Question>
+
 </TabItem>
 </FrontendSDKTabs>
 
@@ -128,4 +241,46 @@ SuperTokens.init({
 })
 ```
 </TabItem>
-</FrontendSDKTabs>
\ No newline at end of file
+</FrontendSDKTabs>
+
+## Optional: Prevent redirection after SignIn / Up
+
+Upon successful login, SuperTokens redirects the user to the return value of `getRedirectionURL` provided in the recipe config. By default or when returning `undefined` from `getRedirectionURL`, the user is redirected to the `/` route. If you wish to completely prevent redirection, return `null` instead.
+
+<FrontendSDKTabs>
+<TabItem value="reactjs">
+
+```tsx
+import SuperTokens from "supertokens-auth-react";
+import EmailPassword from "supertokens-auth-react/recipe/emailpassword";
+
+SuperTokens.init({
+    appInfo: {
+        apiDomain: "...",
+        appName: "...",
+        websiteDomain: "..."
+    },
+    recipeList: [
+        EmailPassword.init({
+            //highlight-start
+            getRedirectionURL: async (context) => {
+                // Prevent redirection after successful sign in/up by returning null.
+                if (context.action === "SUCCESS") {
+                    return null;
+                };
+            },
+            //highlight-end
+        })
+    ],
+})
+```
+</TabItem>
+</FrontendSDKTabs>
+
+:::note
+To avoid redirection for failed claims, such as Email Verification, reach out to us on [Discord](https://supertokens.com/discord) for assistance.
+:::
+
+## Optional: Rendering Auth components together in a popup and page
+
+You may choose to display the Auth UI in a full page and in a popup in the same app, utilising the same SuperTokens config. For the full-page Auth UI, redirection after a successful login is preferred, whereas in the popup, it is not. In this scenario, you have the option to check either the current URL or the `userContext` object in `getRedirectionURL` to decide whether to return null or not.
diff --git a/v2/passwordless/advanced-customizations/frontend-hooks/redirection-callback.mdx b/v2/passwordless/advanced-customizations/frontend-hooks/redirection-callback.mdx
index e122c405c..c4fc57bce 100644
--- a/v2/passwordless/advanced-customizations/frontend-hooks/redirection-callback.mdx
+++ b/v2/passwordless/advanced-customizations/frontend-hooks/redirection-callback.mdx
@@ -9,7 +9,7 @@ import TabItem from '@theme/TabItem';
 
 # Redirection Callback Hook
 
-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.
+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>
 <TabItem value="reactjs">
diff --git a/v2/passwordless/common-customizations/embed-sign-in-up-form.mdx b/v2/passwordless/common-customizations/embed-sign-in-up-form.mdx
index 9427779d7..f97dc8602 100644
--- a/v2/passwordless/common-customizations/embed-sign-in-up-form.mdx
+++ b/v2/passwordless/common-customizations/embed-sign-in-up-form.mdx
@@ -6,6 +6,8 @@ hide_title: true
 
 import FrontendSDKTabs from "/src/components/tabs/FrontendSDKTabs"
 import TabItem from '@theme/TabItem';
+import {Question, Answer}from "/src/components/question"
+import RRDVersionSubTabs from "/src/components/tabs/RRDVersionSubTabs"
 
 # Embed Sign In / Up form in a page 
 
@@ -48,10 +50,117 @@ If you navigate to `/auth`, you should not see the widget anymore.
 
 ## Step 2: Render the component yourself
 
-For example if you would like to show the login form in our own component which renders custom UI around it, and is shown only of the user is logged in, then we can:
+For example if you would like to show the login form in our own component which renders custom UI around it, and is shown only if the user is logged in, then we can:
 
 <FrontendSDKTabs>
 <TabItem value="reactjs">
+<Question
+    question="Do you use react-router-dom?">
+<Answer title="Yes">
+
+<RRDVersionSubTabs>
+
+<TabItem value="v6">
+
+```tsx
+import React from "react";
+// highlight-start
+import { SignInUp } from 'supertokens-auth-react/recipe/passwordless/prebuiltui';
+import Session from "supertokens-auth-react/recipe/session";
+// highlight-end
+// @ts-ignore
+import Header from "./header";
+// @ts-ignore
+import Footer from "./footer";
+import { useNavigate } from "react-router-dom";
+
+function MyLandingPage() {
+    let sessionContext = Session.useSessionContext();
+    const navigate = useNavigate();
+    if (sessionContext.loading) {
+        return null;
+    }
+    if (sessionContext.doesSessionExist) {
+        // We wrap this with <SessionAuth /> so that
+        // all claims are validated before showing the logged in UI.
+        // For example, if email verification is switched on, and
+        // the user's email is not verified, then <SessionAuth />
+        // will redirect to the email verification page.
+        return (
+            <Session.SessionAuth>
+                <Header />
+                    You are logged in!
+                <Footer />
+            </Session.SessionAuth>
+        )
+    } else {
+        return (
+            <div>
+                <Header />
+                // highlight-next-line
+                <SignInUp navigate={navigate} />
+                <Footer />
+            </div>
+        )
+    }
+}
+```
+
+</TabItem>
+
+<TabItem value="v5">
+
+```tsx
+import React from "react";
+// highlight-start
+import { SignInUp } from 'supertokens-auth-react/recipe/passwordless/prebuiltui';
+import Session from "supertokens-auth-react/recipe/session";
+// highlight-end
+// @ts-ignore
+import Header from "./header";
+// @ts-ignore
+import Footer from "./footer";
+import { useHistory } from "react-router-dom";
+
+function MyLandingPage() {
+    let sessionContext = Session.useSessionContext();
+    const history = useHistory();
+    if (sessionContext.loading) {
+        return null;
+    }
+    if (sessionContext.doesSessionExist) {
+        // We wrap this with <SessionAuth /> so that
+        // all claims are validated before showing the logged in UI.
+        // For example, if email verification is switched on, and
+        // the user's email is not verified, then <SessionAuth />
+        // will redirect to the email verification page.
+        return (
+            <Session.SessionAuth>
+                <Header />
+                    You are logged in!
+                <Footer />
+            </Session.SessionAuth>
+        )
+    } else {
+        return (
+            <div>
+                <Header />
+                // highlight-next-line
+                <SignInUp navigate={history} />
+                <Footer />
+            </div>
+        )
+    }
+}
+```
+
+</TabItem>
+
+</RRDVersionSubTabs>
+
+</Answer>
+<Answer title="No">
+
 
 ```tsx
 import React from "react";
@@ -94,6 +203,9 @@ function MyLandingPage() {
     }
 }
 ```
+
+</Answer>
+</Question>
 </TabItem>
 </FrontendSDKTabs>
 
@@ -132,4 +244,46 @@ SuperTokens.init({
 })
 ```
 </TabItem>
-</FrontendSDKTabs>
\ No newline at end of file
+</FrontendSDKTabs>
+
+## Optional: Prevent redirection after SignIn / Up
+
+Upon successful login, SuperTokens redirects the user to the return value of `getRedirectionURL` provided in the recipe config. By default or when returning `undefined` from `getRedirectionURL`, the user is redirected to the `/` route. If you wish to completely prevent redirection, return `null` instead.
+
+<FrontendSDKTabs>
+<TabItem value="reactjs">
+
+```tsx
+import SuperTokens from "supertokens-auth-react";
+import Passwordless from "supertokens-auth-react/recipe/passwordless";
+
+SuperTokens.init({
+    appInfo: {
+        apiDomain: "...",
+        appName: "...",
+        websiteDomain: "..."
+    },
+    recipeList: [
+        Passwordless.init({
+            //highlight-start
+            getRedirectionURL: async (context) => {
+                // Prevent redirection after successful sign in/up by returning null.
+                if (context.action === "SUCCESS") {
+                    return null;
+                };
+            },
+            //highlight-end
+        })
+    ],
+})
+```
+</TabItem>
+</FrontendSDKTabs>
+
+:::note
+To avoid redirection for failed claims, such as Email Verification, reach out to us on [Discord](https://supertokens.com/discord) for assistance.
+:::
+
+## Optional: Rendering Auth components together in a popup and page
+
+You may choose to display the Auth UI in a full page and in a popup in the same app, utilising the same SuperTokens config. For the full-page Auth UI, redirection after a successful login is preferred, whereas in the popup, it is not. In this scenario, you have the option to check either the current URL or the `userContext` object in `getRedirectionURL` to decide whether to return null or not.
\ No newline at end of file
diff --git a/v2/passwordless/pre-built-ui/further-reading/passwordless-login.mdx b/v2/passwordless/pre-built-ui/further-reading/passwordless-login.mdx
index 6b353fb63..3c5fbf698 100644
--- a/v2/passwordless/pre-built-ui/further-reading/passwordless-login.mdx
+++ b/v2/passwordless/pre-built-ui/further-reading/passwordless-login.mdx
@@ -91,11 +91,7 @@ Entering an incorrect OTP too many times results in the user being navigated bac
 
 ### Logging in via OTP and Magic link simultaneously 
 
-There is a edge case wherein the end user get's both an OTP and a magic link, and whilst viewing the enter OTP screen, then also click on the magic link separately. The magic link click will open a new tab and will consume the link to log the user in. 
-
-Since the user is logged in, the enter OTP screen will change to show the UI as shown below
-
-<img src="/img/otp-magic-link-same-time.png" alt="Magic link and OTP at the same time" />
+There is a edge case wherein the end user get's both an OTP and a magic link, and whilst viewing the enter OTP screen, then also click on the magic link separately. The magic link click will open a new tab and will consume the link to log the user in. The enter OTP screen will continue to show the enter OTP UI until user refreshes the page.
 
 ## Default email and SMS template
 
diff --git a/v2/thirdparty/advanced-customizations/frontend-hooks/redirection-callback.mdx b/v2/thirdparty/advanced-customizations/frontend-hooks/redirection-callback.mdx
index 6993e04a6..b46b2b088 100644
--- a/v2/thirdparty/advanced-customizations/frontend-hooks/redirection-callback.mdx
+++ b/v2/thirdparty/advanced-customizations/frontend-hooks/redirection-callback.mdx
@@ -9,7 +9,7 @@ import TabItem from '@theme/TabItem';
 
 # Redirection Callback Hook
 
-This function is used to overwrite 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.
+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>
 <TabItem value="reactjs">
diff --git a/v2/thirdparty/common-customizations/embed-sign-in-up-form.mdx b/v2/thirdparty/common-customizations/embed-sign-in-up-form.mdx
index c739a1621..df8f501b1 100644
--- a/v2/thirdparty/common-customizations/embed-sign-in-up-form.mdx
+++ b/v2/thirdparty/common-customizations/embed-sign-in-up-form.mdx
@@ -6,6 +6,8 @@ hide_title: true
 
 import FrontendSDKTabs from "/src/components/tabs/FrontendSDKTabs"
 import TabItem from '@theme/TabItem';
+import {Question, Answer}from "/src/components/question"
+import RRDVersionSubTabs from "/src/components/tabs/RRDVersionSubTabs"
 
 # Embed Sign In / Up form in a page 
 
@@ -46,10 +48,116 @@ If you navigate to `/auth`, you should not see the widget anymore.
 
 ## Step 2: Render the component yourself
 
-For example if you would like to show the login form in our own component which renders custom UI around it, and is shown only of the user is logged in, then we can:
+For example if you would like to show the login form in our own component which renders custom UI around it, and is shown only if the user is logged in, then we can:
 
 <FrontendSDKTabs>
 <TabItem value="reactjs">
+<Question
+    question="Do you use react-router-dom?">
+<Answer title="Yes">
+
+<RRDVersionSubTabs>
+
+<TabItem value="v6">
+
+```tsx
+import React from "react";
+// highlight-start
+import { SignInAndUp } from 'supertokens-auth-react/recipe/thirdparty/prebuiltui';
+import Session from "supertokens-auth-react/recipe/session";
+// highlight-end
+// @ts-ignore
+import Header from "./header";
+// @ts-ignore
+import Footer from "./footer";
+import { useNavigate } from "react-router-dom";
+
+function MyLandingPage() {
+    let sessionContext = Session.useSessionContext();
+    const navigate = useNavigate();
+    if (sessionContext.loading) {
+        return null;
+    }
+    if (sessionContext.doesSessionExist) {
+        // We wrap this with <SessionAuth /> so that
+        // all claims are validated before showing the logged in UI.
+        // For example, if email verification is switched on, and
+        // the user's email is not verified, then <SessionAuth />
+        // will redirect to the email verification page.
+        return (
+            <Session.SessionAuth>
+                <Header />
+                    You are logged in!
+                <Footer />
+            </Session.SessionAuth>
+        )
+    } else {
+        return (
+            <div>
+                <Header />
+                // highlight-next-line
+                <SignInAndUp navigate={navigate} />
+                <Footer />
+            </div>
+        )
+    }
+}
+```
+
+</TabItem>
+
+<TabItem value="v5">
+
+```tsx
+import React from "react";
+// highlight-start
+import { SignInAndUp } from 'supertokens-auth-react/recipe/thirdparty/prebuiltui';
+import Session from "supertokens-auth-react/recipe/session";
+// highlight-end
+// @ts-ignore
+import Header from "./header";
+// @ts-ignore
+import Footer from "./footer";
+import { useHistory } from "react-router-dom";
+
+function MyLandingPage() {
+    let sessionContext = Session.useSessionContext();
+    const history = useHistory();
+    if (sessionContext.loading) {
+        return null;
+    }
+    if (sessionContext.doesSessionExist) {
+        // We wrap this with <SessionAuth /> so that
+        // all claims are validated before showing the logged in UI.
+        // For example, if email verification is switched on, and
+        // the user's email is not verified, then <SessionAuth />
+        // will redirect to the email verification page.
+        return (
+            <Session.SessionAuth>
+                <Header />
+                    You are logged in!
+                <Footer />
+            </Session.SessionAuth>
+        )
+    } else {
+        return (
+            <div>
+                <Header />
+                // highlight-next-line
+                <SignInAndUp navigate={history} />
+                <Footer />
+            </div>
+        )
+    }
+}
+```
+
+</TabItem>
+
+</RRDVersionSubTabs>
+
+</Answer>
+<Answer title="No">
 
 ```tsx
 import React from "react";
@@ -92,6 +200,8 @@ function MyLandingPage() {
     }
 }
 ```
+</Answer>
+</Question>
 </TabItem>
 </FrontendSDKTabs>
 
@@ -128,4 +238,46 @@ SuperTokens.init({
 })
 ```
 </TabItem>
-</FrontendSDKTabs>
\ No newline at end of file
+</FrontendSDKTabs>
+
+## Optional: Prevent redirection after SignIn / Up
+
+Upon successful login, SuperTokens redirects the user to the return value of `getRedirectionURL` provided in the recipe config. By default or when returning `undefined` from `getRedirectionURL`, the user is redirected to the `/` route. If you wish to completely prevent redirection, return `null` instead.
+
+<FrontendSDKTabs>
+<TabItem value="reactjs">
+
+```tsx
+import SuperTokens from "supertokens-auth-react";
+import ThirdParty from "supertokens-auth-react/recipe/thirdparty";
+
+SuperTokens.init({
+    appInfo: {
+        apiDomain: "...",
+        appName: "...",
+        websiteDomain: "..."
+    },
+    recipeList: [
+        ThirdParty.init({
+            //highlight-start
+            getRedirectionURL: async (context) => {
+                // Prevent redirection after successful sign in/up by returning null.
+                if (context.action === "SUCCESS") {
+                    return null;
+                };
+            },
+            //highlight-end
+        })
+    ],
+})
+```
+</TabItem>
+</FrontendSDKTabs>
+
+:::note
+To avoid redirection for failed claims, such as Email Verification, reach out to us on [Discord](https://supertokens.com/discord) for assistance.
+:::
+
+## Optional: Rendering Auth components together in a popup and page
+
+You may choose to display the Auth UI in a full page and in a popup in the same app, utilising the same SuperTokens config. For the full-page Auth UI, redirection after a successful login is preferred, whereas in the popup, it is not. In this scenario, you have the option to check either the current URL or the `userContext` object in `getRedirectionURL` to decide whether to return null or not.
\ No newline at end of file
diff --git a/v2/thirdpartyemailpassword/advanced-customizations/frontend-hooks/redirection-callback.mdx b/v2/thirdpartyemailpassword/advanced-customizations/frontend-hooks/redirection-callback.mdx
index 9e74fa4da..907dd49ce 100644
--- a/v2/thirdpartyemailpassword/advanced-customizations/frontend-hooks/redirection-callback.mdx
+++ b/v2/thirdpartyemailpassword/advanced-customizations/frontend-hooks/redirection-callback.mdx
@@ -9,7 +9,7 @@ import TabItem from '@theme/TabItem';
 
 # Redirection Callback Hook
 
-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.
+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>
 <TabItem value="reactjs">
diff --git a/v2/thirdpartyemailpassword/common-customizations/embed-sign-in-up-form.mdx b/v2/thirdpartyemailpassword/common-customizations/embed-sign-in-up-form.mdx
index a823ab478..586c35af5 100644
--- a/v2/thirdpartyemailpassword/common-customizations/embed-sign-in-up-form.mdx
+++ b/v2/thirdpartyemailpassword/common-customizations/embed-sign-in-up-form.mdx
@@ -6,6 +6,8 @@ hide_title: true
 
 import FrontendSDKTabs from "/src/components/tabs/FrontendSDKTabs"
 import TabItem from '@theme/TabItem';
+import {Question, Answer}from "/src/components/question"
+import RRDVersionSubTabs from "/src/components/tabs/RRDVersionSubTabs"
 
 # Embed Sign In / Up form in a page
 
@@ -46,10 +48,116 @@ If you navigate to `/auth`, you should not see the widget anymore.
 
 ## Step 2: Render the component yourself
 
-For example if you would like to show the login form in our own component which renders custom UI around it, and is shown only of the user is logged in, then we can:
+For example if you would like to show the login form in our own component which renders custom UI around it, and is shown only if the user is logged in, then we can:
 
 <FrontendSDKTabs>
 <TabItem value="reactjs">
+<Question
+    question="Do you use react-router-dom?">
+<Answer title="Yes">
+
+<RRDVersionSubTabs>
+
+<TabItem value="v6">
+
+```tsx
+import React from "react";
+// highlight-start
+import { SignInAndUp } from 'supertokens-auth-react/recipe/thirdpartyemailpassword/prebuiltui';
+import Session from "supertokens-auth-react/recipe/session";
+// highlight-end
+// @ts-ignore
+import Header from "./header";
+// @ts-ignore
+import Footer from "./footer";
+import { useNavigate } from "react-router-dom";
+
+function MyLandingPage() {
+    let sessionContext = Session.useSessionContext();
+    const navigate = useNavigate();
+    if (sessionContext.loading) {
+        return null;
+    }
+    if (sessionContext.doesSessionExist) {
+        // We wrap this with <SessionAuth /> so that
+        // all claims are validated before showing the logged in UI.
+        // For example, if email verification is switched on, and
+        // the user's email is not verified, then <SessionAuth />
+        // will redirect to the email verification page.
+        return (
+            <Session.SessionAuth>
+                <Header />
+                    You are logged in!
+                <Footer />
+            </Session.SessionAuth>
+        )
+    } else {
+        return (
+            <div>
+                <Header />
+                // highlight-next-line
+                <SignInAndUp navigate={navigate} />
+                <Footer />
+            </div>
+        )
+    }
+}
+```
+
+</TabItem>
+
+<TabItem value="v5">
+
+```tsx
+import React from "react";
+// highlight-start
+import { SignInAndUp } from 'supertokens-auth-react/recipe/thirdpartyemailpassword/prebuiltui';
+import Session from "supertokens-auth-react/recipe/session";
+// highlight-end
+// @ts-ignore
+import Header from "./header";
+// @ts-ignore
+import Footer from "./footer";
+import { useHistory } from "react-router-dom";
+
+function MyLandingPage() {
+    let sessionContext = Session.useSessionContext();
+    const history = useHistory();
+    if (sessionContext.loading) {
+        return null;
+    }
+    if (sessionContext.doesSessionExist) {
+        // We wrap this with <SessionAuth /> so that
+        // all claims are validated before showing the logged in UI.
+        // For example, if email verification is switched on, and
+        // the user's email is not verified, then <SessionAuth />
+        // will redirect to the email verification page.
+        return (
+            <Session.SessionAuth>
+                <Header />
+                    You are logged in!
+                <Footer />
+            </Session.SessionAuth>
+        )
+    } else {
+        return (
+            <div>
+                <Header />
+                // highlight-next-line
+                <SignInAndUp navigate={history} />
+                <Footer />
+            </div>
+        )
+    }
+}
+```
+
+</TabItem>
+
+</RRDVersionSubTabs>
+
+</Answer>
+<Answer title="No">
 
 ```tsx
 import React from "react";
@@ -92,6 +200,8 @@ function MyLandingPage() {
     }
 }
 ```
+</Answer>
+</Question>
 </TabItem>
 </FrontendSDKTabs>
 
@@ -130,4 +240,46 @@ SuperTokens.init({
 })
 ```
 </TabItem>
-</FrontendSDKTabs>
\ No newline at end of file
+</FrontendSDKTabs>
+
+## Optional: Prevent redirection after SignIn / Up
+
+Upon successful login, SuperTokens redirects the user to the return value of `getRedirectionURL` provided in the recipe config. By default or when returning `undefined` from `getRedirectionURL`, the user is redirected to the `/` route. If you wish to completely prevent redirection, return `null` instead.
+
+<FrontendSDKTabs>
+<TabItem value="reactjs">
+
+```tsx
+import SuperTokens from "supertokens-auth-react";
+import ThirdPartyEmailPassword from "supertokens-auth-react/recipe/thirdpartyemailpassword";
+
+SuperTokens.init({
+    appInfo: {
+        apiDomain: "...",
+        appName: "...",
+        websiteDomain: "..."
+    },
+    recipeList: [
+        ThirdPartyEmailPassword.init({
+            //highlight-start
+            getRedirectionURL: async (context) => {
+                // Prevent redirection after successful sign in/up by returning null.
+                if (context.action === "SUCCESS") {
+                    return null;
+                };
+            },
+            //highlight-end
+        })
+    ],
+})
+```
+</TabItem>
+</FrontendSDKTabs>
+
+:::note
+To avoid redirection for failed claims, such as Email Verification, reach out to us on [Discord](https://supertokens.com/discord) for assistance.
+:::
+
+## Optional: Rendering Auth components together in a popup and page
+
+You may choose to display the Auth UI in a full page and in a popup in the same app, utilising the same SuperTokens config. For the full-page Auth UI, redirection after a successful login is preferred, whereas in the popup, it is not. In this scenario, you have the option to check either the current URL or the `userContext` object in `getRedirectionURL` to decide whether to return null or not.
\ No newline at end of file
diff --git a/v2/thirdpartypasswordless/advanced-customizations/frontend-hooks/redirection-callback.mdx b/v2/thirdpartypasswordless/advanced-customizations/frontend-hooks/redirection-callback.mdx
index 9741393bb..3bf645ead 100644
--- a/v2/thirdpartypasswordless/advanced-customizations/frontend-hooks/redirection-callback.mdx
+++ b/v2/thirdpartypasswordless/advanced-customizations/frontend-hooks/redirection-callback.mdx
@@ -9,7 +9,7 @@ import TabItem from '@theme/TabItem';
 
 # Redirection Callback Hook
 
-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.
+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>
 <TabItem value="reactjs">
diff --git a/v2/thirdpartypasswordless/common-customizations/embed-sign-in-up-form.mdx b/v2/thirdpartypasswordless/common-customizations/embed-sign-in-up-form.mdx
index e1363ea9a..61796b5f0 100644
--- a/v2/thirdpartypasswordless/common-customizations/embed-sign-in-up-form.mdx
+++ b/v2/thirdpartypasswordless/common-customizations/embed-sign-in-up-form.mdx
@@ -6,6 +6,8 @@ hide_title: true
 
 import FrontendSDKTabs from "/src/components/tabs/FrontendSDKTabs"
 import TabItem from '@theme/TabItem';
+import {Question, Answer}from "/src/components/question"
+import RRDVersionSubTabs from "/src/components/tabs/RRDVersionSubTabs"
 
 # Embed Sign In / Up form in a page 
 
@@ -48,10 +50,117 @@ If you navigate to `/auth`, you should not see the widget anymore.
 
 ## Step 2: Render the component yourself
 
-For example if you would like to show the login form in our own component which renders custom UI around it, and is shown only of the user is logged in, then we can:
+For example if you would like to show the login form in our own component which renders custom UI around it, and is shown only if the user is logged in, then we can:
 
 <FrontendSDKTabs>
 <TabItem value="reactjs">
+<Question
+    question="Do you use react-router-dom?">
+<Answer title="Yes">
+
+<RRDVersionSubTabs>
+
+<TabItem value="v6">
+
+```tsx
+import React from "react";
+// highlight-start
+import { SignInAndUp } from 'supertokens-auth-react/recipe/thirdpartypasswordless/prebuiltui';
+import Session from "supertokens-auth-react/recipe/session";
+// highlight-end
+// @ts-ignore
+import Header from "./header";
+// @ts-ignore
+import Footer from "./footer";
+import { useNavigate } from "react-router-dom";
+
+function MyLandingPage() {
+    let sessionContext = Session.useSessionContext();
+    const navigate = useNavigate();
+    if (sessionContext.loading) {
+        return null;
+    }
+    if (sessionContext.doesSessionExist) {
+        // We wrap this with <SessionAuth /> so that
+        // all claims are validated before showing the logged in UI.
+        // For example, if email verification is switched on, and
+        // the user's email is not verified, then <SessionAuth />
+        // will redirect to the email verification page.
+        return (
+            <Session.SessionAuth>
+                <Header />
+                    You are logged in!
+                <Footer />
+            </Session.SessionAuth>
+        )
+    } else {
+        return (
+            <div>
+                <Header />
+                // highlight-next-line
+                <SignInAndUp navigate={navigate} />
+                <Footer />
+            </div>
+        )
+    }
+}
+```
+
+</TabItem>
+
+<TabItem value="v5">
+
+```tsx
+import React from "react";
+// highlight-start
+import { SignInAndUp } from 'supertokens-auth-react/recipe/thirdpartypasswordless/prebuiltui';
+import Session from "supertokens-auth-react/recipe/session";
+// highlight-end
+// @ts-ignore
+import Header from "./header";
+// @ts-ignore
+import Footer from "./footer";
+import { useHistory } from "react-router-dom";
+
+function MyLandingPage() {
+    let sessionContext = Session.useSessionContext();
+    const history = useHistory();
+    if (sessionContext.loading) {
+        return null;
+    }
+    if (sessionContext.doesSessionExist) {
+        // We wrap this with <SessionAuth /> so that
+        // all claims are validated before showing the logged in UI.
+        // For example, if email verification is switched on, and
+        // the user's email is not verified, then <SessionAuth />
+        // will redirect to the email verification page.
+        return (
+            <Session.SessionAuth>
+                <Header />
+                    You are logged in!
+                <Footer />
+            </Session.SessionAuth>
+        )
+    } else {
+        return (
+            <div>
+                <Header />
+                // highlight-next-line
+                <SignInAndUp navigate={history} />
+                <Footer />
+            </div>
+        )
+    }
+}
+```
+
+</TabItem>
+
+</RRDVersionSubTabs>
+
+</Answer>
+<Answer title="No">
+
 
 ```tsx
 import React from "react";
@@ -94,6 +203,10 @@ function MyLandingPage() {
     }
 }
 ```
+
+</Answer>
+</Question>
+
 </TabItem>
 </FrontendSDKTabs>
 
@@ -132,4 +245,46 @@ SuperTokens.init({
 })
 ```
 </TabItem>
-</FrontendSDKTabs>
\ No newline at end of file
+</FrontendSDKTabs>
+
+## Optional: Prevent redirection after SignIn / Up
+
+Upon successful login, SuperTokens redirects the user to the return value of `getRedirectionURL` provided in the recipe config. By default or when returning `undefined` from `getRedirectionURL`, the user is redirected to the `/` route. If you wish to completely prevent redirection, return `null` instead.
+
+<FrontendSDKTabs>
+<TabItem value="reactjs">
+
+```tsx
+import SuperTokens from "supertokens-auth-react";
+import ThirdPartyPasswordless from "supertokens-auth-react/recipe/thirdpartypasswordless";
+
+SuperTokens.init({
+    appInfo: {
+        apiDomain: "...",
+        appName: "...",
+        websiteDomain: "..."
+    },
+    recipeList: [
+        ThirdPartyPasswordless.init({
+            //highlight-start
+            getRedirectionURL: async (context) => {
+                // Prevent redirection after successful sign in/up by returning null.
+                if (context.action === "SUCCESS") {
+                    return null;
+                };
+            },
+            //highlight-end
+        })
+    ],
+})
+```
+</TabItem>
+</FrontendSDKTabs>
+
+:::note
+To avoid redirection for failed claims, such as Email Verification, reach out to us on [Discord](https://supertokens.com/discord) for assistance.
+:::
+
+## Optional: Rendering Auth components together in a popup and page
+
+You may choose to display the Auth UI in a full page and in a popup in the same app, utilising the same SuperTokens config. For the full-page Auth UI, redirection after a successful login is preferred, whereas in the popup, it is not. In this scenario, you have the option to check either the current URL or the `userContext` object in `getRedirectionURL` to decide whether to return null or not.
\ No newline at end of file
diff --git a/v2/thirdpartypasswordless/pre-built-ui/further-reading/passwordless-login.mdx b/v2/thirdpartypasswordless/pre-built-ui/further-reading/passwordless-login.mdx
index fc7a955c4..c69b1248f 100644
--- a/v2/thirdpartypasswordless/pre-built-ui/further-reading/passwordless-login.mdx
+++ b/v2/thirdpartypasswordless/pre-built-ui/further-reading/passwordless-login.mdx
@@ -91,11 +91,7 @@ Entering an incorrect OTP too many times results in the user being navigated bac
 
 ### Logging in via OTP and Magic link simultaneously 
 
-There is a edge case wherein the end user get's both an OTP and a magic link, and whilst viewing the enter OTP screen, then also click on the magic link separately. The magic link click will open a new tab and will consume the link to log the user in. 
-
-Since the user is logged in, the enter OTP screen will change to show the UI as shown below
-
-<img src="/img/otp-magic-link-same-time.png" alt="Magic link and OTP at the same time" />
+There is a edge case wherein the end user get's both an OTP and a magic link, and whilst viewing the enter OTP screen, then also click on the magic link separately. The magic link click will open a new tab and will consume the link to log the user in. The enter OTP screen will continue to show the enter OTP UI until user refreshes the page.
 
 ## Default email and SMS template
 

From 514990f686f65f7eb4c237e549952c79563617e3 Mon Sep 17 00:00:00 2001
From: Ankit Tiwari <ankucodes@gmail.com>
Date: Fri, 8 Dec 2023 14:57:59 +0530
Subject: [PATCH 2/7] Update
 v2/emailpassword/common-customizations/embed-sign-in-up-form.mdx

Co-authored-by: Rishabh Poddar <rishabh.poddar@gmail.com>
---
 .../common-customizations/embed-sign-in-up-form.mdx             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/v2/emailpassword/common-customizations/embed-sign-in-up-form.mdx b/v2/emailpassword/common-customizations/embed-sign-in-up-form.mdx
index 68eb87968..122b0e864 100644
--- a/v2/emailpassword/common-customizations/embed-sign-in-up-form.mdx
+++ b/v2/emailpassword/common-customizations/embed-sign-in-up-form.mdx
@@ -283,4 +283,4 @@ To avoid redirection for failed claims, such as Email Verification, reach out to
 
 ## Optional: Rendering Auth components together in a popup and page
 
-You may choose to display the Auth UI in a full page and in a popup in the same app, utilising the same SuperTokens config. For the full-page Auth UI, redirection after a successful login is preferred, whereas in the popup, it is not. In this scenario, you have the option to check either the current URL or the `userContext` object in `getRedirectionURL` to decide whether to return null or not.
+You may choose to display the Auth UI in a full page and in a popup in the same app. For the full-page Auth UI, redirection after a successful login is preferred, whereas in the popup, it is not. In this scenario, you have the option to check either the current URL or the `userContext` object in `getRedirectionURL` to decide whether to return null or not.

From 5b65c1a4636413da9753047ee719acc369cfcbfe Mon Sep 17 00:00:00 2001
From: Ankit Tiwari <ankucodes@gmail.com>
Date: Fri, 8 Dec 2023 14:58:28 +0530
Subject: [PATCH 3/7] Update
 v2/passwordless/pre-built-ui/further-reading/passwordless-login.mdx

Co-authored-by: Rishabh Poddar <rishabh.poddar@gmail.com>
---
 .../pre-built-ui/further-reading/passwordless-login.mdx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/v2/passwordless/pre-built-ui/further-reading/passwordless-login.mdx b/v2/passwordless/pre-built-ui/further-reading/passwordless-login.mdx
index 3c5fbf698..42405ec3a 100644
--- a/v2/passwordless/pre-built-ui/further-reading/passwordless-login.mdx
+++ b/v2/passwordless/pre-built-ui/further-reading/passwordless-login.mdx
@@ -91,7 +91,7 @@ Entering an incorrect OTP too many times results in the user being navigated bac
 
 ### Logging in via OTP and Magic link simultaneously 
 
-There is a edge case wherein the end user get's both an OTP and a magic link, and whilst viewing the enter OTP screen, then also click on the magic link separately. The magic link click will open a new tab and will consume the link to log the user in. The enter OTP screen will continue to show the enter OTP UI until user refreshes the page.
+There is a edge case wherein the end user get's both an OTP and a magic link, and whilst viewing the enter OTP screen, then also click on the magic link separately. The magic link click will open a new tab and will consume the link to log the user in. The enter OTP screen will continue to show the enter OTP UI until user refreshes the page, after which, it will redirect to the post login screen.
 
 ## Default email and SMS template
 

From 342f3187d179da68ac4e5caa863ee886ab2a3bde Mon Sep 17 00:00:00 2001
From: Ankit Tiwari <ankucodes@gmail.com>
Date: Fri, 8 Dec 2023 15:32:41 +0530
Subject: [PATCH 4/7] PR changes

---
 .../embed-sign-in-up-form.mdx                 | 35 ++++++++++++------
 .../embed-sign-in-up-form.mdx                 | 37 +++++++++++++------
 .../embed-sign-in-up-form.mdx                 | 37 +++++++++++++------
 .../embed-sign-in-up-form.mdx                 | 37 +++++++++++++------
 .../embed-sign-in-up-form.mdx                 | 37 +++++++++++++------
 .../further-reading/passwordless-login.mdx    |  2 +-
 6 files changed, 125 insertions(+), 60 deletions(-)

diff --git a/v2/emailpassword/common-customizations/embed-sign-in-up-form.mdx b/v2/emailpassword/common-customizations/embed-sign-in-up-form.mdx
index 122b0e864..de6320d46 100644
--- a/v2/emailpassword/common-customizations/embed-sign-in-up-form.mdx
+++ b/v2/emailpassword/common-customizations/embed-sign-in-up-form.mdx
@@ -2,20 +2,29 @@
 id: embed-sign-in-up-form
 title: Embed Sign In / Up form in a page
 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 TabItem from '@theme/TabItem';
 import {Question, Answer}from "/src/components/question"
 import RRDVersionSubTabs from "/src/components/tabs/RRDVersionSubTabs"
 
 # Embed Sign In / Up form in a page 
 
+<PreBuiltOrCustomUISwitcher>
+
+<PreBuiltUIContent>
+This guide is not applicable for Pre built UI.
+</PreBuiltUIContent>
+
+<CustomUIContent>
+
 ## Step 1: Disable default implementation
 
 This will prevent SuperTokens from displaying the default login UI in the `/auth` page.
 
-<FrontendSDKTabs>
+<FrontendPreBuiltUITabs>
 <TabItem value="reactjs">
 
 ```tsx
@@ -42,7 +51,7 @@ SuperTokens.init({
 });
 ```
 </TabItem>
-</FrontendSDKTabs>
+</FrontendPreBuiltUITabs>
 
 If you navigate to `/auth`, you should not see the widget anymore.
 
@@ -50,7 +59,7 @@ If you navigate to `/auth`, you should not see the widget anymore.
 
 For example if you would like to show the login form in our own component which renders custom UI around it, and is shown only if the user is logged in, then we can:
 
-<FrontendSDKTabs>
+<FrontendPreBuiltUITabs>
 <TabItem value="reactjs">
 <Question
     question="Do you use react-router-dom?">
@@ -206,7 +215,7 @@ function MyLandingPage() {
 </Question>
 
 </TabItem>
-</FrontendSDKTabs>
+</FrontendPreBuiltUITabs>
 
 ## Step 3: Changing the website path for the login UI
 
@@ -214,7 +223,7 @@ The default path for this is component is `/{websiteBasePath}/`.
 
 If you are displaying this at some custom path, then you need add additional config on frontend:
 
-<FrontendSDKTabs>
+<FrontendPreBuiltUITabs>
 <TabItem value="reactjs">
 
 ```tsx
@@ -241,13 +250,13 @@ SuperTokens.init({
 })
 ```
 </TabItem>
-</FrontendSDKTabs>
+</FrontendPreBuiltUITabs>
 
 ## Optional: Prevent redirection after SignIn / Up
 
-Upon successful login, SuperTokens redirects the user to the return value of `getRedirectionURL` provided in the recipe config. By default or when returning `undefined` from `getRedirectionURL`, the user is redirected to the `/` route. If you wish to completely prevent redirection, return `null` instead.
+Upon successful login, SuperTokens redirects the user to the return value of `getRedirectionURL` provided in the recipe config. By default or when returning `undefined` from `getRedirectionURL`, the user is redirected to the `/` route. If you wish to completely prevent redirection, return `null` instead. Typically, this is used if you want to embed the sign in / up component in a popup and want to just dismiss the popup post login.
 
-<FrontendSDKTabs>
+<FrontendPreBuiltUITabs>
 <TabItem value="reactjs">
 
 ```tsx
@@ -275,7 +284,7 @@ SuperTokens.init({
 })
 ```
 </TabItem>
-</FrontendSDKTabs>
+</FrontendPreBuiltUITabs>
 
 :::note
 To avoid redirection for failed claims, such as Email Verification, reach out to us on [Discord](https://supertokens.com/discord) for assistance.
@@ -284,3 +293,7 @@ To avoid redirection for failed claims, such as Email Verification, reach out to
 ## Optional: Rendering Auth components together in a popup and page
 
 You may choose to display the Auth UI in a full page and in a popup in the same app. For the full-page Auth UI, redirection after a successful login is preferred, whereas in the popup, it is not. In this scenario, you have the option to check either the current URL or the `userContext` object in `getRedirectionURL` to decide whether to return null or not.
+
+</CustomUIContent>
+
+</PreBuiltOrCustomUISwitcher>
\ No newline at end of file
diff --git a/v2/passwordless/common-customizations/embed-sign-in-up-form.mdx b/v2/passwordless/common-customizations/embed-sign-in-up-form.mdx
index f97dc8602..62c92332b 100644
--- a/v2/passwordless/common-customizations/embed-sign-in-up-form.mdx
+++ b/v2/passwordless/common-customizations/embed-sign-in-up-form.mdx
@@ -2,20 +2,29 @@
 id: embed-sign-in-and-up-form
 title: Embed Sign In / Up form in a page
 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 TabItem from '@theme/TabItem';
 import {Question, Answer}from "/src/components/question"
 import RRDVersionSubTabs from "/src/components/tabs/RRDVersionSubTabs"
 
 # Embed Sign In / Up form in a page 
 
+<PreBuiltOrCustomUISwitcher>
+
+<PreBuiltUIContent>
+This guide is not applicable for Pre built UI.
+</PreBuiltUIContent>
+
+<CustomUIContent>
+
 ## Step 1: Disable default implementation
 
 This will prevent SuperTokens from displaying the default login UI in the `/auth` page.
 
-<FrontendSDKTabs>
+<FrontendPreBuiltUITabs>
 <TabItem value="reactjs">
 
 ```tsx
@@ -46,13 +55,13 @@ SuperTokens.init({
 If you navigate to `/auth`, you should not see the widget anymore.
 
 </TabItem>
-</FrontendSDKTabs>
+</FrontendPreBuiltUITabs>
 
 ## Step 2: Render the component yourself
 
 For example if you would like to show the login form in our own component which renders custom UI around it, and is shown only if the user is logged in, then we can:
 
-<FrontendSDKTabs>
+<FrontendPreBuiltUITabs>
 <TabItem value="reactjs">
 <Question
     question="Do you use react-router-dom?">
@@ -207,7 +216,7 @@ function MyLandingPage() {
 </Answer>
 </Question>
 </TabItem>
-</FrontendSDKTabs>
+</FrontendPreBuiltUITabs>
 
 ## Step 3: Changing the website path for the login UI
 
@@ -215,7 +224,7 @@ The default path for this is component is `/{websiteBasePath}/`.
 
 If you are displaying this at some custom path, then you need add additional config on frontend:
 
-<FrontendSDKTabs>
+<FrontendPreBuiltUITabs>
 <TabItem value="reactjs">
 
 ```tsx
@@ -244,13 +253,13 @@ SuperTokens.init({
 })
 ```
 </TabItem>
-</FrontendSDKTabs>
+</FrontendPreBuiltUITabs>
 
 ## Optional: Prevent redirection after SignIn / Up
 
-Upon successful login, SuperTokens redirects the user to the return value of `getRedirectionURL` provided in the recipe config. By default or when returning `undefined` from `getRedirectionURL`, the user is redirected to the `/` route. If you wish to completely prevent redirection, return `null` instead.
+Upon successful login, SuperTokens redirects the user to the return value of `getRedirectionURL` provided in the recipe config. By default or when returning `undefined` from `getRedirectionURL`, the user is redirected to the `/` route. If you wish to completely prevent redirection, return `null` instead. Typically, this is used if you want to embed the sign in / up component in a popup and want to just dismiss the popup post login.
 
-<FrontendSDKTabs>
+<FrontendPreBuiltUITabs>
 <TabItem value="reactjs">
 
 ```tsx
@@ -278,7 +287,7 @@ SuperTokens.init({
 })
 ```
 </TabItem>
-</FrontendSDKTabs>
+</FrontendPreBuiltUITabs>
 
 :::note
 To avoid redirection for failed claims, such as Email Verification, reach out to us on [Discord](https://supertokens.com/discord) for assistance.
@@ -286,4 +295,8 @@ To avoid redirection for failed claims, such as Email Verification, reach out to
 
 ## Optional: Rendering Auth components together in a popup and page
 
-You may choose to display the Auth UI in a full page and in a popup in the same app, utilising the same SuperTokens config. For the full-page Auth UI, redirection after a successful login is preferred, whereas in the popup, it is not. In this scenario, you have the option to check either the current URL or the `userContext` object in `getRedirectionURL` to decide whether to return null or not.
\ No newline at end of file
+You may choose to display the Auth UI in a full page and in a popup in the same app. For the full-page Auth UI, redirection after a successful login is preferred, whereas in the popup, it is not. In this scenario, you have the option to check either the current URL or the `userContext` object in `getRedirectionURL` to decide whether to return null or not.
+
+</CustomUIContent>
+
+</PreBuiltOrCustomUISwitcher>
\ No newline at end of file
diff --git a/v2/thirdparty/common-customizations/embed-sign-in-up-form.mdx b/v2/thirdparty/common-customizations/embed-sign-in-up-form.mdx
index df8f501b1..6b3482d43 100644
--- a/v2/thirdparty/common-customizations/embed-sign-in-up-form.mdx
+++ b/v2/thirdparty/common-customizations/embed-sign-in-up-form.mdx
@@ -2,20 +2,29 @@
 id: embed-sign-in-up-form
 title: Embed Sign In / Up form in a page
 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 TabItem from '@theme/TabItem';
 import {Question, Answer}from "/src/components/question"
 import RRDVersionSubTabs from "/src/components/tabs/RRDVersionSubTabs"
 
 # Embed Sign In / Up form in a page 
 
+<PreBuiltOrCustomUISwitcher>
+
+<PreBuiltUIContent>
+This guide is not applicable for Pre built UI.
+</PreBuiltUIContent>
+
+<CustomUIContent>
+
 ## Step 1: Disable default implementation 
 
 This will prevent SuperTokens from displaying the default login UI in the `/auth` page.
 
-<FrontendSDKTabs>
+<FrontendPreBuiltUITabs>
 <TabItem value="reactjs">
 
 ```tsx
@@ -42,7 +51,7 @@ SuperTokens.init({
 });
 ```
 </TabItem>
-</FrontendSDKTabs>
+</FrontendPreBuiltUITabs>
 
 If you navigate to `/auth`, you should not see the widget anymore.
 
@@ -50,7 +59,7 @@ If you navigate to `/auth`, you should not see the widget anymore.
 
 For example if you would like to show the login form in our own component which renders custom UI around it, and is shown only if the user is logged in, then we can:
 
-<FrontendSDKTabs>
+<FrontendPreBuiltUITabs>
 <TabItem value="reactjs">
 <Question
     question="Do you use react-router-dom?">
@@ -203,7 +212,7 @@ function MyLandingPage() {
 </Answer>
 </Question>
 </TabItem>
-</FrontendSDKTabs>
+</FrontendPreBuiltUITabs>
 
 ## Step 3: Changing the website path for the login UI
 
@@ -211,7 +220,7 @@ The default path for this is component is `/{websiteBasePath}/`.
 
 If you are displaying this at some custom path, then you need add additional config on frontend:
 
-<FrontendSDKTabs>
+<FrontendPreBuiltUITabs>
 <TabItem value="reactjs">
 
 ```tsx
@@ -238,13 +247,13 @@ SuperTokens.init({
 })
 ```
 </TabItem>
-</FrontendSDKTabs>
+</FrontendPreBuiltUITabs>
 
 ## Optional: Prevent redirection after SignIn / Up
 
-Upon successful login, SuperTokens redirects the user to the return value of `getRedirectionURL` provided in the recipe config. By default or when returning `undefined` from `getRedirectionURL`, the user is redirected to the `/` route. If you wish to completely prevent redirection, return `null` instead.
+Upon successful login, SuperTokens redirects the user to the return value of `getRedirectionURL` provided in the recipe config. By default or when returning `undefined` from `getRedirectionURL`, the user is redirected to the `/` route. If you wish to completely prevent redirection, return `null` instead. Typically, this is used if you want to embed the sign in / up component in a popup and want to just dismiss the popup post login.
 
-<FrontendSDKTabs>
+<FrontendPreBuiltUITabs>
 <TabItem value="reactjs">
 
 ```tsx
@@ -272,7 +281,7 @@ SuperTokens.init({
 })
 ```
 </TabItem>
-</FrontendSDKTabs>
+</FrontendPreBuiltUITabs>
 
 :::note
 To avoid redirection for failed claims, such as Email Verification, reach out to us on [Discord](https://supertokens.com/discord) for assistance.
@@ -280,4 +289,8 @@ To avoid redirection for failed claims, such as Email Verification, reach out to
 
 ## Optional: Rendering Auth components together in a popup and page
 
-You may choose to display the Auth UI in a full page and in a popup in the same app, utilising the same SuperTokens config. For the full-page Auth UI, redirection after a successful login is preferred, whereas in the popup, it is not. In this scenario, you have the option to check either the current URL or the `userContext` object in `getRedirectionURL` to decide whether to return null or not.
\ No newline at end of file
+You may choose to display the Auth UI in a full page and in a popup in the same app. For the full-page Auth UI, redirection after a successful login is preferred, whereas in the popup, it is not. In this scenario, you have the option to check either the current URL or the `userContext` object in `getRedirectionURL` to decide whether to return null or not.
+
+</CustomUIContent>
+
+</PreBuiltOrCustomUISwitcher>
\ No newline at end of file
diff --git a/v2/thirdpartyemailpassword/common-customizations/embed-sign-in-up-form.mdx b/v2/thirdpartyemailpassword/common-customizations/embed-sign-in-up-form.mdx
index 586c35af5..5d7383c98 100644
--- a/v2/thirdpartyemailpassword/common-customizations/embed-sign-in-up-form.mdx
+++ b/v2/thirdpartyemailpassword/common-customizations/embed-sign-in-up-form.mdx
@@ -2,20 +2,29 @@
 id: embed-sign-in-up-form
 title: Embed Sign In / Up form in a page
 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 TabItem from '@theme/TabItem';
 import {Question, Answer}from "/src/components/question"
 import RRDVersionSubTabs from "/src/components/tabs/RRDVersionSubTabs"
 
 # Embed Sign In / Up form in a page
 
+<PreBuiltOrCustomUISwitcher>
+
+<PreBuiltUIContent>
+This guide is not applicable for Pre built UI.
+</PreBuiltUIContent>
+
+<CustomUIContent>
+
 ## Step 1: Disable default implementation
 
 This will prevent SuperTokens from displaying the default login UI in the `/auth` page.
 
-<FrontendSDKTabs>
+<FrontendPreBuiltUITabs>
 <TabItem value="reactjs">
 
 ```tsx
@@ -42,7 +51,7 @@ SuperTokens.init({
 });
 ```
 </TabItem>
-</FrontendSDKTabs>
+</FrontendPreBuiltUITabs>
 
 If you navigate to `/auth`, you should not see the widget anymore.
 
@@ -50,7 +59,7 @@ If you navigate to `/auth`, you should not see the widget anymore.
 
 For example if you would like to show the login form in our own component which renders custom UI around it, and is shown only if the user is logged in, then we can:
 
-<FrontendSDKTabs>
+<FrontendPreBuiltUITabs>
 <TabItem value="reactjs">
 <Question
     question="Do you use react-router-dom?">
@@ -203,7 +212,7 @@ function MyLandingPage() {
 </Answer>
 </Question>
 </TabItem>
-</FrontendSDKTabs>
+</FrontendPreBuiltUITabs>
 
 ## Step 3: Changing the website path for the login UI
 
@@ -211,7 +220,7 @@ The default path for this is component is `/{websiteBasePath}/`.
 
 If you are displaying this at some custom path, then you need add additional config on frontend:
 
-<FrontendSDKTabs>
+<FrontendPreBuiltUITabs>
 <TabItem value="reactjs">
 
 ```tsx
@@ -240,13 +249,13 @@ SuperTokens.init({
 })
 ```
 </TabItem>
-</FrontendSDKTabs>
+</FrontendPreBuiltUITabs>
 
 ## Optional: Prevent redirection after SignIn / Up
 
-Upon successful login, SuperTokens redirects the user to the return value of `getRedirectionURL` provided in the recipe config. By default or when returning `undefined` from `getRedirectionURL`, the user is redirected to the `/` route. If you wish to completely prevent redirection, return `null` instead.
+Upon successful login, SuperTokens redirects the user to the return value of `getRedirectionURL` provided in the recipe config. By default or when returning `undefined` from `getRedirectionURL`, the user is redirected to the `/` route. If you wish to completely prevent redirection, return `null` instead. Typically, this is used if you want to embed the sign in / up component in a popup and want to just dismiss the popup post login.
 
-<FrontendSDKTabs>
+<FrontendPreBuiltUITabs>
 <TabItem value="reactjs">
 
 ```tsx
@@ -274,7 +283,7 @@ SuperTokens.init({
 })
 ```
 </TabItem>
-</FrontendSDKTabs>
+</FrontendPreBuiltUITabs>
 
 :::note
 To avoid redirection for failed claims, such as Email Verification, reach out to us on [Discord](https://supertokens.com/discord) for assistance.
@@ -282,4 +291,8 @@ To avoid redirection for failed claims, such as Email Verification, reach out to
 
 ## Optional: Rendering Auth components together in a popup and page
 
-You may choose to display the Auth UI in a full page and in a popup in the same app, utilising the same SuperTokens config. For the full-page Auth UI, redirection after a successful login is preferred, whereas in the popup, it is not. In this scenario, you have the option to check either the current URL or the `userContext` object in `getRedirectionURL` to decide whether to return null or not.
\ No newline at end of file
+You may choose to display the Auth UI in a full page and in a popup in the same app. For the full-page Auth UI, redirection after a successful login is preferred, whereas in the popup, it is not. In this scenario, you have the option to check either the current URL or the `userContext` object in `getRedirectionURL` to decide whether to return null or not.
+
+</CustomUIContent>
+
+</PreBuiltOrCustomUISwitcher>
\ No newline at end of file
diff --git a/v2/thirdpartypasswordless/common-customizations/embed-sign-in-up-form.mdx b/v2/thirdpartypasswordless/common-customizations/embed-sign-in-up-form.mdx
index 61796b5f0..f849616d0 100644
--- a/v2/thirdpartypasswordless/common-customizations/embed-sign-in-up-form.mdx
+++ b/v2/thirdpartypasswordless/common-customizations/embed-sign-in-up-form.mdx
@@ -2,20 +2,29 @@
 id: embed-sign-in-and-up-form
 title: Embed Sign In / Up form in a page
 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 TabItem from '@theme/TabItem';
 import {Question, Answer}from "/src/components/question"
 import RRDVersionSubTabs from "/src/components/tabs/RRDVersionSubTabs"
 
 # Embed Sign In / Up form in a page 
 
+<PreBuiltOrCustomUISwitcher>
+
+<PreBuiltUIContent>
+This guide is not applicable for Pre built UI.
+</PreBuiltUIContent>
+
+<CustomUIContent>
+
 ## Step 1: Disable default implementation
 
 This will prevent SuperTokens from displaying the default login UI in the `/auth` page.
 
-<FrontendSDKTabs>
+<FrontendPreBuiltUITabs>
 <TabItem value="reactjs">
 
 ```tsx
@@ -46,13 +55,13 @@ SuperTokens.init({
 If you navigate to `/auth`, you should not see the widget anymore.
 
 </TabItem>
-</FrontendSDKTabs>
+</FrontendPreBuiltUITabs>
 
 ## Step 2: Render the component yourself
 
 For example if you would like to show the login form in our own component which renders custom UI around it, and is shown only if the user is logged in, then we can:
 
-<FrontendSDKTabs>
+<FrontendPreBuiltUITabs>
 <TabItem value="reactjs">
 <Question
     question="Do you use react-router-dom?">
@@ -208,7 +217,7 @@ function MyLandingPage() {
 </Question>
 
 </TabItem>
-</FrontendSDKTabs>
+</FrontendPreBuiltUITabs>
 
 ## Step 3: Changing the website path for the login UI
 
@@ -216,7 +225,7 @@ The default path for this is component is `/{websiteBasePath}/`.
 
 If you are displaying this at some custom path, then you need add additional config on frontend:
 
-<FrontendSDKTabs>
+<FrontendPreBuiltUITabs>
 <TabItem value="reactjs">
 
 ```tsx
@@ -245,13 +254,13 @@ SuperTokens.init({
 })
 ```
 </TabItem>
-</FrontendSDKTabs>
+</FrontendPreBuiltUITabs>
 
 ## Optional: Prevent redirection after SignIn / Up
 
-Upon successful login, SuperTokens redirects the user to the return value of `getRedirectionURL` provided in the recipe config. By default or when returning `undefined` from `getRedirectionURL`, the user is redirected to the `/` route. If you wish to completely prevent redirection, return `null` instead.
+Upon successful login, SuperTokens redirects the user to the return value of `getRedirectionURL` provided in the recipe config. By default or when returning `undefined` from `getRedirectionURL`, the user is redirected to the `/` route. If you wish to completely prevent redirection, return `null` instead. Typically, this is used if you want to embed the sign in / up component in a popup and want to just dismiss the popup post login.
 
-<FrontendSDKTabs>
+<FrontendPreBuiltUITabs>
 <TabItem value="reactjs">
 
 ```tsx
@@ -279,7 +288,7 @@ SuperTokens.init({
 })
 ```
 </TabItem>
-</FrontendSDKTabs>
+</FrontendPreBuiltUITabs>
 
 :::note
 To avoid redirection for failed claims, such as Email Verification, reach out to us on [Discord](https://supertokens.com/discord) for assistance.
@@ -287,4 +296,8 @@ To avoid redirection for failed claims, such as Email Verification, reach out to
 
 ## Optional: Rendering Auth components together in a popup and page
 
-You may choose to display the Auth UI in a full page and in a popup in the same app, utilising the same SuperTokens config. For the full-page Auth UI, redirection after a successful login is preferred, whereas in the popup, it is not. In this scenario, you have the option to check either the current URL or the `userContext` object in `getRedirectionURL` to decide whether to return null or not.
\ No newline at end of file
+You may choose to display the Auth UI in a full page and in a popup in the same app. For the full-page Auth UI, redirection after a successful login is preferred, whereas in the popup, it is not. In this scenario, you have the option to check either the current URL or the `userContext` object in `getRedirectionURL` to decide whether to return null or not.
+
+</CustomUIContent>
+
+</PreBuiltOrCustomUISwitcher>
\ No newline at end of file
diff --git a/v2/thirdpartypasswordless/pre-built-ui/further-reading/passwordless-login.mdx b/v2/thirdpartypasswordless/pre-built-ui/further-reading/passwordless-login.mdx
index c69b1248f..7efec0806 100644
--- a/v2/thirdpartypasswordless/pre-built-ui/further-reading/passwordless-login.mdx
+++ b/v2/thirdpartypasswordless/pre-built-ui/further-reading/passwordless-login.mdx
@@ -91,7 +91,7 @@ Entering an incorrect OTP too many times results in the user being navigated bac
 
 ### Logging in via OTP and Magic link simultaneously 
 
-There is a edge case wherein the end user get's both an OTP and a magic link, and whilst viewing the enter OTP screen, then also click on the magic link separately. The magic link click will open a new tab and will consume the link to log the user in. The enter OTP screen will continue to show the enter OTP UI until user refreshes the page.
+There is a edge case wherein the end user get's both an OTP and a magic link, and whilst viewing the enter OTP screen, then also click on the magic link separately. The magic link click will open a new tab and will consume the link to log the user in. The enter OTP screen will continue to show the enter OTP UI until user refreshes the page, after which, it will redirect to the post login screen.
 
 ## Default email and SMS template
 

From 269ab097bf920e34997ca7873842ade32a91bda9 Mon Sep 17 00:00:00 2001
From: Ankit Tiwari <ankucodes@gmail.com>
Date: Mon, 11 Dec 2023 12:11:09 +0530
Subject: [PATCH 5/7] Fix code checking errors

---
 .../frontend-hooks/redirection-callback.mdx   |  2 +-
 .../embed-sign-in-up-form.mdx                 |  2 +-
 .../frontend-hooks/redirection-callback.mdx   |  2 +-
 .../embed-sign-in-up-form.mdx                 |  3 +-
 .../styling/changing-style.mdx                | 34 -------------------
 .../frontend-hooks/redirection-callback.mdx   |  2 +-
 .../embed-sign-in-up-form.mdx                 |  2 +-
 .../frontend-hooks/redirection-callback.mdx   |  2 +-
 .../embed-sign-in-up-form.mdx                 |  2 +-
 .../frontend-hooks/redirection-callback.mdx   |  2 +-
 .../embed-sign-in-up-form.mdx                 |  3 +-
 .../styling/changing-style.mdx                | 34 -------------------
 12 files changed, 12 insertions(+), 78 deletions(-)

diff --git a/v2/emailpassword/advanced-customizations/frontend-hooks/redirection-callback.mdx b/v2/emailpassword/advanced-customizations/frontend-hooks/redirection-callback.mdx
index 384a4221a..97418d5bd 100644
--- a/v2/emailpassword/advanced-customizations/frontend-hooks/redirection-callback.mdx
+++ b/v2/emailpassword/advanced-customizations/frontend-hooks/redirection-callback.mdx
@@ -28,7 +28,7 @@ EmailPassword.init({
                 // we are navigating back to where the user was before they authenticated
                 return redirectToPath;
             }
-            if (context.isNewRecipeUser && context.user.loginMethods.length === 1) {
+            if (context.isNewPrimaryUser) {
                 // user signed up
                 return "/onboarding"
             } else {
diff --git a/v2/emailpassword/common-customizations/embed-sign-in-up-form.mdx b/v2/emailpassword/common-customizations/embed-sign-in-up-form.mdx
index de6320d46..887482a83 100644
--- a/v2/emailpassword/common-customizations/embed-sign-in-up-form.mdx
+++ b/v2/emailpassword/common-customizations/embed-sign-in-up-form.mdx
@@ -127,7 +127,7 @@ import Session from "supertokens-auth-react/recipe/session";
 import Header from "./header";
 // @ts-ignore
 import Footer from "./footer";
-import { useHistory } from 'react-router-dom';
+import { useHistory } from 'react-router-dom5';
 
 function MyLandingPage() {
     let sessionContext = Session.useSessionContext();
diff --git a/v2/passwordless/advanced-customizations/frontend-hooks/redirection-callback.mdx b/v2/passwordless/advanced-customizations/frontend-hooks/redirection-callback.mdx
index c4fc57bce..763edf274 100644
--- a/v2/passwordless/advanced-customizations/frontend-hooks/redirection-callback.mdx
+++ b/v2/passwordless/advanced-customizations/frontend-hooks/redirection-callback.mdx
@@ -27,7 +27,7 @@ Passwordless.init({
                 // we are navigating back to where the user was before they authenticated
                 return redirectToPath;
             }
-            if (context.isNewRecipeUser && context.user.loginMethods.length === 1) {
+            if (context.isNewPrimaryUser) {
                 // user signed up
                 return "/onboarding"
             } else {
diff --git a/v2/passwordless/common-customizations/embed-sign-in-up-form.mdx b/v2/passwordless/common-customizations/embed-sign-in-up-form.mdx
index 62c92332b..567d9a05b 100644
--- a/v2/passwordless/common-customizations/embed-sign-in-up-form.mdx
+++ b/v2/passwordless/common-customizations/embed-sign-in-up-form.mdx
@@ -129,7 +129,7 @@ import Session from "supertokens-auth-react/recipe/session";
 import Header from "./header";
 // @ts-ignore
 import Footer from "./footer";
-import { useHistory } from "react-router-dom";
+import { useHistory } from "react-router-dom5";
 
 function MyLandingPage() {
     let sessionContext = Session.useSessionContext();
@@ -274,6 +274,7 @@ SuperTokens.init({
     },
     recipeList: [
         Passwordless.init({
+            contactMethod: "EMAIL_OR_PHONE", // This example will work with any contactMethod.
             //highlight-start
             getRedirectionURL: async (context) => {
                 // Prevent redirection after successful sign in/up by returning null.
diff --git a/v2/passwordless/common-customizations/styling/changing-style.mdx b/v2/passwordless/common-customizations/styling/changing-style.mdx
index 0177ed0a3..7092a842b 100644
--- a/v2/passwordless/common-customizations/styling/changing-style.mdx
+++ b/v2/passwordless/common-customizations/styling/changing-style.mdx
@@ -254,40 +254,6 @@ SuperTokens.init({
 </TabItem>
 </FrontendSDKTabs>
 
-### Close tab screen
-
-This screen is shown if your user successfully logged in on another tab 
-
-<FrontendSDKTabs>
-<TabItem value="reactjs">
-
-```tsx
-import SuperTokens from "supertokens-auth-react";
-import Passwordless from "supertokens-auth-react/recipe/passwordless";
-import Session from "supertokens-auth-react/recipe/session";
-
-SuperTokens.init({
-    appInfo: {
-        apiDomain: "...",
-        appName: "...",
-        websiteDomain: "..."
-    },
-	recipeList: [
-        Passwordless.init({
-            contactMethod: "EMAIL_OR_PHONE", // This example will work with any contactMethod.
-            // highlight-start
-            signInUpFeature: {
-                closeTabScreenStyle: ` ... `
-            }
-            // highlight-end
-        }),
-        Session.init()
-	]
-});
-```
-</TabItem>
-</FrontendSDKTabs>
-
 ## Customizing the Magic Link Clicked Screen
 
 This screen is shown when the user clicks a magic link.
diff --git a/v2/thirdparty/advanced-customizations/frontend-hooks/redirection-callback.mdx b/v2/thirdparty/advanced-customizations/frontend-hooks/redirection-callback.mdx
index b46b2b088..a96515fdf 100644
--- a/v2/thirdparty/advanced-customizations/frontend-hooks/redirection-callback.mdx
+++ b/v2/thirdparty/advanced-customizations/frontend-hooks/redirection-callback.mdx
@@ -26,7 +26,7 @@ ThirdParty.init({
                 // we are navigating back to where the user was before they authenticated
                 return redirectToPath;
             }
-            if (context.isNewRecipeUser && context.user.loginMethods.length === 1) {
+            if (context.isNewPrimaryUser) {
                 // user signed up
                 return "/onboarding"
             } else {
diff --git a/v2/thirdparty/common-customizations/embed-sign-in-up-form.mdx b/v2/thirdparty/common-customizations/embed-sign-in-up-form.mdx
index 6b3482d43..bcd7e6296 100644
--- a/v2/thirdparty/common-customizations/embed-sign-in-up-form.mdx
+++ b/v2/thirdparty/common-customizations/embed-sign-in-up-form.mdx
@@ -127,7 +127,7 @@ import Session from "supertokens-auth-react/recipe/session";
 import Header from "./header";
 // @ts-ignore
 import Footer from "./footer";
-import { useHistory } from "react-router-dom";
+import { useHistory } from "react-router-dom5";
 
 function MyLandingPage() {
     let sessionContext = Session.useSessionContext();
diff --git a/v2/thirdpartyemailpassword/advanced-customizations/frontend-hooks/redirection-callback.mdx b/v2/thirdpartyemailpassword/advanced-customizations/frontend-hooks/redirection-callback.mdx
index 907dd49ce..63be9b111 100644
--- a/v2/thirdpartyemailpassword/advanced-customizations/frontend-hooks/redirection-callback.mdx
+++ b/v2/thirdpartyemailpassword/advanced-customizations/frontend-hooks/redirection-callback.mdx
@@ -28,7 +28,7 @@ ThirdPartyEmailPassword.init({
                 // we are navigating back to where the user was before they authenticated
                 return redirectToPath;
             }
-            if (context.isNewRecipeUser && context.user.loginMethods.length === 1) {
+            if (context.isNewPrimaryUser) {
                 // user signed up
                 return "/onboarding"
             } else {
diff --git a/v2/thirdpartyemailpassword/common-customizations/embed-sign-in-up-form.mdx b/v2/thirdpartyemailpassword/common-customizations/embed-sign-in-up-form.mdx
index 5d7383c98..b9bc04e4b 100644
--- a/v2/thirdpartyemailpassword/common-customizations/embed-sign-in-up-form.mdx
+++ b/v2/thirdpartyemailpassword/common-customizations/embed-sign-in-up-form.mdx
@@ -127,7 +127,7 @@ import Session from "supertokens-auth-react/recipe/session";
 import Header from "./header";
 // @ts-ignore
 import Footer from "./footer";
-import { useHistory } from "react-router-dom";
+import { useHistory } from "react-router-dom5";
 
 function MyLandingPage() {
     let sessionContext = Session.useSessionContext();
diff --git a/v2/thirdpartypasswordless/advanced-customizations/frontend-hooks/redirection-callback.mdx b/v2/thirdpartypasswordless/advanced-customizations/frontend-hooks/redirection-callback.mdx
index 3bf645ead..892c6e27d 100644
--- a/v2/thirdpartypasswordless/advanced-customizations/frontend-hooks/redirection-callback.mdx
+++ b/v2/thirdpartypasswordless/advanced-customizations/frontend-hooks/redirection-callback.mdx
@@ -27,7 +27,7 @@ ThirdPartyPasswordless.init({
                 // we are navigating back to where the user was before they authenticated
                 return redirectToPath;
             }
-            if (context.isNewRecipeUser && context.user.loginMethods.length === 1) {
+            if (context.isNewPrimaryUser) {
                 // user signed up
                 return "/onboarding"
             } else {
diff --git a/v2/thirdpartypasswordless/common-customizations/embed-sign-in-up-form.mdx b/v2/thirdpartypasswordless/common-customizations/embed-sign-in-up-form.mdx
index f849616d0..466c9c58e 100644
--- a/v2/thirdpartypasswordless/common-customizations/embed-sign-in-up-form.mdx
+++ b/v2/thirdpartypasswordless/common-customizations/embed-sign-in-up-form.mdx
@@ -129,7 +129,7 @@ import Session from "supertokens-auth-react/recipe/session";
 import Header from "./header";
 // @ts-ignore
 import Footer from "./footer";
-import { useHistory } from "react-router-dom";
+import { useHistory } from "react-router-dom5";
 
 function MyLandingPage() {
     let sessionContext = Session.useSessionContext();
@@ -275,6 +275,7 @@ SuperTokens.init({
     },
     recipeList: [
         ThirdPartyPasswordless.init({
+            contactMethod: "EMAIL_OR_PHONE", // This example will work with any contactMethod.
             //highlight-start
             getRedirectionURL: async (context) => {
                 // Prevent redirection after successful sign in/up by returning null.
diff --git a/v2/thirdpartypasswordless/common-customizations/styling/changing-style.mdx b/v2/thirdpartypasswordless/common-customizations/styling/changing-style.mdx
index b0a463bb4..6d200f438 100644
--- a/v2/thirdpartypasswordless/common-customizations/styling/changing-style.mdx
+++ b/v2/thirdpartypasswordless/common-customizations/styling/changing-style.mdx
@@ -253,40 +253,6 @@ SuperTokens.init({
 </TabItem>
 </FrontendSDKTabs>
 
-### Close tab screen
-
-This screen is shown if your user successfully logged in on another tab 
-
-<FrontendSDKTabs>
-<TabItem value="reactjs">
-
-```tsx
-import SuperTokens from "supertokens-auth-react";
-import ThirdPartyPasswordless from "supertokens-auth-react/recipe/thirdpartypasswordless";
-import Session from "supertokens-auth-react/recipe/session";
-
-SuperTokens.init({
-    appInfo: {
-        apiDomain: "...",
-        appName: "...",
-        websiteDomain: "..."
-    },
-	recipeList: [
-        ThirdPartyPasswordless.init({
-            contactMethod: "EMAIL_OR_PHONE", // This example will work with any contactMethod.
-            // highlight-start
-            signInUpFeature: {
-                closeTabScreenStyle: ` ... `
-            }
-            // highlight-end
-        }),
-        Session.init()
-	]
-});
-```
-</TabItem>
-</FrontendSDKTabs>
-
 ## Customizing the Magic Link Clicked Screen
 
 This screen is shown when the user clicks a magic link.

From d55af7b381a3259ebf253611ddc060bfff2925c7 Mon Sep 17 00:00:00 2001
From: Ankit Tiwari <ankucodes@gmail.com>
Date: Mon, 11 Dec 2023 12:33:27 +0530
Subject: [PATCH 6/7] PR changes

---
 .../common-customizations/embed-sign-in-up-form.mdx       | 8 ++++----
 v2/emailpassword/pre-built-ui/auth-redirection.mdx        | 5 +++++
 .../common-customizations/embed-sign-in-up-form.mdx       | 8 ++++----
 v2/passwordless/pre-built-ui/auth-redirection.mdx         | 5 +++++
 .../common-customizations/embed-sign-in-up-form.mdx       | 8 ++++----
 v2/thirdparty/pre-built-ui/auth-redirection.mdx           | 5 +++++
 .../common-customizations/embed-sign-in-up-form.mdx       | 8 ++++----
 .../pre-built-ui/auth-redirection.mdx                     | 5 +++++
 .../common-customizations/embed-sign-in-up-form.mdx       | 8 ++++----
 .../pre-built-ui/auth-redirection.mdx                     | 5 +++++
 10 files changed, 45 insertions(+), 20 deletions(-)

diff --git a/v2/emailpassword/common-customizations/embed-sign-in-up-form.mdx b/v2/emailpassword/common-customizations/embed-sign-in-up-form.mdx
index 887482a83..1e7751519 100644
--- a/v2/emailpassword/common-customizations/embed-sign-in-up-form.mdx
+++ b/v2/emailpassword/common-customizations/embed-sign-in-up-form.mdx
@@ -15,10 +15,6 @@ import RRDVersionSubTabs from "/src/components/tabs/RRDVersionSubTabs"
 <PreBuiltOrCustomUISwitcher>
 
 <PreBuiltUIContent>
-This guide is not applicable for Pre built UI.
-</PreBuiltUIContent>
-
-<CustomUIContent>
 
 ## Step 1: Disable default implementation
 
@@ -294,6 +290,10 @@ To avoid redirection for failed claims, such as Email Verification, reach out to
 
 You may choose to display the Auth UI in a full page and in a popup in the same app. For the full-page Auth UI, redirection after a successful login is preferred, whereas in the popup, it is not. In this scenario, you have the option to check either the current URL or the `userContext` object in `getRedirectionURL` to decide whether to return null or not.
 
+</PreBuiltUIContent>
+
+<CustomUIContent>
+This guide is not applicable for Custom UI.
 </CustomUIContent>
 
 </PreBuiltOrCustomUISwitcher>
\ No newline at end of file
diff --git a/v2/emailpassword/pre-built-ui/auth-redirection.mdx b/v2/emailpassword/pre-built-ui/auth-redirection.mdx
index aa8f4c3f2..72a286829 100644
--- a/v2/emailpassword/pre-built-ui/auth-redirection.mdx
+++ b/v2/emailpassword/pre-built-ui/auth-redirection.mdx
@@ -40,6 +40,11 @@ SuperTokens.init({
                         // we are navigating back to where the user was before they authenticated
                         return context.redirectToPath;
                     }
+                    if (context.isNewPrimaryUser) {
+                        // user signed up
+                    } else {
+                        // user signed in
+                    }
                     return "/dashboard";
                 }
                 return undefined;
diff --git a/v2/passwordless/common-customizations/embed-sign-in-up-form.mdx b/v2/passwordless/common-customizations/embed-sign-in-up-form.mdx
index 567d9a05b..4babc7e73 100644
--- a/v2/passwordless/common-customizations/embed-sign-in-up-form.mdx
+++ b/v2/passwordless/common-customizations/embed-sign-in-up-form.mdx
@@ -15,10 +15,6 @@ import RRDVersionSubTabs from "/src/components/tabs/RRDVersionSubTabs"
 <PreBuiltOrCustomUISwitcher>
 
 <PreBuiltUIContent>
-This guide is not applicable for Pre built UI.
-</PreBuiltUIContent>
-
-<CustomUIContent>
 
 ## Step 1: Disable default implementation
 
@@ -298,6 +294,10 @@ To avoid redirection for failed claims, such as Email Verification, reach out to
 
 You may choose to display the Auth UI in a full page and in a popup in the same app. For the full-page Auth UI, redirection after a successful login is preferred, whereas in the popup, it is not. In this scenario, you have the option to check either the current URL or the `userContext` object in `getRedirectionURL` to decide whether to return null or not.
 
+</PreBuiltUIContent>
+
+<CustomUIContent>
+This guide is not applicable for Custom UI.
 </CustomUIContent>
 
 </PreBuiltOrCustomUISwitcher>
\ No newline at end of file
diff --git a/v2/passwordless/pre-built-ui/auth-redirection.mdx b/v2/passwordless/pre-built-ui/auth-redirection.mdx
index 1c238f2d4..c5ca52af0 100644
--- a/v2/passwordless/pre-built-ui/auth-redirection.mdx
+++ b/v2/passwordless/pre-built-ui/auth-redirection.mdx
@@ -40,6 +40,11 @@ SuperTokens.init({
                         // we are navigating back to where the user was before they authenticated
                         return context.redirectToPath;
                     }
+                    if (context.isNewPrimaryUser) {
+                        // user signed up
+                    } else {
+                        // user signed in
+                    }
                     return "/dashboard";
                 }
                 return undefined;
diff --git a/v2/thirdparty/common-customizations/embed-sign-in-up-form.mdx b/v2/thirdparty/common-customizations/embed-sign-in-up-form.mdx
index bcd7e6296..0e8f1e580 100644
--- a/v2/thirdparty/common-customizations/embed-sign-in-up-form.mdx
+++ b/v2/thirdparty/common-customizations/embed-sign-in-up-form.mdx
@@ -15,10 +15,6 @@ import RRDVersionSubTabs from "/src/components/tabs/RRDVersionSubTabs"
 <PreBuiltOrCustomUISwitcher>
 
 <PreBuiltUIContent>
-This guide is not applicable for Pre built UI.
-</PreBuiltUIContent>
-
-<CustomUIContent>
 
 ## Step 1: Disable default implementation 
 
@@ -291,6 +287,10 @@ To avoid redirection for failed claims, such as Email Verification, reach out to
 
 You may choose to display the Auth UI in a full page and in a popup in the same app. For the full-page Auth UI, redirection after a successful login is preferred, whereas in the popup, it is not. In this scenario, you have the option to check either the current URL or the `userContext` object in `getRedirectionURL` to decide whether to return null or not.
 
+</PreBuiltUIContent>
+
+<CustomUIContent>
+This guide is not applicable for Custom UI.
 </CustomUIContent>
 
 </PreBuiltOrCustomUISwitcher>
\ No newline at end of file
diff --git a/v2/thirdparty/pre-built-ui/auth-redirection.mdx b/v2/thirdparty/pre-built-ui/auth-redirection.mdx
index 1c238f2d4..c5ca52af0 100644
--- a/v2/thirdparty/pre-built-ui/auth-redirection.mdx
+++ b/v2/thirdparty/pre-built-ui/auth-redirection.mdx
@@ -40,6 +40,11 @@ SuperTokens.init({
                         // we are navigating back to where the user was before they authenticated
                         return context.redirectToPath;
                     }
+                    if (context.isNewPrimaryUser) {
+                        // user signed up
+                    } else {
+                        // user signed in
+                    }
                     return "/dashboard";
                 }
                 return undefined;
diff --git a/v2/thirdpartyemailpassword/common-customizations/embed-sign-in-up-form.mdx b/v2/thirdpartyemailpassword/common-customizations/embed-sign-in-up-form.mdx
index b9bc04e4b..85138fa84 100644
--- a/v2/thirdpartyemailpassword/common-customizations/embed-sign-in-up-form.mdx
+++ b/v2/thirdpartyemailpassword/common-customizations/embed-sign-in-up-form.mdx
@@ -15,10 +15,6 @@ import RRDVersionSubTabs from "/src/components/tabs/RRDVersionSubTabs"
 <PreBuiltOrCustomUISwitcher>
 
 <PreBuiltUIContent>
-This guide is not applicable for Pre built UI.
-</PreBuiltUIContent>
-
-<CustomUIContent>
 
 ## Step 1: Disable default implementation
 
@@ -293,6 +289,10 @@ To avoid redirection for failed claims, such as Email Verification, reach out to
 
 You may choose to display the Auth UI in a full page and in a popup in the same app. For the full-page Auth UI, redirection after a successful login is preferred, whereas in the popup, it is not. In this scenario, you have the option to check either the current URL or the `userContext` object in `getRedirectionURL` to decide whether to return null or not.
 
+</PreBuiltUIContent>
+
+<CustomUIContent>
+This guide is not applicable for Custom UI.
 </CustomUIContent>
 
 </PreBuiltOrCustomUISwitcher>
\ No newline at end of file
diff --git a/v2/thirdpartyemailpassword/pre-built-ui/auth-redirection.mdx b/v2/thirdpartyemailpassword/pre-built-ui/auth-redirection.mdx
index aa8f4c3f2..72a286829 100644
--- a/v2/thirdpartyemailpassword/pre-built-ui/auth-redirection.mdx
+++ b/v2/thirdpartyemailpassword/pre-built-ui/auth-redirection.mdx
@@ -40,6 +40,11 @@ SuperTokens.init({
                         // we are navigating back to where the user was before they authenticated
                         return context.redirectToPath;
                     }
+                    if (context.isNewPrimaryUser) {
+                        // user signed up
+                    } else {
+                        // user signed in
+                    }
                     return "/dashboard";
                 }
                 return undefined;
diff --git a/v2/thirdpartypasswordless/common-customizations/embed-sign-in-up-form.mdx b/v2/thirdpartypasswordless/common-customizations/embed-sign-in-up-form.mdx
index 466c9c58e..04b1ff585 100644
--- a/v2/thirdpartypasswordless/common-customizations/embed-sign-in-up-form.mdx
+++ b/v2/thirdpartypasswordless/common-customizations/embed-sign-in-up-form.mdx
@@ -15,10 +15,6 @@ import RRDVersionSubTabs from "/src/components/tabs/RRDVersionSubTabs"
 <PreBuiltOrCustomUISwitcher>
 
 <PreBuiltUIContent>
-This guide is not applicable for Pre built UI.
-</PreBuiltUIContent>
-
-<CustomUIContent>
 
 ## Step 1: Disable default implementation
 
@@ -299,6 +295,10 @@ To avoid redirection for failed claims, such as Email Verification, reach out to
 
 You may choose to display the Auth UI in a full page and in a popup in the same app. For the full-page Auth UI, redirection after a successful login is preferred, whereas in the popup, it is not. In this scenario, you have the option to check either the current URL or the `userContext` object in `getRedirectionURL` to decide whether to return null or not.
 
+</PreBuiltUIContent>
+
+<CustomUIContent>
+This guide is not applicable for Custom UI.
 </CustomUIContent>
 
 </PreBuiltOrCustomUISwitcher>
\ No newline at end of file
diff --git a/v2/thirdpartypasswordless/pre-built-ui/auth-redirection.mdx b/v2/thirdpartypasswordless/pre-built-ui/auth-redirection.mdx
index 1c238f2d4..c5ca52af0 100644
--- a/v2/thirdpartypasswordless/pre-built-ui/auth-redirection.mdx
+++ b/v2/thirdpartypasswordless/pre-built-ui/auth-redirection.mdx
@@ -40,6 +40,11 @@ SuperTokens.init({
                         // we are navigating back to where the user was before they authenticated
                         return context.redirectToPath;
                     }
+                    if (context.isNewPrimaryUser) {
+                        // user signed up
+                    } else {
+                        // user signed in
+                    }
                     return "/dashboard";
                 }
                 return undefined;

From def279c8c9d84be70f9964c32c9bfe49603babe4 Mon Sep 17 00:00:00 2001
From: Ankit Tiwari <ankucodes@gmail.com>
Date: Mon, 11 Dec 2023 15:49:32 +0530
Subject: [PATCH 7/7] Update supertokens-auth-react version

---
 v2/src/plugins/codeTypeChecking/jsEnv/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/v2/src/plugins/codeTypeChecking/jsEnv/package.json b/v2/src/plugins/codeTypeChecking/jsEnv/package.json
index ca60f1d28..acda50e88 100644
--- a/v2/src/plugins/codeTypeChecking/jsEnv/package.json
+++ b/v2/src/plugins/codeTypeChecking/jsEnv/package.json
@@ -53,7 +53,7 @@
     "react-router-dom5": "npm:react-router-dom@^5.3.0",
     "socket.io": "^4.6.1",
     "socketio": "^1.0.0",
-    "supertokens-auth-react": "^0.35.0",
+    "supertokens-auth-react": "^0.36.0",
     "supertokens-node": "^16.5.0",
     "supertokens-node7": "npm:supertokens-node@7.3",
     "supertokens-react-native": "^4.0.0",