@turnkey/sdk-react 4.2.6 → 5.0.0

package/dist/components/auth/Auth.js

@@ -74,17 +74,18 @@ const Auth = ({
   otpConfig
 }) => {
   const {
-    authIframeClient,
     passkeyClient,
-    walletClient
+    walletClient,
+    indexedDbClient,
+    turnkey: turnkey$1
   } = useTurnkey.useTurnkey();
+  const [publicKey, setPublicKey] = React.useState("");
   const [email, setEmail] = React.useState("");
   const [phone, setPhone] = React.useState("");
   const [otpId, setOtpId] = React.useState(null);
   const [step, setStep] = React.useState("auth");
   const [loading, setLoading] = React.useState();
   const [oauthLoading, setOauthLoading] = React.useState("");
-  const [suborgId, setSuborgId] = React.useState("");
   const [passkeySignupScreen, setPasskeySignupScreen] = React.useState(false);
   const [passkeyCreationScreen, setPasskeyCreationScreen] = React.useState(false);
   const [passkeySignupError, setPasskeySignupError] = React.useState("");
@@ -98,21 +99,29 @@ const Auth = ({
     }
   };
   React.useEffect(() => {
-    if (authIframeClient) {
+    if (indexedDbClient && turnkey$1) {
       setComponentReady(true);
-      const updateIframeKey = async () => {
-        await authIframeClient.initEmbeddedKey();
+      const manageClient = async () => {
+        const session = await turnkey$1.getSession();
+        if (session) {
+          const publicKey = await indexedDbClient.getPublicKey();
+          setPublicKey(publicKey);
+        } else {
+          await indexedDbClient.resetKeyPair();
+          const publicKey = await indexedDbClient.getPublicKey();
+          setPublicKey(publicKey);
+        }
       };
-      updateIframeKey();
+      manageClient();
     }
-  }, [authIframeClient]);
+  }, [indexedDbClient]);
   if (!componentReady) {
     return jsxRuntime.jsx("div", {
-      className: Auth_module.defaultLoader,
+      className: Auth_module.default.defaultLoader,
       children: jsxRuntime.jsx(material.CircularProgress, {
         size: 80,
         thickness: 1,
-        className: Auth_module.circularProgress
+        className: Auth_module.default.circularProgress
       })
     });
   }
@@ -167,11 +176,10 @@ const Auth = ({
           constants.authErrors.passkey.createFailed;
         }
       }
-      const iframePublicKey = await authIframeClient.initEmbeddedKey();
+      const pubKey = await indexedDbClient.getPublicKey();
       await passkeyClient?.loginWithPasskey({
         sessionType: exports.SessionType.READ_WRITE,
-        iframeClient: authIframeClient,
-        targetPublicKey: iframePublicKey,
+        publicKey: pubKey,
         expirationSeconds: authConfig.sessionLengthSeconds?.toString()
       });
       await onAuthSuccess();
@@ -183,11 +191,10 @@ const Auth = ({
   const handleLoginWithPasskey = async () => {
     try {
       setLoading("passkey");
-      const iframePublicKey = await authIframeClient.initEmbeddedKey();
+      const pubKey = await indexedDbClient.getPublicKey();
       await passkeyClient?.loginWithPasskey({
         sessionType: exports.SessionType.READ_WRITE,
-        iframeClient: authIframeClient,
-        targetPublicKey: iframePublicKey,
+        publicKey: pubKey,
         expirationSeconds: authConfig.sessionLengthSeconds?.toString()
       });
       await onAuthSuccess();
@@ -200,29 +207,9 @@ const Auth = ({
   };
   const handleOtpLogin = async (type, value, otpType) => {
     setLoading(otpType);
-    const createSuborgData = {};
-    if (type === constants.FilterType.Email) {
-      createSuborgData.email = value;
-    } else if (type === constants.FilterType.PhoneNumber) {
-      createSuborgData.phoneNumber = value;
-    }
-    if (customAccounts) {
-      createSuborgData.customAccounts = customAccounts;
-    }
-    const resp = await sdkServer.server.getOrCreateSuborg({
-      filterType: type,
-      filterValue: value,
-      additionalData: createSuborgData
-    });
-    const suborgIds = resp?.subOrganizationIds;
-    if (!suborgIds || suborgIds.length === 0) {
-      onError(constants.authErrors.otp.sendFailed);
-      return;
-    }
-    const suborgId = suborgIds[0];
-    const iframePublicKey = await authIframeClient.initEmbeddedKey();
+    if (type === constants.FilterType.Email) ; else if (type === constants.FilterType.PhoneNumber) ;
+    const publicKey = await indexedDbClient.getPublicKey();
     const initAuthResponse = await sdkServer.server.sendOtp({
-      suborgID: suborgId,
       otpType,
       contact: value,
       ...(emailCustomization && {
@@ -236,10 +223,9 @@ const Auth = ({
       }),
       otpLength: otpConfig?.otpLength ?? 6,
       alphanumeric: otpConfig?.alphanumeric ?? false,
-      userIdentifier: iframePublicKey
+      userIdentifier: publicKey
     });
     if (initAuthResponse && initAuthResponse.otpId) {
-      setSuborgId(suborgId);
       setOtpId(initAuthResponse?.otpId);
       setStep(otpType);
     } else {
@@ -269,15 +255,14 @@ const Auth = ({
       return;
     }
     const suborgId = suborgIds[0];
-    const iframePublicKey = await authIframeClient.initEmbeddedKey();
-    const oauthSession = await sdkServer.server.oauth({
+    const sessionResponse = await sdkServer.server.oauthLogin({
       suborgID: suborgId,
       oidcToken: credential,
-      targetPublicKey: iframePublicKey,
+      publicKey: publicKey,
       sessionLengthSeconds: authConfig.sessionLengthSeconds
     });
-    if (oauthSession && oauthSession.token) {
-      await authIframeClient.loginWithSession(oauthSession);
+    if (sessionResponse && sessionResponse.session) {
+      await indexedDbClient.loginWithSession(sessionResponse.session);
       await onAuthSuccess();
     } else {
       onError(constants.authErrors.oauth.loginFailed);
@@ -311,11 +296,10 @@ const Auth = ({
         onError(constants.authErrors.wallet.loginFailed);
         return;
       }
-      const iframePublicKey = await authIframeClient.initEmbeddedKey();
+      const pubKey = await indexedDbClient.getPublicKey();
       await walletClient.loginWithWallet({
         sessionType: exports.SessionType.READ_WRITE,
-        iframeClient: authIframeClient,
-        targetPublicKey: iframePublicKey,
+        publicKey: pubKey,
         expirationSeconds: authConfig.sessionLengthSeconds?.toString()
       });
       await onAuthSuccess();
@@ -354,23 +338,23 @@ const Auth = ({
     } = authConfig;
     const layout = [googleEnabled, appleEnabled, facebookEnabled].filter(Boolean).length >= 2 ? "inline" : "stacked";
     return jsxRuntime.jsxs("div", {
-      className: layout === "inline" ? Auth_module.socialButtonContainerInline : Auth_module.socialButtonContainerStacked,
-      children: [googleEnabled && jsxRuntime.jsx(Google, {
+      className: layout === "inline" ? Auth_module.default.socialButtonContainerInline : Auth_module.default.socialButtonContainerStacked,
+      children: [googleEnabled && jsxRuntime.jsx(Google.default, {
         layout: layout,
         clientId: authConfig.googleClientId ?? process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID,
-        iframePublicKey: authIframeClient.iframePublicKey,
         openInPage: authConfig.openOAuthInPage,
+        publicKey: publicKey,
         onSuccess: response => handleOAuthLogin(response.idToken, "Google")
-      }), appleEnabled && jsxRuntime.jsx(Apple, {
+      }), appleEnabled && jsxRuntime.jsx(Apple.default, {
         layout: layout,
         clientId: authConfig.appleClientId ?? process.env.NEXT_PUBLIC_APPLE_CLIENT_ID,
-        iframePublicKey: authIframeClient.iframePublicKey,
+        publicKey: publicKey,
         openInPage: authConfig.openOAuthInPage,
         onSuccess: response => handleOAuthLogin(response.idToken, "Apple")
-      }), facebookEnabled && jsxRuntime.jsx(Facebook, {
+      }), facebookEnabled && jsxRuntime.jsx(Facebook.default, {
         layout: layout,
         clientId: authConfig.facebookClientId ?? process.env.NEXT_PUBLIC_FACEBOOK_CLIENT_ID,
-        iframePublicKey: authIframeClient.iframePublicKey,
+        publicKey: publicKey,
         openInPage: authConfig.openOAuthInPage,
         onSuccess: response => handleOAuthLogin(response.id_token, "Facebook")
       })]
@@ -385,7 +369,7 @@ const Auth = ({
             handleOtpLogin(constants.FilterType.Email, email, constants.OtpType.Email);
           },
           children: [jsxRuntime.jsx("div", {
-            className: Auth_module.inputGroup,
+            className: Auth_module.default.inputGroup,
             children: jsxRuntime.jsx(material.TextField, {
               name: "email-input",
               type: "email",
@@ -415,13 +399,13 @@ const Auth = ({
               variant: "outlined"
             })
           }), jsxRuntime.jsx("button", {
-            className: Auth_module.authButton,
+            className: Auth_module.default.authButton,
             type: "submit",
             disabled: !isValidEmail(email) || loading === constants.OtpType.Email,
             children: loading === constants.OtpType.Email ? jsxRuntime.jsx(material.CircularProgress, {
               size: 24,
               thickness: 4,
-              className: Auth_module.buttonProgress || ""
+              className: Auth_module.default.buttonProgress || ""
             }) : "Continue"
           })]
         }) : null;
@@ -432,53 +416,53 @@ const Auth = ({
             handleOtpLogin(constants.FilterType.PhoneNumber, phone, constants.OtpType.Sms);
           },
           children: [jsxRuntime.jsx("div", {
-            className: Auth_module.phoneInput,
+            className: Auth_module.default.phoneInput,
             children: jsxRuntime.jsx(PhoneInput.MuiPhone, {
               onChange: value => setPhone(value),
               value: phone
             })
           }), jsxRuntime.jsx("button", {
-            className: Auth_module.authButton,
+            className: Auth_module.default.authButton,
             type: "submit",
             disabled: !isValidPhone(phone) || loading === constants.OtpType.Sms,
             children: loading === constants.OtpType.Sms ? jsxRuntime.jsx(material.CircularProgress, {
               size: 24,
               thickness: 4,
-              className: Auth_module.buttonProgress || ""
+              className: Auth_module.default.buttonProgress || ""
             }) : "Continue"
           })]
         }) : null;
       case "passkey":
         return authConfig.passkeyEnabled && !otpId ? jsxRuntime.jsxs("div", {
-          className: Auth_module.passkeyContainer,
+          className: Auth_module.default.passkeyContainer,
           children: [jsxRuntime.jsx("button", {
-            className: Auth_module.authButton,
+            className: Auth_module.default.authButton,
             type: "button",
             onClick: handleLoginWithPasskey,
             disabled: loading === "passkey",
             children: loading === "passkey" ? jsxRuntime.jsx(material.CircularProgress, {
               size: 24,
               thickness: 4,
-              className: Auth_module.buttonProgress || ""
+              className: Auth_module.default.buttonProgress || ""
             }) : "Log in with passkey"
           }), jsxRuntime.jsx("div", {
-            className: Auth_module.noPasskeyLink,
+            className: Auth_module.default.noPasskeyLink,
             onClick: () => setPasskeySignupScreen(true),
             children: "Sign up with passkey"
           })]
         }) : null;
       case "wallet":
         return authConfig.walletEnabled && !otpId ? jsxRuntime.jsx("div", {
-          className: Auth_module.passkeyContainer,
+          className: Auth_module.default.passkeyContainer,
           children: jsxRuntime.jsx("button", {
-            className: Auth_module.authButton,
+            className: Auth_module.default.authButton,
             type: "button",
             onClick: handleLoginWithWallet,
             disabled: loading === "wallet",
             children: loading === "wallet" ? jsxRuntime.jsx(material.CircularProgress, {
               size: 24,
               thickness: 4,
-              className: Auth_module.buttonProgress || ""
+              className: Auth_module.default.buttonProgress || ""
             }) : "Continue with Wallet"
           })
         }) : null;
@@ -490,110 +474,109 @@ const Auth = ({
   };
   return jsxRuntime.jsx(jsxRuntime.Fragment, {
     children: passkeySignupScreen ? jsxRuntime.jsxs("div", {
-      className: Auth_module.authCard,
+      className: Auth_module.default.authCard,
       children: [renderBackButton(), jsxRuntime.jsx("div", {
-        className: Auth_module.passkeyIconContainer,
+        className: Auth_module.default.passkeyIconContainer,
         children: passkeyIcon
       }), jsxRuntime.jsx("center", {
         children: jsxRuntime.jsx("h3", {
-          className: Auth_module.primaryText,
+          className: Auth_module.default.primaryText,
           children: "Create a passkey"
         })
       }), jsxRuntime.jsx("div", {
-        className: Auth_module.rowsContainer,
+        className: Auth_module.default.rowsContainer,
         children: jsxRuntime.jsx("center", {
           children: jsxRuntime.jsx("span", {
-            className: Auth_module.primaryText,
+            className: Auth_module.default.primaryText,
             children: "Passkeys allow for easy biometric access to your wallet and can be synced across devices."
           })
         })
       }), jsxRuntime.jsx("button", {
-        className: Auth_module.authButton,
+        className: Auth_module.default.authButton,
         type: "button",
         onClick: handleSignupWithPasskey,
         children: "Continue"
       })]
     }) : passkeyCreationScreen ? jsxRuntime.jsxs("div", {
-      className: Auth_module.authCard,
+      className: Auth_module.default.authCard,
       children: [renderBackButton(), jsxRuntime.jsx("div", {
-        className: Auth_module.passkeyIconContainer,
+        className: Auth_module.default.passkeyIconContainer,
         children: passkeySignupError ? jsxRuntime.jsx("div", {
           children: passkeyIconError
         }) : jsxRuntime.jsxs("div", {
-          className: Auth_module.loadingWrapper,
+          className: Auth_module.default.loadingWrapper,
           children: [jsxRuntime.jsx(material.CircularProgress, {
             size: 80,
             thickness: 1,
-            className: Auth_module.circularProgress
+            className: Auth_module.default.circularProgress
           }), passkeyIcon]
         })
       }), jsxRuntime.jsx("center", {
         children: jsxRuntime.jsx("h3", {
-          className: Auth_module.primaryText,
+          className: Auth_module.default.primaryText,
           children: passkeySignupError ? "Authentication error" : passkeyCreated ? "Logging in with passkey..." : "Creating passkey..."
         })
       }), jsxRuntime.jsx("div", {
-        className: Auth_module.rowsContainer,
+        className: Auth_module.default.rowsContainer,
         children: jsxRuntime.jsx("span", {
-          className: Auth_module.primaryText,
+          className: Auth_module.default.primaryText,
           children: jsxRuntime.jsx("center", {
             children: passkeySignupError ? passkeySignupError : ""
           })
         })
       }), passkeySignupError && jsxRuntime.jsx("button", {
-        className: Auth_module.authButton,
+        className: Auth_module.default.authButton,
         type: "button",
         onClick: handleSignupWithPasskey,
         children: "Retry"
       })]
     }) : jsxRuntime.jsx("div", {
       children: oauthLoading !== "" ? jsxRuntime.jsxs("div", {
-        className: Auth_module.authCardLoading,
+        className: Auth_module.default.authCardLoading,
         children: [jsxRuntime.jsxs("h3", {
-          className: Auth_module.verifyingText,
+          className: Auth_module.default.verifyingText,
           children: ["Verifying with ", oauthLoading]
         }), jsxRuntime.jsxs("div", {
-          className: Auth_module.loadingWrapper,
+          className: Auth_module.default.loadingWrapper,
           children: [jsxRuntime.jsx(material.CircularProgress, {
             size: 80,
             thickness: 1,
-            className: Auth_module.circularProgress
+            className: Auth_module.default.circularProgress
           }), oauthLoading === "Google" && jsxRuntime.jsx("img", {
-            src: google,
-            className: Auth_module.oauthIcon
+            src: google.default,
+            className: Auth_module.default.oauthIcon
           }), oauthLoading === "Facebook" && jsxRuntime.jsx("img", {
-            src: facebook,
-            className: Auth_module.oauthIcon
+            src: facebook.default,
+            className: Auth_module.default.oauthIcon
           }), oauthLoading === "Apple" && jsxRuntime.jsx("img", {
-            src: apple,
-            className: Auth_module.oauthIcon
+            src: apple.default,
+            className: Auth_module.default.oauthIcon
           })]
         }), jsxRuntime.jsxs("div", {
-          className: Auth_module.poweredBy,
+          className: Auth_module.default.poweredBy,
           children: [jsxRuntime.jsx("span", {
             children: "Secured by"
           }), jsxRuntime.jsx("img", {
-            src: turnkey
+            src: turnkey.default
           })]
         })]
       }) : jsxRuntime.jsxs("div", {
-        className: Auth_module.authCard,
+        className: Auth_module.default.authCard,
         children: [otpId && renderBackButton(), jsxRuntime.jsx("h2", {
-          className: Auth_module.primaryText,
+          className: Auth_module.default.primaryText,
           children: !otpId && "Log in or sign up"
         }), jsxRuntime.jsxs("div", {
-          className: Auth_module.authForm,
+          className: Auth_module.default.authForm,
           children: [!otpId && configOrder.filter(section => renderSection(section) !== null).map((section, index, visibleSections) => jsxRuntime.jsxs(React.Fragment, {
             children: [renderSection(section), index < visibleSections.length - 1 && jsxRuntime.jsx("div", {
-              className: Auth_module.separator,
+              className: Auth_module.default.separator,
               children: jsxRuntime.jsx("span", {
                 children: "OR"
               })
             })]
-          }, section)), otpId && jsxRuntime.jsx(OtpVerification, {
+          }, section)), otpId && jsxRuntime.jsx(OtpVerification.default, {
             type: step,
             contact: step === constants.OtpType.Email ? email : phone,
-            suborgId: suborgId,
             otpId: otpId,
             alphanumeric: otpConfig?.alphanumeric ?? false,
             sessionLengthSeconds: authConfig.sessionLengthSeconds,
@@ -601,30 +584,30 @@ const Auth = ({
             onResendCode: handleResendCode,
             numBoxes: otpConfig?.otpLength ?? 6
           }), !otpId && jsxRuntime.jsx("div", {
-            className: Auth_module.tos,
+            className: Auth_module.default.tos,
             children: jsxRuntime.jsxs("span", {
               children: ["By continuing, you agree to our", " ", jsxRuntime.jsx("a", {
                 href: "https://www.turnkey.com/legal/terms",
                 target: "_blank",
                 rel: "noopener noreferrer",
-                className: Auth_module.tosBold,
+                className: Auth_module.default.tosBold,
                 children: "Terms of Service"
               }), " ", "&", " ", jsxRuntime.jsx("a", {
                 href: "https://www.turnkey.com/legal/privacy",
                 target: "_blank",
                 rel: "noopener noreferrer",
-                className: Auth_module.tosBold,
+                className: Auth_module.default.tosBold,
                 children: "Privacy Policy"
               }), "."]
             })
           })]
         }), jsxRuntime.jsxs("div", {
           onClick: () => window.location.href = "https://www.turnkey.com/",
-          className: Auth_module.poweredBy,
+          className: Auth_module.default.poweredBy,
           children: [jsxRuntime.jsx("span", {
             children: "Secured by"
           }), jsxRuntime.jsx("img", {
-            src: turnkey
+            src: turnkey.default
           })]
         })]
       })