Merge pull request #120 from supertokens/fix/500

fix: email verification failing issue

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [unreleased]
 
+## [0.8.5] - 2023-10-5
+
+-   Fixes showing email verification UI even though it's not initialised.
+
 ## [0.8.4] - 2023-09-29
 
 -   Fixes dashboard signin form input styles issue.

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "dashboard",
-	"version": "0.8.4",
+	"version": "0.8.5",
 	"private": true,
 	"dependencies": {
 		"@babel/core": "^7.16.0",

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();

src/ui/components/userDetail/loginMethods/LoginMethods.tsx

@@ -1,19 +1,21 @@
 import React, { useCallback, useContext, useState } from "react";
 import useUserService, { UpdateUserInformationResponse, type IUpdateUserInformationArgs } from "../../../../api/user";
 import useDeleteUserService from "../../../../api/user/delete";
+import useVerifyUserEmail from "../../../../api/user/email/verify";
 import useVerifyUserTokenService from "../../../../api/user/email/verify/token";
 import usePasswordResetService from "../../../../api/user/password/reset";
 import useUnlinkService from "../../../../api/user/unlink";
 import { getImageUrl } from "../../../../utils";
 import { formatLongDate } from "../../../../utils/index";
 import { PopupContentContext } from "../../../contexts/PopupContentContext";
-import { UserRecipeType, type LoginMethod } from "../../../pages/usersList/types";
+import { FEATURE_NOT_ENABLED_TEXT, UserRecipeType, type LoginMethod } from "../../../pages/usersList/types";
 import CopyText from "../../copyText/CopyText";
 import { LayoutPanel } from "../../layout/layoutPanel";
 import TooltipContainer from "../../tooltip/tooltip";
 import { useUserDetailContext } from "../context/UserDetailContext";
 import {
 	getDeleteUserToast,
+	getInitlizeEmailVerificationRecipeTost,
 	getLoginMethodUnlinkConfirmationProps,
 	getSendEmailVerificationToast,
 	getUnlinkUserToast,
@@ -148,6 +150,7 @@ const Methods: React.FC<MethodProps> = ({
 	const { sendUserEmailVerification: sendUserEmailVerificationApi } = useVerifyUserTokenService();
 	const { showModal, showToast } = useContext(PopupContentContext);
 	const [emailError, setEmailError] = useState("");
+	const { getUserEmailVerificationStatus } = useVerifyUserEmail();
 
 	const trim = (val: string) => {
 		const len = val.length;
@@ -156,6 +159,13 @@ const Methods: React.FC<MethodProps> = ({
 
 	const sendUserEmailVerification = useCallback(
 		async (userId: string, tenantId: string | undefined) => {
+			const res = await getUserEmailVerificationStatus(userId);
+
+			if (res.status === FEATURE_NOT_ENABLED_TEXT) {
+				showToast(getInitlizeEmailVerificationRecipeTost());
+				return;
+			}
+
 			const isSend = await sendUserEmailVerificationApi(userId, tenantId);
 			showToast(getSendEmailVerificationToast(isSend));
 			return isSend;
@@ -195,6 +205,12 @@ const Methods: React.FC<MethodProps> = ({
 		[showModal, loginMethod.recipeUserId, changePassword]
 	);
 	const changeEmailVerificationStatus = async () => {
+		const res = await getUserEmailVerificationStatus(loginMethod.recipeUserId);
+
+		if (res.status === FEATURE_NOT_ENABLED_TEXT) {
+			showToast(getInitlizeEmailVerificationRecipeTost());
+			return;
+		}
 		await onUpdateEmailVerificationStatusCallback(loginMethod.recipeUserId, !loginMethod.verified, undefined);
 		await refetchAllData();
 	};

src/ui/components/userDetail/userDetail.tsx

@@ -24,7 +24,7 @@ import { PopupContentContext } from "../../contexts/PopupContentContext";
 import { 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,6 +53,7 @@ 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 [isLoading, setIsLoading] = useState(false);
 
 	const { getUser, updateUserInformation } = useUserService();
 	const { getUserMetaData } = useMetadataService();
@@ -64,10 +65,6 @@ export const UserDetail: React.FC<UserDetailProps> = (props) => {
 		setUserDetail(JSON.parse(JSON.stringify(userDetailsResponse)));
 	}, []);
 
-	useEffect(() => {
-		void loadUserDetail();
-	}, [loadUserDetail]);
-
 	const { showToast } = useContext(PopupContentContext);
 
 	const updateUser = useCallback(
@@ -144,10 +141,6 @@ export const UserDetail: React.FC<UserDetailProps> = (props) => {
 		}
 	}, []);
 
-	useEffect(() => {
-		void fetchUserMetaData();
-	}, [fetchUserMetaData]);
-
 	const fetchSession = useCallback(async () => {
 		let response = await getSessionsForUser(user);
 
@@ -158,10 +151,6 @@ export const UserDetail: React.FC<UserDetailProps> = (props) => {
 		setSessionList(response);
 	}, []);
 
-	useEffect(() => {
-		void fetchSession();
-	}, [fetchSession]);
-
 	const showLoadingOverlay = () => {
 		setShowLoadingOverlay(true);
 	};
@@ -170,7 +159,27 @@ export const UserDetail: React.FC<UserDetailProps> = (props) => {
 		setShowLoadingOverlay(false);
 	};
 
-	if (userDetail === undefined) {
+	const fetchData = async () => {
+		setIsLoading(true);
+		await loadUserDetail();
+		await fetchUserMetaData();
+		await fetchSession();
+		setIsLoading(false);
+	};
+
+	const refetchAllData = async () => {
+		setShowLoadingOverlay(true);
+		await loadUserDetail();
+		await fetchUserMetaData();
+		await fetchSession();
+		setShowLoadingOverlay(false);
+	};
+
+	useEffect(() => {
+		void fetchData();
+	}, []);
+
+	if (userDetail === undefined || isLoading) {
 		return (
 			<div className="user-detail-page-loader">
 				<div className="loader"></div>
@@ -206,13 +215,6 @@ export const UserDetail: React.FC<UserDetailProps> = (props) => {
 		);
 	}
 
-	const refetchAllData = async () => {
-		setShowLoadingOverlay(true);
-		await loadUserDetail();
-		await fetchUserMetaData();
-		await fetchSession();
-		setShowLoadingOverlay(false);
-	};
 	const userFunctions = {
 		refetchAllData: refetchAllData,
 		updateUser: updateUser,

src/ui/components/userDetail/userDetailForm.tsx

@@ -633,6 +633,14 @@ export const getSendEmailVerificationToast = (isSuccessfull: boolean) => {
 	} as ToastNotificationProps;
 };
 
+export const getInitlizeEmailVerificationRecipeTost = () => {
+	return {
+		iconImage: getImageUrl("form-field-error-icon.svg"),
+		toastType: "error",
+		children: <>{"EmailVerification feature is not enabled"}</>,
+	} as ToastNotificationProps;
+};
+
 export const getEmailVerifiedToast = (isSuccessfull: boolean) => {
 	return {
 		iconImage: getImageUrl(isSuccessfull ? "checkmark-green.svg" : "form-field-error-icon.svg"),

src/version.ts

@@ -13,4 +13,4 @@
  * under the License.
  */
 
-export const package_version = "0.8.4";
+export const package_version = "0.8.5";