fix: email verification failing issue

supertokens · Oct 5, 2023 · ad4c252 · ad4c252
1 parent 5f1f414
commit ad4c252
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 27 deletions.
diff --git a/src/api/user/email/verify/index.ts b/src/api/user/email/verify/index.ts
@@ -17,7 +17,7 @@ const useVerifyUserEmail = (): IUseVerifyUserEmailService => {
 		const response = await fetchData({
 			url: getApiUrl("/api/user/email/verify"),
 			method: "GET",
-			query: { userId },
+			query: { recipeUserId: userId },
 		});
 
 		const body = await response.json();

diff --git a/src/ui/components/userDetail/loginMethods/LoginMethods.tsx b/src/ui/components/userDetail/loginMethods/LoginMethods.tsx
@@ -132,6 +132,7 @@ type MethodProps = {
 	updateContext: (val: LoginMethod, ind: number) => void;
 	index: number;
 	showUnlink: boolean;
+	isVerifyEmailFeatureEnabled: boolean;
 };
 
 const Methods: React.FC<MethodProps> = ({
@@ -144,6 +145,7 @@ const Methods: React.FC<MethodProps> = ({
 	updateContext,
 	index,
 	showUnlink,
+	isVerifyEmailFeatureEnabled,
 }) => {
 	const { sendUserEmailVerification: sendUserEmailVerificationApi } = useVerifyUserTokenService();
 	const { showModal, showToast } = useContext(PopupContentContext);
@@ -279,26 +281,35 @@ const Methods: React.FC<MethodProps> = ({
 				<div>
 					Is Email Verified?:&nbsp;{" "}
 					<div className="pill-container">
-						<VerifiedPill isVerified={loginMethod.verified} />
-						{!isEditing && !loginMethod.verified && (
-							<TooltipContainer
-								tooltip="Send verification mail"
-								position="right"
-								tooltipWidth={170}>
-								<SendMailIcon
-									className="send-mail-icon"
-									onClick={() =>
-										sendUserEmailVerification(loginMethod.recipeUserId, loginMethod.tenantIds[0])
-									}
-								/>
-							</TooltipContainer>
-						)}
-						{isEditing && (
-							<span
-								onClick={changeEmailVerificationStatus}
-								className="password-link">
-								{loginMethod.verified ? "Set as Unverified" : "Set as Verified"}
-							</span>
+						{isVerifyEmailFeatureEnabled ? (
+							<>
+								<VerifiedPill isVerified={loginMethod.verified} />
+								{!isEditing && !loginMethod.verified && (
+									<TooltipContainer
+										tooltip="Send verification mail"
+										position="right"
+										tooltipWidth={170}>
+										<SendMailIcon
+											className="send-mail-icon"
+											onClick={() =>
+												sendUserEmailVerification(
+													loginMethod.recipeUserId,
+													loginMethod.tenantIds[0]
+												)
+											}
+										/>
+									</TooltipContainer>
+								)}
+								{isEditing && (
+									<span
+										onClick={changeEmailVerificationStatus}
+										className="password-link">
+										{loginMethod.verified ? "Set as Unverified" : "Set as Verified"}
+									</span>
+								)}
+							</>
+						) : (
+							<span className="not-verified">Feature not enabled</span>
 						)}
 					</div>
 				</div>
@@ -367,9 +378,9 @@ const Methods: React.FC<MethodProps> = ({
 	);
 };
 
-type LoginMethodProps = { refetchAllData: () => Promise<void> };
+type LoginMethodProps = { refetchAllData: () => Promise<void>; isVerifyEmailFeatureEnabled: boolean };
 
-export const LoginMethods: React.FC<LoginMethodProps> = ({ refetchAllData }) => {
+export const LoginMethods: React.FC<LoginMethodProps> = ({ refetchAllData, isVerifyEmailFeatureEnabled }) => {
 	const { userDetail, setUserDetails } = useUserDetailContext();
 	const { updateUserInformation } = useUserService();
 	const methods = userDetail.details.loginMethods;
@@ -438,6 +449,7 @@ export const LoginMethods: React.FC<LoginMethodProps> = ({ refetchAllData }) =>
 			header={<div className="title">Login Methods</div>}>
 			{methods.map((val, ind) => (
 				<Methods
+					isVerifyEmailFeatureEnabled={isVerifyEmailFeatureEnabled}
 					loginMethod={val}
 					onUpdateEmailVerificationStatusCallback={userDetail.func.onUpdateEmailVerificationStatusCallback}
 					key={ind}

diff --git a/src/ui/components/userDetail/userDetail.tsx b/src/ui/components/userDetail/userDetail.tsx
@@ -16,15 +16,16 @@
 import React, { useCallback, useContext, useEffect, useState } from "react";
 import { Tenant } from "../../../api/tenants/list";
 import { GetUserInfoResult, UpdateUserInformationResponse, useUserService } from "../../../api/user";
+import useVerifyUserEmail from "../../../api/user/email/verify";
 import useMetadataService from "../../../api/user/metadata";
 import useSessionsForUserService from "../../../api/user/sessions";
 import { getImageUrl, getRecipeNameFromid } from "../../../utils";
 import { getTenantsObjectsForIds } from "../../../utils/user";
 import { PopupContentContext } from "../../contexts/PopupContentContext";
-import { User, UserRecipeType } from "../../pages/usersList/types";
+import { FEATURE_NOT_ENABLED_TEXT, User, UserRecipeType } from "../../pages/usersList/types";
 import { getMissingTenantIdModalProps } from "../common/modals/TenantIdModals";
 import { OnSelectUserFunction } from "../usersListTable/UsersListTable";
-import { UserDetailContextProvider, UserDetails, useUserDetailContext } from "./context/UserDetailContext";
+import { UserDetailContextProvider } from "./context/UserDetailContext";
 import { LoginMethods } from "./loginMethods/LoginMethods";
 import "./tenantList/UserTenantsList.scss";
 import "./userDetail.scss";
@@ -53,15 +54,32 @@ export const UserDetail: React.FC<UserDetailProps> = (props) => {
 	const [sessionList, setSessionList] = useState<SessionInfo[] | undefined>(undefined);
 	const [userMetaData, setUserMetaData] = useState<string | undefined>(undefined);
 	const [shouldShowLoadingOverlay, setShowLoadingOverlay] = useState<boolean>(false);
+	const [isVerifyEmailFeatureEnabled, setIsVerifyEmailFeatureEnabled] = useState(false);
 
 	const { getUser, updateUserInformation } = useUserService();
 	const { getUserMetaData } = useMetadataService();
 	const { getSessionsForUser } = useSessionsForUserService();
 	const { showModal } = useContext(PopupContentContext);
+	const { getUserEmailVerificationStatus } = useVerifyUserEmail();
 
 	const loadUserDetail = useCallback(async () => {
 		const userDetailsResponse = await getUser(user);
-		setUserDetail(JSON.parse(JSON.stringify(userDetailsResponse)));
+		const parsedUserDetails = JSON.parse(JSON.stringify(userDetailsResponse)) as GetUserInfoResult;
+		try {
+			if (parsedUserDetails && parsedUserDetails.status === "OK") {
+				const res = await getUserEmailVerificationStatus(parsedUserDetails.user.loginMethods[0].recipeUserId);
+				if (res.status === "OK") {
+					setIsVerifyEmailFeatureEnabled(true);
+				}
+			}
+			// eslint-disable-next-line  @typescript-eslint/no-explicit-any
+		} catch (err: any) {
+			if (err.status === FEATURE_NOT_ENABLED_TEXT) {
+				setIsVerifyEmailFeatureEnabled(false);
+			}
+		} finally {
+			setUserDetail(parsedUserDetails);
+		}
 	}, []);
 
 	useEffect(() => {
@@ -252,7 +270,10 @@ export const UserDetail: React.FC<UserDetailProps> = (props) => {
 
 				<UserDetailInfoGrid {...props} />
 
-				<LoginMethods refetchAllData={refetchAllData} />
+				<LoginMethods
+					isVerifyEmailFeatureEnabled={isVerifyEmailFeatureEnabled}
+					refetchAllData={refetchAllData}
+				/>
 
 				<UserMetaDataSection />