Merge pull request #78 from userfront/ssr-web-component-compat

Check that we're in the browser before registering web components

Author: RJFelix

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@userfront/toolkit",
-  "version": "1.0.2-alpha.9",
+  "version": "1.0.2-alpha.11",
   "description": "Bindings and components for authentication with Userfront with React, Vue, other frameworks, and plain JS + HTML",
   "type": "module",
   "directories": {

package/package-lock.json

@@ -13,57 +13,61 @@ if (typeof window === "object" && !window.Userfront) {
   window.Userfront = Userfront;
 }
 
-/* Define the <foo-form> custom elements */
-customElements.define(
-  "signup-form",
-  r2wc(SignupForm, {
-    props: {
-      tenantId: "string",
-      flow: "json",
-      compact: "boolean",
-      redirect: "string",
-      redirectOnLoadIfLoggedIn: "boolean",
-      xstateDevTools: "boolean",
-    },
-  })
-);
+// Register custom elements if we're in the browser.
+// (Skip for SSR scenarios.)
+if (typeof window === "object" && window.customElements) {
+  /* Define the <foo-form> custom elements */
+  customElements.define(
+    "signup-form",
+    r2wc(SignupForm, {
+      props: {
+        tenantId: "string",
+        flow: "json",
+        compact: "boolean",
+        redirect: "string",
+        redirectOnLoadIfLoggedIn: "boolean",
+        xstateDevTools: "boolean",
+      },
+    })
+  );
 
-customElements.define(
-  "login-form",
-  r2wc(LoginForm, {
-    props: {
-      tenantId: "string",
-      flow: "json",
-      compact: "boolean",
-      redirect: "string",
-      redirectOnLoadIfLoggedIn: "boolean",
-      xstateDevTools: "boolean",
-    },
-  })
-);
+  customElements.define(
+    "login-form",
+    r2wc(LoginForm, {
+      props: {
+        tenantId: "string",
+        flow: "json",
+        compact: "boolean",
+        redirect: "string",
+        redirectOnLoadIfLoggedIn: "boolean",
+        xstateDevTools: "boolean",
+      },
+    })
+  );
 
-customElements.define(
-  "password-reset-form",
-  r2wc(PasswordResetForm, {
-    props: {
-      tenantId: "string",
-      flow: "json",
-      compact: "boolean",
-      redirect: "string",
-      redirectOnLoadIfLoggedIn: "boolean",
-      xstateDevTools: "boolean",
-    },
-  })
-);
+  customElements.define(
+    "password-reset-form",
+    r2wc(PasswordResetForm, {
+      props: {
+        tenantId: "string",
+        flow: "json",
+        compact: "boolean",
+        redirect: "string",
+        redirectOnLoadIfLoggedIn: "boolean",
+        xstateDevTools: "boolean",
+      },
+    })
+  );
 
-customElements.define(
-  "logout-button",
-  r2wc(LogoutButton, {
-    props: {
-      disabled: "boolean",
-      redirect: "string",
-    },
-  })
-);
+  customElements.define(
+    "logout-button",
+    r2wc(LogoutButton, {
+      props: {
+        disabled: "boolean",
+        redirect: "string",
+      },
+    })
+  );
+}
 
 export default Userfront;