.babelrc

@@ -1,8 +1,6 @@
 {
     "presets": [["@babel/preset-env", {}, "@babel/preset-react"]],
     "plugins": [
-        "@emotion/babel-plugin",
-        "inline-react-svg",
         [
             "@babel/plugin-transform-react-jsx",
             {

.circleci/config.yml

@@ -34,90 +34,6 @@ jobs:
                       ./publish.sh
             - slack/status
 
-    update-demo-apps:
-        circleci_ip_ranges: true
-        docker:
-            - image: ubuntu:20.04
-        steps:
-            - run:
-                  name: Install SSH and curl
-                  command: |
-                      apt update
-                      apt-get install openssh-client curl -y
-            - run:
-                  name: storing ssh keys
-                  command: |
-                      echo "-----BEGIN RSA PRIVATE KEY-----" > /tmp/dev_ssh
-                      echo $DEV_SERVER_SSH_KEY | sed 's/\s\+/\n/g' >> /tmp/dev_ssh
-                      echo "-----END RSA PRIVATE KEY-----" >> /tmp/dev_ssh
-                      chmod 400 /tmp/dev_ssh
-            - run:
-                  name: updating thirdpartypasswordless
-                  command: |
-                      ssh -oStrictHostKeyChecking=no -oUserKnownHostsFile=/dev/null -i /tmp/dev_ssh  ubuntu@ssh.supertokens.com '\
-                          cd supertokens-auth-react/examples/with-thirdpartypasswordless/ && \
-                          git reset --hard && \
-                          git pull && \
-                          (rm -f package-lock.json || true) && \
-                          (rm -rf node_modules || true) && \
-                          npm i && \
-                          REACT_APP_API_PORT=10001 REACT_APP_API_URL=https://api-thirdpartypasswordless.demo.supertokens.com REACT_APP_WEBSITE_PORT=10000 REACT_APP_WEBSITE_URL=https://thirdpartypasswordless.demo.supertokens.com npm run build && \
-                          docker rm demo-app-thirdpartypasswordless -f || true && \
-                          bash /home/ubuntu/supertokens-auth-react/examples/with-thirdpartypasswordless/scripts/start_container.sh'
-            - run:
-                  name: updating emailpassword
-                  command: |
-                      ssh -oStrictHostKeyChecking=no -oUserKnownHostsFile=/dev/null -i /tmp/dev_ssh  ubuntu@ssh.supertokens.com '\
-                          cd supertokens-auth-react/examples/with-emailpassword/ && \
-                          git reset --hard && \
-                          git pull && \
-                          (rm -f package-lock.json || true) && \
-                          (rm -rf node_modules || true) && \
-                          npm i && \
-                          REACT_APP_API_PORT=10001 REACT_APP_API_URL=https://api-emailpassword.demo.supertokens.com REACT_APP_WEBSITE_PORT=10000 REACT_APP_WEBSITE_URL=https://emailpassword.demo.supertokens.com npm run build && \
-                          docker rm demo-app -f || true && \
-                          bash /home/ubuntu/supertokens-auth-react/examples/with-emailpassword/scripts/start_container.sh'
-            - run:
-                  name: updating thirdparty
-                  command: |
-                      ssh -oStrictHostKeyChecking=no -oUserKnownHostsFile=/dev/null -i /tmp/dev_ssh  ubuntu@ssh.supertokens.com '\
-                          cd supertokens-auth-react/examples/with-thirdparty/ && \
-                          git reset --hard && \
-                          git pull && \
-                          (rm -f package-lock.json || true) && \
-                          (rm -rf node_modules || true) && \
-                          npm i && \
-                          REACT_APP_API_PORT=10001 REACT_APP_API_URL=https://api-thirdparty.demo.supertokens.com REACT_APP_WEBSITE_PORT=10000 REACT_APP_WEBSITE_URL=https://thirdparty.demo.supertokens.com npm run build && \
-                          docker rm demo-app-thirdparty -f || true && \
-                          bash /home/ubuntu/supertokens-auth-react/examples/with-thirdparty/scripts/start_container.sh'
-            - run:
-                  name: updating thirdpartyemailpassword
-                  command: |
-                      ssh -oStrictHostKeyChecking=no -oUserKnownHostsFile=/dev/null -i /tmp/dev_ssh  ubuntu@ssh.supertokens.com '\
-                          cd supertokens-auth-react/examples/with-thirdpartyemailpassword/ && \
-                          git reset --hard && \
-                          git pull && \
-                          (rm -f package-lock.json || true) && \
-                          (rm -rf node_modules || true) && \
-                          npm i && \
-                          REACT_APP_API_PORT=10001 REACT_APP_API_URL=https://api-thirdpartyemailpassword.demo.supertokens.com REACT_APP_WEBSITE_PORT=10000 REACT_APP_WEBSITE_URL=https://thirdpartyemailpassword.demo.supertokens.com npm run build && \
-                          docker rm demo-app-thirdpartyemailpassword -f || true && \
-                          bash /home/ubuntu/supertokens-auth-react/examples/with-thirdpartyemailpassword/scripts/start_container.sh'
-            - run:
-                  name: updating passwordless
-                  command: |
-                      ssh -oStrictHostKeyChecking=no -oUserKnownHostsFile=/dev/null -i /tmp/dev_ssh  ubuntu@ssh.supertokens.com '\
-                          cd supertokens-auth-react/examples/with-passwordless/ && \
-                          git reset --hard && \
-                          git pull && \
-                          (rm -f package-lock.json || true) && \
-                          (rm -rf node_modules || true) && \
-                          npm i && \
-                          REACT_APP_API_PORT=10001 REACT_APP_API_URL=https://api-passwordless.demo.supertokens.com REACT_APP_WEBSITE_PORT=10000 REACT_APP_WEBSITE_URL=https://passwordless.demo.supertokens.com npm run build && \
-                          docker rm demo-app-passwordless -f || true && \
-                          bash /home/ubuntu/supertokens-auth-react/examples/with-passwordless/scripts/start_container.sh'
-            - slack/status
-
     update-docs:
         docker:
             - image: rishabhpoddar/supertokens_website_sdk_testing_node_16
@@ -147,15 +63,6 @@ workflows:
                       branches:
                           ignore: /.*/
 
-            - update-demo-apps:
-                  context:
-                      - slack-notification
-                      - saas-backend-production
-                  filters:
-                      branches:
-                          only:
-                              - master
-
             - update-docs:
                   context:
                       - slack-notification

.github/PULL_REQUEST_TEMPLATE.md

@@ -30,6 +30,7 @@
     -   If no such branch exists, then create one from the latest released branch.
 -   [ ] If added a new recipe interface, then make sure that the implementation of it uses NON arrow functions only (like `someFunc: function () {..}`).
 -   [ ] If I added a new recipe, I also added the recipe entry point into the `size-limit` section of `package.json` with the size limit set to the current size rounded up.
+-   [ ] If I added a new recipe, I also added the recipe entry point into the `rollup.config.mjs`
 
 ## Remaining TODOs for this PR
 

.github/workflows/tests-visual.yml

@@ -0,0 +1,33 @@
+name: "Run visual tests"
+on: workflow_dispatch
+jobs:
+    test_job:
+        name: Run visual tests
+        timeout-minutes: 120
+        runs-on: ubuntu-latest
+        container:
+            image: rishabhpoddar/supertokens_website_sdk_testing_node_16
+            options: "-u 1001"
+        env:
+            PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+        steps:
+            - uses: actions/checkout@v2
+              with:
+                  persist-credentials: false
+            - name: Make git use https instead of ssh
+              run: git config --global url."https://github.com/".insteadOf ssh://git@github.com/
+            - run: npm run init
+            - name: Cloning supertokens-root
+              run: cd ../ && git clone https://github.com/supertokens/supertokens-root.git
+            - name: Modifying modules.txt in supertokens-root
+              run: cd ../supertokens-root && echo "core,master,supertokens\nplugin-interface,master,supertokens" > modules.txt
+            - name: Contents of modules.txt
+              run: cat ../supertokens-root/modules.txt
+            - name: Running loadModules in supertokens-root
+              run: cd ../supertokens-root && ./loadModules
+            - name: Installing supertokens-node
+              run: cd test/server/ && npm i -d --force && npm i --force github:supertokens/supertokens-node
+            - name: Setting up supertokens-root test environment
+              run: cd ../supertokens-root && bash ./utils/setupTestEnv --local
+            - name: Run tests
+              run: npm run test-visual

.gitignore

@@ -14,3 +14,5 @@ screenshot.jpeg
 /eslint/node_modules
 /test_report/
 supertokens-auth-react-*.tgz
+**/node_modules
+stats.html

examples/for-tests-react-16/src/App.js

@@ -270,6 +270,18 @@ SuperTokens.init({
 
 /* App */
 function App() {
+    useEffect(() => {
+        window.addEventListener("TPEP.getAuthorisationURLWithQueryParamsAndSetState", async () => {
+            ThirdPartyEmailPassword.getAuthorisationURLWithQueryParamsAndSetState({
+                providerId: "google",
+                authorisationURL: "",
+                userContext: {
+                    isPreAPITest: true,
+                },
+            });
+        });
+    }, []);
+
     if (doNotUseReactRouterDom) {
         return (
             <ErrorBoundary>
@@ -477,10 +489,10 @@ function getEmailVerificationConfigs({ disableDefaultUI }) {
     return EmailVerification.init({
         disableDefaultUI,
         sendVerifyEmailScreen: {
-            style: theme.style,
+            style: theme,
         },
         verifyEmailLinkClickedScreen: {
-            style: theme.style,
+            style: theme,
         },
         mode: emailVerificationMode,
         getRedirectionURL: async (context) => {
@@ -530,11 +542,11 @@ function getEmailVerificationConfigs({ disableDefaultUI }) {
 
 function getEmailPasswordConfigs({ disableDefaultUI }) {
     return EmailPassword.init({
-        style: {
-            container: {
-                fontFamily: "cursive",
-            },
-        },
+        style: `
+            [data-supertokens~=container] {
+                font-family: cursive;
+            }
+        `,
         override: {
             functions: (implementation) => {
                 const log = logWithPrefix(`ST_LOGS EMAIL_PASSWORD OVERRIDE`);
@@ -564,7 +576,6 @@ function getEmailPasswordConfigs({ disableDefaultUI }) {
                 };
             },
         },
-        palette: theme.colors,
         preAPIHook: async (context) => {
             console.log(`ST_LOGS EMAIL_PASSWORD PRE_API_HOOKS ${context.action}`);
             return context;
@@ -607,11 +618,6 @@ function getEmailPasswordConfigs({ disableDefaultUI }) {
 
 function getThirdPartyPasswordlessConfigs({ disableDefaultUI, thirdPartyRedirectURL }) {
     return ThirdPartyPasswordless.init({
-        style: {
-            container: {
-                // fontFamily: "cursive",
-            },
-        },
         override: {
             functions: (implementation) => {
                 const log = logWithPrefix(`ST_LOGS THIRDPARTYPASSWORDLESS OVERRIDE`);
@@ -673,7 +679,6 @@ function getThirdPartyPasswordlessConfigs({ disableDefaultUI, thirdPartyRedirect
                 };
             },
         },
-        palette: theme.colors,
         preAPIHook: async (context) => {
             console.log(`ST_LOGS THIRDPARTYPASSWORDLESS PRE_API_HOOKS ${context.action}`);
             return context;
@@ -694,11 +699,11 @@ function getThirdPartyPasswordlessConfigs({ disableDefaultUI, thirdPartyRedirect
         signInUpFeature: {
             disableDefaultUI,
             style: theme.style,
-            thirdPartyProviderAndEmailOrPhoneFormStyle: {
-                providerCustom: {
-                    color: "red",
+            thirdPartyProviderAndEmailOrPhoneFormStyle: `
+                [data-supertokens~=providerCustom] {
+                    color: red;
                 },
-            },
+            `,
             privacyPolicyLink: "https://supertokens.io/legal/privacy-policy",
             termsOfServiceLink: "https://supertokens.io/legal/terms-and-conditions",
             providers: [
@@ -731,11 +736,6 @@ function getThirdPartyPasswordlessConfigs({ disableDefaultUI, thirdPartyRedirect
 
 function getPasswordlessConfigs({ disableDefaultUI }) {
     return Passwordless.init({
-        style: {
-            container: {
-                // fontFamily: "cursive",
-            },
-        },
         override: {
             functions: (implementation) => {
                 const log = logWithPrefix(`ST_LOGS PASSWORDLESS OVERRIDE`);
@@ -777,7 +777,6 @@ function getPasswordlessConfigs({ disableDefaultUI }) {
                 };
             },
         },
-        palette: theme.colors,
         preAPIHook: async (context) => {
             console.log(`ST_LOGS PASSWORDLESS PRE_API_HOOKS ${context.action}`);
             return context;
@@ -815,11 +814,12 @@ function getPasswordlessConfigs({ disableDefaultUI }) {
 
 function getThirdPartyConfigs({ disableDefaultUI, thirdPartyRedirectURL }) {
     return ThirdParty.init({
-        style: {
-            container: {
-                fontFamily: "cursive",
-            },
-        },
+        style: `
+            [data-supertokens~=container] {
+                font-family: cursive;
+            }
+        `,
+
         preAPIHook: async (context) => {
             console.log(`ST_LOGS THIRD_PARTY PRE_API_HOOKS ${context.action}`);
             return context;
@@ -864,7 +864,6 @@ function getThirdPartyConfigs({ disableDefaultUI, thirdPartyRedirectURL }) {
             },
         },
         useShadowDom,
-        palette: theme.colors,
         signInAndUpFeature: {
             disableDefaultUI,
             style: theme.style,
@@ -968,6 +967,22 @@ function getThirdPartyEmailPasswordConfigs({ disableDefaultUI, thirdPartyRedirec
                         }
 
                         log(`GET_OAUTH_AUTHORISATION_URL`);
+
+                        if (input.userContext["isPreAPITest"] !== undefined) {
+                            return implementation.getAuthorisationURLFromBackend({
+                                ...input,
+                                options: {
+                                    preAPIHook: async (input) => {
+                                        window.localStorage.setItem(
+                                            "getAuthorisationURLFromBackend-pre-api-hook",
+                                            "true"
+                                        );
+                                        return input;
+                                    },
+                                },
+                            });
+                        }
+
                         return implementation.getAuthorisationURLFromBackend(input);
                     },
                     submitNewPassword(input) {
@@ -1029,7 +1044,6 @@ function getThirdPartyEmailPasswordConfigs({ disableDefaultUI, thirdPartyRedirec
             },
         },
         useShadowDom,
-        palette: theme.colors,
         resetPasswordUsingTokenFeature: {
             disableDefaultUI,
         },

examples/for-tests-react-16/src/AppWithReactDomRouter.js

@@ -1,16 +1,43 @@
 import React, { useState } from "react";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
-import { getSuperTokensRoutesForReactRouterDom } from "supertokens-auth-react";
-import { SignInAndUp } from "supertokens-auth-react/recipe/emailpassword";
+import { getSuperTokensRoutesForReactRouterDom } from "supertokens-auth-react/ui";
+import { SignInAndUp } from "supertokens-auth-react/recipe/emailpassword/prebuiltui";
 import { SessionAuth } from "supertokens-auth-react/recipe/session";
 import {
     ResetPasswordUsingToken,
     SignInAndUp as TPSignInAndUp,
     ThirdPartySignInAndUpCallback,
-} from "supertokens-auth-react/recipe/thirdpartyemailpassword";
+} from "supertokens-auth-react/recipe/thirdpartyemailpassword/prebuiltui";
 import { BaseComponent, Home, Contact, Dashboard, DashboardNoAuthRequired } from "./App";
+import { ThirdPartyEmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/thirdpartyemailpassword/prebuiltui";
+import { ThirdPartyPasswordlessPreBuiltUI } from "supertokens-auth-react/recipe/thirdpartypasswordless/prebuiltui";
+import { EmailVerificationPreBuiltUI } from "supertokens-auth-react/recipe/emailverification/prebuiltui";
+import { EmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/emailpassword/prebuiltui";
+import { PasswordlessPreBuiltUI } from "supertokens-auth-react/recipe/passwordless/prebuiltui";
+import { ThirdPartyPreBuiltUI } from "supertokens-auth-react/recipe/thirdparty/prebuiltui";
 
 function AppWithReactDomRouter(props) {
+    const authRecipe = window.localStorage.getItem("authRecipe") || "emailpassword";
+    const emailVerificationMode = window.localStorage.getItem("mode") || "OFF";
+
+    let recipePreBuiltUIList = [EmailPasswordPreBuiltUI];
+    if (authRecipe === "thirdparty") {
+        recipePreBuiltUIList = [ThirdPartyPreBuiltUI];
+    } else if (authRecipe === "emailpassword") {
+        recipePreBuiltUIList = [EmailPasswordPreBuiltUI];
+    } else if (authRecipe === "both") {
+        recipePreBuiltUIList = [EmailPasswordPreBuiltUI, ThirdPartyPreBuiltUI];
+    } else if (authRecipe === "thirdpartyemailpassword") {
+        recipePreBuiltUIList = [ThirdPartyEmailPasswordPreBuiltUI];
+    } else if (authRecipe === "passwordless") {
+        recipePreBuiltUIList = [PasswordlessPreBuiltUI];
+    } else if (authRecipe === "thirdpartypasswordless") {
+        recipePreBuiltUIList = [ThirdPartyPasswordlessPreBuiltUI];
+    }
+
+    if (emailVerificationMode !== "OFF") {
+        recipePreBuiltUIList.push(EmailVerificationPreBuiltUI);
+    }
     /**
      * For user context tests we add this query param so the additional routes
      * dont interfere with other tests
@@ -26,7 +53,7 @@ function AppWithReactDomRouter(props) {
             <Router>
                 <BaseComponent>
                     <Routes caseSensitive>
-                        {getSuperTokensRoutesForReactRouterDom(require("react-router-dom"))}
+                        {getSuperTokensRoutesForReactRouterDom(require("react-router-dom"), recipePreBuiltUIList)}
                         <Route path="/" element={<Home />} />
                         <Route
                             path="/CasE/Case-SensItive1-PAth"

examples/for-tests-react-16/src/AppWithReactDomRouterV5.js

@@ -1,17 +1,44 @@
 import React from "react";
 import { BrowserRouter as Router, Switch, Route } from "react-router-domv5";
-import { getSuperTokensRoutesForReactRouterDom } from "supertokens-auth-react";
+import { getSuperTokensRoutesForReactRouterDom } from "supertokens-auth-react/ui";
 import { SessionAuth } from "supertokens-auth-react/recipe/session";
-import { SignInAndUp } from "supertokens-auth-react/recipe/emailpassword";
+import { SignInAndUp } from "supertokens-auth-react/recipe/emailpassword/prebuiltui";
 import { BaseComponent, Home, Contact, Dashboard, DashboardNoAuthRequired } from "./App";
+import { ThirdPartyEmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/thirdpartyemailpassword/prebuiltui";
+import { ThirdPartyPasswordlessPreBuiltUI } from "supertokens-auth-react/recipe/thirdpartypasswordless/prebuiltui";
+import { EmailVerificationPreBuiltUI } from "supertokens-auth-react/recipe/emailverification/prebuiltui";
+import { EmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/emailpassword/prebuiltui";
+import { PasswordlessPreBuiltUI } from "supertokens-auth-react/recipe/passwordless/prebuiltui";
+import { ThirdPartyPreBuiltUI } from "supertokens-auth-react/recipe/thirdparty/prebuiltui";
 
 function AppWithReactDomRouter(props) {
+    const authRecipe = window.localStorage.getItem("authRecipe") || "emailpassword";
+    const emailVerificationMode = window.localStorage.getItem("mode") || "OFF";
+
+    let recipePreBuiltUIList = [EmailPasswordPreBuiltUI];
+    if (authRecipe === "thirdparty") {
+        recipePreBuiltUIList = [ThirdPartyPreBuiltUI];
+    } else if (authRecipe === "emailpassword") {
+        recipePreBuiltUIList = [EmailPasswordPreBuiltUI];
+    } else if (authRecipe === "both") {
+        recipePreBuiltUIList = [EmailPasswordPreBuiltUI, ThirdPartyPreBuiltUI];
+    } else if (authRecipe === "thirdpartyemailpassword") {
+        recipePreBuiltUIList = [ThirdPartyEmailPasswordPreBuiltUI];
+    } else if (authRecipe === "passwordless") {
+        recipePreBuiltUIList = [PasswordlessPreBuiltUI];
+    } else if (authRecipe === "thirdpartypasswordless") {
+        recipePreBuiltUIList = [ThirdPartyPasswordlessPreBuiltUI];
+    }
+    if (emailVerificationMode !== "OFF") {
+        recipePreBuiltUIList.push(EmailVerificationPreBuiltUI);
+    }
+
     return (
         <div className="App">
             <Router>
                 <BaseComponent>
                     <Switch>
-                        {getSuperTokensRoutesForReactRouterDom(require("react-router-domv5"))}
+                        {getSuperTokensRoutesForReactRouterDom(require("react-router-domv5"), recipePreBuiltUIList)}
                         <Route exact path="/">
                             <Home />
                         </Route>

examples/for-tests-react-16/src/AppWithoutRouter.js

@@ -1,6 +1,12 @@
 import React, { useEffect, useState } from "react";
 import { BaseComponent, Home } from "./App";
-import { canHandleRoute, getRoutingComponent } from "supertokens-auth-react";
+import { getRoutingComponent, canHandleRoute } from "supertokens-auth-react/ui";
+import { ThirdPartyEmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/thirdpartyemailpassword/prebuiltui";
+import { ThirdPartyPasswordlessPreBuiltUI } from "supertokens-auth-react/recipe/thirdpartypasswordless/prebuiltui";
+import { EmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/emailpassword/prebuiltui";
+import { PasswordlessPreBuiltUI } from "supertokens-auth-react/recipe/passwordless/prebuiltui";
+import { ThirdPartyPreBuiltUI } from "supertokens-auth-react/recipe/thirdparty/prebuiltui";
+import { EmailVerificationPreBuiltUI } from "supertokens-auth-react/recipe/emailverification/prebuiltui";
 
 function AppWithoutRouter() {
     return (
@@ -14,6 +20,28 @@ function AppWithoutRouter() {
 }
 
 function Routing() {
+    const authRecipe = window.localStorage.getItem("authRecipe") || "emailpassword";
+    const emailVerificationMode = window.localStorage.getItem("mode") || "OFF";
+
+    let recipePreBuiltUIList = [EmailPasswordPreBuiltUI];
+    if (authRecipe === "thirdparty") {
+        recipePreBuiltUIList = [ThirdPartyPreBuiltUI];
+    } else if (authRecipe === "emailpassword") {
+        recipePreBuiltUIList = [EmailPasswordPreBuiltUI];
+    } else if (authRecipe === "both") {
+        recipePreBuiltUIList = [EmailPasswordPreBuiltUI, ThirdPartyPreBuiltUI];
+    } else if (authRecipe === "thirdpartyemailpassword") {
+        recipePreBuiltUIList = [ThirdPartyEmailPasswordPreBuiltUI];
+    } else if (authRecipe === "passwordless") {
+        recipePreBuiltUIList = [PasswordlessPreBuiltUI];
+    } else if (authRecipe === "thirdpartypasswordless") {
+        recipePreBuiltUIList = [ThirdPartyPasswordlessPreBuiltUI];
+    }
+
+    if (emailVerificationMode !== "OFF") {
+        recipePreBuiltUIList.push(EmailVerificationPreBuiltUI);
+    }
+
     const [, setCurrentPath] = useState(window.location.pathname);
 
     useEffect(() => {
@@ -24,8 +52,8 @@ function Routing() {
         window.addEventListener("popstate", onLocationChange);
     }, [setCurrentPath]);
 
-    if (canHandleRoute()) {
-        return <BaseComponent>{getRoutingComponent()}</BaseComponent>;
+    if (canHandleRoute(recipePreBuiltUIList)) {
+        return <BaseComponent>{getRoutingComponent(recipePreBuiltUIList)}</BaseComponent>;
     }
 
     // Custom router...

examples/for-tests-react-16/src/Themes/Dark.js

@@ -1,14 +1,15 @@
-const DarkTheme = {
-    colors: {
-        background: "#333",
-        inputBackground: "#292929",
-        textTitle: "white",
-        textLabel: "white",
-        textPrimary: "white",
-        error: "#ad2e2e",
-        textInput: "#a9a9a9",
-        textLink: "#a9a9a9",
-    },
-};
+const DarkTheme = `
+    [data-supertokens~=container] {
+        --palette-background: 51, 51, 51;
+        --palette-inputBackground: 41, 41, 41;
+        --palette-inputBorder: 41, 41, 41;
+        --palette-textTitle: 255, 255, 255;
+        --palette-textLabel: 255, 255, 255;
+        --palette-textPrimary: 255, 255, 255;
+        --palette-error: 173, 46, 46;
+        --palette-textInput: 169, 169, 169;
+        --palette-textLink: 169, 169, 169;
+    }
+`;
 
 export default DarkTheme;

examples/for-tests-react-16/src/Themes/Helium.js

@@ -1,110 +1,112 @@
-const HeliumTheme = {
-    colors: {
-        background: "#1a1925",
-        inputBackground: "rgba(0, 0, 0, 0.10)",
-        success: "#41a700",
-        primary: "#6333FF",
-        error: "#ff1717",
-        textTitle: "#fff",
-        textLabel: "#010d47",
-        textPrimary: "#aeaeae",
-        textInput: "#fff",
-        textLink: "#4949e4",
-    },
+const HeliumTheme = `
+    [data-supertokens~=container] {
+        --palette-background: 26, 25, 37;
+        --palette-inputBackground: 230, 230, 230;
+        --palette-inputBorder: 230, 230, 230;
+        --palette-success: 65, 167, 0;
+        --palette-primary: 99, 51, 255;
+        --palette-primaryBorder: 99, 51, 255;
+        --palette-error: 255, 23, 23;
+        --palette-textTitle: 255, 255, 255;
+        --palette-textLabel: 1, 13, 71;
+        --palette-textPrimary: 174, 174, 174;
+        --palette-textInput: 255, 255, 255;
+        --palette-textLink: 73, 73, 228;
+        
+        margin-top: 0px;
+        margin-bottom: 0px;
+        border-radius: none;
+        margin: 0 auto;
+        border: none;
+        box-shadow: none;
+        width: 100vw;
+        height: 95vh;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+    @media (max-width: 440px) {
+        [data-supertokens~=container] {
+            margin: 0px;
+            min-width: 100%;
+        }
 
-    style: {
-        divider: {
-            display: "none",
-        },
+        [data-supertokens~=row] {
+            margin: 0px auto;
+            width: 90%;
+        }
 
-        container: {
-            marginTop: "0px",
-            marginBottom: "0px",
-            borderRadius: "none",
-            margin: "0 auto",
-            border: "none",
-            boxShadow: "none",
-            width: "100vw",
-            height: "95vh",
-            textAlign: "center",
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            justifyContent: "center",
-            "@media (max-width: 440px)": {
-                margin: "0px",
-                minWidth: "100%",
-            },
-        },
+        [data-supertokens~=headerSubtitle] {
+            margin: 0px auto;
+            width: 90%;
+            right: none;
+        }
+    }
 
-        inputWrapper: {
-            flex: 1,
-            color: "#e9e9e9",
-            border: "1px solid rgba(255, 255, 255, 0.15)",
-            outline: "none",
-            fontSize: "1.25rem",
-            textAlign: "center",
-            transition: "border 200ms ease 0ms,box-shadow 200ms ease 0ms",
-            borderRadius: "5px",
-            lineHeight: "normal",
-            height: "45px",
-        },
+    [data-supertokens~=divider] {
+        display: none;
+    }
 
-        input: {
-            boxShadow: "none",
-            borderRadius: "5px",
-            height: "45px",
-        },
+    [data-supertokens~=inputWrapper] {
+        flex: 1,
+        color: #e9e9e9;
+        border: 1px solid rgba(255, 255, 255, 0.15);
+        outline: none;
+        font-size 1.25rem;
+        text-align center;
+        transition: border 200ms ease 0ms,box-shadow 200ms ease 0ms;
+        border-radius 5px;
+        line-height normal;
+        height: 45px;
+    }
 
-        label: {
-            display: "none",
-        },
+    [data-supertokens~=input] {
+        box-shadow none;
+        border-radius 5px;
+        height: 45px;
+    }
 
-        row: {
-            marginTop: "0px",
-            borderRadius: "none",
-            margin: "0 auto",
-            border: "none",
-            boxShadow: "none",
-            width: "380px",
-            textAlign: "center",
-            "@media (max-width: 440px)": {
-                margin: "0px auto",
-                width: "90%",
-            },
-        },
+    [data-supertokens~=label] {
+        display: none;
+    }
 
-        headerTitle: {
-            marginBottom: "2rem",
-        },
+    [data-supertokens~=row] {
+        margin-top 0px;
+        border-radius none;
+        margin: 0 auto;
+        border: none;
+        box-shadow none;
+        width: 380px;
+        text-align center;
+    }
 
-        headerSubtitle: {
-            position: "absolute",
-            top: "2rem",
-            right: "1rem",
-            "@media (max-width: 440px)": {
-                margin: "0px auto",
-                width: "90%",
-                right: "none",
-            },
-        },
+    [data-supertokens~=headerTitle] {
+        margin-bottom 2rem;
+    }
 
-        button: {
-            marginTop: "15px",
-            fontWeight: 800,
-            height: "42px",
-            textTransform: "uppercase",
-            letterSpacing: ".08rem",
-            borderRadius: "4px",
-            padding: ".7rem 1.4rem",
-            border: "none",
-        },
+    [data-supertokens~=headerSubtitle] {
+        position: absolute;
+        top: 2rem;
+        right: 1rem;
+    }
 
-        privacyPolicyAndTermsAndConditions: {
-            maxWidth: "100%",
-            marginTop: "25px",
-        },
-    },
-};
+    [data-supertokens~=button] {
+        margin-top 15px;
+        font-weight 800,
+        height: 42px;
+        text-transform uppercase;
+        letter-spacing .08rem;
+        border-radius 4px;
+        padding: .7rem 1.4rem;
+        border: none;
+    }
+
+    [data-supertokens~=privacyPolicyAndTermsAndConditions] {
+        max-width 100%;
+        margin-top 25px;
+    }
+`;
 
 export default HeliumTheme;

examples/for-tests-react-16/src/Themes/Hydrogen.js

@@ -1,110 +1,117 @@
-const HydrogenTheme = {
-    colors: {
-        background: "#1a1925",
-        inputBackground: "rgba(16, 80, 147, 1)",
-        success: "#41a700",
-        primary: "#166cc6",
-        error: "#9a0000",
-        textTitle: "#fff",
-        textLabel: "#fafafa",
-        textPrimary: "#fafafa",
-        textInput: "#fff",
-        textLink: "#fefefe",
+const HydrogenTheme = `
+    [data-supertokens~=container] {
+        --palette-background: 26, 25, 37;
+        --palette-inputBackground: 16, 80, 147;
+        --palette-inputBorder: 16, 80, 147;
+        --palette-success: 65, 167, 0;
+        --palette-primary: 22, 108, 198;
+        --palette-primaryBorder: 4, 104, 193;
+        --palette-error: 154, 0, 0;
+        --palette-textTitle: 255, 255, 255;
+        --palette-textLabel: 250, 250, 250;
+        --palette-textPrimary: 250, 250, 250;
+        --palette-textInput: 255, 255, 255;
+        --palette-textLink: 254, 254, 254;
+    };
+
+    
+    @media (max-width: 440px) {
+        [data-supertokens~=container] {
+            background: rgba(16, 80, 147, 1);
+            margin: 0px;
+            min-width: none;
+            with: 100vw;
+        }
+
+        [data-supertokens~=row] {
+            box-shadow: none;
+            padding-left: 1rem;
+            padding-right: 1rem;
+        }
+    },
+
+
+    [data-supertokens~=divider] {
+        display: none;
     },
 
-    style: {
-        divider: {
-            display: "none",
-        },
+    [data-supertokens~=container] {
+        background-color: none;
+        background: rgba(16, 80, 147, 1) url("./background.svg") no-repeat fixed center;
+        margin-top: 0px;
+        margin-bottom: 0px;
+        border-radius: none;
+        margin: 0 auto;
+        border: none;
+        box-shadow: none;
+        width: 100vw;
+        min-height: 95vh;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    },
 
-        container: {
-            backgroundColor: "none",
-            background: 'rgba(16, 80, 147, 1) url("./background.svg") no-repeat fixed center;',
-            marginTop: "0px",
-            marginBottom: "0px",
-            borderRadius: "none",
-            margin: "0 auto",
-            border: "none",
-            boxShadow: "none",
-            width: "100vw",
-            minHeight: "95vh",
-            textAlign: "center",
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            justifyContent: "center",
-            "@media (max-width: 440px)": {
-                background: "rgba(16, 80, 147, 1)",
-                margin: "0px",
-                minWidth: "none",
-                with: "100vw",
-            },
-        },
+    [data-supertokens~=inputWrapper] {
+        flex: 1,
+        color: #e9e9e9;
+        border: 1px solid rgba(255, 255, 255, 0.15);
+        outline: none;
+        font-size: 1.25rem;
+        text-align: center;
+        transition: border 200ms ease 0ms,box-shadow 200ms ease 0ms;
+        border-radius: 5px;
+        line-height: normal;
+        height: 45px;
+    },
 
-        inputWrapper: {
-            flex: 1,
-            color: "#e9e9e9",
-            border: "1px solid rgba(255, 255, 255, 0.15)",
-            outline: "none",
-            fontSize: "1.25rem",
-            textAlign: "center",
-            transition: "border 200ms ease 0ms,box-shadow 200ms ease 0ms",
-            borderRadius: "5px",
-            lineHeight: "normal",
-            height: "45px",
-        },
+    [data-supertokens~=input] {
+        box-shadow: none;
+        border-radius: 5px;
+        height: 45px;
+    },
 
-        input: {
-            boxShadow: "none",
-            borderRadius: "5px",
-            height: "45px",
-            "&::placeholder": {
-                color: "white",
-            },
-        },
+    [data-supertokens~=input]::placeholder {
+        color: white;
+    },
 
-        row: {
-            marginTop: "20px",
-            marginBottom: "20px",
-            backgroundColor: "rgba(255, 255, 255, 0.5)",
-            background: "linear-gradient(to right bottom,rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2))",
-            backdropFilter: "blur(2rem)",
-            paddingLeft: "3rem",
-            paddingRight: "3rem",
-            borderRadius: "6px",
-            margin: "0px auto",
-            border: "none",
-            boxShadow: "none",
-            width: "350px",
-            maxWidth: "80%",
-            textAlign: "center",
-            "@media (max-width: 440px)": {
-                boxShadow: "none",
-                paddingLeft: "1rem",
-                paddingRight: "1rem",
-            },
-        },
+    [data-supertokens~=row] {
+        margin-top: 20px;
+        margin-bottom: 20px;
+        background-color: rgba(255, 255, 255, 0.5);
+        background: linear-gradient(to right bottom,rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2));
+        backdrop-filter: blur(2rem);
+        padding-left: 3rem;
+        padding-right: 3rem;
+        border-radius: 6px;
+        margin: 0px auto;
+        border: none;
+        box-shadow: none;
+        width: 350px;
+        max-width: 80%;
+        text-align: center;
+    },
 
-        headerTitle: {
-            marginBottom: "2rem",
-        },
+    [data-supertokens~=headerTitle] {
+        margin-bottom: 2rem;
+    },
 
-        button: {
-            marginTop: "15px",
-            fontWeight: 800,
-            height: "42px",
-            textTransform: "uppercase",
-            letterSpacing: ".08rem",
-            borderRadius: "4px",
-            padding: ".7rem 1.4rem",
-            border: "none",
-        },
+    [data-supertokens~=button] {
+        margin-top: 15px;
+        font-weight: 800,
+        height: 42px;
+        text-transform: uppercase;
+        letter-spacing: .08rem;
+        border-radius: 4px;
+        padding: .7rem 1.4rem;
+        border: none;
+    },
 
-        privacyPolicyAndTermsAndConditions: {
-            maxWidth: "100%",
-            marginTop: "25px",
-        },
+    [data-supertokens~=privacyPolicyAndTermsAndConditions] {
+        max-width: 100%;
+        margin-top: 25px;
     },
-};
+`;
 
 export default HydrogenTheme;

examples/for-tests/src/App.js

@@ -117,9 +117,7 @@ if (themeQueryParams !== null) {
 const theme = getTheme();
 
 function getTheme() {
-    let theme = {
-        colors: {},
-    };
+    let theme = "";
 
     const themeParams = window.localStorage.getItem("useTheme");
 
@@ -279,6 +277,18 @@ SuperTokens.init({
 
 /* App */
 function App() {
+    useEffect(() => {
+        window.addEventListener("TPEP.getAuthorisationURLWithQueryParamsAndSetState", async () => {
+            ThirdPartyEmailPassword.getAuthorisationURLWithQueryParamsAndSetState({
+                providerId: "google",
+                authorisationURL: "",
+                userContext: {
+                    isPreAPITest: true,
+                },
+            });
+        });
+    }, []);
+
     if (doNotUseReactRouterDom) {
         return (
             <ErrorBoundary>
@@ -476,12 +486,13 @@ function SessionInfoTable({ sessionInfo }) {
 
 function getEmailVerificationConfigs({ disableDefaultUI }) {
     return EmailVerification.init({
+        useShadowDom,
         disableDefaultUI,
         sendVerifyEmailScreen: {
-            style: theme.style,
+            style: theme,
         },
         verifyEmailLinkClickedScreen: {
-            style: theme.style,
+            style: theme,
         },
         mode: emailVerificationMode,
         getRedirectionURL: async (context) => {
@@ -531,11 +542,11 @@ function getEmailVerificationConfigs({ disableDefaultUI }) {
 
 function getEmailPasswordConfigs({ disableDefaultUI }) {
     return EmailPassword.init({
-        style: {
-            container: {
-                fontFamily: "cursive",
-            },
-        },
+        style: `          
+            [data-supertokens~=container] {
+                font-family: cursive;
+            }
+        `,
         override: {
             functions: (implementation) => {
                 const log = logWithPrefix(`ST_LOGS EMAIL_PASSWORD OVERRIDE`);
@@ -565,7 +576,6 @@ function getEmailPasswordConfigs({ disableDefaultUI }) {
                 };
             },
         },
-        palette: theme.colors,
         preAPIHook: async (context) => {
             if (localStorage.getItem(`SHOW_GENERAL_ERROR`) === `EMAIL_PASSWORD ${context.action}`) {
                 let errorFromStorage = localStorage.getItem("TRANSLATED_GENERAL_ERROR");
@@ -599,20 +609,20 @@ function getEmailPasswordConfigs({ disableDefaultUI }) {
         resetPasswordUsingTokenFeature: {
             disableDefaultUI,
             enterEmailForm: {
-                style: theme.style,
+                style: theme,
             },
             submitNewPasswordForm: {
-                style: theme.style,
+                style: theme,
             },
         },
         signInAndUpFeature: {
             disableDefaultUI,
             defaultToSignUp,
             signInForm: {
-                style: theme.style,
+                style: theme,
             },
             signUpForm: {
-                style: theme.style,
+                style: theme,
                 privacyPolicyLink: "https://supertokens.com/legal/privacy-policy",
                 termsOfServiceLink: "https://supertokens.com/legal/terms-and-conditions",
                 formFields,
@@ -623,11 +633,6 @@ function getEmailPasswordConfigs({ disableDefaultUI }) {
 
 function getThirdPartyPasswordlessConfigs({ disableDefaultUI, thirdPartyRedirectURL }) {
     return ThirdPartyPasswordless.init({
-        style: {
-            container: {
-                // fontFamily: "cursive",
-            },
-        },
         override: {
             functions: (implementation) => {
                 const log = logWithPrefix(`ST_LOGS THIRDPARTYPASSWORDLESS OVERRIDE`);
@@ -689,7 +694,6 @@ function getThirdPartyPasswordlessConfigs({ disableDefaultUI, thirdPartyRedirect
                 };
             },
         },
-        palette: theme.colors,
         preAPIHook: async (context) => {
             if (localStorage.getItem(`SHOW_GENERAL_ERROR`) === `THIRD_PARTY_PASSWORDLESS ${context.action}`) {
                 if (context.action === "GET_AUTHORISATION_URL") {
@@ -722,12 +726,12 @@ function getThirdPartyPasswordlessConfigs({ disableDefaultUI, thirdPartyRedirect
         disablePasswordless: false,
         signInUpFeature: {
             disableDefaultUI,
-            style: theme.style,
-            thirdPartyProviderAndEmailOrPhoneFormStyle: {
-                providerCustom: {
-                    color: "red",
+            style: theme,
+            thirdPartyProviderAndEmailOrPhoneFormStyle: `
+                [data-supertokens~=providerCustom] {
+                    color: red;
                 },
-            },
+            `,
             privacyPolicyLink: "https://supertokens.io/legal/privacy-policy",
             termsOfServiceLink: "https://supertokens.io/legal/terms-and-conditions",
             providers: [
@@ -753,18 +757,13 @@ function getThirdPartyPasswordlessConfigs({ disableDefaultUI, thirdPartyRedirect
         },
         linkClickedScreenFeature: {
             disableDefaultUI,
-            style: theme.style,
+            style: theme,
         },
     });
 }
 
 function getPasswordlessConfigs({ disableDefaultUI }) {
     return Passwordless.init({
-        style: {
-            container: {
-                // fontFamily: "cursive",
-            },
-        },
         override: {
             functions: (implementation) => {
                 const log = logWithPrefix(`ST_LOGS PASSWORDLESS OVERRIDE`);
@@ -806,7 +805,6 @@ function getPasswordlessConfigs({ disableDefaultUI }) {
                 };
             },
         },
-        palette: theme.colors,
         preAPIHook: async (context) => {
             if (localStorage.getItem(`SHOW_GENERAL_ERROR`) === `PASSWORDLESS ${context.action}`) {
                 let jsonBody = JSON.parse(context.requestInit.body);
@@ -839,25 +837,25 @@ function getPasswordlessConfigs({ disableDefaultUI }) {
                 : undefined,
             resendEmailOrSMSGapInSeconds: 2,
             disableDefaultUI,
-            style: theme.style,
+            style: theme,
 
             privacyPolicyLink: "https://supertokens.com/legal/privacy-policy",
             termsOfServiceLink: "https://supertokens.com/legal/terms-and-conditions",
         },
         linkClickedScreenFeature: {
             disableDefaultUI,
-            style: theme.style,
+            style: theme,
         },
     });
 }
 
 function getThirdPartyConfigs({ disableDefaultUI, thirdPartyRedirectURL }) {
     return ThirdParty.init({
-        style: {
-            container: {
-                fontFamily: "cursive",
-            },
-        },
+        style: `          
+            [data-supertokens~=container] {
+                font-family: cursive;
+            }
+        `,
         preAPIHook: async (context) => {
             if (localStorage.getItem(`SHOW_GENERAL_ERROR`) === `THIRD_PARTY ${context.action}`) {
                 if (context.action === "GET_AUTHORISATION_URL") {
@@ -915,10 +913,9 @@ function getThirdPartyConfigs({ disableDefaultUI, thirdPartyRedirectURL }) {
             },
         },
         useShadowDom,
-        palette: theme.colors,
         signInAndUpFeature: {
             disableDefaultUI,
-            style: theme.style,
+            style: theme,
             privacyPolicyLink: "https://supertokens.com/legal/privacy-policy",
             termsOfServiceLink: "https://supertokens.com/legal/terms-and-conditions",
             providers: [
@@ -939,7 +936,7 @@ function getThirdPartyConfigs({ disableDefaultUI, thirdPartyRedirectURL }) {
         },
 
         oAuthCallbackScreen: {
-            style: theme.style,
+            style: theme,
         },
     });
 }
@@ -1032,6 +1029,22 @@ function getThirdPartyEmailPasswordConfigs({ disableDefaultUI, thirdPartyRedirec
                         }
 
                         log(`GET_OAUTH_AUTHORISATION_URL`);
+
+                        if (input.userContext["isPreAPITest"] !== undefined) {
+                            return implementation.getAuthorisationURLFromBackend({
+                                ...input,
+                                options: {
+                                    preAPIHook: async (input) => {
+                                        window.localStorage.setItem(
+                                            "getAuthorisationURLFromBackend-pre-api-hook",
+                                            "true"
+                                        );
+                                        return input;
+                                    },
+                                },
+                            });
+                        }
+
                         return implementation.getAuthorisationURLFromBackend(input);
                     },
                     submitNewPassword(input) {
@@ -1093,7 +1106,6 @@ function getThirdPartyEmailPasswordConfigs({ disableDefaultUI, thirdPartyRedirec
             },
         },
         useShadowDom,
-        palette: theme.colors,
         resetPasswordUsingTokenFeature: {
             disableDefaultUI,
         },
@@ -1105,7 +1117,7 @@ function getThirdPartyEmailPasswordConfigs({ disableDefaultUI, thirdPartyRedirec
                 privacyPolicyLink: "https://supertokens.com/legal/privacy-policy",
                 termsOfServiceLink: "https://supertokens.com/legal/terms-and-conditions",
             },
-            style: theme.style,
+            style: theme,
             providers: [
                 ThirdPartyEmailPassword.Github.init(),
                 ThirdPartyEmailPassword.Google.init(),
@@ -1125,7 +1137,7 @@ function getThirdPartyEmailPasswordConfigs({ disableDefaultUI, thirdPartyRedirec
         disableEmailPassword: false,
 
         oAuthCallbackScreen: {
-            style: theme.style,
+            style: theme,
         },
     });
 }

examples/for-tests/src/AppWithReactDomRouter.js

@@ -1,32 +1,59 @@
 import React, { useState } from "react";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
-import { getSuperTokensRoutesForReactRouterDom } from "supertokens-auth-react";
-import { SignInAndUp } from "supertokens-auth-react/recipe/emailpassword";
+import { SignInAndUp } from "supertokens-auth-react/recipe/emailpassword/prebuiltui";
 import { SessionAuth } from "supertokens-auth-react/recipe/session";
 import {
     ResetPasswordUsingToken,
     SignInAndUp as TPSignInAndUp,
     ThirdPartySignInAndUpCallback,
-} from "supertokens-auth-react/recipe/thirdpartyemailpassword";
+} from "supertokens-auth-react/recipe/thirdpartyemailpassword/prebuiltui";
+import { getSuperTokensRoutesForReactRouterDom } from "supertokens-auth-react/ui";
+import { ThirdPartyEmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/thirdpartyemailpassword/prebuiltui";
+import { ThirdPartyPasswordlessPreBuiltUI } from "supertokens-auth-react/recipe/thirdpartypasswordless/prebuiltui";
+import { EmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/emailpassword/prebuiltui";
+import { PasswordlessPreBuiltUI } from "supertokens-auth-react/recipe/passwordless/prebuiltui";
+import { EmailVerificationPreBuiltUI } from "supertokens-auth-react/recipe/emailverification/prebuiltui";
+import { ThirdPartyPreBuiltUI } from "supertokens-auth-react/recipe/thirdparty/prebuiltui";
 import { BaseComponent, Home, Contact, Dashboard, DashboardNoAuthRequired } from "./App";
 
 function AppWithReactDomRouter(props) {
     /**
      * For user context tests we add this query param so the additional routes
-     * dont interfere with other tests
+     * don't interfere with other tests
      */
     const urlParams = new URLSearchParams(window.location.search);
     const isForUserContext = urlParams.get("forUserContext") === "true";
     const [claimValidators, setClaimValidators] = useState(undefined);
     window.setClaimValidators = setClaimValidators;
     const keyWithClaimValidators =
         claimValidators !== undefined ? claimValidators.map((a) => a.id).join("_") : undefined;
+    const authRecipe = window.localStorage.getItem("authRecipe") || "emailpassword";
+    const emailVerificationMode = window.localStorage.getItem("mode") || "OFF";
+
+    let recipePreBuiltUIList = [EmailPasswordPreBuiltUI];
+    if (authRecipe === "thirdparty") {
+        recipePreBuiltUIList = [ThirdPartyPreBuiltUI];
+    } else if (authRecipe === "emailpassword") {
+        recipePreBuiltUIList = [EmailPasswordPreBuiltUI];
+    } else if (authRecipe === "both") {
+        recipePreBuiltUIList = [EmailPasswordPreBuiltUI, ThirdPartyPreBuiltUI];
+    } else if (authRecipe === "thirdpartyemailpassword") {
+        recipePreBuiltUIList = [ThirdPartyEmailPasswordPreBuiltUI];
+    } else if (authRecipe === "passwordless") {
+        recipePreBuiltUIList = [PasswordlessPreBuiltUI];
+    } else if (authRecipe === "thirdpartypasswordless") {
+        recipePreBuiltUIList = [ThirdPartyPasswordlessPreBuiltUI];
+    }
+    if (emailVerificationMode !== "OFF") {
+        recipePreBuiltUIList.push(EmailVerificationPreBuiltUI);
+    }
+
     return (
         <div className="App">
             <Router>
                 <BaseComponent>
                     <Routes caseSensitive>
-                        {getSuperTokensRoutesForReactRouterDom(require("react-router-dom"))}
+                        {getSuperTokensRoutesForReactRouterDom(require("react-router-dom"), recipePreBuiltUIList)}
                         <Route path="/" element={<Home />} />
                         <Route
                             path="/CasE/Case-SensItive1-PAth"

examples/for-tests/src/AppWithoutRouter.js

@@ -1,6 +1,12 @@
 import React, { useEffect, useState } from "react";
 import { BaseComponent, Home } from "./App";
-import { canHandleRoute, getRoutingComponent } from "supertokens-auth-react";
+import { getRoutingComponent, canHandleRoute } from "supertokens-auth-react/ui";
+import { ThirdPartyEmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/thirdpartyemailpassword/prebuiltui";
+import { ThirdPartyPasswordlessPreBuiltUI } from "supertokens-auth-react/recipe/thirdpartypasswordless/prebuiltui";
+import { EmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/emailpassword/prebuiltui";
+import { PasswordlessPreBuiltUI } from "supertokens-auth-react/recipe/passwordless/prebuiltui";
+import { ThirdPartyPreBuiltUI } from "supertokens-auth-react/recipe/thirdparty/prebuiltui";
+import { EmailVerificationPreBuiltUI } from "supertokens-auth-react/recipe/emailverification/prebuiltui";
 
 function AppWithoutRouter() {
     return (
@@ -14,6 +20,28 @@ function AppWithoutRouter() {
 }
 
 function Routing() {
+    const authRecipe = window.localStorage.getItem("authRecipe") || "emailpassword";
+    const emailVerificationMode = window.localStorage.getItem("mode") || "OFF";
+
+    let recipePreBuiltUIList = [EmailPasswordPreBuiltUI];
+    if (authRecipe === "thirdparty") {
+        recipePreBuiltUIList = [ThirdPartyPreBuiltUI];
+    } else if (authRecipe === "emailpassword") {
+        recipePreBuiltUIList = [EmailPasswordPreBuiltUI];
+    } else if (authRecipe === "both") {
+        recipePreBuiltUIList = [EmailPasswordPreBuiltUI, ThirdPartyPreBuiltUI];
+    } else if (authRecipe === "thirdpartyemailpassword") {
+        recipePreBuiltUIList = [ThirdPartyEmailPasswordPreBuiltUI];
+    } else if (authRecipe === "passwordless") {
+        recipePreBuiltUIList = [PasswordlessPreBuiltUI];
+    } else if (authRecipe === "thirdpartypasswordless") {
+        recipePreBuiltUIList = [ThirdPartyPasswordlessPreBuiltUI];
+    }
+
+    if (emailVerificationMode !== "OFF") {
+        recipePreBuiltUIList.push(EmailVerificationPreBuiltUI);
+    }
+
     const [, setCurrentPath] = useState(window.location.pathname);
 
     useEffect(() => {
@@ -24,8 +52,8 @@ function Routing() {
         window.addEventListener("popstate", onLocationChange);
     }, [setCurrentPath]);
 
-    if (canHandleRoute()) {
-        return <BaseComponent>{getRoutingComponent()}</BaseComponent>;
+    if (canHandleRoute(recipePreBuiltUIList)) {
+        return <BaseComponent>{getRoutingComponent(recipePreBuiltUIList)}</BaseComponent>;
     }
 
     // Custom router...

examples/for-tests/src/Themes/Dark.js

@@ -1,14 +1,15 @@
-const DarkTheme = {
-    colors: {
-        background: "#333",
-        inputBackground: "#292929",
-        textTitle: "white",
-        textLabel: "white",
-        textPrimary: "white",
-        error: "#ad2e2e",
-        textInput: "#a9a9a9",
-        textLink: "#a9a9a9",
-    },
-};
+const DarkTheme = `
+    [data-supertokens~=container] {
+        --palette-background: 51, 51, 51;
+        --palette-inputBackground: 41, 41, 41;
+        --palette-inputBorder: 41, 41, 41;
+        --palette-textTitle: 255, 255, 255;
+        --palette-textLabel: 255, 255, 255;
+        --palette-textPrimary: 255, 255, 255;
+        --palette-error: 173, 46, 46;
+        --palette-textInput: 169, 169, 169;
+        --palette-textLink: 169, 169, 169;
+    }
+`;
 
 export default DarkTheme;

examples/for-tests/src/Themes/Helium.js

@@ -1,110 +1,112 @@
-const HeliumTheme = {
-    colors: {
-        background: "#1a1925",
-        inputBackground: "rgba(0, 0, 0, 0.10)",
-        success: "#41a700",
-        primary: "#6333FF",
-        error: "#ff1717",
-        textTitle: "#fff",
-        textLabel: "#010d47",
-        textPrimary: "#aeaeae",
-        textInput: "#fff",
-        textLink: "#4949e4",
-    },
+const HeliumTheme = `
+    [data-supertokens~=container] {
+        --palette-background: 26, 25, 37;
+        --palette-inputBackground: 230, 230, 230;
+        --palette-inputBorder: 230, 230, 230;
+        --palette-success: 65, 167, 0;
+        --palette-primary: 99, 51, 255;
+        --palette-primaryBorder: 99, 51, 255;
+        --palette-error: 255, 23, 23;
+        --palette-textTitle: 255, 255, 255;
+        --palette-textLabel: 1, 13, 71;
+        --palette-textPrimary: 174, 174, 174;
+        --palette-textInput: 255, 255, 255;
+        --palette-textLink: 73, 73, 228;
+        
+        margin-top: 0px;
+        margin-bottom: 0px;
+        border-radius: none;
+        margin: 0 auto;
+        border: none;
+        box-shadow: none;
+        width: 100vw;
+        height: 95vh;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+    @media (max-width: 440px) {
+        [data-supertokens~=container] {
+            margin: 0px;
+            min-width: 100%;
+        }
 
-    style: {
-        divider: {
-            display: "none",
-        },
+        [data-supertokens~=row] {
+            margin: 0px auto;
+            width: 90%;
+        }
 
-        container: {
-            marginTop: "0px",
-            marginBottom: "0px",
-            borderRadius: "none",
-            margin: "0 auto",
-            border: "none",
-            boxShadow: "none",
-            width: "100vw",
-            height: "95vh",
-            textAlign: "center",
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            justifyContent: "center",
-            "@media (max-width: 440px)": {
-                margin: "0px",
-                minWidth: "100%",
-            },
-        },
+        [data-supertokens~=headerSubtitle] {
+            margin: 0px auto;
+            width: 90%;
+            right: none;
+        }
+    }
 
-        inputWrapper: {
-            flex: 1,
-            color: "#e9e9e9",
-            border: "1px solid rgba(255, 255, 255, 0.15)",
-            outline: "none",
-            fontSize: "1.25rem",
-            textAlign: "center",
-            transition: "border 200ms ease 0ms,box-shadow 200ms ease 0ms",
-            borderRadius: "5px",
-            lineHeight: "normal",
-            height: "45px",
-        },
+    [data-supertokens~=divider] {
+        display: none;
+    }
 
-        input: {
-            boxShadow: "none",
-            borderRadius: "5px",
-            height: "45px",
-        },
+    [data-supertokens~=inputWrapper] {
+        flex: 1,
+        color: #e9e9e9;
+        border: 1px solid rgba(255, 255, 255, 0.15);
+        outline: none;
+        font-size 1.25rem;
+        text-align center;
+        transition: border 200ms ease 0ms,box-shadow 200ms ease 0ms;
+        border-radius 5px;
+        line-height normal;
+        height: 45px;
+    }
 
-        label: {
-            display: "none",
-        },
+    [data-supertokens~=input] {
+        box-shadow none;
+        border-radius 5px;
+        height: 45px;
+    }
 
-        row: {
-            marginTop: "0px",
-            borderRadius: "none",
-            margin: "0 auto",
-            border: "none",
-            boxShadow: "none",
-            width: "380px",
-            textAlign: "center",
-            "@media (max-width: 440px)": {
-                margin: "0px auto",
-                width: "90%",
-            },
-        },
+    [data-supertokens~=label] {
+        display: none;
+    }
 
-        headerTitle: {
-            marginBottom: "2rem",
-        },
+    [data-supertokens~=row] {
+        margin-top 0px;
+        border-radius none;
+        margin: 0 auto;
+        border: none;
+        box-shadow none;
+        width: 380px;
+        text-align center;
+    }
 
-        headerSubtitle: {
-            position: "absolute",
-            top: "2rem",
-            right: "1rem",
-            "@media (max-width: 440px)": {
-                margin: "0px auto",
-                width: "90%",
-                right: "none",
-            },
-        },
+    [data-supertokens~=headerTitle] {
+        margin-bottom 2rem;
+    }
 
-        button: {
-            marginTop: "15px",
-            fontWeight: 800,
-            height: "42px",
-            textTransform: "uppercase",
-            letterSpacing: ".08rem",
-            borderRadius: "4px",
-            padding: ".7rem 1.4rem",
-            border: "none",
-        },
+    [data-supertokens~=headerSubtitle] {
+        position: absolute;
+        top: 2rem;
+        right: 1rem;
+    }
 
-        privacyPolicyAndTermsAndConditions: {
-            maxWidth: "100%",
-            marginTop: "25px",
-        },
-    },
-};
+    [data-supertokens~=button] {
+        margin-top 15px;
+        font-weight 800,
+        height: 42px;
+        text-transform uppercase;
+        letter-spacing .08rem;
+        border-radius 4px;
+        padding: .7rem 1.4rem;
+        border: none;
+    }
+
+    [data-supertokens~=privacyPolicyAndTermsAndConditions] {
+        max-width 100%;
+        margin-top 25px;
+    }
+`;
 
 export default HeliumTheme;

examples/for-tests/src/Themes/Hydrogen.js

@@ -1,110 +1,117 @@
-const HydrogenTheme = {
-    colors: {
-        background: "#1a1925",
-        inputBackground: "rgba(16, 80, 147, 1)",
-        success: "#41a700",
-        primary: "#166cc6",
-        error: "#9a0000",
-        textTitle: "#fff",
-        textLabel: "#fafafa",
-        textPrimary: "#fafafa",
-        textInput: "#fff",
-        textLink: "#fefefe",
+const HydrogenTheme = `
+    [data-supertokens~=container] {
+        --palette-background: 26, 25, 37;
+        --palette-inputBackground: 16, 80, 147;
+        --palette-inputBorder: 16, 80, 147;
+        --palette-success: 65, 167, 0;
+        --palette-primary: 22, 108, 198;
+        --palette-primaryBorder: 4, 104, 193;
+        --palette-error: 154, 0, 0;
+        --palette-textTitle: 255, 255, 255;
+        --palette-textLabel: 250, 250, 250;
+        --palette-textPrimary: 250, 250, 250;
+        --palette-textInput: 255, 255, 255;
+        --palette-textLink: 254, 254, 254;
+    };
+
+    
+    @media (max-width: 440px) {
+        [data-supertokens~=container] {
+            background: rgba(16, 80, 147, 1);
+            margin: 0px;
+            min-width: none;
+            with: 100vw;
+        }
+
+        [data-supertokens~=row] {
+            box-shadow: none;
+            padding-left: 1rem;
+            padding-right: 1rem;
+        }
+    },
+
+
+    [data-supertokens~=divider] {
+        display: none;
     },
 
-    style: {
-        divider: {
-            display: "none",
-        },
+    [data-supertokens~=container] {
+        background-color: none;
+        background: rgba(16, 80, 147, 1) url("./background.svg") no-repeat fixed center;
+        margin-top: 0px;
+        margin-bottom: 0px;
+        border-radius: none;
+        margin: 0 auto;
+        border: none;
+        box-shadow: none;
+        width: 100vw;
+        min-height: 95vh;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    },
 
-        container: {
-            backgroundColor: "none",
-            background: 'rgba(16, 80, 147, 1) url("./background.svg") no-repeat fixed center;',
-            marginTop: "0px",
-            marginBottom: "0px",
-            borderRadius: "none",
-            margin: "0 auto",
-            border: "none",
-            boxShadow: "none",
-            width: "100vw",
-            minHeight: "95vh",
-            textAlign: "center",
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            justifyContent: "center",
-            "@media (max-width: 440px)": {
-                background: "rgba(16, 80, 147, 1)",
-                margin: "0px",
-                minWidth: "none",
-                with: "100vw",
-            },
-        },
+    [data-supertokens~=inputWrapper] {
+        flex: 1,
+        color: #e9e9e9;
+        border: 1px solid rgba(255, 255, 255, 0.15);
+        outline: none;
+        font-size: 1.25rem;
+        text-align: center;
+        transition: border 200ms ease 0ms,box-shadow 200ms ease 0ms;
+        border-radius: 5px;
+        line-height: normal;
+        height: 45px;
+    },
 
-        inputWrapper: {
-            flex: 1,
-            color: "#e9e9e9",
-            border: "1px solid rgba(255, 255, 255, 0.15)",
-            outline: "none",
-            fontSize: "1.25rem",
-            textAlign: "center",
-            transition: "border 200ms ease 0ms,box-shadow 200ms ease 0ms",
-            borderRadius: "5px",
-            lineHeight: "normal",
-            height: "45px",
-        },
+    [data-supertokens~=input] {
+        box-shadow: none;
+        border-radius: 5px;
+        height: 45px;
+    },
 
-        input: {
-            boxShadow: "none",
-            borderRadius: "5px",
-            height: "45px",
-            "&::placeholder": {
-                color: "white",
-            },
-        },
+    [data-supertokens~=input]::placeholder {
+        color: white;
+    },
 
-        row: {
-            marginTop: "20px",
-            marginBottom: "20px",
-            backgroundColor: "rgba(255, 255, 255, 0.5)",
-            background: "linear-gradient(to right bottom,rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2))",
-            backdropFilter: "blur(2rem)",
-            paddingLeft: "3rem",
-            paddingRight: "3rem",
-            borderRadius: "6px",
-            margin: "0px auto",
-            border: "none",
-            boxShadow: "none",
-            width: "350px",
-            maxWidth: "80%",
-            textAlign: "center",
-            "@media (max-width: 440px)": {
-                boxShadow: "none",
-                paddingLeft: "1rem",
-                paddingRight: "1rem",
-            },
-        },
+    [data-supertokens~=row] {
+        margin-top: 20px;
+        margin-bottom: 20px;
+        background-color: rgba(255, 255, 255, 0.5);
+        background: linear-gradient(to right bottom,rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2));
+        backdrop-filter: blur(2rem);
+        padding-left: 3rem;
+        padding-right: 3rem;
+        border-radius: 6px;
+        margin: 0px auto;
+        border: none;
+        box-shadow: none;
+        width: 350px;
+        max-width: 80%;
+        text-align: center;
+    },
 
-        headerTitle: {
-            marginBottom: "2rem",
-        },
+    [data-supertokens~=headerTitle] {
+        margin-bottom: 2rem;
+    },
 
-        button: {
-            marginTop: "15px",
-            fontWeight: 800,
-            height: "42px",
-            textTransform: "uppercase",
-            letterSpacing: ".08rem",
-            borderRadius: "4px",
-            padding: ".7rem 1.4rem",
-            border: "none",
-        },
+    [data-supertokens~=button] {
+        margin-top: 15px;
+        font-weight: 800,
+        height: 42px;
+        text-transform: uppercase;
+        letter-spacing: .08rem;
+        border-radius: 4px;
+        padding: .7rem 1.4rem;
+        border: none;
+    },
 
-        privacyPolicyAndTermsAndConditions: {
-            maxWidth: "100%",
-            marginTop: "25px",
-        },
+    [data-supertokens~=privacyPolicyAndTermsAndConditions] {
+        max-width: 100%;
+        margin-top: 25px;
     },
-};
+`;
 
 export default HydrogenTheme;

examples/with-angular-thirdpartyemailpassword/README.md

@@ -1,60 +1,11 @@
 ![SuperTokens banner](https://raw.githubusercontent.com/supertokens/supertokens-logo/master/images/Artboard%20%E2%80%93%2027%402x.png)
 
-# SuperTokens ThirdpartyEmailPassword demo app with Angular and React
-
-This demo app demonstrates the following use cases:
-
--   Login / sign up with SuperTokens
--   Logout
--   Forgot password flow
--   Session management
-
-In this demo, when our root component loads we will initialize the `supertokens-web-js` SDK which will be used by our other components for session management. When we visit an auth related route (`/auth/*` in this case), we will load a React component which will initialize the `supertokens-auth-react` SDK and handle the authentication flow.
-
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.3.6.
-
-## Project setup
-
-Clone the repo, enter the directory, and use `npm` to install the project dependencies:
-
-```bash
-git clone https://github.com/supertokens/supertokens-auth-react
-cd supertokens-auth-react/examples/with-angular-thirdpartyemailpassword
-npm install
-```
-
-## Run the demo app
-
-This compiles and serves the Angular App on port `4200` and starts up a server on port `3001`
-
-### Dev build
-
-```bash
-npm run dev
-```
-
-### Production build
+## Run the following command to get started.
 
 ```bash
-npm run start
+npx create-supertokens-app --frontend=angular --backend=node --recipe=thirdpartyemailpassword
 ```
 
-The app will start on `http://localhost:4200`
-
-## Project structure
-
-### Backend
-
--   The backend API is in the `server.ts` file.
-
-### Frontend
-
--   The frontend code is located in the `/src` folder.
--   Our frontend will have 3 Angular components, a `home`, `auth` and `root` component.
--   The `home` component will use `supertokens-web-js` SDK for session management and the `auth` component will use `supertokens-auth-react` for Authentication flows and UI.
--   Since both the `home` and `auth` components (since `supertokens-auth-react` SDK uses `supertokens-web-js`) depend on `supertokens-web-js`, we can initialize this library in our root component. This will also reduce the bundle sizes for the `home` and `auth` component.
--   The `root` component contains our routing logic with refrences to the the `home` and `auth` component modules to enable code splitting.
-
 ## Author
 
 Created with :heart: by the folks at supertokens.com.

examples/with-aws-lambda/backend/config.js

@@ -1,5 +1,6 @@
 let Session = require("supertokens-node/recipe/session");
 let EmailPassword = require("supertokens-node/recipe/emailpassword");
+let Dashboard = require("supertokens-node/recipe/dashboard");
 
 module.exports.getBackendConfig = () => {
     return {
@@ -14,7 +15,7 @@ module.exports.getBackendConfig = () => {
             apiBasePath: "/auth",
             apiGatewayPath: "/dev", // use this if you are using AWS API Gateway. The value should be equal to the stage value. i.e. if your stage in API Gateway is prod, this value should be /prod
         },
-        recipeList: [EmailPassword.init(), Session.init()],
+        recipeList: [EmailPassword.init(), Session.init(), Dashboard.init()],
         isInServerlessEnv: true,
     };
 };

examples/with-aws-lambda/backend/package.json

@@ -11,6 +11,6 @@
     "dependencies": {
         "@middy/core": "^2.5.1",
         "@middy/http-cors": "^2.5.1",
-        "supertokens-node": "^12.0.0"
+        "supertokens-node": "^13.1.5"
     }
 }

examples/with-aws-lambda/frontend/package.json

@@ -23,7 +23,7 @@
         "react-dom": "^18.0.0",
         "react-router-dom": "^6.2.1",
         "react-scripts": "^5.0.1",
-        "supertokens-auth-react": "^0.26.0",
+        "supertokens-auth-react": "latest",
         "typescript": "^4.0.3",
         "web-vitals": "^0.2.4"
     },

examples/with-aws-lambda/frontend/src/App.tsx

@@ -1,6 +1,8 @@
 import "./App.css";
-import SuperTokens, { SuperTokensWrapper, getSuperTokensRoutesForReactRouterDom } from "supertokens-auth-react";
+import SuperTokens, { SuperTokensWrapper } from "supertokens-auth-react";
+import { getSuperTokensRoutesForReactRouterDom } from "supertokens-auth-react/ui";
 import EmailPassword from "supertokens-auth-react/recipe/emailpassword";
+import { EmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/emailpassword/prebuiltui";
 import Session, { SessionAuth } from "supertokens-auth-react/recipe/session";
 import Home from "./Home";
 import { Routes, BrowserRouter as Router, Route } from "react-router-dom";
@@ -36,7 +38,9 @@ function App() {
                 <div className="App">
                     <div className="fill">
                         <Routes>
-                            {getSuperTokensRoutesForReactRouterDom(require("react-router-dom"))}
+                            {getSuperTokensRoutesForReactRouterDom(require("react-router-dom"), [
+                                EmailPasswordPreBuiltUI,
+                            ])}
                             <Route
                                 path="/"
                                 element={

examples/with-aws-lambda/frontend/src/Home/CallAPIView.tsx

@@ -1,8 +1,5 @@
 import axios from "axios";
-import Session from "supertokens-auth-react/recipe/session";
-import Emailpassword from "supertokens-auth-react/recipe/emailpassword";
 import { getAPIDomain } from "../App";
-Session.addAxiosInterceptors(axios);
 
 export default function CallAPIView() {
     async function callAPIClicked() {

examples/with-cli-login/api-server/index.ts

@@ -7,6 +7,7 @@ import { middleware, errorHandler, SessionRequest } from "supertokens-node/frame
 import ThirdPartyEmailPassword from "supertokens-node/recipe/thirdpartyemailpassword";
 import Passwordless from "supertokens-node/recipe/passwordless";
 import UserMetadata from "supertokens-node/recipe/usermetadata";
+import Dashboard from "supertokens-node/recipe/dashboard";
 import { v4 as uuidv4 } from "uuid";
 import JWT from "supertokens-node/recipe/jwt";
 require("dotenv").config();
@@ -74,6 +75,7 @@ supertokens.init({
             },
         }),
         Session.init(),
+        Dashboard.init(),
     ],
 });
 

examples/with-cli-login/package.json

@@ -22,8 +22,8 @@
         "react-dom": "^18.1.0",
         "react-router-dom": "^6.3.0",
         "react-scripts": "^5.0.1",
-        "supertokens-auth-react": "^0.26.0",
-        "supertokens-node": "^12.0.0",
+        "supertokens-auth-react": "latest",
+        "supertokens-node": "^13.1.5",
         "ts-node-dev": "^2.0.0",
         "typescript": "^4.7.2",
         "uuid": "^8.3.2",

examples/with-cli-login/src/App.tsx

@@ -1,7 +1,9 @@
 import { useState } from "react";
 import "./App.css";
-import SuperTokens, { SuperTokensWrapper, getSuperTokensRoutesForReactRouterDom } from "supertokens-auth-react";
+import SuperTokens, { SuperTokensWrapper } from "supertokens-auth-react";
+import { getSuperTokensRoutesForReactRouterDom } from "supertokens-auth-react/ui";
 import ThirdPartyEmailPassword from "supertokens-auth-react/recipe/thirdpartyemailpassword";
+import { ThirdPartyEmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/thirdpartyemailpassword/prebuiltui";
 import Session, { SessionAuth } from "supertokens-auth-react/recipe/session";
 import Home from "./Home";
 import { Routes, BrowserRouter as Router, Route, useLocation } from "react-router-dom";
@@ -64,7 +66,9 @@ function App() {
                 <div className="fill">
                     <Routes>
                         {/* This shows the login UI on "/auth" route */}
-                        {getSuperTokensRoutesForReactRouterDom(require("react-router-dom"))}
+                        {getSuperTokensRoutesForReactRouterDom(require("react-router-dom"), [
+                            ThirdPartyEmailPasswordPreBuiltUI,
+                        ])}
 
                         <Route
                             path="/"

examples/with-cli-login/src/Home/CallAPIView.tsx

@@ -1,7 +1,5 @@
 import axios from "axios";
-import Session from "supertokens-auth-react/recipe/session";
 import { getApiDomain } from "../App";
-Session.addAxiosInterceptors(axios);
 
 export default function CallAPIView() {
     async function callAPIClicked() {

examples/with-emailpassword-vercel/README.md

@@ -45,7 +45,7 @@ To deploy this demo application on Vercel, follow the steps outlined below:
 
 3. Run the `vercel` command, to deploy the project.
     ```
-    vercel
+    vercel --prod
     ```
 
 Also, this project is [live](https://with-emailpassword-vercel-beryl.vercel.app/) on Vercel, feel free to test out the project.

examples/with-emailpassword-vercel/api/index.js

@@ -8,6 +8,7 @@ let { verifySession } = require("supertokens-node/recipe/session/framework/expre
 let { middleware, errorHandler } = require("supertokens-node/framework/express");
 let EmailPassword = require("supertokens-node/recipe/emailpassword");
 let EmailVerification = require("supertokens-node/recipe/emailverification");
+let Dashboard = require("supertokens-node/recipe/dashboard");
 
 const apiDomain = process.env.VERCEL_URL !== undefined ? process.env.VERCEL_URL : `http://localhost:3001`;
 const websiteDomain = process.env.VERCEL_URL !== undefined ? process.env.VERCEL_URL : `http://localhost:3000`;
@@ -26,7 +27,7 @@ supertokens.init({
         apiBasePath: "/api/auth",
         websiteBasePath: "/auth",
     },
-    recipeList: [EmailVerification.init({ mode: "REQUIRED" }), EmailPassword.init(), Session.init()],
+    recipeList: [EmailVerification.init({ mode: "REQUIRED" }), EmailPassword.init(), Session.init(), Dashboard.init()],
 });
 
 const app = express();

examples/with-emailpassword-vercel/package.json

@@ -13,8 +13,8 @@
         "react-dom": "^18.0.0",
         "react-router-dom": "^6.2.1",
         "react-scripts": "^5.0.1",
-        "supertokens-auth-react": "^0.26.0",
-        "supertokens-node": "^12.0.0",
+        "supertokens-auth-react": "latest",
+        "supertokens-node": "^13.1.5",
         "web-vitals": "^0.2.4"
     },
     "devDependencies": {

examples/with-emailpassword-vercel/src/App.js

@@ -1,8 +1,11 @@
 import { useState } from "react";
 import "./App.css";
-import SuperTokens, { SuperTokensWrapper, getSuperTokensRoutesForReactRouterDom } from "supertokens-auth-react";
+import SuperTokens, { SuperTokensWrapper } from "supertokens-auth-react";
+import { getSuperTokensRoutesForReactRouterDom } from "supertokens-auth-react/ui";
 import EmailVerification from "supertokens-auth-react/recipe/emailverification";
+import { EmailVerificationPreBuiltUI } from "supertokens-auth-react/recipe/emailverification/prebuiltui";
 import EmailPassword from "supertokens-auth-react/recipe/emailpassword";
+import { EmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/emailpassword/prebuiltui";
 import Session, { SessionAuth } from "supertokens-auth-react/recipe/session";
 import Home from "./Home";
 import { Routes, BrowserRouter as Router, Route } from "react-router-dom";
@@ -51,8 +54,10 @@ function App() {
                     <div className="fill">
                         <Routes>
                             {/* This shows the login UI on "/auth" route */}
-                            {getSuperTokensRoutesForReactRouterDom(require("react-router-dom"))}
-
+                            {getSuperTokensRoutesForReactRouterDom(require("react-router-dom"), [
+                                EmailVerificationPreBuiltUI,
+                                EmailPasswordPreBuiltUI,
+                            ])}
                             <Route
                                 path="/"
                                 element={

examples/with-emailpassword-vercel/src/Home/CallAPIView.js

@@ -1,7 +1,5 @@
 import axios from "axios";
-import Session from "supertokens-auth-react/recipe/session";
 import { getApiDomain } from "../App";
-Session.addAxiosInterceptors(axios);
 
 export default function CallAPIView() {
     async function callAPIClicked() {