Merge branch 'next' into v2-layouts-cont

apps/web/netlify.toml

@@ -15,7 +15,6 @@
 [[headers]]
   for = "/*"
   [headers.values]
-    X-Frame-Options = "DENY"
     X-XSS-Protection = "1; mode=block"
     Referrer-Policy = "no-referrer"
     X-Content-Type-Options = "nosniff"

apps/web/package.json

@@ -88,6 +88,7 @@
     "handlebars": "^4.7.7",
     "highlight.js": "11.9.0",
     "html-webpack-plugin": "5.5.3",
+    "js-cookie": "^3.0.5",
     "jwt-decode": "^3.1.2",
     "launchdarkly-react-client-sdk": "^3.3.2",
     "less": "^4.1.0",
@@ -156,6 +157,7 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/testing-library__jest-dom": "^5.14.5",
+    "@types/js-cookie": "^3.0.6",
     "eslint-plugin-storybook": "^0.6.13",
     "http-server": "^0.13.0",
     "less-loader": "4.1.0",

apps/web/src/AppRoutes.tsx

@@ -64,6 +64,7 @@ import { useSegment } from './components/providers/SegmentProvider';
 import * as mixpanel from 'mixpanel-browser';
 import { useEffect } from 'react';
 import { GetStartedPageV2 } from './studio/components/GetStartedPageV2';
+import { novuOnboardedCookie } from './utils/cookies';
 
 export const AppRoutes = () => {
   const isImprovedOnboardingEnabled = useFeatureFlag(FeatureFlagsKeysEnum.IS_IMPROVED_ONBOARDING_ENABLED);
@@ -171,7 +172,10 @@ export const AppRoutes = () => {
       <Route path={ROUTES.LOCAL_STUDIO_AUTH} element={<LocalStudioAuthenticator />} />
 
       <Route path={ROUTES.STUDIO} element={<StudioPageLayout />}>
-        <Route path="" element={<Navigate to={ROUTES.STUDIO_FLOWS} replace />} />
+        <Route
+          path=""
+          element={<Navigate to={novuOnboardedCookie.get() ? ROUTES.STUDIO_FLOWS : ROUTES.STUDIO_ONBOARDING} replace />}
+        />
         <Route path={ROUTES.STUDIO_FLOWS} element={<WorkflowsListPage />} />
         <Route path={ROUTES.STUDIO_FLOWS_VIEW} element={<WorkflowsDetailPage />} />
         <Route path={ROUTES.STUDIO_FLOWS_STEP_EDITOR} element={<WorkflowsStepEditorPage />} />

apps/web/src/components/layout/components/EnsureOnboardingComplete.tsx

@@ -1,16 +1,25 @@
 import { Navigate, useLocation } from 'react-router-dom';
 import { useAuth } from '../../../hooks/useAuth';
 import { ROUTES } from '../../../constants/routes';
-import { useBlueprint } from '../../../hooks/index';
+import { useBlueprint, useRedirectURL } from '../../../hooks';
 
 export function EnsureOnboardingComplete({ children }: any) {
   useBlueprint();
   const location = useLocation();
+  const { getRedirectURL } = useRedirectURL();
   const { currentOrganization, environmentId } = useAuth();
 
   if ((!currentOrganization || !environmentId) && location.pathname !== ROUTES.AUTH_APPLICATION) {
     return <Navigate to={ROUTES.AUTH_APPLICATION} replace />;
   }
 
+  const redirectURL = getRedirectURL();
+  if (redirectURL) {
+    // Note: Do not use react-router-dom. The version we have doesn't do instant cross origin redirects.
+    window.location.replace(redirectURL);
+
+    return null;
+  }
+
   return children;
 }

apps/web/src/components/layout/components/v2/BridgeUpdateModal.tsx

@@ -3,7 +3,7 @@ import { css } from '@novu/novui/css';
 import { Button, Input, Title, Text } from '@novu/novui';
 import { IconOutlineMenuBook } from '@novu/novui/icons';
 import { HStack, Box } from '@novu/novui/jsx';
-import { FC, useMemo, useState } from 'react';
+import { FC, useState } from 'react';
 import { validateBridgeUrl } from '../../../../api/bridge';
 import { updateBridgeUrl } from '../../../../api/environment';
 import { useEnvironment } from '../../../../hooks/useEnvironment';

apps/web/src/components/layout/components/v2/SyncInfoModal.tsx

@@ -30,7 +30,7 @@ export const SyncInfoModal: FC<SyncInfoModalProps> = ({ isOpen, toggleOpen }) =>
     },
     {
       value: 'other',
-      label: 'Other CI',
+      label: 'CLI',
       content: (
         <Prism withLineNumbers language="bash">
           {getOtherCodeContent({ apiKey, bridgeUrl })}

apps/web/src/hooks/index.ts

@@ -23,6 +23,7 @@ export * from './useNotificationGroup';
 export * from './useNovu';
 export * from './useProcessVariables';
 export * from './usePrompt';
+export * from './useRedirectURL';
 export * from './useSubscribers';
 export * from './useTemplates';
 export * from './useThemeChange';

apps/web/src/hooks/useAuth.ts

@@ -44,6 +44,14 @@ export function getTokenClaims(): IJwtClaims | null {
   return token ? jwtDecode<IJwtClaims>(token) : null;
 }
 
+function inIframe() {
+  try {
+    return window.self !== window.top;
+  } catch (e) {
+    return true;
+  }
+}
+
 export function useAuth() {
   const ldClient = useLDClient();
   const segment = useSegment();
@@ -57,7 +65,7 @@ export function useAuth() {
   const hasToken = !!getToken();
 
   useEffect(() => {
-    if (!getToken() && inPrivateRoute) {
+    if (!getToken() && inPrivateRoute && !inIframe()) {
       navigate(ROUTES.AUTH_LOGIN, { state: { redirectTo: location } });
     }
   }, [navigate, inPrivateRoute, location]);
@@ -107,9 +115,25 @@ export function useAuth() {
     navigate(ROUTES.AUTH_LOGIN);
   }, [navigate, queryClient, segment]);
 
+  const redirectTo = useCallback(({ url, redirectURL }: { url: string; redirectURL?: string }) => {
+    const finalURL = new URL(url, window.location.origin);
+
+    if (redirectURL) {
+      finalURL.searchParams.append('redirect_url', redirectURL);
+    }
+
+    // Note: Do not use react-router-dom. The version we have doesn't do instant cross origin redirects.
+    window.location.replace(finalURL.href);
+  }, []);
+
   const redirectToLogin = useCallback(
-    (redirectUrl?: string) => navigate(`${ROUTES.AUTH_LOGIN}?redirect_url=${redirectUrl}`),
-    [navigate]
+    ({ redirectURL }: { redirectURL?: string } = {}) => redirectTo({ url: ROUTES.AUTH_LOGIN, redirectURL }),
+    [redirectTo]
+  );
+
+  const redirectToSignUp = useCallback(
+    ({ redirectURL }: { redirectURL?: string } = {}) => redirectTo({ url: ROUTES.AUTH_SIGNUP, redirectURL }),
+    [redirectTo]
   );
 
   const { organizationId, environmentId } = getTokenClaims() || {};
@@ -161,9 +185,7 @@ export function useAuth() {
   return {
     inPublicRoute,
     inPrivateRoute,
-    isUserLoading,
-    isOrganizationLoading,
-    isLoading: inPrivateRoute && (isUserLoading || isOrganizationLoading),
+    isLoading: hasToken && (isUserLoading || isOrganizationLoading),
     currentUser: user,
     organizations,
     currentOrganization,
@@ -172,5 +194,6 @@ export function useAuth() {
     environmentId,
     organizationId,
     redirectToLogin,
+    redirectToSignUp,
   };
 }

apps/web/src/hooks/useRedirectURL.ts

@@ -0,0 +1,48 @@
+import { useCallback } from 'react';
+import { createCookieHandler } from '../utils/cookies';
+import { assertProtocol } from '../utils/url';
+
+const novuRedirectURLCookie = createCookieHandler('nv_redirect_url');
+
+const REDIRECT_URL_SEARCH_PARAM = 'redirect_url';
+
+const REDIRECT_COOKIE_EXPIRY_DAYS = 7;
+
+export function useRedirectURL() {
+  const setRedirectURL = useCallback(() => {
+    const redirectURLFromParams = new URL(window.location.href).searchParams.get(REDIRECT_URL_SEARCH_PARAM) || '';
+
+    // If there is a redirect URL in the URL, set it in the cookie.
+    if (redirectURLFromParams) {
+      // Protect against XSS attacks via the javascript: pseudo protocol.
+      assertProtocol(redirectURLFromParams);
+      // Expires in 7 days.
+      novuRedirectURLCookie.set(redirectURLFromParams, { expires: REDIRECT_COOKIE_EXPIRY_DAYS });
+
+      // Clean the URL so that the redirect URL doesn't get used again.
+      const url = new URL(window.location.href);
+      url.searchParams.delete(REDIRECT_URL_SEARCH_PARAM);
+      history.replaceState({}, '', url.href);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const getRedirectURL = useCallback(() => {
+    const redirectURLFromCookie = novuRedirectURLCookie.get();
+
+    // If there is a cookie in the URL, redirect to that URL. Otherwise, its a noop.
+    if (redirectURLFromCookie) {
+      // Clean the cookie first, so that it doesn't get used again.
+      novuRedirectURLCookie.remove();
+
+      return redirectURLFromCookie;
+    }
+
+    return '';
+  }, []);
+
+  return {
+    setRedirectURL,
+    getRedirectURL,
+  };
+}

apps/web/src/pages/auth/components/LoginForm.tsx

@@ -5,9 +5,8 @@ import { useForm } from 'react-hook-form';
 import * as Sentry from '@sentry/react';
 import { Center } from '@mantine/core';
 import { PasswordInput, Button, colors, Input, Text } from '@novu/design-system';
-import { useAuth } from '../../../hooks/useAuth';
 import type { IResponseError } from '@novu/shared';
-import { useVercelIntegration, useVercelParams } from '../../../hooks';
+import { useAuth, useRedirectURL, useVercelIntegration, useVercelParams } from '../../../hooks';
 import { useSegment } from '../../../components/providers/SegmentProvider';
 import { api } from '../../../api/api.client';
 import { useAcceptInvite } from './useAcceptInvite';
@@ -28,6 +27,11 @@ export interface LocationState {
 
 export function LoginForm({ email, invitationToken }: LoginFormProps) {
   const segment = useSegment();
+
+  const { setRedirectURL } = useRedirectURL();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => setRedirectURL(), []);
+
   const { login, currentUser, organizations } = useAuth();
   const { startVercelSetup } = useVercelIntegration();
   const { isFromVercel, params: vercelParams } = useVercelParams();
@@ -38,8 +42,6 @@ export function LoginForm({ email, invitationToken }: LoginFormProps) {
   // TODO: Deprecate the legacy cameCased format in search param
   const invitationTokenFromGithub = params.get('invitationToken') || params.get('invitation_token') || '';
   const isRedirectedFromLoginPage = params.get('isLoginPage') || params.get('is_login_page') || '';
-  // TODO: Use redirectUrl if available and redirect post login to the URL. This should be used during the Local studio authentication flow
-  const redirectUrl = params.get('redirect_url') || '';
 
   const { isLoading: isLoadingAcceptInvite, acceptInvite } = useAcceptInvite();
   const navigate = useNavigate();

apps/web/src/pages/auth/components/SignUpForm.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { useMutation } from '@tanstack/react-query';
 import { useForm } from 'react-hook-form';
@@ -9,7 +9,7 @@ import { PasswordInput, Button, colors, Input, Text, Checkbox } from '@novu/desi
 
 import { useAuth } from '../../../hooks/useAuth';
 import { api } from '../../../api/api.client';
-import { useVercelParams } from '../../../hooks';
+import { useRedirectURL, useVercelParams } from '../../../hooks';
 import { useAcceptInvite } from './useAcceptInvite';
 import { PasswordRequirementPopover } from './PasswordRequirementPopover';
 import { ROUTES } from '../../../constants/routes';
@@ -28,6 +28,9 @@ export type SignUpFormInputType = {
 
 export function SignUpForm({ invitationToken, email }: SignUpFormProps) {
   const navigate = useNavigate();
+  const { setRedirectURL } = useRedirectURL();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => setRedirectURL(), []);
 
   const { login } = useAuth();
   const { isLoading: isAcceptInviteLoading, acceptInvite } = useAcceptInvite();

apps/web/src/pages/studio-onboarding/components/Header.tsx

@@ -74,8 +74,8 @@ export const Header = ({ activeStepIndex = 0 }: { activeStepIndex?: number }) =>
             active={activeStepIndex}
           >
             <Stepper.Step label="Add the endpoint"></Stepper.Step>
-            <Stepper.Step label="Create workflow"></Stepper.Step>
-            <Stepper.Step label="Test workflow"></Stepper.Step>
+            <Stepper.Step label="Test the workflow"></Stepper.Step>
+            <Stepper.Step label="Check your Inbox"></Stepper.Step>
           </Stepper>
         </div>
       </VStack>

apps/web/src/pages/studio-onboarding/components/SetupTimeline.tsx

@@ -77,11 +77,11 @@ export const SetupTimeline = ({ testResponse }: { testResponse: { isLoading: boo
       <MantineTimeline.Item
         bullet={<CheckStatusIcon />}
         lineVariant="dashed"
-        title="Connect to the endpoint"
+        title="Connect to the Novu Bridge Endpoint"
         active={active >= 3}
       >
         <Text variant="main" color="typography.text.secondary">
-          {active < 3 ? 'Waiting for you to start the application' : 'Succefully connected to the Novu Endpoint'}
+          {active < 3 ? 'Waiting for you to start the application' : 'Succefully connected to the Novu Bridge Endpoint'}
         </Text>
       </MantineTimeline.Item>
     </Timeline>

apps/web/src/pages/studio-onboarding/index.tsx

@@ -11,17 +11,22 @@ import { ROUTES } from '../../constants/routes';
 import { useNavigate } from 'react-router-dom';
 import { useHealthCheck } from '../../studio/hooks/useBridgeAPI';
 import { BridgeStatus } from '../../bridgeApi/bridgeApi.client';
+import { useStudioState } from '../../studio/StudioStateProvider';
+import { capitalizeFirstLetter } from '../../utils/string';
 
 export const StudioOnboarding = () => {
   const segment = useSegment();
   const navigate = useNavigate();
+  const { testUser } = useStudioState();
   const { data, isLoading } = useHealthCheck();
 
   useEffect(() => {
     segment.track('Add endpoint step started - [Onboarding - Signup]');
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const welcomeMessage = `Welcome ${capitalizeFirstLetter(testUser?.firstName || '')}`.trim() + `. Let's get started!`;
+
   return (
     <Wrapper>
       <Header />
@@ -31,7 +36,7 @@ export const StudioOnboarding = () => {
             width: 'onboarding',
           })}
         >
-          <Title variant="page">Create an Novu endpoint</Title>
+          <Title variant="page">{welcomeMessage}</Title>
           <Text
             variant="main"
             color="typography.text.secondary"
@@ -40,8 +45,8 @@ export const StudioOnboarding = () => {
               marginTop: '50',
             })}
           >
-            To start sending your first workflows, you first need to connect Novu to your Bridge Endpoint. This setup
-            will create a sample Next.js project and pre-configured the @novu/framework client for you.
+            Send your first email notification, by connecting to your Novu Bridge Endpoint. This setup will create a
+            sample Next.js project with a pre-configured <code>@novu/framework</code>.
           </Text>
           <SetupTimeline testResponse={{ data: data as BridgeStatus, isLoading }} />
         </div>

apps/web/src/pages/studio-onboarding/preview.tsx

@@ -64,7 +64,7 @@ export const StudioOnboardingPreview = () => {
     navigate({
       pathname: ROUTES.STUDIO_ONBOARDING_SUCCESS,
       search: createSearchParams({
-        transactionId: response.transactionId,
+        transactionId: response.data.transactionId,
       }).toString(),
     });
   };

apps/web/src/pages/studio-onboarding/success.tsx

@@ -14,6 +14,9 @@ import { ROUTES } from '../../constants/routes';
 import { Footer } from './components/Footer';
 import { Header } from './components/Header';
 import { Wrapper } from './components/Wrapper';
+import { novuOnboardedCookie } from '../../utils/cookies';
+
+const ONBOARDING_COOKIE_EXPIRY_DAYS = 10 * 365;
 
 export const StudioOnboardingSuccess = () => {
   const [searchParams] = useSearchParams();
@@ -65,6 +68,14 @@ export const StudioOnboardingSuccess = () => {
 
   useEffect(() => {
     segment.track('Test workflow step completed - [Onboarding - Signup]');
+
+    // Never expires! Well it does, in 10 years but you will change device or browser by then :)
+    novuOnboardedCookie.set('1', {
+      expires: ONBOARDING_COOKIE_EXPIRY_DAYS,
+      sameSite: 'none',
+      secure: window.location.protocol === 'https',
+    });
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);