(
(name) => addOrganization(name),
{
@@ -101,7 +101,7 @@ export function OrganizationSelect() {
className={navSelectStyles}
creatable
searchable
- loading={isLoading}
+ loading={isLoading || isOrganizationsLoading || !isOrganizationLoaded}
getCreateLabel={(newOrganization) => + Add "{newOrganization}"
}
value={value}
onCreate={onCreate}
diff --git a/apps/web/src/components/providers/AuthProvider.tsx b/apps/web/src/components/providers/AuthProvider.tsx
index a8b8688f4e5..21908f8cba6 100644
--- a/apps/web/src/components/providers/AuthProvider.tsx
+++ b/apps/web/src/components/providers/AuthProvider.tsx
@@ -1,24 +1,45 @@
-import { Context, useContext } from 'react';
+import { useContext } from 'react';
+import { IOrganizationEntity, IUserEntity, IJwtClaims } from '@novu/shared';
+import jwtDecode from 'jwt-decode';
import { IS_EE_AUTH_ENABLED } from '../../config/index';
-import { IOrganizationEntity, IUserEntity } from '@novu/shared';
-import { CommunityAuthContext, CommunityAuthProvider } from './CommunityAuthProvider';
+import { eeAuthTokenCookie } from '../../utils/cookies';
+import {
+ CommunityAuthContext,
+ CommunityAuthProvider,
+ getToken as getCommunityAuthToken,
+} from './CommunityAuthProvider';
import { EnterpriseAuthContext, EnterpriseAuthProvider } from '../../ee/clerk/providers/EnterpriseAuthProvider';
-export type AuthContextValue = {
- inPublicRoute: boolean;
- inPrivateRoute: boolean;
- isLoading: boolean;
- currentUser?: IUserEntity | null;
- currentOrganization?: IOrganizationEntity | null;
- organizations?: IOrganizationEntity[] | null;
- login: (newToken: string, redirectUrl?: string) => Promise;
- logout: () => void;
- redirectToLogin: (params: { redirectURL?: string }) => void;
- // TODO: Make redirectToSignUp agnostic to business logic and accept { queryParams: { [key: string]: string }}
- redirectToSignUp: (params: { redirectURL?: string; origin?: string; anonymousId?: string }) => void;
- switchOrganization: (organizationId: string) => Promise;
- reloadOrganization: () => Promise;
-};
+type UserState =
+ | {
+ isUserLoaded: true;
+ currentUser: IUserEntity;
+ }
+ | {
+ isUserLoaded: false;
+ currentUser: undefined;
+ };
+
+type OrganizationState =
+ | {
+ isOrganizationLoaded: true;
+ currentOrganization: IOrganizationEntity;
+ }
+ | {
+ isOrganizationLoaded: false;
+ currentOrganization: undefined;
+ };
+
+export type AuthContextValue = UserState &
+ OrganizationState & {
+ login: (newToken: string, redirectUrl?: string) => Promise;
+ logout: () => void;
+ redirectToLogin: (params: { redirectURL?: string }) => void;
+ // TODO: Make redirectToSignUp agnostic to business logic and accept { queryParams: { [key: string]: string }}
+ redirectToSignUp: (params: { redirectURL?: string; origin?: string; anonymousId?: string }) => void;
+ switchOrganization: (organizationId: string) => Promise;
+ reloadOrganization: () => Promise<{}>;
+ };
export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
if (IS_EE_AUTH_ENABLED) {
@@ -39,3 +60,15 @@ export const useAuth = () => {
return value;
};
+
+export function getToken(): string {
+ const token = IS_EE_AUTH_ENABLED ? eeAuthTokenCookie.get() : getCommunityAuthToken();
+
+ return token || '';
+}
+
+export function getTokenClaims(): IJwtClaims | null {
+ const token = getToken();
+
+ return token ? jwtDecode(token) : null;
+}
diff --git a/apps/web/src/components/providers/CommunityAuthProvider.tsx b/apps/web/src/components/providers/CommunityAuthProvider.tsx
index 8a14a2928bc..8310c5ece5b 100644
--- a/apps/web/src/components/providers/CommunityAuthProvider.tsx
+++ b/apps/web/src/components/providers/CommunityAuthProvider.tsx
@@ -1,42 +1,22 @@
import { createContext } from 'react';
import { IOrganizationEntity, IUserEntity } from '@novu/shared';
-import { setUser as sentrySetUser, configureScope as sentryConfigureScope } from '@sentry/react';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { HttpStatusCode } from 'axios';
-import { useLDClient } from 'launchdarkly-react-client-sdk';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
-import { ROUTES, PUBLIC_ROUTES_PREFIXES } from '../../constants/routes';
+import { ROUTES } from '../../constants/routes';
import { useSegment } from './SegmentProvider';
import { clearEnvironmentId } from './EnvironmentProvider';
-import { getToken } from '../../auth/getToken';
-import { getTokenClaims } from '../../auth/getTokenClaims';
import { getUser } from '../../api/user';
-import { switchOrganization as apiSwitchOrganization, getOrganizations } from '../../api/organization';
+import { switchOrganization as apiSwitchOrganization, getOrganization } from '../../api/organization';
+import { DEFAULT_AUTH_CONTEXT_VALUE } from './constants';
import { type AuthContextValue } from './AuthProvider';
+import { useRouteScopes } from '../../hooks/useRouteScopes';
+import { inIframe } from '../../utils/iframe';
-// TODO: Add a novu prefix to the local storage key
-export const LOCAL_STORAGE_AUTH_TOKEN_KEY = 'auth_token';
+export const LEGACY_LOCAL_STORAGE_AUTH_TOKEN_KEY = 'auth_token';
-const noop = () => {};
-const asyncNoop = async () => {};
-
-export const CommunityAuthContext = createContext({
- inPublicRoute: false,
- inPrivateRoute: false,
- isLoading: false,
- currentUser: null,
- currentOrganization: null,
- organizations: [],
- login: asyncNoop,
- logout: noop,
- redirectToLogin: noop,
- redirectToSignUp: noop,
- switchOrganization: asyncNoop,
- reloadOrganization: asyncNoop,
-});
-
-CommunityAuthContext.displayName = 'CommunityAuthProvider';
+export const LOCAL_STORAGE_AUTH_TOKEN_KEY = 'nv_auth_token';
function saveToken(token: string | null) {
if (token) {
@@ -44,45 +24,26 @@ function saveToken(token: string | null) {
} else {
localStorage.removeItem(LOCAL_STORAGE_AUTH_TOKEN_KEY);
}
+ // Clean up legacy token when the next token arrives
+ localStorage.removeItem(LEGACY_LOCAL_STORAGE_AUTH_TOKEN_KEY);
}
-function inIframe() {
- try {
- return window.self !== window.top;
- } catch (e) {
- return true;
- }
+export function getToken() {
+ return (
+ localStorage.getItem(LOCAL_STORAGE_AUTH_TOKEN_KEY) || localStorage.getItem(LEGACY_LOCAL_STORAGE_AUTH_TOKEN_KEY)
+ );
}
-function selectOrganization(organizations: IOrganizationEntity[] | null, selectedOrganizationId?: string) {
- let org: IOrganizationEntity | null = null;
-
- if (!organizations) {
- return null;
- }
-
- if (selectedOrganizationId) {
- org = organizations.find((currOrg) => currOrg._id === selectedOrganizationId) || null;
- }
+export const CommunityAuthContext = createContext(DEFAULT_AUTH_CONTEXT_VALUE);
- // Or pick the development environment
- if (!org) {
- org = organizations[0];
- }
-
- return org;
-}
+CommunityAuthContext.displayName = 'CommunityAuthProvider';
export const CommunityAuthProvider = ({ children }: { children: React.ReactNode }) => {
- const ldClient = useLDClient();
+ const location = useLocation();
const segment = useSegment();
const queryClient = useQueryClient();
const navigate = useNavigate();
- const location = useLocation();
- const inPublicRoute = !!Array.from(PUBLIC_ROUTES_PREFIXES.values()).find((prefix) =>
- location.pathname.startsWith(prefix)
- );
- const inPrivateRoute = !inPublicRoute;
+ const { inPrivateRoute } = useRouteScopes();
const hasToken = !!getToken();
useEffect(() => {
@@ -91,22 +52,26 @@ export const CommunityAuthProvider = ({ children }: { children: React.ReactNode
}
}, [navigate, inPrivateRoute, location]);
- const { data: user = null, isLoading: isUserLoading } = useQuery(['/v1/users/me'], getUser, {
- enabled: hasToken,
- retry: false,
- staleTime: Infinity,
- onError: (error: any) => {
- if (error?.statusCode === HttpStatusCode.Unauthorized) {
- logout();
- }
- },
- });
+ const { data: currentUser, isInitialLoading: isUserInitialLoading } = useQuery(
+ ['/v1/users/me'],
+ getUser,
+ {
+ enabled: hasToken,
+ retry: false,
+ staleTime: Infinity,
+ onError: (error: any) => {
+ if (error?.statusCode === HttpStatusCode.Unauthorized) {
+ logout();
+ }
+ },
+ }
+ );
const {
- data: organizations = null,
- isLoading: isOrganizationLoading,
- refetch: refetchOrganizations,
- } = useQuery(['/v1/organizations'], getOrganizations, {
+ data: currentOrganization,
+ isInitialLoading: isOrganizationInitialLoading,
+ refetch: reloadOrganization,
+ } = useQuery(['/v1/organizations/me'], getOrganization, {
enabled: hasToken,
retry: false,
staleTime: Infinity,
@@ -117,17 +82,6 @@ export const CommunityAuthProvider = ({ children }: { children: React.ReactNode
},
});
- const reloadOrganization = async () => {
- const { data } = await getOrganizations();
- // we need to update all organizations so current org (data) and 'organizations' are not ouf of sync
- await refetchOrganizations();
- setCurrentOrganization(selectOrganization(data, currentOrganization?._id));
- };
-
- const [currentOrganization, setCurrentOrganization] = useState(
- selectOrganization(organizations)
- );
-
const login = useCallback(
async (newToken: string, redirectUrl?: string) => {
if (!newToken) {
@@ -138,24 +92,20 @@ export const CommunityAuthProvider = ({ children }: { children: React.ReactNode
clearEnvironmentId();
saveToken(newToken);
- await refetchOrganizations();
- /*
- * TODO: Revise if this is needed as the following useEffect will switch to the latest org
- * setCurrentOrganization(selectOrganization(organizations, getTokenClaims()?.organizationId));
- */
+ await reloadOrganization();
+
redirectUrl ? navigate(redirectUrl) : void 0;
},
- [navigate, refetchOrganizations]
+ [navigate, reloadOrganization]
);
const logout = useCallback(() => {
saveToken(null);
- queryClient.clear();
- segment.reset();
// TODO: Revise storing environment id in local storage to avoid having to clear it during org or env switching
clearEnvironmentId();
+ queryClient.clear();
+ segment.reset();
navigate(ROUTES.AUTH_LOGIN);
- setCurrentOrganization(null);
}, [navigate, queryClient, segment]);
const redirectTo = useCallback(
@@ -220,59 +170,15 @@ export const CommunityAuthProvider = ({ children }: { children: React.ReactNode
const token = await apiSwitchOrganization(orgId);
await login(token);
- setCurrentOrganization(selectOrganization(organizations, orgId));
+ await reloadOrganization();
},
- [organizations, currentOrganization, setCurrentOrganization, login]
+ [currentOrganization, reloadOrganization, login]
);
- useEffect(() => {
- if (organizations) {
- setCurrentOrganization(selectOrganization(organizations, getTokenClaims()?.organizationId));
- }
- }, [organizations, currentOrganization, switchOrganization]);
-
- useEffect(() => {
- if (user && currentOrganization) {
- segment.identify(user);
-
- sentrySetUser({
- email: user.email ?? '',
- username: `${user.firstName} ${user.lastName}`,
- id: user._id,
- organizationId: currentOrganization._id,
- organizationName: currentOrganization.name,
- });
- } else {
- sentryConfigureScope((scope) => scope.setUser(null));
- }
- }, [user, currentOrganization, segment]);
-
- useEffect(() => {
- if (!ldClient) {
- return;
- }
-
- if (currentOrganization) {
- ldClient.identify({
- kind: 'organization',
- key: currentOrganization._id,
- name: currentOrganization.name,
- createdAt: currentOrganization.createdAt,
- });
- } else {
- ldClient.identify({
- kind: 'user',
- anonymous: true,
- });
- }
- }, [ldClient, currentOrganization]);
-
const value = {
- inPublicRoute,
- inPrivateRoute,
- isLoading: hasToken && (isUserLoading || isOrganizationLoading),
- currentUser: user,
- organizations,
+ isUserLoaded: isUserInitialLoading === false,
+ isOrganizationLoaded: isOrganizationInitialLoading === false,
+ currentUser,
currentOrganization,
login,
logout,
@@ -280,7 +186,13 @@ export const CommunityAuthProvider = ({ children }: { children: React.ReactNode
redirectToSignUp,
switchOrganization,
reloadOrganization,
- };
+ } as AuthContextValue;
+ /*
+ * The previous assestion is necessary as Boolean and true or false discriminating unions
+ * don't work with inference. See here https://github.com/microsoft/TypeScript/issues/19360
+ *
+ * Alternatively, we will have to conditionally generate the value object based on the isLoaded values.
+ */
return {children};
};
diff --git a/apps/web/src/components/providers/EnvironmentProvider.tsx b/apps/web/src/components/providers/EnvironmentProvider.tsx
index 2093f8d421d..f290daf792f 100644
--- a/apps/web/src/components/providers/EnvironmentProvider.tsx
+++ b/apps/web/src/components/providers/EnvironmentProvider.tsx
@@ -1,4 +1,5 @@
import { useCallback, useEffect, useState } from 'react';
+import { flushSync } from 'react-dom';
import { useNavigate } from 'react-router-dom';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { IEnvironment } from '@novu/shared';
@@ -11,7 +12,7 @@ import { useAuth } from './AuthProvider';
export type EnvironmentName = BaseEnvironmentEnum | IEnvironment['name'];
-const LOCAL_STORAGE_LAST_ENVIRONMENT_ID = 'novu_last_environment_id';
+const LOCAL_STORAGE_LAST_ENVIRONMENT_ID = 'nv_last_environment_id';
export function saveEnvironmentId(environmentId: string) {
localStorage.setItem(LOCAL_STORAGE_LAST_ENVIRONMENT_ID, environmentId);
@@ -34,12 +35,13 @@ type EnvironmentContextValue = {
switchEnvironment: (params: Partial<{ environmentId: string; redirectUrl: string }>) => Promise;
switchToDevelopmentEnvironment: (redirectUrl?: string) => Promise;
switchToProductionEnvironment: (redirectUrl?: string) => Promise;
- isLoading: boolean;
+ isLoaded: boolean;
readOnly: boolean;
};
const [EnvironmentCtx, useEnvironmentCtx] = createContextAndHook('Environment Context');
+// TODO: Move this logic to the server and use the environments /me endpoint instead
function selectEnvironment(environments: IEnvironment[] | undefined | null, selectedEnvironmentId?: string) {
let e: IEnvironment | undefined | null = null;
@@ -69,25 +71,33 @@ function selectEnvironment(environments: IEnvironment[] | undefined | null, sele
export function EnvironmentProvider({ children }: { children: React.ReactNode }) {
const navigate = useNavigate();
const queryClient = useQueryClient();
- const { currentOrganization, isLoading: isLoadingAuth } = useAuth();
- const [internalLoading, setInternalLoading] = useState(true);
+ const { currentOrganization } = useAuth();
+
+ // Start with a null environment
+ const [currentEnvironment, setCurrentEnvironment] = useState(null);
+
+ /*
+ * Loading environments depends on the current organization. Fetching should start only when the current
+ * organization is set and it should happens once, on full page reload, until the cache is invalidated on-demand
+ * or a refetch is triggered manually.
+ */
const {
data: environments,
- isLoading: isLoadingEnvironments,
+ isInitialLoading,
refetch: refetchEnvironments,
} = useQuery([QueryKeys.myEnvironments, currentOrganization?._id], getEnvironments, {
enabled: !!currentOrganization,
retry: false,
staleTime: Infinity,
- onSettled: (data, error) => {
- setInternalLoading(false);
+ onSuccess(envs) {
+ /*
+ * This is a required hack to ensure that fetching environments, isLoading = false and currentEnvironment
+ * are all set as part of the same rendering cycle.
+ */
+ flushSync(() => setCurrentEnvironment(selectEnvironment(envs, getEnvironmentId())));
},
});
- const [currentEnvironment, setCurrentEnvironment] = useState(
- selectEnvironment(environments, getEnvironmentId())
- );
-
const switchEnvironment = useCallback(
async ({ environmentId, redirectUrl }: Partial<{ environmentId: string; redirectUrl: string }> = {}) => {
/**
@@ -102,8 +112,6 @@ export function EnvironmentProvider({ children }: { children: React.ReactNode })
/*
* TODO: Replace this revalidation by moving environment ID or name to the URL.
- * This call creates an avalanche of HTTP requests as the more you navigate across the app in a
- * single environment the more invalidations will be triggered on environment switching.
*/
await queryClient.invalidateQueries();
@@ -146,12 +154,6 @@ export function EnvironmentProvider({ children }: { children: React.ReactNode })
[environments, switchEnvironment]
);
- useEffect(() => {
- if (environments) {
- switchEnvironment({ environmentId: getEnvironmentId() });
- }
- }, [currentEnvironment, environments, switchEnvironment]);
-
const reloadEnvironments = async () => {
await refetchEnvironments();
@@ -163,6 +165,16 @@ export function EnvironmentProvider({ children }: { children: React.ReactNode })
selectEnvironment(envs);
};
+ /*
+ * This effect ensures that switching takes place every time environments change. The most common usecase
+ * is switching to a new organization
+ */
+ useEffect(() => {
+ if (environments) {
+ switchEnvironment({ environmentId: getEnvironmentId() });
+ }
+ }, [currentEnvironment, environments, switchEnvironment]);
+
const value = {
currentEnvironment,
environment: currentEnvironment,
@@ -171,7 +183,7 @@ export function EnvironmentProvider({ children }: { children: React.ReactNode })
switchEnvironment,
switchToDevelopmentEnvironment,
switchToProductionEnvironment,
- isLoading: isLoadingEnvironments || isLoadingAuth || internalLoading,
+ isLoaded: !isInitialLoading,
readOnly: currentEnvironment?._parentId !== undefined,
};
diff --git a/apps/web/src/components/providers/constants.ts b/apps/web/src/components/providers/constants.ts
new file mode 100644
index 00000000000..45f3ba4efec
--- /dev/null
+++ b/apps/web/src/components/providers/constants.ts
@@ -0,0 +1,17 @@
+import { type AuthContextValue } from './AuthProvider';
+
+const noop = () => {};
+const asyncNoop = async () => {};
+
+export const DEFAULT_AUTH_CONTEXT_VALUE: AuthContextValue = {
+ isUserLoaded: false,
+ isOrganizationLoaded: false,
+ currentUser: undefined,
+ currentOrganization: undefined,
+ login: asyncNoop,
+ logout: noop,
+ redirectToLogin: noop,
+ redirectToSignUp: noop,
+ switchOrganization: asyncNoop,
+ reloadOrganization: async () => ({}),
+};
diff --git a/apps/web/src/ee/billing/components/PlanHeader.tsx b/apps/web/src/ee/billing/components/PlanHeader.tsx
index b678b552f84..d06d0c4a0dc 100644
--- a/apps/web/src/ee/billing/components/PlanHeader.tsx
+++ b/apps/web/src/ee/billing/components/PlanHeader.tsx
@@ -22,7 +22,7 @@ const columnStyle = {
export const PlanHeader = () => {
const segment = useSegment();
- const { currentOrganization } = useAuth();
+ const { currentOrganization, isOrganizationLoaded } = useAuth();
const { hasPaymentMethod } = useSubscriptionContext();
const { colorScheme } = useMantineTheme();
const isDark = colorScheme === 'dark';
@@ -31,12 +31,14 @@ export const PlanHeader = () => {
const [isContactSalesModalOpen, setIsContactSalesModalOpen] = useState(false);
const [intendedApiServiceLevel, setIntendedApiServiceLevel] = useState(null);
const [apiServiceLevel, setApiServiceLevel] = useState(
- currentOrganization?.apiServiceLevel || ApiServiceLevelEnum.FREE
+ isOrganizationLoaded ? currentOrganization.apiServiceLevel : ApiServiceLevelEnum.FREE
);
const [billingInterval, setBillingInterval] = useState<'month' | 'year'>('month');
useEffect(() => {
- setApiServiceLevel(currentOrganization?.apiServiceLevel || ApiServiceLevelEnum.FREE);
- }, [currentOrganization]);
+ if (isOrganizationLoaded) {
+ setApiServiceLevel(currentOrganization.apiServiceLevel || ApiServiceLevelEnum.FREE);
+ }
+ }, [currentOrganization, isOrganizationLoaded]);
const { mutateAsync: checkout, isLoading: isCheckingOut } = useMutation<
any,
diff --git a/apps/web/src/ee/clerk/providers/EnterpriseAuthProvider.tsx b/apps/web/src/ee/clerk/providers/EnterpriseAuthProvider.tsx
index e3b8dd0afd4..d07218750e2 100644
--- a/apps/web/src/ee/clerk/providers/EnterpriseAuthProvider.tsx
+++ b/apps/web/src/ee/clerk/providers/EnterpriseAuthProvider.tsx
@@ -1,58 +1,31 @@
-import { createContext, useCallback, useEffect, useMemo, useState } from 'react';
+import { createContext, useCallback, useEffect, useState, useMemo } from 'react';
+import { DEFAULT_AUTH_CONTEXT_VALUE } from '../../../components/providers/constants';
import { type AuthContextValue } from '../../../components/providers/AuthProvider';
import type { IOrganizationEntity, IUserEntity } from '@novu/shared';
import { useAuth, useUser, useOrganization, useOrganizationList } from '@clerk/clerk-react';
import { OrganizationResource, UserResource } from '@clerk/types';
-import { useLDClient } from 'launchdarkly-react-client-sdk';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
import { useQueryClient } from '@tanstack/react-query';
-import { setUser as setSentryUser, configureScope } from '@sentry/react';
import { useSegment } from '../../../components/providers/SegmentProvider';
-import { PUBLIC_ROUTES_PREFIXES, ROUTES } from '../../../constants/routes';
+import { ROUTES } from '../../../constants/routes';
-const noop = () => {};
const asyncNoop = async () => {};
// TODO: Replace with createContextAndHook
-export const EnterpriseAuthContext = createContext({
- inPublicRoute: false,
- inPrivateRoute: false,
- isLoading: false,
- currentUser: null,
- organizations: [],
- currentOrganization: null,
- login: asyncNoop,
- logout: noop,
- redirectToLogin: noop,
- redirectToSignUp: noop,
- switchOrganization: asyncNoop,
- reloadOrganization: () => Promise.resolve(),
-});
+export const EnterpriseAuthContext = createContext(DEFAULT_AUTH_CONTEXT_VALUE);
EnterpriseAuthContext.displayName = 'EnterpriseAuthProvider';
export const EnterpriseAuthProvider = ({ children }: { children: React.ReactNode }) => {
const { signOut, orgId } = useAuth();
const { user: clerkUser, isLoaded: isUserLoaded } = useUser();
const { organization: clerkOrganization, isLoaded: isOrganizationLoaded } = useOrganization();
- const {
- setActive,
- isLoaded: isOrgListLoaded,
- userMemberships,
- } = useOrganizationList({ userMemberships: { infinite: true } });
-
- const [user, setUser] = useState(undefined);
- const [organization, setOrganization] = useState(undefined);
+ // TODO @ChmaraX: Can we use setActive from useSession, useSignIn, or useSignUp to avoid loading the list?
+ const { setActive, isLoaded: isOrgListLoaded } = useOrganizationList({ userMemberships: { infinite: true } });
- const ldClient = useLDClient();
const segment = useSegment();
const queryClient = useQueryClient();
const navigate = useNavigate();
- const location = useLocation();
-
- const inPublicRoute =
- !!Array.from(PUBLIC_ROUTES_PREFIXES.values()).find((prefix) => location.pathname.startsWith(prefix)) || false;
- const inPrivateRoute = !inPublicRoute;
const logout = useCallback(() => {
queryClient.clear();
@@ -61,6 +34,7 @@ export const EnterpriseAuthProvider = ({ children }: { children: React.ReactNode
signOut();
}, [navigate, queryClient, segment, signOut]);
+ // TODO @ChmaraX: Enhance Clerk redirect methods with our own logic
const redirectTo = useCallback(
({
url,
@@ -108,19 +82,12 @@ export const EnterpriseAuthProvider = ({ children }: { children: React.ReactNode
await queryClient.refetchQueries();
}, [queryClient]);
- const organizations = useMemo(() => {
- if (userMemberships && userMemberships.data) {
- return userMemberships.data.map((membership) => toOrganizationEntity(membership.organization));
- }
-
- return [];
- }, [userMemberships]);
-
const reloadOrganization = useCallback(async () => {
if (clerkOrganization) {
await clerkOrganization.reload();
- setOrganization(toOrganizationEntity(clerkOrganization));
}
+
+ return {};
}, [clerkOrganization]);
// check if user has active organization
@@ -141,81 +108,41 @@ export const EnterpriseAuthProvider = ({ children }: { children: React.ReactNode
}
}, [navigate, setActive, isOrgListLoaded, clerkUser, orgId]);
- // transform Clerk user to internal user entity
- useEffect(() => {
- if (isUserLoaded && clerkUser) {
- setUser(toUserEntity(clerkUser));
- }
- }, [clerkUser, isUserLoaded]);
-
- // transform Clerk organization to internal organization entity
- useEffect(() => {
- if (isOrganizationLoaded && clerkOrganization) {
- setOrganization(toOrganizationEntity(clerkOrganization));
- }
- }, [clerkOrganization, isOrganizationLoaded]);
+ const currentUser = useMemo(() => (clerkUser ? toUserEntity(clerkUser) : undefined), [clerkUser]);
+ const currentOrganization = useMemo(
+ () => (clerkOrganization ? toOrganizationEntity(clerkOrganization) : undefined),
+ [clerkOrganization]
+ );
// refetch queries on organization switch
useEffect(() => {
// if linked, externalOrgId = internal org ObjectID, which is required on backend
const isInternalOrgLinked = !!clerkOrganization?.publicMetadata.externalOrgId;
- const isOrgChanged = organization && organization._id !== clerkOrganization?.id;
+ const isOrgChanged = currentOrganization && currentOrganization._id !== clerkOrganization?.id;
if (isInternalOrgLinked && isOrgChanged) {
switchOrgCallback();
}
- }, [organization, clerkOrganization, switchOrgCallback]);
-
- // sentry tracking
- useEffect(() => {
- if (user && organization) {
- segment.identify(user);
-
- setSentryUser({
- email: user.email ?? '',
- username: `${user.firstName} ${user.lastName}`,
- id: user._id,
- organizationId: organization._id,
- organizationName: organization.name,
- });
- } else {
- configureScope((scope) => scope.setUser(null));
- }
- }, [user, organization, segment]);
-
- // launch darkly
- useEffect(() => {
- if (!ldClient) return;
-
- if (organization) {
- ldClient.identify({
- kind: 'organization',
- key: organization._id,
- name: organization.name,
- });
- } else {
- ldClient.identify({
- kind: 'user',
- anonymous: true,
- });
- }
- }, [ldClient, organization]);
+ }, [currentOrganization, clerkOrganization, switchOrgCallback]);
const value = {
- inPublicRoute,
- inPrivateRoute,
- isLoading: inPrivateRoute && (!isUserLoaded || !isOrganizationLoaded),
- currentUser: user,
- // TODO: (to decide) either remove/rework places where "organizations" is used or fetch from Clerk
- organizations,
- currentOrganization: organization,
+ isUserLoaded,
+ isOrganizationLoaded,
+ currentUser,
+ currentOrganization,
logout,
login: asyncNoop,
redirectToLogin,
redirectToSignUp,
switchOrganization: asyncNoop,
reloadOrganization,
- };
+ } as AuthContextValue;
+ /*
+ * The previous assestion is necessary as Boolean and true or false discriminating unions
+ * don't work with inference. See here https://github.com/microsoft/TypeScript/issues/19360
+ *
+ * Alternatively, we will have to conditionally generate the value object based on the isLoaded values.
+ */
return {children};
};
diff --git a/apps/web/src/hooks/index.ts b/apps/web/src/hooks/index.ts
index faa2e294023..770d177bcd5 100644
--- a/apps/web/src/hooks/index.ts
+++ b/apps/web/src/hooks/index.ts
@@ -17,18 +17,20 @@ export * from './useHoverOverItem';
export * from './useInlineComponent';
export * from './useIsDarkTheme';
export * from './useIsMounted';
+export * from './useIsSynced';
export * from './useKeyDown';
export * from './useLayouts';
export * from './useLayoutsEditor';
+export * from './useMonitoring';
export * from './useNotificationGroup';
export * from './useNovu';
export * from './useProcessVariables';
export * from './usePrompt';
export * from './useRedirectURL';
+export * from './useRouteScopes';
export * from './useSubscribers';
export * from './useTemplates';
export * from './useThemeChange';
export * from './useVariablesManager';
export * from './useVercelIntegration';
export * from './useVercelParams';
-export * from './useIsSynced';
diff --git a/apps/web/src/hooks/useAuth.tsx b/apps/web/src/hooks/useAuth.ts
similarity index 100%
rename from apps/web/src/hooks/useAuth.tsx
rename to apps/web/src/hooks/useAuth.ts
diff --git a/apps/web/src/hooks/useMonitoring.ts b/apps/web/src/hooks/useMonitoring.ts
new file mode 100644
index 00000000000..b140cfded28
--- /dev/null
+++ b/apps/web/src/hooks/useMonitoring.ts
@@ -0,0 +1,47 @@
+import { useEffect } from 'react';
+import { useLDClient } from 'launchdarkly-react-client-sdk';
+import { setUser as sentrySetUser, configureScope as sentryConfigureScope } from '@sentry/react';
+import { useSegment } from '../components/providers/SegmentProvider';
+import { useAuth } from './useAuth';
+
+export function useMonitoring() {
+ const { currentUser, currentOrganization } = useAuth();
+ const ldClient = useLDClient();
+ const segment = useSegment();
+
+ useEffect(() => {
+ if (currentUser && currentOrganization) {
+ segment.identify(currentUser);
+
+ sentrySetUser({
+ email: currentUser.email ?? '',
+ username: `${currentUser.firstName} ${currentUser.lastName}`,
+ id: currentUser._id,
+ organizationId: currentOrganization._id,
+ organizationName: currentOrganization.name,
+ });
+ } else {
+ sentryConfigureScope((scope) => scope.setUser(null));
+ }
+ }, [currentUser, currentOrganization, segment]);
+
+ useEffect(() => {
+ if (!ldClient) {
+ return;
+ }
+
+ if (currentOrganization) {
+ ldClient.identify({
+ kind: 'organization',
+ key: currentOrganization._id,
+ name: currentOrganization.name,
+ createdAt: currentOrganization.createdAt,
+ });
+ } else {
+ ldClient.identify({
+ kind: 'user',
+ anonymous: true,
+ });
+ }
+ }, [ldClient, currentOrganization]);
+}
diff --git a/apps/web/src/hooks/useNovuAPI.ts b/apps/web/src/hooks/useNovuAPI.ts
index dd0f73dc789..ad3b52f1c2f 100644
--- a/apps/web/src/hooks/useNovuAPI.ts
+++ b/apps/web/src/hooks/useNovuAPI.ts
@@ -4,7 +4,7 @@ import { buildApiHttpClient } from '../api/api.client';
// eslint-disable-next-line import/no-namespace
import * as mixpanel from 'mixpanel-browser';
import { useStudioState } from '../studio/StudioStateProvider';
-import { getToken } from '../auth/getToken';
+import { getToken } from '../components/providers/AuthProvider';
function useNovuAPI() {
const { devSecretKey } = useStudioState();
diff --git a/apps/web/src/hooks/useOrganizations.ts b/apps/web/src/hooks/useOrganizations.ts
new file mode 100644
index 00000000000..c205acae139
--- /dev/null
+++ b/apps/web/src/hooks/useOrganizations.ts
@@ -0,0 +1,7 @@
+import { useQuery } from '@tanstack/react-query';
+import { IOrganizationEntity } from '@novu/shared';
+import { getOrganizations } from '../api/organization';
+
+export function useOrganizations() {
+ return useQuery(['/v1/organizations'], getOrganizations);
+}
diff --git a/apps/web/src/hooks/useRouteScopes.ts b/apps/web/src/hooks/useRouteScopes.ts
new file mode 100644
index 00000000000..a44aa4b47a3
--- /dev/null
+++ b/apps/web/src/hooks/useRouteScopes.ts
@@ -0,0 +1,19 @@
+import { useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+import { PUBLIC_ROUTES_PREFIXES } from '../constants/routes';
+
+export function useRouteScopes() {
+ const location = useLocation();
+ const inPublicRoute = useMemo(
+ () => !!Array.from(PUBLIC_ROUTES_PREFIXES.values()).find((prefix) => location.pathname.startsWith(prefix)),
+ [location]
+ );
+ const inPrivateRoute = !inPublicRoute;
+ const inStudioRoute = useMemo(() => location.pathname.startsWith('/studio'), [location]);
+
+ return {
+ inPublicRoute,
+ inPrivateRoute,
+ inStudioRoute,
+ };
+}
diff --git a/apps/web/src/hooks/useTenants.ts b/apps/web/src/hooks/useTenants.ts
index 318e5f31f95..fe67a418d04 100644
--- a/apps/web/src/hooks/useTenants.ts
+++ b/apps/web/src/hooks/useTenants.ts
@@ -18,7 +18,6 @@ export function useTenants({
const { environment } = useEnvironment();
const { data, isLoading, ...rest } = useQuery, any>(
[QueryKeys.tenantsList, environment?._id, page, limit],
-
() => getTenants({ page, limit }),
{
refetchOnMount: false,
diff --git a/apps/web/src/pages/auth/onboarding/Onboarding.tsx b/apps/web/src/pages/auth/onboarding/Onboarding.tsx
index b38ea82b189..b0baf900177 100644
--- a/apps/web/src/pages/auth/onboarding/Onboarding.tsx
+++ b/apps/web/src/pages/auth/onboarding/Onboarding.tsx
@@ -1,9 +1,8 @@
import { useColorScheme } from '@novu/design-system';
import { css } from '@novu/novui/css';
-import { IconClose, IconCloseFullscreen } from '@novu/novui/icons';
-import { HStack, LinkOverlay } from '@novu/novui/jsx';
+import { IconClose } from '@novu/novui/icons';
+import { HStack } from '@novu/novui/jsx';
import { Link } from 'react-router-dom';
-import { EnsureOnboardingComplete } from '../../../components/layout/components/EnsureOnboardingComplete';
import { COMPANY_LOGO_TEXT_PATH, COMPANY_LOGO_TEXT_PATH_DARK_TEXT } from '../../../constants/assets';
import { ROUTES } from '../../../constants/routes';
import { useTelemetry } from '../../../hooks/useNovuAPI';
@@ -14,42 +13,40 @@ export function OnboardingPage() {
const { colorScheme } = useColorScheme();
return (
-
-
+
-
+ 
+
-
-