feat: move override config to stwrapper (#636)

* test changes * move override config for components into separate component * update example apps * move overridecontext into root of each recipe * test: shared override does not affect others * test: add test case when two components override the same component * fix build * update changelog * fix by review comments * update test * eliminate warning in test * update changelog * Update CHANGELOG.md * update st-auth-react version for examples Co-authored-by: Alisher <[email protected]> Co-authored-by: Rishabh Poddar <[email protected]>
supertokens · Jan 6, 2023 · 90698ec · 90698ec
1 parent 7898db7
commit 90698ec
Show file tree

Hide file tree

Showing 122 changed files with 1,124 additions and 585 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,65 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [unreleased]
 
+### Breaking changes
+
+-   Moved component override config into a recipe specific provider component
+
+### Migration
+
+```tsx
+SuperTokens.init({
+    recipeList: [
+        EmailPassword.init({
+            override: {
+                components: {
+                    EmailPasswordSignIn_Override: ({ DefaultComponent, ...props }) => {
+                        return (
+                            <div>
+                                <img src="octocat.jpg" />
+                                <DefaultComponent {...props} />
+                            </div>
+                        );
+                    },
+                },
+            },
+        }),
+    ],
+});
+```
+
+Components override would move to override provider component's prop:
+
+```tsx
+import EmailPassword, { EmailPasswordComponentsOverrideProvider } from "supertokens-auth-react/recipe/emailpassword";
+
+SuperTokens.init({
+    recipeList: [EmailPassword.init()],
+});
+
+function App() {
+    return (
+        <SuperTokensWrapper>
+            <EmailPasswordComponentsOverrideProvider
+                components={{
+                    EmailPasswordSignIn_Override: ({ DefaultComponent, ...props }) => {
+                        return (
+                            <div>
+                                <img src="octocat.jpg" />
+                                <DefaultComponent {...props} />
+                            </div>
+                        );
+                    },
+                }}>
+                {/* The rest of JSX */}
+            </EmailPasswordComponentsOverrideProvider>
+        </SuperTokensWrapper>
+    );
+}
+
+export default App;
+```
+
 ### Testing
 
 -   Created test for the sign up attempt using duplicate email

diff --git a/examples/with-aws-lambda/frontend/package.json b/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.28.0",
+        "supertokens-auth-react": "^0.29.0",
         "typescript": "^4.0.3",
         "web-vitals": "^0.2.4"
     },

diff --git a/examples/with-cli-login/package.json b/examples/with-cli-login/package.json
@@ -22,7 +22,7 @@
         "react-dom": "^18.1.0",
         "react-router-dom": "^6.3.0",
         "react-scripts": "^5.0.1",
-        "supertokens-auth-react": "^0.28.0",
+        "supertokens-auth-react": "^0.29.0",
         "supertokens-node": "^12.0.0",
         "ts-node-dev": "^2.0.0",
         "typescript": "^4.7.2",

diff --git a/examples/with-emailpassword-vercel/package.json b/examples/with-emailpassword-vercel/package.json
@@ -13,7 +13,7 @@
         "react-dom": "^18.0.0",
         "react-router-dom": "^6.2.1",
         "react-scripts": "^5.0.1",
-        "supertokens-auth-react": "^0.28.0",
+        "supertokens-auth-react": "^0.29.0",
         "supertokens-node": "^12.0.0",
         "web-vitals": "^0.2.4"
     },

diff --git a/examples/with-emailpassword/package.json b/examples/with-emailpassword/package.json
@@ -13,7 +13,7 @@
         "react-dom": "^18.0.0",
         "react-router-dom": "^6.2.1",
         "react-scripts": "^5.0.1",
-        "supertokens-auth-react": "^0.28.0",
+        "supertokens-auth-react": "^0.29.0",
         "supertokens-node": "^12.0.0",
         "web-vitals": "^0.2.4"
     },

diff --git a/examples/with-emailverification-then-password-thirdpartyemailpassword/package.json b/examples/with-emailverification-then-password-thirdpartyemailpassword/package.json
@@ -14,7 +14,7 @@
         "react-dom": "^18.0.0",
         "react-router-dom": "^6.2.1",
         "react-scripts": "^5.0.1",
-        "supertokens-auth-react": "^0.28.0",
+        "supertokens-auth-react": "^0.29.0",
         "supertokens-node": "^12.0.0",
         "web-vitals": "^0.2.4"
     },

diff --git a/examples/with-emailverification-then-password-thirdpartyemailpassword/src/App.js b/examples/with-emailverification-then-password-thirdpartyemailpassword/src/App.js
@@ -2,7 +2,12 @@ import { useState } from "react";
 import "./App.css";
 import SuperTokens, { SuperTokensWrapper, getSuperTokensRoutesForReactRouterDom } from "supertokens-auth-react";
 import EmailVerification from "supertokens-auth-react/recipe/emailverification";
-import ThirdPartyEmailPassword, { Google, Github, Apple } from "supertokens-auth-react/recipe/thirdpartyemailpassword";
+import ThirdPartyEmailPassword, {
+    Google,
+    Github,
+    Apple,
+    ThirdpartyEmailPasswordComponentsOverrideProvider,
+} from "supertokens-auth-react/recipe/thirdpartyemailpassword";
 import Session, { SessionAuth } from "supertokens-auth-react/recipe/session";
 import Home from "./Home";
 import { Routes, BrowserRouter as Router, Route } from "react-router-dom";
@@ -53,18 +58,6 @@ SuperTokens.init({
                     }
                 }
             },
-            override: {
-                components: {
-                    ThirdPartySignInAndUpProvidersForm_Override: ({ DefaultComponent, ...props }) => {
-                        if (window.location.pathname === "/set-password") {
-                            return null;
-                        } else {
-                            return <DefaultComponent {...props} />;
-                        }
-                    },
-                    EmailPasswordSignUpForm_Override: CustomSignUp,
-                },
-            },
         }),
         Session.init({
             override: {
@@ -87,41 +80,53 @@ function App() {
 
     return (
         <SuperTokensWrapper>
-            <div className="App">
-                <Router>
-                    <div className="fill">
-                        <Routes>
-                            {/* This shows the login UI on "/auth" route */}
-                            {getSuperTokensRoutesForReactRouterDom(require("react-router-dom"))}
+            <ThirdpartyEmailPasswordComponentsOverrideProvider
+                components={{
+                    ThirdPartySignInAndUpProvidersForm_Override: ({ DefaultComponent, ...props }) => {
+                        if (window.location.pathname === "/set-password") {
+                            return null;
+                        } else {
+                            return <DefaultComponent {...props} />;
+                        }
+                    },
+                    EmailPasswordSignUpForm_Override: CustomSignUp,
+                }}>
+                <div className="App">
+                    <Router>
+                        <div className="fill">
+                            <Routes>
+                                {/* This shows the login UI on "/auth" route */}
+                                {getSuperTokensRoutesForReactRouterDom(require("react-router-dom"))}
 
-                            <Route
-                                path="/"
-                                element={
-                                    /* This protects the "/" route so that it shows 
-                                       <Home /> only if the user is logged in.
-                                       Else it redirects the user to "/auth" */
-                                    <SessionAuth
-                                        onSessionExpired={() => {
-                                            updateShowSessionExpiredPopup(true);
-                                        }}>
-                                        <Home />
-                                        {showSessionExpiredPopup && <SessionExpiredPopup />}
-                                    </SessionAuth>
-                                }
-                            />
-                            <Route
-                                path="/set-password"
-                                element={
-                                    <SessionAuth>
-                                        <SetPassword />
-                                    </SessionAuth>
-                                }
-                            />
-                        </Routes>
-                    </div>
-                    <Footer />
-                </Router>
-            </div>
+                                <Route
+                                    path="/"
+                                    element={
+                                        /* This protects the "/" route so that it shows 
+                                    <Home /> only if the user is logged in.
+                                    Else it redirects the user to "/auth" */
+                                        <SessionAuth
+                                            onSessionExpired={() => {
+                                                updateShowSessionExpiredPopup(true);
+                                            }}>
+                                            <Home />
+                                            {showSessionExpiredPopup && <SessionExpiredPopup />}
+                                        </SessionAuth>
+                                    }
+                                />
+                                <Route
+                                    path="/set-password"
+                                    element={
+                                        <SessionAuth>
+                                            <SetPassword />
+                                        </SessionAuth>
+                                    }
+                                />
+                            </Routes>
+                        </div>
+                        <Footer />
+                    </Router>
+                </div>
+            </ThirdpartyEmailPasswordComponentsOverrideProvider>
         </SuperTokensWrapper>
     );
 }

diff --git a/examples/with-emailverification-with-otp/package.json b/examples/with-emailverification-with-otp/package.json
@@ -20,7 +20,7 @@
         "react-dom": "^18.1.0",
         "react-router-dom": "^6.3.0",
         "react-scripts": "^5.0.1",
-        "supertokens-auth-react": "^0.28.0",
+        "supertokens-auth-react": "^0.29.0",
         "supertokens-node": "^12.0.0",
         "ts-node": "^10.8.0",
         "typescript": "^4.7.2",

diff --git a/examples/with-emailverification-with-otp/src/App.tsx b/examples/with-emailverification-with-otp/src/App.tsx
@@ -1,7 +1,9 @@
 import SuperTokens, { SuperTokensWrapper, getSuperTokensRoutesForReactRouterDom } from "supertokens-auth-react";
 import ThirdPartyEmailpassword, { Github, Google } from "supertokens-auth-react/recipe/thirdpartyemailpassword";
 import Session, { SessionAuth } from "supertokens-auth-react/recipe/session";
-import EmailVerification from "supertokens-auth-react/recipe/emailverification";
+import EmailVerification, {
+    EmailVerificationComponentsOverrideProvider,
+} from "supertokens-auth-react/recipe/emailverification";
 import "./App.css";
 import Home from "./Home";
 import OtpScreen from "./OtpScreen";
@@ -28,14 +30,6 @@ SuperTokens.init({
     recipeList: [
         EmailVerification.init({
             mode: "REQUIRED",
-
-            override: {
-                components: {
-                    EmailVerificationSendVerifyEmail_Override: () => {
-                        return <OtpScreen />;
-                    },
-                },
-            },
         }),
         ThirdPartyEmailpassword.init({
             signInAndUpFeature: {
@@ -49,24 +43,29 @@ SuperTokens.init({
 function App() {
     return (
         <SuperTokensWrapper>
-            <div className="App">
-                <Router>
-                    <Routes>
-                        {getSuperTokensRoutesForReactRouterDom(require("react-router-dom"))}
-                        <Route
-                            path="/"
-                            element={
-                                /* This protects the "/" route so that it shows 
+            <EmailVerificationComponentsOverrideProvider
+                components={{
+                    EmailVerificationSendVerifyEmail_Override: () => <OtpScreen />,
+                }}>
+                <div className="App">
+                    <Router>
+                        <Routes>
+                            {getSuperTokensRoutesForReactRouterDom(require("react-router-dom"))}
+                            <Route
+                                path="/"
+                                element={
+                                    /* This protects the "/" route so that it shows 
                                 <Home /> only if the user is logged in.
                                 Else it redirects the user to "/auth" */
-                                <SessionAuth>
-                                    <Home />
-                                </SessionAuth>
-                            }
-                        />
-                    </Routes>
-                </Router>
-            </div>
+                                    <SessionAuth>
+                                        <Home />
+                                    </SessionAuth>
+                                }
+                            />
+                        </Routes>
+                    </Router>
+                </div>
+            </EmailVerificationComponentsOverrideProvider>
         </SuperTokensWrapper>
     );
 }

diff --git a/examples/with-hasura-thirdpartyemailpassword/package.json b/examples/with-hasura-thirdpartyemailpassword/package.json
@@ -14,7 +14,7 @@
         "react-dom": "^18.0.0",
         "react-router-dom": "^6.2.1",
         "react-scripts": "^5.0.1",
-        "supertokens-auth-react": "^0.28.0",
+        "supertokens-auth-react": "^0.29.0",
         "supertokens-node": "^12.0.0",
         "web-vitals": "^0.2.4"
     },

diff --git a/examples/with-i18next/package.json b/examples/with-i18next/package.json
@@ -16,7 +16,7 @@
         "react-dom": "^18.0.0",
         "react-router-dom": "^6.2.1",
         "react-scripts": "^5.0.1",
-        "supertokens-auth-react": "^0.28.0",
+        "supertokens-auth-react": "^0.29.0",
         "supertokens-node": "^12.0.0",
         "web-vitals": "^0.2.4"
     },

diff --git a/examples/with-jwt-localstorage/package.json b/examples/with-jwt-localstorage/package.json
@@ -17,7 +17,7 @@
         "react-dom": "^18.0.0",
         "react-router-dom": "^6.2.1",
         "react-scripts": "^5.0.1",
-        "supertokens-auth-react": "^0.28.0",
+        "supertokens-auth-react": "^0.29.0",
         "supertokens-node": "^12.0.0",
         "ts-node": "^10.8.1",
         "ts-node-dev": "^2.0.0",

diff --git a/examples/with-localstorage/package.json b/examples/with-localstorage/package.json
@@ -16,7 +16,7 @@
         "react-router-dom": "^6.2.1",
         "react-scripts": "^5.0.1",
         "set-cookie-parser": "^2.5.0",
-        "supertokens-auth-react": "^0.28.0",
+        "supertokens-auth-react": "^0.29.0",
         "supertokens-node": "^12.0.0",
         "ts-node-dev": "^2.0.0",
         "web-vitals": "^0.2.4"

diff --git a/examples/with-multiple-email-sign-in/package.json b/examples/with-multiple-email-sign-in/package.json
@@ -15,7 +15,7 @@
         "react-dom": "^18.0.0",
         "react-router-dom": "^6.2.1",
         "react-scripts": "^5.0.1",
-        "supertokens-auth-react": "^0.28.0",
+        "supertokens-auth-react": "^0.29.0",
         "supertokens-node": "^12.0.0",
         "ts-node": "^10.8.1",
         "ts-node-dev": "^2.0.0",

diff --git a/examples/with-netlify/package.json b/examples/with-netlify/package.json
@@ -18,7 +18,7 @@
         "react-dom": "^18.0.0",
         "react-router-dom": "^6.2.1",
         "react-scripts": "^5.0.1",
-        "supertokens-auth-react": "^0.28.0",
+        "supertokens-auth-react": "^0.29.0",
         "supertokens-node": "^12.0.0",
         "typescript": "^4.0.3",
         "web-vitals": "^0.2.4"

diff --git a/examples/with-next-iframe/package.json b/examples/with-next-iframe/package.json
@@ -13,7 +13,7 @@
         "nextjs-cors": "^2.1.1",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
-        "supertokens-auth-react": "^0.28.0",
+        "supertokens-auth-react": "^0.29.0",
         "supertokens-node": "^12.0.0"
     },
     "license": "MIT"

diff --git a/examples/with-no-session-on-sign-up-thirdpartyemailpassword/package.json b/examples/with-no-session-on-sign-up-thirdpartyemailpassword/package.json
@@ -14,7 +14,7 @@
         "react-dom": "^18.0.0",
         "react-router-dom": "^6.2.1",
         "react-scripts": "^5.0.1",
-        "supertokens-auth-react": "^0.28.0",
+        "supertokens-auth-react": "^0.29.0",
         "supertokens-node": "^12.0.0",
         "web-vitals": "^0.2.4"
     },