FR-15371 - Example app makeover

packages/demo-saas/package.json

@@ -13,7 +13,11 @@
     "@frontegg/react": "^6.0.29",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-router-dom": "^5.3.3"
+    "react-router-dom": "^5.3.3",
+    "@mui/material": "5.0.3",
+    "@emotion/react": "^11.4.1",
+    "@emotion/styled": "^11.3.0",
+    "@mui/icons-material": "5.11.0"
   },
   "devDependencies": {
     "@types/react-router-dom": "^5.3.3",

packages/demo-saas/src/App.tsx

@@ -1,15 +1,82 @@
-import React, { FC } from 'react';
-import { AppHeader } from './components/AppHeader';
-import { AppSidebar } from './components/AppSidebar';
-import { AppContent } from './components/AppContent';
+import React, { FC, useState } from 'react';
+import { BrowserRouter, Route, Switch } from 'react-router-dom';
+import Loader from '@mui/material/CircularProgress';
+import Box from '@mui/material/Box';
+import { FronteggProvider } from '@frontegg/react';
+import { FronteggAppOptions } from '@frontegg/types';
+import { authOptions } from './customizationOptions/authOptions';
+import HomePage from './HomePage';
+import ModalsStepUpPage from './stepUp/ModalsStepUpPage';
+import HOCStepUpPage from './stepUp/HOCStepUpPage';
+import SimpleStepUpButtonPage from './stepUp/SimpleStepUpButtonPage';
+import SmallMaxAgeStepUpPage from './stepUp/SmallMaxAgeStepUpPage';
+import TransferStepUpPage from './stepUp/TransferStepUpPage';
+import NoMaxAgeStepUpPage from './stepUp/NoMaxAgeStepUpPage';
+import EntitlementsPage from './entitlements/EntitlementsPage';
+import Fallback from './Fallback';
+import NotAFronteggPage from './NotAFronteggPage';
+import { DEFAULT_BASE_URL } from './consts';
+import { ROUTE_PATHS } from './BaseHomePage/components/Links';
+
+const IS_HOSTED_LOGIN = true;
+
+const fronteggOptions: FronteggAppOptions =
+  // @ts-ignore
+  window.CYPRESS_CONFIG ||
+  ({
+    contextOptions: {
+      baseUrl: process.env.PUBLIC_URL || process.env.REACT_APP_BASE_URL || DEFAULT_BASE_URL,
+      clientId: process.env.REACT_APP_CLIENT_ID,
+    },
+    ...authOptions,
+    enableOpenAppRoute: true,
+  } as FronteggAppOptions);
+
+export const App: FC = () => {
+  const [loading, setLoading] = useState(true);
 
-export const App = () => {
-  console.log('App');
   return (
-    <div className='app-container'>
-      <AppHeader />
-      <AppSidebar />
-      <AppContent />
-    </div>
+    <BrowserRouter>
+      <FronteggProvider
+        {...fronteggOptions}
+        customLoader={setLoading}
+        entitlementsOptions={{ enabled: true }}
+        hostedLoginBox={IS_HOSTED_LOGIN} // don't remove it! change the flag above
+      >
+        <Switch>
+          <Route path={ROUTE_PATHS.HOME_PAGE} exact render={HomePage} />
+          <Route path={ROUTE_PATHS.ENTITLEMENTS} exact render={EntitlementsPage} />
+          <Route path={ROUTE_PATHS.STEP_UP_HIGH_MAX_AGE} exact render={SimpleStepUpButtonPage} />
+          <Route path={ROUTE_PATHS.STEP_UP_SMALL_MAX_AGE} exact render={SmallMaxAgeStepUpPage} />
+          <Route path={ROUTE_PATHS.STEP_UP_NO_MAX_AGE} exact render={NoMaxAgeStepUpPage} />
+          <Route path={ROUTE_PATHS.STEP_UP_MODALS} exact render={ModalsStepUpPage} />
+          <Route path={ROUTE_PATHS.STEP_UP_HOC} exact render={HOCStepUpPage} />
+          <Route path={ROUTE_PATHS.STEP_UP_TRANSFER} exact render={TransferStepUpPage} />
+          {/* For tests that use someurl as the authenticated-url */}
+          <Route path={'/someurl'} exact render={NotAFronteggPage} />
+          <Route
+            path={'/test'}
+            exact
+            component={() => {
+              return <div>Test</div>;
+            }}
+          />
+          <Route path={'*'} render={Fallback} />
+        </Switch>
+      </FronteggProvider>
+
+      {loading && !IS_HOSTED_LOGIN && (
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            height: '100vh',
+            alignItems: 'center',
+          }}
+        >
+          <Loader />
+        </Box>
+      )}
+    </BrowserRouter>
   );
 };

packages/demo-saas/src/BaseHomePage/BaseHomePage.tsx

@@ -0,0 +1,35 @@
+import React, { FC } from 'react';
+import { ContextHolder } from '@frontegg/rest-api';
+import { useAuth } from '@frontegg/react-hooks';
+
+import Box from '@mui/material/Box';
+import { EmbeddedBasedHomePage } from './components/EmbeddedHomePage';
+import { HostedBasedHomePage } from './components/HostedHomePage';
+import { BaseHomePageProps } from './interfaces';
+import { NoBaseUrlSection } from './components/NoBaseUrlSection/NoBaseUrlSection';
+import { DEFAULT_BASE_URL } from '../consts';
+
+const BaseHomePage: FC<BaseHomePageProps> = (props) => {
+  const { hostedLoginBox } = useAuth();
+  const { baseUrl } = ContextHolder.getContext();
+
+  if (baseUrl === DEFAULT_BASE_URL) {
+    return <NoBaseUrlSection />;
+  }
+
+  return (
+    <Box display='flex' flexDirection='column' alignItems='center' mt={2} lineHeight='2em'>
+      {hostedLoginBox ? <HostedBasedHomePage {...props} /> : <EmbeddedBasedHomePage {...props} />}
+    </Box>
+  );
+};
+
+export default BaseHomePage;
+
+export const wrapWithBaseHomePage = (Component: any, wrapperStyles?: any) => {
+  return (props: any) => (
+    <BaseHomePage wrapperStyles={wrapperStyles}>
+      <Component {...props} />
+    </BaseHomePage>
+  );
+};

packages/demo-saas/src/BaseHomePage/components/AdminPortalButton.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { AdminPortal } from '@frontegg/js';
+import { DemoButton } from '../../DemoButton';
+
+export const AdminPortalButton = () => (
+  <DemoButton
+    data-test-id='open-admin-portal-btn'
+    onClick={() => {
+      AdminPortal.show();
+    }}
+  >
+    {'Open AdminBox'}
+  </DemoButton>
+);

packages/demo-saas/src/BaseHomePage/components/ChildrenRenderer.tsx

@@ -0,0 +1,21 @@
+import React, { FC, ReactNode } from 'react';
+
+import Box from '@mui/material/Box';
+
+export const ChildrenRenderer: FC<{ children: ReactNode; wrapperStyles?: any }> = ({ wrapperStyles, children }) => (
+  <Box display='flex' alignItems='center' justifyContent='center' mt={2}>
+    <Box
+      display='flex'
+      flexDirection='column'
+      alignItems='center'
+      justifyContent='center'
+      border='2px dotted #1665c0'
+      p={2}
+      ml={4}
+      mr={4}
+      {...wrapperStyles}
+    >
+      {children}
+    </Box>
+  </Box>
+);

packages/demo-saas/src/BaseHomePage/components/EmbeddedHomePage.tsx

@@ -0,0 +1,36 @@
+import React, { FC } from 'react';
+import { useAuthUser, useAuthActions, useIsAuthenticated } from '@frontegg/react-hooks';
+
+import Box from '@mui/material/Box';
+import { BaseHomePageProps } from '../interfaces';
+import { DemoButton } from '../../DemoButton';
+import { AdminPortalButton } from './AdminPortalButton';
+import { ChildrenRenderer } from './ChildrenRenderer';
+import { Links } from './Links';
+import { User } from './User';
+
+export const EmbeddedBasedHomePage: FC<BaseHomePageProps> = ({ children, wrapperStyles }) => {
+  const user = useAuthUser();
+
+  const { logout } = useAuthActions();
+  const isAuthenticated = useIsAuthenticated();
+
+  return (
+    <Box display='flex' flexDirection='column' alignItems='center' mt={2} lineHeight='2em'>
+      <Box>
+        <AdminPortalButton />
+
+        <DemoButton data-test-id='logout-embedded' onClick={() => logout()}>
+          Logout
+        </DemoButton>
+      </Box>
+
+      <User user={user} />
+      <div>Embedded</div>
+
+      <Links />
+
+      {isAuthenticated && <ChildrenRenderer wrapperStyles={wrapperStyles}>{children}</ChildrenRenderer>}
+    </Box>
+  );
+};

packages/demo-saas/src/BaseHomePage/components/HostedHomePage.tsx

@@ -0,0 +1,78 @@
+import React, { FC, useEffect } from 'react';
+import {
+  useLoginWithRedirect,
+  useLoginWithRedirectV2,
+  useAuthActions,
+  useAuthUserOrNull,
+  useIsAuthenticated,
+} from '@frontegg/react-hooks';
+
+import Box from '@mui/material/Box';
+import { BaseHomePageProps } from '../interfaces';
+import { DemoButton } from '../../DemoButton';
+import { AdminPortalButton } from './AdminPortalButton';
+import { ChildrenRenderer } from './ChildrenRenderer';
+import { Links } from './Links';
+import { User } from './User';
+
+export const HostedBasedHomePage: FC<BaseHomePageProps> = ({ children, wrapperStyles }) => {
+  const user = useAuthUserOrNull();
+  const loginWithRedirect = useLoginWithRedirect();
+  const loginWithRedirectV2 = useLoginWithRedirectV2();
+
+  const { logout } = useAuthActions();
+  const isAuthenticated = useIsAuthenticated();
+
+  // comment it to avoid redirect to login when not authenticated
+  useEffect(() => {
+    !isAuthenticated && loginWithRedirect();
+  }, [isAuthenticated, loginWithRedirect]);
+
+  return (
+    <>
+      <Box>
+        <AdminPortalButton />
+
+        {!isAuthenticated && (
+          <>
+            <DemoButton
+              data-test-id='open-hosted'
+              onClick={() => {
+                loginWithRedirect();
+              }}
+            >
+              Login
+            </DemoButton>
+
+            <DemoButton
+              onClick={() => {
+                loginWithRedirectV2({
+                  shouldRedirectToLogin: true,
+                  loginDirectAction: {
+                    type: 'social-login',
+                    data: 'google',
+                  },
+                });
+              }}
+            >
+              Direct Login with redirect
+            </DemoButton>
+          </>
+        )}
+
+        {isAuthenticated && (
+          <DemoButton data-test-id='logout-hosted' onClick={() => logout()}>
+            Logout
+          </DemoButton>
+        )}
+      </Box>
+
+      <User user={user} />
+      <div>Hosted</div>
+
+      <Links />
+
+      {isAuthenticated && <ChildrenRenderer wrapperStyles={wrapperStyles}>{children}</ChildrenRenderer>}
+    </>
+  );
+};

packages/demo-saas/src/BaseHomePage/components/Links.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import Box from '@mui/material/Box';
+import { Link } from 'react-router-dom';
+
+const linkStyle = {
+  padding: '4px 10px',
+  fontSize: '15px',
+  textDecoration: 'none',
+  background: '#1976d2',
+  color: 'white',
+  fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
+  border: '1px solid #1976d2',
+  borderRadius: '4px',
+};
+
+export const ROUTE_PATHS = {
+  HOME_PAGE: '/',
+  ENTITLEMENTS: '/entitlements',
+  STEP_UP_HIGH_MAX_AGE: '/step-up-high-max-age',
+  STEP_UP_SMALL_MAX_AGE: '/step-up-small-max-age',
+  STEP_UP_NO_MAX_AGE: '/step-up-no-max-age',
+  STEP_UP_MODALS: '/step-up-modals',
+  STEP_UP_HOC: '/step-up-hoc',
+  STEP_UP_TRANSFER: '/step-up-transfer',
+  UNKNOWN_ROUTE: '/unknown-route',
+  TEST: '/test',
+};
+
+const links = [
+  { route: ROUTE_PATHS.HOME_PAGE, label: 'Home page' },
+  { route: ROUTE_PATHS.ENTITLEMENTS, label: 'Entitlements' },
+  { route: ROUTE_PATHS.STEP_UP_HIGH_MAX_AGE, label: 'Step up high max age' },
+  { route: ROUTE_PATHS.STEP_UP_SMALL_MAX_AGE, label: 'Step up small max age' },
+  { route: ROUTE_PATHS.STEP_UP_NO_MAX_AGE, label: 'Step up no nax age' },
+  { route: ROUTE_PATHS.STEP_UP_MODALS, label: 'Step up modals' },
+  { route: ROUTE_PATHS.STEP_UP_HOC, label: 'Step up HOC' },
+  { route: ROUTE_PATHS.STEP_UP_TRANSFER, label: 'Step up transfer' },
+  { route: ROUTE_PATHS.UNKNOWN_ROUTE, label: 'Fallback route' },
+  { route: ROUTE_PATHS.TEST, label: 'Old test' },
+];
+
+export const Links = () => (
+  <Box mb={2} display='flex' flexWrap='wrap' justifyContent='center'>
+    <Box mt={1}>Pages:</Box>
+    {links.map(({ route, label }, index) => (
+      <Box ml={1} mr={1} mt={1} key={index}>
+        <Link to={route} style={linkStyle}>
+          {label}
+        </Link>
+      </Box>
+    ))}
+  </Box>
+);