@abpjs/account 3.0.0 → 3.1.0

package/dist/components/ChangePasswordForm/ChangePasswordForm.d.ts

@@ -10,6 +10,14 @@ export interface ChangePasswordFormProps {
      * Callback fired on password change error
      */
     onError?: (error: string) => void;
+    /**
+     * Whether to hide the current password field.
+     * When undefined, this is automatically determined based on the user's profile.
+     * Users without a password (e.g., social login users) don't need to enter current password.
+     *
+     * @since 3.1.0
+     */
+    hideCurrentPassword?: boolean;
 }
 /**
  * ChangePasswordForm - Password change form component
@@ -18,6 +26,7 @@ export interface ChangePasswordFormProps {
  * It provides a form for authenticated users to change their password.
  *
  * @since 1.1.0
+ * @since 3.1.0 - Added hideCurrentPassword prop for users without password (social login)
  *
  * @example
  * ```tsx
@@ -25,7 +34,10 @@ export interface ChangePasswordFormProps {
  *   onSuccess={() => console.log('Password changed!')}
  *   onError={(err) => console.error(err)}
  * />
+ *
+ * // For social login users (no current password needed)
+ * <ChangePasswordForm hideCurrentPassword={true} />
  * ```
  */
-export declare function ChangePasswordForm({ onSuccess, onError }: ChangePasswordFormProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChangePasswordForm({ onSuccess, onError, hideCurrentPassword: hideCurrentPasswordProp, }: ChangePasswordFormProps): import("react/jsx-runtime").JSX.Element;
 export default ChangePasswordForm;

package/dist/components/ManageProfile/ManageProfile.d.ts

@@ -24,6 +24,14 @@ export interface ManageProfileProps {
      * Custom tabs to add/replace default tabs
      */
     customTabs?: ProfileTab[];
+    /**
+     * Whether to hide the change password tab.
+     * When undefined, this is automatically determined based on the user's profile.
+     * External users (social login) don't see the change password tab by default.
+     *
+     * @since 3.1.0
+     */
+    hideChangePasswordTab?: boolean;
 }
 /**
  * ManageProfile - User profile management component
@@ -34,6 +42,7 @@ export interface ManageProfileProps {
  *
  * @since 1.1.0
  * @since 2.7.0 - Added changePasswordKey and personalSettingsKey static properties for component replacement system
+ * @since 3.1.0 - Added hideChangePasswordTab prop and loading state; external users don't see change password tab
  *
  * @example
  * ```tsx
@@ -41,9 +50,12 @@ export interface ManageProfileProps {
  *   defaultTabIndex={0}
  *   onTabChange={(index) => console.log('Tab changed to', index)}
  * />
+ *
+ * // Force hide change password tab
+ * <ManageProfile hideChangePasswordTab={true} />
  * ```
  */
-export declare function ManageProfile({ defaultTabIndex, onTabChange, customTabs, }: ManageProfileProps): import("react/jsx-runtime").JSX.Element;
+export declare function ManageProfile({ defaultTabIndex, onTabChange, customTabs, hideChangePasswordTab: hideChangePasswordTabProp, }: ManageProfileProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace ManageProfile {
     var changePasswordKey: "Account.ChangePasswordComponent";
     var personalSettingsKey: "Account.PersonalSettingsComponent";

package/dist/guards/authentication-flow.guard.d.ts

@@ -0,0 +1,121 @@
+/**
+ * Authentication Flow Guard
+ * Translated from @abp/ng.account v3.1.0
+ *
+ * A route guard that checks if the authentication flow is internal (password-based).
+ * If using external auth (SSO/OAuth), it initiates the login flow and blocks navigation.
+ *
+ * In Angular, this implements CanActivate interface.
+ * In React, this is a function that can be used with react-router loaders/guards.
+ *
+ * @since 3.1.0
+ */
+/**
+ * Authentication flow guard result
+ */
+export interface AuthenticationFlowGuardResult {
+    /**
+     * Whether navigation is allowed
+     */
+    canActivate: boolean;
+    /**
+     * If navigation is blocked, the reason why
+     */
+    reason?: 'external_auth' | 'not_configured';
+}
+/**
+ * Options for the authentication flow guard
+ */
+export interface AuthenticationFlowGuardOptions {
+    /**
+     * Whether internal authentication is being used.
+     * When true, the guard allows navigation.
+     * When false, the guard blocks navigation and initiates login.
+     */
+    isInternalAuth: boolean;
+    /**
+     * Function to initiate the login flow for external auth
+     */
+    initLogin: () => void | Promise<void>;
+}
+/**
+ * Check if navigation should be allowed based on auth flow type
+ *
+ * @param options - The guard options
+ * @returns Whether navigation is allowed
+ *
+ * @example
+ * ```tsx
+ * // In a route loader
+ * export const loader = async () => {
+ *   const result = authenticationFlowGuard({
+ *     isInternalAuth: true, // or false for SSO
+ *     initLogin: () => auth.login(),
+ *   });
+ *
+ *   if (!result.canActivate) {
+ *     return redirect('/');
+ *   }
+ *
+ *   return null;
+ * };
+ * ```
+ */
+export declare function authenticationFlowGuard(options: AuthenticationFlowGuardOptions): AuthenticationFlowGuardResult;
+/**
+ * React hook version of AuthenticationFlowGuard
+ *
+ * This hook can be used in a route component to check auth flow
+ * and redirect if needed.
+ *
+ * @param options - The guard options
+ * @returns Whether navigation is allowed
+ *
+ * @example
+ * ```tsx
+ * function ProtectedRoute({ children }) {
+ *   const auth = useAuth();
+ *   const canActivate = useAuthenticationFlowGuard({
+ *     isInternalAuth: true,
+ *     initLogin: auth.login,
+ *   });
+ *
+ *   if (!canActivate) {
+ *     return null; // Login redirect in progress
+ *   }
+ *
+ *   return children;
+ * }
+ * ```
+ */
+export declare function useAuthenticationFlowGuard(options: AuthenticationFlowGuardOptions): boolean;
+/**
+ * Class-based AuthenticationFlowGuard for Angular-like usage patterns
+ *
+ * This class provides a similar API to Angular's CanActivate guard.
+ *
+ * @since 3.1.0
+ *
+ * @example
+ * ```tsx
+ * const guard = new AuthenticationFlowGuard(
+ *   isInternalAuth,
+ *   () => auth.login()
+ * );
+ *
+ * if (!guard.canActivate()) {
+ *   // Navigation blocked, login initiated
+ * }
+ * ```
+ */
+export declare class AuthenticationFlowGuard {
+    private isInternalAuth;
+    private initLogin;
+    constructor(isInternalAuth: boolean, initLogin: () => void | Promise<void>);
+    /**
+     * Check if navigation should be allowed
+     * @returns Whether navigation is allowed
+     */
+    canActivate(): boolean;
+}
+export default AuthenticationFlowGuard;

package/dist/guards/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Guards
+ * Route guards for @abpjs/account
+ *
+ * @since 3.1.0
+ */
+export * from './authentication-flow.guard';

package/dist/index.d.ts

@@ -1,7 +1,14 @@
 /**
  * @abpjs/account
  * ABP Framework Account module for React
- * Translated from @abp/ng.account v3.0.0
+ * Translated from @abp/ng.account v3.1.0
+ *
+ * Changes in v3.1.0:
+ * - New: AuthenticationFlowGuard - Route guard for checking auth flow type
+ * - ChangePasswordForm: Added hideCurrentPassword prop for users without password (social login)
+ * - ManageProfile: Added hideChangePasswordTab prop and loading state for external users
+ * - AuthWrapper: Internal refactoring (uses SubscriptionService in Angular, no React impact)
+ * - PersonalSettingsForm: Simplified internal implementation
  *
  * Changes in v3.0.0:
  * - New config subpackage: config/providers with ACCOUNT_ROUTE_PROVIDERS, configureRoutes
@@ -31,7 +38,7 @@
  * - Dependency updates to @abp/ng.theme.shared v2.2.0 and @abp/ng.account.config v2.2.0
  * - No functional code changes
  *
- * @version 3.0.0
+ * @version 3.1.0
  * @since 2.0.0 - Added Account namespace with component interface types
  * @since 2.0.0 - Added isSelfRegistrationEnabled support in Login/Register components
  * @since 2.0.0 - Added enableLocalLogin support in AuthWrapper component
@@ -43,9 +50,11 @@
  * @since 2.7.0 - Components have static keys for component replacement system
  * @since 2.9.0 - Version bump only (dependency updates)
  * @since 3.0.0 - Config subpackage, accountOptionsFactory, initializeAccountRoutes
+ * @since 3.1.0 - AuthenticationFlowGuard, hideCurrentPassword, hideChangePasswordTab
  */
 export * from './config';
 export * from './enums';
+export * from './guards';
 export * from './models';
 export * from './services';
 export * from './utils';

package/dist/index.js

@@ -25,6 +25,7 @@ __export(index_exports, {
   AccountProvider: () => AccountProvider,
   AccountService: () => AccountService,
   AuthWrapper: () => AuthWrapper,
+  AuthenticationFlowGuard: () => AuthenticationFlowGuard,
   ChangePasswordForm: () => ChangePasswordForm,
   DEFAULT_REDIRECT_URL: () => DEFAULT_REDIRECT_URL,
   LoginForm: () => LoginForm,
@@ -35,6 +36,7 @@ __export(index_exports, {
   RegisterPage: () => RegisterPage,
   TenantBox: () => TenantBox,
   accountOptionsFactory: () => accountOptionsFactory,
+  authenticationFlowGuard: () => authenticationFlowGuard,
   configureRoutes: () => configureRoutes,
   eAccountComponents: () => eAccountComponents,
   eAccountRouteNames: () => eAccountRouteNames,
@@ -42,6 +44,7 @@ __export(index_exports, {
   useAccountContext: () => useAccountContext,
   useAccountOptions: () => useAccountOptions,
   useAccountService: () => useAccountService,
+  useAuthenticationFlowGuard: () => useAuthenticationFlowGuard,
   usePasswordFlow: () => usePasswordFlow,
   useSelfRegistrationEnabled: () => useSelfRegistrationEnabled
 });
@@ -144,6 +147,40 @@ var eAccountComponents = {
   PersonalSettings: "Account.PersonalSettingsComponent"
 };
 
+// src/guards/authentication-flow.guard.ts
+function authenticationFlowGuard(options) {
+  const { isInternalAuth, initLogin } = options;
+  if (isInternalAuth) {
+    return { canActivate: true };
+  }
+  initLogin();
+  return {
+    canActivate: false,
+    reason: "external_auth"
+  };
+}
+function useAuthenticationFlowGuard(options) {
+  const result = authenticationFlowGuard(options);
+  return result.canActivate;
+}
+var AuthenticationFlowGuard = class {
+  constructor(isInternalAuth, initLogin) {
+    this.isInternalAuth = isInternalAuth;
+    this.initLogin = initLogin;
+  }
+  /**
+   * Check if navigation should be allowed
+   * @returns Whether navigation is allowed
+   */
+  canActivate() {
+    if (this.isInternalAuth) {
+      return true;
+    }
+    this.initLogin();
+    return false;
+  }
+};
+
 // src/services/account.service.ts
 var AccountService = class {
   constructor(rest) {
@@ -389,31 +426,58 @@ var passwordValidation = {
   hasNumber: /[0-9]/,
   hasSpecial: /[!@#$%^&*(),.?":{}|<>]/
 };
-var changePasswordSchema = import_zod2.z.object({
-  currentPassword: import_zod2.z.string().min(1, "Current password is required"),
-  newPassword: import_zod2.z.string().min(6, "Password must be at least 6 characters").max(32, "Password must be at most 32 characters").refine(
-    (val) => passwordValidation.hasLowercase.test(val),
-    "Password must contain at least one lowercase letter"
-  ).refine(
-    (val) => passwordValidation.hasUppercase.test(val),
-    "Password must contain at least one uppercase letter"
-  ).refine(
-    (val) => passwordValidation.hasNumber.test(val),
-    "Password must contain at least one number"
-  ).refine(
-    (val) => passwordValidation.hasSpecial.test(val),
-    "Password must contain at least one special character"
-  ),
-  confirmNewPassword: import_zod2.z.string().min(1, "Confirm password is required")
-}).refine((data) => data.newPassword === data.confirmNewPassword, {
-  message: "Passwords do not match",
-  path: ["confirmNewPassword"]
-});
-function ChangePasswordForm({ onSuccess, onError }) {
+function createChangePasswordSchema(hideCurrentPassword) {
+  const baseSchema = {
+    newPassword: import_zod2.z.string().min(6, "Password must be at least 6 characters").max(32, "Password must be at most 32 characters").refine(
+      (val) => passwordValidation.hasLowercase.test(val),
+      "Password must contain at least one lowercase letter"
+    ).refine(
+      (val) => passwordValidation.hasUppercase.test(val),
+      "Password must contain at least one uppercase letter"
+    ).refine(
+      (val) => passwordValidation.hasNumber.test(val),
+      "Password must contain at least one number"
+    ).refine(
+      (val) => passwordValidation.hasSpecial.test(val),
+      "Password must contain at least one special character"
+    ),
+    confirmNewPassword: import_zod2.z.string().min(1, "Confirm password is required")
+  };
+  const schema = hideCurrentPassword ? import_zod2.z.object({
+    currentPassword: import_zod2.z.string().optional(),
+    ...baseSchema
+  }) : import_zod2.z.object({
+    currentPassword: import_zod2.z.string().min(1, "Current password is required"),
+    ...baseSchema
+  });
+  return schema.refine((data) => data.newPassword === data.confirmNewPassword, {
+    message: "Passwords do not match",
+    path: ["confirmNewPassword"]
+  });
+}
+function ChangePasswordForm({
+  onSuccess,
+  onError,
+  hideCurrentPassword: hideCurrentPasswordProp
+}) {
   const { t } = (0, import_core6.useLocalization)();
-  const { changePassword } = (0, import_core6.useProfile)();
+  const { profile, changePassword } = (0, import_core6.useProfile)();
   const toaster = (0, import_theme_shared.useToaster)();
   const [inProgress, setInProgress] = (0, import_react5.useState)(false);
+  const [showCurrentPasswordAfterChange, setShowCurrentPasswordAfterChange] = (0, import_react5.useState)(false);
+  const shouldHideCurrentPassword = (0, import_react5.useMemo)(() => {
+    if (hideCurrentPasswordProp !== void 0) {
+      return hideCurrentPasswordProp;
+    }
+    if (showCurrentPasswordAfterChange) {
+      return false;
+    }
+    return profile?.hasPassword === false;
+  }, [hideCurrentPasswordProp, profile?.hasPassword, showCurrentPasswordAfterChange]);
+  const changePasswordSchema = (0, import_react5.useMemo)(
+    () => createChangePasswordSchema(shouldHideCurrentPassword),
+    [shouldHideCurrentPassword]
+  );
   const {
     register,
     handleSubmit,
@@ -427,13 +491,13 @@ function ChangePasswordForm({ onSuccess, onError }) {
       confirmNewPassword: ""
     }
   });
-  (0, import_react5.useEffect)(() => {
-  }, []);
   const onSubmit = async (data) => {
     setInProgress(true);
     try {
       await changePassword({
-        currentPassword: data.currentPassword,
+        // Only include currentPassword if not hidden
+        // v3.1.0: Support for users without password (social login)
+        ...!shouldHideCurrentPassword && data.currentPassword ? { currentPassword: data.currentPassword } : {},
         newPassword: data.newPassword
       });
       toaster.success(
@@ -441,6 +505,9 @@ function ChangePasswordForm({ onSuccess, onError }) {
         t("AbpAccount::Success") || "Success"
       );
       reset();
+      if (shouldHideCurrentPassword) {
+        setShowCurrentPasswordAfterChange(true);
+      }
       onSuccess?.();
     } catch (err) {
       const errorMessage = err?.error?.error_description || err?.error?.error?.message || t("AbpAccount::DefaultErrorMessage") || "An error occurred";
@@ -451,7 +518,7 @@ function ChangePasswordForm({ onSuccess, onError }) {
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("form", { onSubmit: handleSubmit(onSubmit), noValidate: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react6.Stack, { gap: "5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react7.Field.Root, { invalid: !!errors.currentPassword, children: [
+    !shouldHideCurrentPassword && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react7.Field.Root, { invalid: !!errors.currentPassword, children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react7.Field.Label, { children: t("AbpAccount::CurrentPassword") }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react7.InputGroup, { startElement: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lu.LuLock, {}), width: "full", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         import_react6.Input,
@@ -950,11 +1017,26 @@ var import_jsx_runtime7 = require("react/jsx-runtime");
 function ManageProfile({
   defaultTabIndex = 0,
   onTabChange,
-  customTabs
+  customTabs,
+  hideChangePasswordTab: hideChangePasswordTabProp
 }) {
   const { t } = (0, import_core10.useLocalization)();
+  const { profile, loading: profileLoading, fetchProfile } = (0, import_core10.useProfile)();
+  const [isProfileLoaded, setIsProfileLoaded] = (0, import_react15.useState)(false);
   const [selectedTab, setSelectedTab] = (0, import_react15.useState)(defaultTabIndex);
-  const defaultTabs = [
+  (0, import_react15.useEffect)(() => {
+    fetchProfile().then(() => {
+      setIsProfileLoaded(true);
+    });
+  }, [fetchProfile]);
+  const shouldHideChangePasswordTab = hideChangePasswordTabProp ?? profile?.isExternal ?? false;
+  (0, import_react15.useEffect)(() => {
+    if (isProfileLoaded && shouldHideChangePasswordTab && selectedTab === 0) {
+      const personalSettingsIndex = 0;
+      setSelectedTab(personalSettingsIndex);
+    }
+  }, [isProfileLoaded, shouldHideChangePasswordTab, selectedTab]);
+  const allTabs = [
     {
       id: "personal-settings",
       label: t("AbpAccount::PersonalSettings") || "Personal Settings",
@@ -963,9 +1045,11 @@ function ManageProfile({
     {
       id: "change-password",
       label: t("AbpAccount::ChangePassword") || "Change Password",
-      content: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChangePasswordForm, {})
+      // v3.1.0: Pass hideCurrentPassword based on profile.hasPassword
+      content: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChangePasswordForm, { hideCurrentPassword: profile?.hasPassword === false })
     }
   ];
+  const defaultTabs = shouldHideChangePasswordTab ? allTabs.filter((tab) => tab.id !== "change-password") : allTabs;
   const tabs = customTabs || defaultTabs;
   const handleTabChange = (details) => {
     const index = tabs.findIndex((tab) => tab.id === details.value);
@@ -974,6 +1058,9 @@ function ManageProfile({
       onTabChange?.(index);
     }
   };
+  if (!isProfileLoaded || profileLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react16.Box, { className: "manage-profile", py: { base: "8", md: "12" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react16.Container, { maxW: "2xl", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react16.Center, { minH: "400px", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react16.Spinner, { size: "xl" }) }) }) });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react16.Box, { className: "manage-profile", py: { base: "8", md: "12" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react16.Container, { maxW: "2xl", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react16.Stack, { gap: "8", children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react16.Heading, { size: "xl", children: t("AbpAccount::ManageYourAccount") || "Manage Your Account" }),
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
@@ -1206,6 +1293,7 @@ var ACCOUNT_PATHS = {
   AccountProvider,
   AccountService,
   AuthWrapper,
+  AuthenticationFlowGuard,
   ChangePasswordForm,
   DEFAULT_REDIRECT_URL,
   LoginForm,
@@ -1216,6 +1304,7 @@ var ACCOUNT_PATHS = {
   RegisterPage,
   TenantBox,
   accountOptionsFactory,
+  authenticationFlowGuard,
   configureRoutes,
   eAccountComponents,
   eAccountRouteNames,
@@ -1223,6 +1312,7 @@ var ACCOUNT_PATHS = {
   useAccountContext,
   useAccountOptions,
   useAccountService,
+  useAuthenticationFlowGuard,
   usePasswordFlow,
   useSelfRegistrationEnabled
 });

package/dist/index.mjs

@@ -95,6 +95,40 @@ var eAccountComponents = {
   PersonalSettings: "Account.PersonalSettingsComponent"
 };
 
+// src/guards/authentication-flow.guard.ts
+function authenticationFlowGuard(options) {
+  const { isInternalAuth, initLogin } = options;
+  if (isInternalAuth) {
+    return { canActivate: true };
+  }
+  initLogin();
+  return {
+    canActivate: false,
+    reason: "external_auth"
+  };
+}
+function useAuthenticationFlowGuard(options) {
+  const result = authenticationFlowGuard(options);
+  return result.canActivate;
+}
+var AuthenticationFlowGuard = class {
+  constructor(isInternalAuth, initLogin) {
+    this.isInternalAuth = isInternalAuth;
+    this.initLogin = initLogin;
+  }
+  /**
+   * Check if navigation should be allowed
+   * @returns Whether navigation is allowed
+   */
+  canActivate() {
+    if (this.isInternalAuth) {
+      return true;
+    }
+    this.initLogin();
+    return false;
+  }
+};
+
 // src/services/account.service.ts
 var AccountService = class {
   constructor(rest) {
@@ -324,7 +358,7 @@ function AuthWrapper({
 AuthWrapper.tenantBoxKey = eAccountComponents.TenantBox;
 
 // src/components/ChangePasswordForm/ChangePasswordForm.tsx
-import { useState as useState2, useEffect } from "react";
+import { useState as useState2, useMemo as useMemo3 } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
@@ -340,31 +374,58 @@ var passwordValidation = {
   hasNumber: /[0-9]/,
   hasSpecial: /[!@#$%^&*(),.?":{}|<>]/
 };
-var changePasswordSchema = z.object({
-  currentPassword: z.string().min(1, "Current password is required"),
-  newPassword: z.string().min(6, "Password must be at least 6 characters").max(32, "Password must be at most 32 characters").refine(
-    (val) => passwordValidation.hasLowercase.test(val),
-    "Password must contain at least one lowercase letter"
-  ).refine(
-    (val) => passwordValidation.hasUppercase.test(val),
-    "Password must contain at least one uppercase letter"
-  ).refine(
-    (val) => passwordValidation.hasNumber.test(val),
-    "Password must contain at least one number"
-  ).refine(
-    (val) => passwordValidation.hasSpecial.test(val),
-    "Password must contain at least one special character"
-  ),
-  confirmNewPassword: z.string().min(1, "Confirm password is required")
-}).refine((data) => data.newPassword === data.confirmNewPassword, {
-  message: "Passwords do not match",
-  path: ["confirmNewPassword"]
-});
-function ChangePasswordForm({ onSuccess, onError }) {
+function createChangePasswordSchema(hideCurrentPassword) {
+  const baseSchema = {
+    newPassword: z.string().min(6, "Password must be at least 6 characters").max(32, "Password must be at most 32 characters").refine(
+      (val) => passwordValidation.hasLowercase.test(val),
+      "Password must contain at least one lowercase letter"
+    ).refine(
+      (val) => passwordValidation.hasUppercase.test(val),
+      "Password must contain at least one uppercase letter"
+    ).refine(
+      (val) => passwordValidation.hasNumber.test(val),
+      "Password must contain at least one number"
+    ).refine(
+      (val) => passwordValidation.hasSpecial.test(val),
+      "Password must contain at least one special character"
+    ),
+    confirmNewPassword: z.string().min(1, "Confirm password is required")
+  };
+  const schema = hideCurrentPassword ? z.object({
+    currentPassword: z.string().optional(),
+    ...baseSchema
+  }) : z.object({
+    currentPassword: z.string().min(1, "Current password is required"),
+    ...baseSchema
+  });
+  return schema.refine((data) => data.newPassword === data.confirmNewPassword, {
+    message: "Passwords do not match",
+    path: ["confirmNewPassword"]
+  });
+}
+function ChangePasswordForm({
+  onSuccess,
+  onError,
+  hideCurrentPassword: hideCurrentPasswordProp
+}) {
   const { t } = useLocalization2();
-  const { changePassword } = useProfile();
+  const { profile, changePassword } = useProfile();
   const toaster = useToaster();
   const [inProgress, setInProgress] = useState2(false);
+  const [showCurrentPasswordAfterChange, setShowCurrentPasswordAfterChange] = useState2(false);
+  const shouldHideCurrentPassword = useMemo3(() => {
+    if (hideCurrentPasswordProp !== void 0) {
+      return hideCurrentPasswordProp;
+    }
+    if (showCurrentPasswordAfterChange) {
+      return false;
+    }
+    return profile?.hasPassword === false;
+  }, [hideCurrentPasswordProp, profile?.hasPassword, showCurrentPasswordAfterChange]);
+  const changePasswordSchema = useMemo3(
+    () => createChangePasswordSchema(shouldHideCurrentPassword),
+    [shouldHideCurrentPassword]
+  );
   const {
     register,
     handleSubmit,
@@ -378,13 +439,13 @@ function ChangePasswordForm({ onSuccess, onError }) {
       confirmNewPassword: ""
     }
   });
-  useEffect(() => {
-  }, []);
   const onSubmit = async (data) => {
     setInProgress(true);
     try {
       await changePassword({
-        currentPassword: data.currentPassword,
+        // Only include currentPassword if not hidden
+        // v3.1.0: Support for users without password (social login)
+        ...!shouldHideCurrentPassword && data.currentPassword ? { currentPassword: data.currentPassword } : {},
         newPassword: data.newPassword
       });
       toaster.success(
@@ -392,6 +453,9 @@ function ChangePasswordForm({ onSuccess, onError }) {
         t("AbpAccount::Success") || "Success"
       );
       reset();
+      if (shouldHideCurrentPassword) {
+        setShowCurrentPasswordAfterChange(true);
+      }
       onSuccess?.();
     } catch (err) {
       const errorMessage = err?.error?.error_description || err?.error?.error?.message || t("AbpAccount::DefaultErrorMessage") || "An error occurred";
@@ -402,7 +466,7 @@ function ChangePasswordForm({ onSuccess, onError }) {
     }
   };
   return /* @__PURE__ */ jsx3("form", { onSubmit: handleSubmit(onSubmit), noValidate: true, children: /* @__PURE__ */ jsxs2(Stack2, { gap: "5", children: [
-    /* @__PURE__ */ jsxs2(Field.Root, { invalid: !!errors.currentPassword, children: [
+    !shouldHideCurrentPassword && /* @__PURE__ */ jsxs2(Field.Root, { invalid: !!errors.currentPassword, children: [
       /* @__PURE__ */ jsx3(Field.Label, { children: t("AbpAccount::CurrentPassword") }),
       /* @__PURE__ */ jsx3(InputGroup, { startElement: /* @__PURE__ */ jsx3(LuLock, {}), width: "full", children: /* @__PURE__ */ jsx3(
         Input,
@@ -467,7 +531,7 @@ import { Alert, Button as Button3, Checkbox } from "@abpjs/theme-shared";
 import { Box as Box3, Heading, Input as Input3, Link as Link2, HStack, Show } from "@chakra-ui/react";
 
 // src/components/TenantBox/TenantBox.tsx
-import { useState as useState3, useCallback as useCallback2, useEffect as useEffect2 } from "react";
+import { useState as useState3, useCallback as useCallback2, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useLocalization as useLocalization3, sessionActions, selectTenant } from "@abpjs/core";
 import { Modal, Button as Button2, useToaster as useToaster2 } from "@abpjs/theme-shared";
@@ -482,7 +546,7 @@ function TenantBox({ containerStyle }) {
   const [name, setName] = useState3("");
   const [isModalVisible, setIsModalVisible] = useState3(false);
   const [modalBusy, setModalBusy] = useState3(false);
-  useEffect2(() => {
+  useEffect(() => {
     setName(currentTenant?.name || "");
   }, [currentTenant]);
   const onSwitch = useCallback2(() => {
@@ -742,12 +806,12 @@ function LoginForm({
 LoginForm.authWrapperKey = eAccountComponents.AuthWrapper;
 
 // src/components/ManageProfile/ManageProfile.tsx
-import { useState as useState5 } from "react";
-import { useLocalization as useLocalization6 } from "@abpjs/core";
-import { Box as Box4, Container as Container3, Heading as Heading2, Stack as Stack5, Tabs } from "@chakra-ui/react";
+import { useState as useState5, useEffect as useEffect3 } from "react";
+import { useLocalization as useLocalization6, useProfile as useProfile3 } from "@abpjs/core";
+import { Box as Box4, Container as Container3, Heading as Heading2, Stack as Stack5, Tabs, Spinner, Center } from "@chakra-ui/react";
 
 // src/components/PersonalSettingsForm/PersonalSettingsForm.tsx
-import { useState as useState4, useEffect as useEffect3 } from "react";
+import { useState as useState4, useEffect as useEffect2 } from "react";
 import { useForm as useForm3 } from "react-hook-form";
 import { zodResolver as zodResolver3 } from "@hookform/resolvers/zod";
 import { z as z3 } from "zod";
@@ -784,10 +848,10 @@ function PersonalSettingsForm({ onSuccess, onError }) {
       phoneNumber: ""
     }
   });
-  useEffect3(() => {
+  useEffect2(() => {
     fetchProfile();
   }, [fetchProfile]);
-  useEffect3(() => {
+  useEffect2(() => {
     if (profile) {
       reset({
         userName: profile.userName || "",
@@ -909,11 +973,26 @@ import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function ManageProfile({
   defaultTabIndex = 0,
   onTabChange,
-  customTabs
+  customTabs,
+  hideChangePasswordTab: hideChangePasswordTabProp
 }) {
   const { t } = useLocalization6();
+  const { profile, loading: profileLoading, fetchProfile } = useProfile3();
+  const [isProfileLoaded, setIsProfileLoaded] = useState5(false);
   const [selectedTab, setSelectedTab] = useState5(defaultTabIndex);
-  const defaultTabs = [
+  useEffect3(() => {
+    fetchProfile().then(() => {
+      setIsProfileLoaded(true);
+    });
+  }, [fetchProfile]);
+  const shouldHideChangePasswordTab = hideChangePasswordTabProp ?? profile?.isExternal ?? false;
+  useEffect3(() => {
+    if (isProfileLoaded && shouldHideChangePasswordTab && selectedTab === 0) {
+      const personalSettingsIndex = 0;
+      setSelectedTab(personalSettingsIndex);
+    }
+  }, [isProfileLoaded, shouldHideChangePasswordTab, selectedTab]);
+  const allTabs = [
     {
       id: "personal-settings",
       label: t("AbpAccount::PersonalSettings") || "Personal Settings",
@@ -922,9 +1001,11 @@ function ManageProfile({
     {
       id: "change-password",
       label: t("AbpAccount::ChangePassword") || "Change Password",
-      content: /* @__PURE__ */ jsx7(ChangePasswordForm, {})
+      // v3.1.0: Pass hideCurrentPassword based on profile.hasPassword
+      content: /* @__PURE__ */ jsx7(ChangePasswordForm, { hideCurrentPassword: profile?.hasPassword === false })
     }
   ];
+  const defaultTabs = shouldHideChangePasswordTab ? allTabs.filter((tab) => tab.id !== "change-password") : allTabs;
   const tabs = customTabs || defaultTabs;
   const handleTabChange = (details) => {
     const index = tabs.findIndex((tab) => tab.id === details.value);
@@ -933,6 +1014,9 @@ function ManageProfile({
       onTabChange?.(index);
     }
   };
+  if (!isProfileLoaded || profileLoading) {
+    return /* @__PURE__ */ jsx7(Box4, { className: "manage-profile", py: { base: "8", md: "12" }, children: /* @__PURE__ */ jsx7(Container3, { maxW: "2xl", children: /* @__PURE__ */ jsx7(Center, { minH: "400px", children: /* @__PURE__ */ jsx7(Spinner, { size: "xl" }) }) }) });
+  }
   return /* @__PURE__ */ jsx7(Box4, { className: "manage-profile", py: { base: "8", md: "12" }, children: /* @__PURE__ */ jsx7(Container3, { maxW: "2xl", children: /* @__PURE__ */ jsxs6(Stack5, { gap: "8", children: [
     /* @__PURE__ */ jsx7(Heading2, { size: "xl", children: t("AbpAccount::ManageYourAccount") || "Manage Your Account" }),
     /* @__PURE__ */ jsxs6(
@@ -1141,23 +1225,23 @@ function RegisterForm({
 RegisterForm.authWrapperKey = eAccountComponents.AuthWrapper;
 
 // src/pages/LoginPage.tsx
-import { Container as Container5, Center } from "@chakra-ui/react";
+import { Container as Container5, Center as Center2 } from "@chakra-ui/react";
 import { jsx as jsx9 } from "react/jsx-runtime";
 function LoginPage({
   maxWidth = "container.sm",
   ...loginFormProps
 }) {
-  return /* @__PURE__ */ jsx9(Container5, { maxW: maxWidth, py: 10, children: /* @__PURE__ */ jsx9(Center, { children: /* @__PURE__ */ jsx9(LoginForm, { ...loginFormProps }) }) });
+  return /* @__PURE__ */ jsx9(Container5, { maxW: maxWidth, py: 10, children: /* @__PURE__ */ jsx9(Center2, { children: /* @__PURE__ */ jsx9(LoginForm, { ...loginFormProps }) }) });
 }
 
 // src/pages/RegisterPage.tsx
-import { Container as Container6, Center as Center2 } from "@chakra-ui/react";
+import { Container as Container6, Center as Center3 } from "@chakra-ui/react";
 import { jsx as jsx10 } from "react/jsx-runtime";
 function RegisterPage({
   maxWidth = "container.sm",
   ...registerFormProps
 }) {
-  return /* @__PURE__ */ jsx10(Container6, { maxW: maxWidth, py: 10, children: /* @__PURE__ */ jsx10(Center2, { children: /* @__PURE__ */ jsx10(RegisterForm, { ...registerFormProps }) }) });
+  return /* @__PURE__ */ jsx10(Container6, { maxW: maxWidth, py: 10, children: /* @__PURE__ */ jsx10(Center3, { children: /* @__PURE__ */ jsx10(RegisterForm, { ...registerFormProps }) }) });
 }
 
 // src/routes/index.ts
@@ -1172,6 +1256,7 @@ export {
   AccountProvider,
   AccountService,
   AuthWrapper,
+  AuthenticationFlowGuard,
   ChangePasswordForm,
   DEFAULT_REDIRECT_URL,
   LoginForm,
@@ -1182,6 +1267,7 @@ export {
   RegisterPage,
   TenantBox,
   accountOptionsFactory,
+  authenticationFlowGuard,
   configureRoutes,
   eAccountComponents,
   eAccountRouteNames,
@@ -1189,6 +1275,7 @@ export {
   useAccountContext,
   useAccountOptions,
   useAccountService,
+  useAuthenticationFlowGuard,
   usePasswordFlow,
   useSelfRegistrationEnabled
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abpjs/account",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "ABP Framework Account module for React - Translation of @abp/ng.account",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -53,11 +53,11 @@
     "react-redux": "^9.0.0",
     "zod": "^3.22.0",
     "react-icons": "^5.0.0",
-    "@abpjs/core": "3.0.0",
-    "@abpjs/theme-shared": "3.0.0"
+    "@abpjs/core": "3.1.0",
+    "@abpjs/theme-shared": "3.1.0"
   },
   "devDependencies": {
-    "@abp/ng.account": "3.0.0",
+    "@abp/ng.account": "3.1.0",
     "@reduxjs/toolkit": "^2.0.0",
     "@testing-library/jest-dom": "^6.4.0",
     "@testing-library/react": "^14.2.0",