Update Frontegg AdminPortal to 7.80.0

packages/example-ssg/src/pages/ssg-page-1.tsx

@@ -1,44 +1,53 @@
-import { AdminPortal, ChangePasswordForm, EditEmailForm, InviteUserDialog, ProfilePage, useAuth, useInviteUserDialog, UsersTable, useUsersTable } from '@frontegg/nextjs';
+import {
+  AdminPortal,
+  ChangePasswordForm,
+  EditEmailForm,
+  InviteUserDialog,
+  ProfilePage,
+  useAuth,
+  useInviteUserDialog,
+  UsersTable,
+  useUsersTable,
+} from '@frontegg/nextjs';
 import Link from 'next/link';
 import { AppHolder } from '@frontegg/js/AppHolder';
 import { useEffect, useState } from 'react';
 import Loader from '../components/loader';
 import Testing from '../components/Testing';
 
-
 export default function SsgPage1() {
   const { user, isAuthenticated, isLoading } = useAuth();
 
   // get the frontegg app instance // import { AppHolder } from '@frontegg/js/AppHolder';
-  const app = AppHolder.getInstance('default')
+  const app = AppHolder.getInstance('default');
   const [appLoading, setLoading] = useState(app.loading);
 
-  const { openDialog: openInviteUserDialog,  } = useInviteUserDialog();
-  const { onSearch,  } = useUsersTable();
+  const { openDialog: openInviteUserDialog } = useInviteUserDialog();
+  const { onSearch } = useUsersTable();
   // console.log({ appLoading, isLoading, isAuthenticated, app })
   useEffect(() => {
     // single time load listener that trigger when the login-box cdn js files is loaded
     app.addOnLoadedListener(() => {
       console.log('App loaded');
-      setLoading(false)
-    })
-  }, [app])
-
+      setLoading(false);
+    });
+  }, [app]);
 
   // detect SSG build time and render content as should be with optional user object
   // this is important to avoid the loader to be pre-rendered in all in SSG pages
-  const isBuildTime = process.env.NEXT_PHASE == 'phase-production-build'
+  const isBuildTime = process.env.NEXT_PHASE == 'phase-production-build';
 
   // check if the app is loading
   if (!isBuildTime && (isLoading || appLoading)) {
-    return <>
-      <Loader />
-    </>
+    return (
+      <>
+        <Loader />
+      </>
+    );
   } else {
     console.log('Loaded', { user, isAuthenticated });
   }
 
-
   /**
    * refreshingToken is true when the token is being refreshed.
    * this will be added to the useAuth hook in the next release.
@@ -52,49 +61,62 @@ export default function SsgPage1() {
     <div style={{ background: '#c2f2f8', padding: '16px', minHeight: '100vh' }}>
       <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
         components examples
-
-        <button onClick={() => {
-          openInviteUserDialog()
-        }}>Open invite user dialog</button>
-
-        <input type="text" onChange={(e) => {
-          onSearch(e.target.value)
-        }} />
+        <button
+          onClick={() => {
+            openInviteUserDialog();
+          }}
+        >
+          Open invite user dialog
+        </button>
+        <input
+          type='text'
+          onChange={(e) => {
+            onSearch(e.target.value);
+          }}
+        />
         <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-          <UsersTable props={{}}  themeOptions={{
-            adminPortal: {
-              components: {
-                MuiTableCell: {
-                  styleOverrides: {
-                    head: {
-                      background: 'lightgreen',
-                      border: '1px solid red',
-                    },
-                    body: {
-                      background: 'pink',
-                      border: '1px solid red',
+          <UsersTable
+            props={{}}
+            themeOptions={{
+              adminPortal: {
+                components: {
+                  MuiTableCell: {
+                    styleOverrides: {
+                      head: {
+                        background: 'lightgreen',
+                        border: '1px solid red',
+                      },
+                      body: {
+                        background: 'pink',
+                        border: '1px solid red',
+                      },
                     },
                   },
                 },
               },
-            }
-          }} hostStyle={{ width: '100%', height: '450px', marginBottom: '50px' }} />
-          <ProfilePage props={{}} hostStyle={{ width: '100%', height: '350px', marginBottom: '50px' }} />
+            }}
+            hostStyle={{ width: '100%', height: '450px', marginBottom: '50px' }}
+          />
+          <ProfilePage
+            props={{}}
+            containerStyle={{ border: '1px solid red' }}
+            hostStyle={{ width: '100%', height: '350px', marginBottom: '50px' }}
+          />
           <ChangePasswordForm props={{}} hostStyle={{ width: '100%', height: '150px', marginBottom: '50px' }} />
           <InviteUserDialog props={{}} hostStyle={{ width: '100%', height: '0px', marginBottom: '50px' }} />
-          <EditEmailForm props={{}} hostStyle={{ width: '100%', height: '350px', margin: '50px 0' }} />
+          <EditEmailForm props={{}} containerStyle={{ border: '1px solid blue' }} />
         </div>
       </div>
       <Testing />
       <h1 style={{ marginBottom: '32px' }}>SSG Page 1</h1>
       {user ? <div>Logged in as: {user.email}</div> : <div>SSG not authorized</div>}
       <br />
       <br />
-      <Link href="/ssg-page-2">
+      <Link href='/ssg-page-2'>
         <button>Go to SSG page 2</button>
       </Link>
       <br />
-      <Link href="/">
+      <Link href='/'>
         <button>Go home page (SSR)</button>
       </Link>
       <br />

packages/nextjs/package.json

@@ -27,8 +27,8 @@
     "lint-json": "eslint -c .eslintrc.json -o ./lint-report.json --format json --no-color ./src/**/*.{ts,tsx}"
   },
   "dependencies": {
-    "@frontegg/js": "7.78.0",
-    "@frontegg/react-hooks": "7.78.0",
+    "@frontegg/js": "7.80.0",
+    "@frontegg/react-hooks": "7.80.0",
     "http-proxy": "^1.18.1",
     "iron-session": "^6.3.1",
     "jose": "^4.12.2"

packages/nextjs/src/common/cmc/base.tsx

@@ -5,41 +5,45 @@ import { CMCComponentProps } from '@frontegg/types';
 import { FC } from 'react';
 import { AppContext } from '../..';
 
-
-export type RenderableFronteggComponent = keyof Pick<FronteggApp, 'renderChangePasswordForm' | 'renderInviteUserDialog' | 'renderProfilePage' | 'renderUsersTable' | 'renderEditEmailForm'>;
-export type FronteggCMCComponentProps<K extends CMCComponentProps> = Pick<K, 'themeOptions' | 'props' | 'localizations' | 'hostStyle'>
-
-export const CMCComponent: FC<FronteggCMCComponentProps<CMCComponentProps> & { renderComponent: RenderableFronteggComponent }> = memo(
-    ({ themeOptions, props, localizations, hostStyle, renderComponent }) => {
-        const ref = React.useRef<HTMLDivElement>(null);
-        const app = useContext(AppContext)!;
-        React.useLayoutEffect(() => {
-            if (!ref.current) {
-                return;
-            }
-            let rootRendered: { unmount: () => void } = {
-                unmount: () => { },
-            };
-
-            console.log({ app });
-            if (!app[renderComponent]) {
-                throw new Error(`Component ${renderComponent} is not supported`);
-            }
-
-            app[renderComponent](ref.current, props, {
-                themeOptions,
-                localizations,
-            })
-                .then((root) => (rootRendered = root));
-
-        }, []);
-
-        return <div style={{ ...hostStyle }} ref={ref} />;
-    },
-    () => true
+export type RenderableFronteggComponent = keyof Pick<
+  FronteggApp,
+  | 'renderChangePasswordForm'
+  | 'renderInviteUserDialog'
+  | 'renderProfilePage'
+  | 'renderUsersTable'
+  | 'renderEditEmailForm'
+>;
+export type FronteggCMCComponentProps<K extends CMCComponentProps> = Pick<
+  K,
+  'themeOptions' | 'props' | 'localizations' | 'hostStyle' | 'containerStyle'
+>;
+
+export const CMCComponent: FC<
+  FronteggCMCComponentProps<CMCComponentProps> & { renderComponent: RenderableFronteggComponent }
+> = memo(
+  ({ themeOptions, props, localizations, hostStyle, containerStyle, renderComponent }) => {
+    const ref = React.useRef<HTMLDivElement>(null);
+    const app = useContext(AppContext)!;
+    React.useLayoutEffect(() => {
+      if (!ref.current) {
+        return;
+      }
+      let rootRendered: { unmount: () => void } = {
+        unmount: () => {},
+      };
+
+      if (!app[renderComponent]) {
+        throw new Error(`Component ${renderComponent} is not supported`);
+      }
+
+      app[renderComponent](ref.current, props, {
+        themeOptions,
+        localizations,
+        containerStyle,
+      }).then((root) => (rootRendered = root));
+    }, []);
+
+    return <div style={{ ...hostStyle }} ref={ref} />;
+  },
+  () => true
 );
-
-
-
-
-

packages/nextjs/src/common/cmc/components.tsx

@@ -1,25 +1,31 @@
 'use client';
 
-import { ChangePasswordFormProps, EditEmailFormProps, InviteUserDialogProps, ProfilePageProps, UsersTableProps } from '@frontegg/types';
+import {
+  ChangePasswordFormProps,
+  EditEmailFormProps,
+  InviteUserDialogProps,
+  ProfilePageProps,
+  UsersTableProps,
+} from '@frontegg/types';
 import React, { FC } from 'react';
 import { CMCComponent, FronteggCMCComponentProps } from './base';
 
 export const UsersTable: FC<FronteggCMCComponentProps<UsersTableProps>> = (props) => {
-    return <CMCComponent renderComponent="renderUsersTable" {...props} />
-}
+  return <CMCComponent renderComponent='renderUsersTable' {...props} />;
+};
 
 export const InviteUserDialog: FC<FronteggCMCComponentProps<InviteUserDialogProps>> = (props) => {
-    return <CMCComponent renderComponent="renderInviteUserDialog" {...props} />
-}
+  return <CMCComponent renderComponent='renderInviteUserDialog' {...props} />;
+};
 
 export const ChangePasswordForm: FC<FronteggCMCComponentProps<ChangePasswordFormProps>> = (props) => {
-    return <CMCComponent renderComponent="renderChangePasswordForm" {...props} />
-}
+  return <CMCComponent renderComponent='renderChangePasswordForm' {...props} />;
+};
 
 export const ProfilePage: FC<FronteggCMCComponentProps<ProfilePageProps>> = (props) => {
-    return <CMCComponent renderComponent="renderProfilePage" {...props} />
-}
+  return <CMCComponent renderComponent='renderProfilePage' {...props} />;
+};
 
 export const EditEmailForm: FC<FronteggCMCComponentProps<EditEmailFormProps>> = (props) => {
-    return <CMCComponent renderComponent="renderEditEmailForm" {...props} />
-}
+  return <CMCComponent renderComponent='renderEditEmailForm' {...props} />;
+};

yarn.lock

@@ -1406,57 +1406,57 @@
   resolved "https://registry.yarnpkg.com/@frontegg/entitlements-javascript-commons/-/entitlements-javascript-commons-1.1.2.tgz#8c771cac0796fde5bbc05abe750cb6b8677ec2c6"
   integrity sha512-vwCFxj9KSIKHXinOH0HbBf4DhKRbUWhjCnL14+JfQnwuEl/zKtSGZoZecrXcPajWUypdi0uT+8q3GGcqnCW13Q==
 
-"@frontegg/js@7.78.0":
-  version "7.78.0"
-  resolved "https://registry.yarnpkg.com/@frontegg/js/-/js-7.78.0.tgz#eeb2ad0b0253a092a8d95e970066b0a327dd693c"
-  integrity sha512-lhmnTS6P4Jz29/aZ71Yq+0mPmesaWnVpC9an8uEPavAzNgqefp+ksF6K3lQMQ20Nfxo0jDE2BIDZmF/OioJRIg==
+"@frontegg/js@7.80.0":
+  version "7.80.0"
+  resolved "https://registry.yarnpkg.com/@frontegg/js/-/js-7.80.0.tgz#8c96440b57d4485759e9a222d2a5b302c647f515"
+  integrity sha512-p54pU7YAyYNjrPGnl2BT1SeDHIWqXFVjbl52N0geAVuqS9sze/Lta1KDCrNhzVeET+jCa2IiiUry/koGNmZYwg==
   dependencies:
     "@babel/runtime" "^7.18.6"
-    "@frontegg/types" "7.78.0"
+    "@frontegg/types" "7.80.0"
 
-"@frontegg/react-hooks@7.78.0":
-  version "7.78.0"
-  resolved "https://registry.yarnpkg.com/@frontegg/react-hooks/-/react-hooks-7.78.0.tgz#e900724812a80ac53e602c7316ac9a8ac4c5d8ca"
-  integrity sha512-XuDwC+kwwta1p+2HNX0D899SjTNB4fgLLWxZ092nODMB1LzJVZM7FHJ0ECdpOPS1qa5Cd8/K38sTRbQKInWq6A==
+"@frontegg/react-hooks@7.80.0":
+  version "7.80.0"
+  resolved "https://registry.yarnpkg.com/@frontegg/react-hooks/-/react-hooks-7.80.0.tgz#e814055a45d77288a4f5013a643d1fe1bf106411"
+  integrity sha512-FxVMWdlIQBosxv1HBtJsXOjqdHUqz0Wzs4nH3/kg93CFSnxhTfLg78l3jfmNNPHY/XDER0SgBISVcLEroSV5dw==
   dependencies:
     "@babel/runtime" "^7.18.6"
-    "@frontegg/redux-store" "7.78.0"
-    "@frontegg/types" "7.78.0"
+    "@frontegg/redux-store" "7.80.0"
+    "@frontegg/types" "7.80.0"
     "@types/react" "*"
     "@types/react-is" "^17.0.7"
     get-value "^3.0.1"
     react-is "^17.0.2"
     use-sync-external-store "^1.2.2"
 
-"@frontegg/redux-store@7.78.0":
-  version "7.78.0"
-  resolved "https://registry.yarnpkg.com/@frontegg/redux-store/-/redux-store-7.78.0.tgz#9c5bc3668b294612911375e047c3a016b8a34562"
-  integrity sha512-K/z5+nLiLIHKnaxLG8D4B+yybWMBo5IRu35RQMkXNFw5CnpeyE1tEsmj1yZun1g9wWPu5N/anlVYiXB4IzUyeQ==
+"@frontegg/redux-store@7.80.0":
+  version "7.80.0"
+  resolved "https://registry.yarnpkg.com/@frontegg/redux-store/-/redux-store-7.80.0.tgz#fe8293e40c536f8d73e73aa00a731be839c21cfc"
+  integrity sha512-BMNgAeL0+19SvnvXBRkZ8+1pyPWeu9zufex1xyfdfA3hyPxl7OzNxzAKcbF5LFc0mIVPylJ3pUXXTaJpVmbUCQ==
   dependencies:
     "@babel/runtime" "^7.18.6"
     "@frontegg/entitlements-javascript-commons" "1.1.2"
-    "@frontegg/rest-api" "7.78.0"
+    "@frontegg/rest-api" "7.80.0"
     fast-deep-equal "3.1.3"
     get-value "^3.0.1"
     proxy-compare "^3.0.0"
     set-value "^4.1.0"
     uuid "^10.0.0"
 
-"@frontegg/rest-api@7.78.0":
-  version "7.78.0"
-  resolved "https://registry.yarnpkg.com/@frontegg/rest-api/-/rest-api-7.78.0.tgz#6ed80f1ac2340ff0797560de64f87f6cdb50cff4"
-  integrity sha512-a1JNoK7xqVh7YMnRVQCcHuMlrUZ2mzp9Ulqea+d3DHr2Nl14BEfpOdrolP1UNNF3+sXLZqFI6edTUOkr3r8inQ==
+"@frontegg/rest-api@7.80.0":
+  version "7.80.0"
+  resolved "https://registry.yarnpkg.com/@frontegg/rest-api/-/rest-api-7.80.0.tgz#6ac3226a91f8892e8a79c6b61b21a913d3cb9bac"
+  integrity sha512-z2clNee6S/729XHnLCwDGDMnH2mB3y/CoSYI8k4MrgIM5TNJh79SkuIF4Xg0dRSdmCEKWi+UzYOIUD1BBEKYDw==
   dependencies:
     "@babel/runtime" "^7.18.6"
     "@frontegg/entitlements-javascript-commons" "1.1.2"
 
-"@frontegg/types@7.78.0":
-  version "7.78.0"
-  resolved "https://registry.yarnpkg.com/@frontegg/types/-/types-7.78.0.tgz#5a33c42e220e5eecf5349c31284e0dde783a51d2"
-  integrity sha512-h5aN2pQfwbQlY8VjFueg6QYRy85qrpOPBblOg061EL4Zmqsc/khw0mxCeOkWYgQ2F/wX9y6d4W9BtFPaltZXXQ==
+"@frontegg/types@7.80.0":
+  version "7.80.0"
+  resolved "https://registry.yarnpkg.com/@frontegg/types/-/types-7.80.0.tgz#75532e571b68a89f32dd1e33528811ad4fcce2dd"
+  integrity sha512-dwQtfnpdUKIjkyQ3VIdb4Xz1bqi6XagGEpbEPkVigZEwaa2Al95RTVxV1nUYzv9X4Jeu4s77YjHwG1lwSaEnFw==
   dependencies:
     "@babel/runtime" "^7.18.6"
-    "@frontegg/redux-store" "7.78.0"
+    "@frontegg/redux-store" "7.80.0"
     csstype "^3.0.9"
     deepmerge "^4.2.2"