Add support for application id and option to use appId in isolated mode

frontegg · Oct 16, 2024 · 1631534 · 1631534
1 parent 0d4e49f
commit 1631534
Show file tree

Hide file tree

Showing 16 changed files with 206 additions and 23 deletions.
diff --git a/packages/example-app-directory/app/UserState.tsx b/packages/example-app-directory/app/UserState.tsx
@@ -1,11 +1,18 @@
 'use client';
-import { useAuthUserOrNull, useLoginWithRedirect, AdminPortal, useLogoutHostedLogin } from '@frontegg/nextjs';
+import {
+  useAuthActions,
+  useAuthUserOrNull,
+  useLoginWithRedirect,
+  AdminPortal,
+  useLogoutHostedLogin,
+} from '@frontegg/nextjs';
 import Link from 'next/link';
 
 export const UserState = () => {
   const user = useAuthUserOrNull();
   const loginWithRedirect = useLoginWithRedirect();
   const logoutHosted = useLogoutHostedLogin();
+  const { switchTenant } = useAuthActions();
 
   /*
    * Replace the elements below with your own.
@@ -18,6 +25,30 @@ export const UserState = () => {
 
       <br />
       <br />
+      <div>
+        <h2>Tenants:</h2>
+        {(user?.tenants ?? []).map((tenant) => {
+          return (
+            <div key={tenant.tenantId}>
+              <b>Tenant Id:</b>
+              {tenant['tenantId']}
+              <span style={{ display: 'inline-block', width: '20px' }} />
+              {tenant.tenantId === user?.tenantId ? (
+                <b>Current Tenant</b>
+              ) : (
+                <button
+                  onClick={() => {
+                    switchTenant({ tenantId: tenant.tenantId });
+                  }}
+                >
+                  Switch to tenant
+                </button>
+              )}
+            </div>
+          );
+        })}
+      </div>
+      <br />
       <button
         onClick={() => {
           AdminPortal.show();

diff --git a/packages/example-app-directory/app/layout.tsx b/packages/example-app-directory/app/layout.tsx
@@ -6,11 +6,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       <head></head>
       <body>
         {/* @ts-expect-error Server Component for more details visit: https://github.com/vercel/next.js/issues/42292 */}
-        <FronteggAppProvider
-          authOptions={{ keepSessionAlive: true }}
-          customLoginOptions={{ paramKey: 'organization' }}
-          hostedLoginBox
-        >
+        <FronteggAppProvider authOptions={{ keepSessionAlive: true }} customLoginOptions={{ paramKey: 'organization' }}>
           {children}
         </FronteggAppProvider>
       </body>

diff --git a/packages/example-pages/pages/api/frontegg/[...frontegg-middleware].ts b/packages/example-pages/pages/api/frontegg/[...frontegg-middleware].ts
@@ -1,6 +1,34 @@
 import { FronteggApiMiddleware } from '@frontegg/nextjs/middleware';
 
 export default FronteggApiMiddleware;
+
+/**
+ *  Option to support multiple origins in single nextjs backend
+ *
+ *  import type { NextApiRequest, NextApiResponse } from 'next';
+ *
+ * export default function handler(req: NextApiRequest, res: NextApiResponse): Promise<void> {
+ *   // Add CORS headers after the handler has run
+ *   const allowedOrigins = ['http://localapp1.davidantoon.me:3000', 'http://localapp2.davidantoon.me:3000'];
+ *   const origin = req.headers.origin ?? '';
+ *
+ *   if (allowedOrigins.includes(origin)) {
+ *     res.setHeader('Access-Control-Allow-Origin', origin);
+ *   } else {
+ *     res.removeHeader('Access-Control-Allow-Origin');
+ *   }
+ *
+ *   res.setHeader('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE,PATCH,OPTIONS');
+ *   res.setHeader(
+ *     'Access-Control-Allow-Headers',
+ *     'Content-Type, Authorization, x-frontegg-framework, x-frontegg-sdk, frontegg-source'
+ *   );
+ *   res.setHeader('Access-Control-Allow-Credentials', 'true');
+ *
+ *   return FronteggApiMiddleware(req, res);
+ * }
+ */
+
 export const config = {
   api: {
     externalResolver: true,

diff --git a/packages/example-pages/pages/index.tsx b/packages/example-pages/pages/index.tsx
@@ -4,6 +4,7 @@ import { useState } from 'react';
 
 export function Index() {
   const { user, isAuthenticated } = useAuth();
+  const { switchTenant } = useAuthActions();
   const loginWithRedirect = useLoginWithRedirect();
   const [state, setState] = useState({ userAgent: '', id: -1 });
   const logoutHosted = useLogoutHostedLogin();
@@ -65,6 +66,33 @@ export function Index() {
       <br />
       <br />
       <Link href='/account/logout'>logout embedded</Link>
+      <br />
+      <br />
+      <br />
+      <div>
+        <h2>Tenants:</h2>
+        {(user?.tenants ?? []).map((tenant) => {
+          return (
+            <div key={tenant.tenantId}>
+              <b>Tenant Id:</b>
+              {tenant['tenantId']}
+              <span style={{ display: 'inline-block', width: '20px' }} />
+              {tenant.tenantId === user?.tenantId ? (
+                <b>Current Tenant</b>
+              ) : (
+                <button
+                  onClick={() => {
+                    switchTenant({ tenantId: tenant.tenantId });
+                  }}
+                >
+                  Switch to tenant
+                </button>
+              )}
+            </div>
+          );
+        })}
+      </div>
+      <br />
     </div>
   );
 }

diff --git a/packages/nextjs/src/api/utils.ts b/packages/nextjs/src/api/utils.ts
@@ -48,6 +48,7 @@ export function removeInvalidHeaders(headers: Record<string, string>) {
  * These header is used to identify the tenant for login per tenant feature
  */
 export const CUSTOM_LOGIN_HEADER = 'frontegg-login-alias';
+
 /**
  * Build fetch request headers, remove invalid http headers
  * @param headers - Incoming request headers
@@ -56,10 +57,23 @@ export function buildRequestHeaders(headers: Record<string, any>): Record<string
   let cookie = headers['cookie'];
   if (cookie != null && typeof cookie === 'string') {
     cookie = cookie.replace(/fe_session-[^=]*=[^;]*$/, '').replace(/fe_session-[^=]*=[^;]*;/, '');
+
+    if (config.rewriteCookieByAppId && config.appId) {
+      cookie = cookie.replace(
+        `fe_refresh_${config.appId.replace('-', '')}`,
+        `fe_refresh_${config.clientId.replace('-', '')}`
+      );
+    }
   }
   if (cookie != null && typeof cookie === 'object') {
     cookie = Object.entries(cookie)
-      .map(([key, value]) => `${key}=${value}`)
+      .map(([key, value]) => {
+        if (config.rewriteCookieByAppId && config.appId && key === `fe_refresh_${config.appId.replace('-', '')}`) {
+          return `fe_refresh_${config.clientId.replace('-', '')}=${value}`;
+        } else {
+          return `${key}=${value}`;
+        }
+      })
       .join('; ');
   }
 
@@ -77,6 +91,9 @@ export function buildRequestHeaders(headers: Record<string, any>): Record<string
     'x-frontegg-sdk': `@frontegg/nextjs@${sdkVersion.version}`,
   };
 
+  if (headers['frontegg-requested-application-id']) {
+    preparedHeaders['frontegg-requested-application-id'] = headers['frontegg-requested-application-id'];
+  }
   if (headers[CUSTOM_LOGIN_HEADER]) {
     preparedHeaders[CUSTOM_LOGIN_HEADER] = headers[CUSTOM_LOGIN_HEADER];
   }

diff --git a/packages/nextjs/src/config/constants.ts b/packages/nextjs/src/config/constants.ts
@@ -23,6 +23,19 @@ export enum EnvVariables {
    */
   FRONTEGG_CLIENT_ID = 'FRONTEGG_CLIENT_ID',
 
+  /**
+   * Your Frontegg application ID, get it by visit:
+   * - For Dev environment [visit](https://portal.frontegg.com/development/applications)
+   * - For Prod environment [visit](https://portal.frontegg.com/production/applications)
+   */
+  FRONTEGG_APP_ID = 'FRONTEGG_APP_ID',
+
+  /**
+   * Rewrite the cookie name by the Frontegg application ID
+   * to support multiple Frontegg applications with same domain
+   */
+  FRONTEGG_REWRITE_COOKIE_BY_APP_ID = 'FRONTEGG_REWRITE_COOKIE_BY_APP_ID',
+
   /**
    * Your Frontegg application's Client Secret, get it by visit:
    * - For Dev environment [visit](https://portal.frontegg.com/development/settings/general)

diff --git a/packages/nextjs/src/config/index.ts b/packages/nextjs/src/config/index.ts
@@ -10,6 +10,8 @@ const setupEnvVariables = {
   FRONTEGG_BASE_URL: process.env.FRONTEGG_BASE_URL,
   FRONTEGG_TEST_URL: process.env.FRONTEGG_TEST_URL,
   FRONTEGG_CLIENT_ID: process.env.FRONTEGG_CLIENT_ID,
+  FRONTEGG_APP_ID: process.env.FRONTEGG_APP_ID,
+  FRONTEGG_REWRITE_COOKIE_BY_APP_ID: process.env.FRONTEGG_REWRITE_COOKIE_BY_APP_ID,
   FRONTEGG_CLIENT_SECRET: process.env.FRONTEGG_CLIENT_SECRET,
   FRONTEGG_ENCRYPTION_PASSWORD: process.env.FRONTEGG_ENCRYPTION_PASSWORD,
   FRONTEGG_COOKIE_NAME: process.env.FRONTEGG_COOKIE_NAME,
@@ -54,6 +56,18 @@ class Config {
     return getEnv(EnvVariables.FRONTEGG_CLIENT_ID) ?? setupEnvVariables.FRONTEGG_CLIENT_ID;
   }
 
+  get appId(): string | undefined {
+    return getEnvOrDefault(EnvVariables.FRONTEGG_APP_ID, setupEnvVariables.FRONTEGG_APP_ID);
+  }
+  get rewriteCookieByAppId(): boolean {
+    return (
+      getEnvOrDefault(
+        EnvVariables.FRONTEGG_REWRITE_COOKIE_BY_APP_ID,
+        setupEnvVariables.FRONTEGG_REWRITE_COOKIE_BY_APP_ID ?? 'false'
+      ) === 'true'
+    );
+  }
+
   get clientSecret(): string | undefined {
     let clientSecret = undefined;
     try {
@@ -88,7 +102,12 @@ class Config {
       EnvVariables.FRONTEGG_COOKIE_NAME,
       setupEnvVariables.FRONTEGG_COOKIE_NAME ?? 'fe_session'
     );
-    return `${cookieNameEnv}-${this.clientId.replace(/-/g, '')}`;
+
+    if (this.rewriteCookieByAppId && this.appId) {
+      return `${cookieNameEnv}-${this.appId.replace(/-/g, '')}`;
+    } else {
+      return `${cookieNameEnv}-${this.clientId.replace(/-/g, '')}`;
+    }
   }
 
   get cookieDomain(): string {
@@ -152,9 +171,9 @@ class Config {
       envAppUrl: this.appUrl,
       envBaseUrl: this.baseUrl,
       envClientId: this.clientId,
+      envAppId: this.appId,
       secureJwtEnabled: this.secureJwtEnabled,
     };
-    console.log('this.appEnvConfig', config);
     return config;
   }
 }

diff --git a/packages/nextjs/src/edge/getSessionOnEdge.ts b/packages/nextjs/src/edge/getSessionOnEdge.ts
@@ -58,8 +58,13 @@ export const handleHostedLoginCallback = async (
     expires: new Date(decodedJwt.exp * 1000),
     secure: isSecured,
   });
+
+  let cookieName = `fe_refresh_${config.clientId.replace('-', '')}`;
+  if (config.rewriteCookieByAppId && config.appId) {
+    cookieName = `fe_refresh_${config.appId.replace('-', '')}`;
+  }
   const refreshCookie = CookieManager.create({
-    cookieName: `fe_refresh_${config.clientId.replace('-', '')}`,
+    cookieName,
     value: refreshToken ?? '',
     expires: new Date(decodedJwt.exp * 1000),
     secure: isSecured,

diff --git a/packages/nextjs/src/middleware/ProxyRequestCallback.ts b/packages/nextjs/src/middleware/ProxyRequestCallback.ts
@@ -26,8 +26,17 @@ const ProxyRequestCallback: ProxyReqCallback<ClientRequest, NextApiRequest> = (p
     });
 
     logger.debug(`${req.url} | proxy FronteggCookies (${fronteggCookiesNames.join(', ')})`);
-    fronteggCookiesNames.forEach((cookieName: string) => {
-      proxyReq.setHeader(cookieName, allCookies[cookieName]);
+    fronteggCookiesNames.forEach((requestCookieName: string) => {
+      let cookieName = requestCookieName;
+      if (config.rewriteCookieByAppId && config.appId) {
+        cookieName = requestCookieName
+          .replace(config.appId, config.clientId)
+          .replace(config.appId.replace(/-/g, ''), config.clientId.replace(/-/g, ''))
+          .replace(config.appId.replace('-', ''), config.clientId.replace('-', ''));
+
+        logger.debug(`cookieName ${requestCookieName} replaced with appId ${cookieName}`);
+      }
+      proxyReq.setHeader(cookieName, allCookies[requestCookieName]);
     });
 
     proxyReq.setHeader('x-frontegg-framework', req.headers['x-frontegg-framework'] ?? `next@${NextJsPkg.version}`);

diff --git a/packages/nextjs/src/pages/withFronteggApp/withFronteggApp.tsx b/packages/nextjs/src/pages/withFronteggApp/withFronteggApp.tsx
@@ -57,7 +57,7 @@ export const withFronteggApp = (app: FronteggCustomAppClass, options?: WithFront
   };
 
   function CustomFronteggApp(appProps: AppProps) {
-    const { user, tenants, activeTenant, session, envAppUrl, envBaseUrl, envClientId, secureJwtEnabled } =
+    const { user, tenants, activeTenant, session, envAppUrl, envBaseUrl, envClientId, secureJwtEnabled, envAppId } =
       appProps.pageProps;
     return (
       <FronteggProvider
@@ -71,6 +71,7 @@ export const withFronteggApp = (app: FronteggCustomAppClass, options?: WithFront
           envBaseUrl,
           secureJwtEnabled,
           envClientId,
+          envAppId,
         }}
       >
         {app(appProps) as any}

diff --git a/packages/nextjs/src/types/index.ts b/packages/nextjs/src/types/index.ts
@@ -70,6 +70,7 @@ export interface FronteggProviderOptions extends Omit<FronteggAppOptions, 'conte
   envAppUrl: string;
   envBaseUrl: string;
   envClientId: string;
+  envAppId?: string;
   secureJwtEnabled?: boolean;
   contextOptions?: Omit<FronteggAppOptions['contextOptions'], 'baseUrl'>;
 }

diff --git a/packages/nextjs/src/utils/cookies/helpers.ts b/packages/nextjs/src/utils/cookies/helpers.ts
@@ -55,8 +55,18 @@ export const getCookieHeader = (request: RequestType): string => {
   return cookieHeader;
 };
 
-export const getRefreshTokenCookieNameVariants = () => [
-  `fe_refresh_${config.clientId}`,
-  `fe_refresh_${config.clientId.replace('-', '')}`,
-  `fe_refresh_${config.clientId.replace(/-/g, '')}`,
-];
+export const getRefreshTokenCookieNameVariants = () => {
+  if (config.rewriteCookieByAppId && config.appId) {
+    return [
+      `fe_refresh_${config.appId}`,
+      `fe_refresh_${config.appId.replace('-', '')}`,
+      `fe_refresh_${config.appId.replace(/-/g, '')}`,
+    ];
+  } else {
+    return [
+      `fe_refresh_${config.clientId}`,
+      `fe_refresh_${config.clientId.replace('-', '')}`,
+      `fe_refresh_${config.clientId.replace(/-/g, '')}`,
+    ];
+  }
+};
diff --git a/packages/nextjs/src/utils/cookies/index.ts b/packages/nextjs/src/utils/cookies/index.ts
@@ -17,7 +17,11 @@ class CookieManager {
     cookieNumber ? getIndexedCookieName(cookieNumber, cookieName) : cookieName;
 
   get refreshTokenKey(): string {
-    return `fe_refresh_${config.clientId}`.replace(/-/g, '');
+    if (config.rewriteCookieByAppId && config.appId) {
+      return `fe_refresh_${config.appId.replace(/-/g, '')}`;
+    } else {
+      return `fe_refresh_${config.clientId.replace(/-/g, '')}`;
+    }
   }
 
   /**
@@ -266,10 +270,20 @@ class CookieManager {
       return (
         cookie
           .map((property) => {
-            if (property.toLowerCase() === `domain=${config.baseUrlHost}`) {
+            if (property.startsWith(`fe_refresh_${config.clientId.replace('-', '')}`)) {
+              if (config.rewriteCookieByAppId && config.appId) {
+                return property.replace(
+                  `fe_refresh_${config.clientId.replace('-', '')}`,
+                  `fe_refresh_${config.appId.replace('-', '')}`
+                );
+              } else {
+                return property;
+              }
+            } else if (property.toLowerCase() === `domain=${config.baseUrlHost}`) {
               return `Domain=${config.cookieDomain}`;
+            } else {
+              return property;
             }
-            return property;
           })
           .join(';') + ';'
       );

diff --git a/packages/nextjs/src/utils/fetchUserData/index.ts b/packages/nextjs/src/utils/fetchUserData/index.ts
@@ -2,6 +2,7 @@ import { AllUserData, FronteggNextJSSession } from '../../types';
 import { getTenants, getMe, getMeAuthorization, getEntitlements } from '../../api';
 import { calculateExpiresInFromExp } from '../common';
 import fronteggLogger from '../fronteggLogger';
+import config from '../../config';
 
 const FULFILLED_STATUS = 'fulfilled';
 
@@ -23,7 +24,11 @@ export default async function fetchUserData(options: FetchUserDataOptions): Prom
 
     const { accessToken } = session;
     const reqHeaders = await getHeaders();
-    const headers = { ...reqHeaders, authorization: `Bearer ${accessToken}` };
+    const headers: Record<string, string> = { ...reqHeaders, authorization: `Bearer ${accessToken}` };
+
+    if (config.appId) {
+      headers['frontegg-requested-application-id'] = config.appId;
+    }
 
     logger.debug('Retrieving user data...');
     const [baseUserResult, tenantsResult, entitlementsResult, meAuthorizationResult] = await Promise.allSettled([