Update react-multitenancy to match new boilerplate.

supertokens · Dec 30, 2024 · 55364fb · 55364fb
1 parent 0833ff9
commit 55364fb
Show file tree

Hide file tree

Showing 9 changed files with 97 additions and 75 deletions.
diff --git a/boilerplate/frontend/react-multitenancy/config/multitenancy.tsx b/boilerplate/frontend/react-multitenancy/config/multitenancy.tsx
@@ -1,6 +1,6 @@
 import ThirdParty from "supertokens-auth-react/recipe/thirdparty";
 import EmailPassword from "supertokens-auth-react/recipe/emailpassword";
-import Passwordless from "supertokens-auth-react/recipe/passwordless";
+import Passwordless, { PasswordlessComponentsOverrideProvider } from "supertokens-auth-react/recipe/passwordless";
 import { ThirdPartyPreBuiltUI } from "supertokens-auth-react/recipe/thirdparty/prebuiltui";
 import { EmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/emailpassword/prebuiltui";
 import { PasswordlessPreBuiltUI } from "supertokens-auth-react/recipe/passwordless/prebuiltui";
@@ -19,20 +19,13 @@ export function getWebsiteDomain() {
     return websiteUrl;
 }
 
-export const styleOverride = `
-[data-supertokens~=tenants-link] {
-    margin-top: 8px;
-}
-`;
-
 export const SuperTokensConfig = {
     appInfo: {
         appName: "SuperTokens Demo App",
         apiDomain: getApiDomain(),
         websiteDomain: getWebsiteDomain(),
     },
     usesDynamicLoginMethods: true,
-    style: styleOverride,
     // recipeList contains all the modules that you want to
     // use from SuperTokens. See the full list here: https://supertokens.com/docs/guides
     recipeList: [
@@ -54,10 +47,68 @@ export const SuperTokensConfig = {
             },
         }),
     ],
+    getRedirectionURL: async (context) => {
+        if (context.action === "SUCCESS" && context.newSessionCreated) {
+            return "/dashboard";
+        }
+    },
 };
 
 export const recipeDetails = {
     docsLink: "https://supertokens.com/docs/multitenancy/introduction",
 };
 
 export const PreBuiltUIList = [ThirdPartyPreBuiltUI, EmailPasswordPreBuiltUI, PasswordlessPreBuiltUI];
+
+export const ComponentWrapper = (props: { children: JSX.Element }): JSX.Element => {
+    return (
+        <PasswordlessComponentsOverrideProvider
+            components={{
+                PasswordlessUserInputCodeFormFooter_Override: ({ DefaultComponent, ...props }) => {
+                    const loginAttemptInfo = props.loginAttemptInfo;
+                    let showQuotaMessage = false;
+
+                    if (loginAttemptInfo.contactMethod === "PHONE") {
+                        showQuotaMessage = true;
+                    }
+
+                    return (
+                        <div
+                            style={{
+                                width: "100%",
+                            }}
+                        >
+                            <DefaultComponent {...props} />
+                            {showQuotaMessage && (
+                                <div
+                                    style={{
+                                        width: "100%",
+                                        paddingLeft: 12,
+                                        paddingRight: 12,
+                                        paddingTop: 6,
+                                        paddingBottom: 6,
+                                        borderRadius: 4,
+                                        backgroundColor: "#EF9A9A",
+                                        margin: 0,
+                                        boxSizing: "border-box",
+                                        MozBoxSizing: "border-box",
+                                        WebkitBoxSizing: "border-box",
+                                        fontSize: 12,
+                                        textAlign: "start",
+                                        fontWeight: "bold",
+                                        lineHeight: "18px",
+                                    }}
+                                >
+                                    There is a daily quota for the free SMS service, if you do not receive the SMS
+                                    please try again tomorrow.
+                                </div>
+                            )}
+                        </div>
+                    );
+                },
+            }}
+        >
+            {props.children}
+        </PasswordlessComponentsOverrideProvider>
+    );
+};
diff --git a/boilerplate/frontend/react-multitenancy/src/App.tsx b/boilerplate/frontend/react-multitenancy/src/App.tsx
@@ -6,7 +6,7 @@ import * as ReactRouter from "react-router-dom";
 import Dashboard from "./Dashboard";
 import { PreBuiltUIList, SuperTokensConfig, ComponentWrapper } from "./config";
 import Home from "./Home";
-import { Auth } from "./Auth";
+import Auth from "./Auth";
 
 // Initialize SuperTokens - ideally in the global
 SuperTokens.init(SuperTokensConfig);
@@ -35,7 +35,6 @@ function App() {
                         <div className="fill">
                             <Routes>
                                 <Route path="/" element={<Home />} />
-
                                 {/* This shows the login UI on "/auth" route */}
                                 <Route path="/auth" element={<Auth />} />
                                 {getSuperTokensRoutesForReactRouterDom(ReactRouter, PreBuiltUIList)}

diff --git a/boilerplate/frontend/react-multitenancy/src/Auth/index.tsx b/boilerplate/frontend/react-multitenancy/src/Auth/index.tsx
@@ -44,10 +44,10 @@ const LoginWithSSOButton = ({
     );
 };
 
-export const Auth = () => {
+export default function Auth() {
     const [tenantId, setTenantId] = React.useState(localStorage.getItem("tenantId"));
     const session = useSessionContext();
-    const [showTenantSelector, setShowTenantSelector] = React.useState(false);
+    const [showTenantSelector, setShowTenantSelector] = React.useState(true);
     const navigate = useNavigate();
 
     if (session.loading) {
@@ -109,4 +109,4 @@ export const Auth = () => {
             </div>
         </AuthRecipeComponentsOverrideContextProvider>
     );
-};
+}
diff --git a/boilerplate/frontend/react-multitenancy/src/Dashboard/index.tsx b/boilerplate/frontend/react-multitenancy/src/Dashboard/index.tsx
@@ -22,7 +22,7 @@ export default function Dashboard() {
 
     async function logoutClicked() {
         await signOut();
-        navigate("/");
+        navigate("/auth");
     }
 
     function openLink(url: string) {

diff --git a/boilerplate/frontend/react-multitenancy/src/Home/CallAPIView.tsx b/boilerplate/frontend/react-multitenancy/src/Home/CallAPIView.tsx
@@ -1,10 +1,10 @@
-import axios from "axios";
 import { getApiDomain } from "../config";
 
 export default function CallAPIView() {
     async function callAPIClicked() {
-        let response = await axios.get(getApiDomain() + "/sessioninfo");
-        window.alert("Session Information:\n" + JSON.stringify(response.data, null, 2));
+        const response = await fetch(getApiDomain() + "/sessioninfo");
+        const data = await response.json();
+        window.alert("Session Information:\n" + JSON.stringify(data, null, 2));
     }
 
     return (

diff --git a/boilerplate/frontend/react-multitenancy/src/Home/Home.css b/boilerplate/frontend/react-multitenancy/src/Home/Home.css
@@ -91,30 +91,6 @@
     -webkit-mask-composite: xor;
 }
 
-.inner-content #tenant-id {
-    position: relative;
-    padding: 14px 17px;
-    border-image-slice: 1;
-    margin-inline: auto;
-    margin-block: 11px 23px;
-    border-radius: 9px;
-    line-height: 1;
-    font-family: Menlo, serif;
-    cursor: text;
-}
-
-.inner-content #tenant-id:before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    border-radius: 9px;
-    padding: 2px;
-    background: linear-gradient(90.31deg, #ff9933 0.11%, #ff3f33 99.82%);
-    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-    mask-composite: exclude;
-    -webkit-mask-composite: xor;
-}
-
 .main-container > .top-band,
 .main-container > .bottom-band {
     border-radius: inherit;
@@ -185,11 +161,6 @@
     margin-right: 5px;
 }
 
-.tenant-id {
-    margin-top: 11px;
-    margin-bottom: 23px;
-}
-
 @media screen and (max-width: 768px) {
     .bottom-links-container {
         grid-template-columns: repeat(2, 1fr);

diff --git a/boilerplate/frontend/react-multitenancy/src/Home/SuccessView.tsx b/boilerplate/frontend/react-multitenancy/src/Home/SuccessView.tsx
@@ -10,12 +10,14 @@ interface ILink {
     icon: string;
 }
 
-export default function SuccessView(props: { userId: string; tenantId?: string }) {
-    let userId = props.userId;
+export default function SuccessView(props: { userId: string }) {
+    const userId = props.userId;
+
+    const navigate = useNavigate();
 
     async function logoutClicked() {
         await signOut();
-        window.location.reload();
+        navigate("/auth");
     }
 
     function openLink(url: string) {
@@ -51,11 +53,6 @@ export default function SuccessView(props: { userId: string; tenantId?: string }
                     <div className="truncate" id="user-id">
                         {userId}
                     </div>
-
-                    <div>Your tenantID is:</div>
-                    <div className="truncate" id="tenant-id">
-                        {props.tenantId}
-                    </div>
                     <CallAPIView />
                 </div>
             </div>

diff --git a/boilerplate/frontend/react-multitenancy/src/Home/index.tsx b/boilerplate/frontend/react-multitenancy/src/Home/index.tsx
@@ -1,21 +1,26 @@
-import SuccessView from "./SuccessView";
-import { useSessionContext } from "supertokens-auth-react/recipe/session";
-import "./Home.css";
-
 export default function Home() {
-    const sessionContext = useSessionContext();
-
-    if (sessionContext.loading === true) {
-        return null;
-    }
-
-    console.log(sessionContext);
     return (
         <div className="fill" id="home-container">
-            <SuccessView
-                userId={sessionContext.userId}
-                tenantId={sessionContext.accessTokenPayload["tId"] || undefined}
-            />
+            <div className="logos">
+                <img src="/ST.svg" alt="SuperTokens" />
+                <span>x</span>
+                <img src="/React.svg" alt="React" />
+            </div>
+            <div className="main-container">
+                <div className="inner-content">
+                    <p>
+                        <strong>SuperTokens</strong> x <strong>React</strong> <br /> example project
+                    </p>
+                    <div className="buttons">
+                        <a href="/auth" className="sessionButton">
+                            Sign-up / Login
+                        </a>
+                        <a href="/dashboard" className="sessionButton">
+                            Dashboard
+                        </a>
+                    </div>
+                </div>
+            </div>
         </div>
     );
 }
diff --git a/boilerplate/frontend/react-multitenancy/src/config.tsx b/boilerplate/frontend/react-multitenancy/src/config.tsx
@@ -1,3 +1,4 @@
+// This is a temporary file, if you see this comment in this file report this as an issue for create-supertokens-app
 export function getApiDomain() {
     return "";
 }
@@ -6,12 +7,6 @@ export function getWebsiteDomain() {
     return "";
 }
 
-export const styleOverride = `
-[data-supertokens~=tenants-link] {
-    margin-top: 8px;
-}
-`;
-
 export const SuperTokensConfig = {
     appInfo: {
         appName: "",
@@ -29,3 +24,7 @@ export const recipeDetails = {
 };
 
 export const PreBuiltUIList = [];
+
+export const ComponentWrapper = (props: { children: JSX.Element }): JSX.Element => {
+    return <></>;
+};