FR-14220 - Added SteppedUpContent HOC

packages/react/rollup.config.js

@@ -53,6 +53,7 @@ const isExternal = (id) => {
     id !== './FronteggProvider' &&
     id !== './AlwaysRenderInProvider' &&
     id !== './AuthorizedContent' &&
+    id !== './SteppedUpContent' &&
     id !== './sdkVersion' &&
     id !== './routerProxy' &&
     id !== './queryKeeper' &&

packages/react/src/SteppedUpContent.tsx

@@ -0,0 +1,43 @@
+import React, { ReactNode, useEffect, useRef } from 'react';
+
+import { useStepUp, useIsSteppedUp, useIsAuthenticated } from '@frontegg/react-hooks';
+
+export interface SteppedUpProps {
+  maxAge?: number;
+  render?: (isSteppedUp: boolean) => React.ReactNode | null;
+  children?: ReactNode;
+}
+
+/**
+ * Stepped up content component that shows the wrapped content only when the user is stepped up
+ * The component triggers the step up flow if the user is not stepped up
+ * @param maxAge maximum time in second that the login is valid
+ * @param render render function to be called when user is stepped up
+ * @param children to be shown when user is stepped up (only if render not provided)
+ */
+export const SteppedUpContent: React.FC<SteppedUpProps> = ({ maxAge, render, children }) => {
+  const isAuthenticated = useIsAuthenticated();
+  if (!isAuthenticated) return null;
+
+  const isSteppedUp = useIsSteppedUp({ maxAge });
+  const stepUp = useStepUp();
+  const isStepUpCalled = useRef(false);
+
+  useEffect(() => {
+    if (isSteppedUp) {
+      isStepUpCalled.current = false;
+      return;
+    }
+
+    if (isStepUpCalled.current) return;
+
+    stepUp({ maxAge });
+    isStepUpCalled.current = true;
+  }, [isSteppedUp, maxAge, stepUp]);
+
+  if (typeof render === 'function') {
+    return <>{render(isSteppedUp)}</>;
+  }
+
+  return isSteppedUp ? <>{children}</> : null;
+};

packages/react/src/index.ts

@@ -1,6 +1,7 @@
 export * from './FronteggProvider';
 export * from './AuthorizedContent';
 export * from './CheckoutDialog';
+export * from './SteppedUpContent';
 
 export { AdminPortal, CheckoutDialog, HostedLogin } from '@frontegg/js';
 export * from '@frontegg/react-hooks';

yarn.lock

@@ -2124,13 +2124,20 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.12.13", "@babel/runtime@^7.17.2", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.12.13", "@babel/runtime@^7.9.2":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a"
   integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.17.2":
+  version "7.23.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.6.tgz#c05e610dc228855dc92ef1b53d07389ed8ab521d"
+  integrity sha512-zHd0eUrf5GZoOWVCXp6koAKQTfZV07eit6bGPmJgnZdnSAvvZee6zniW2XMF7Cmc4ISOOnPy3QaSiIJGJkVEDQ==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.18.6":
   version "7.19.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.19.0.tgz#22b11c037b094d27a8a2504ea4dcff00f50e2259"
@@ -14668,6 +14675,11 @@ regenerator-runtime@^0.13.9:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
   integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
 
+regenerator-runtime@^0.14.0:
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
+  integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
+
 regenerator-transform@^0.15.0:
   version "0.15.0"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.0.tgz#cbd9ead5d77fae1a48d957cf889ad0586adb6537"