[Native Auth] Introduce the stateType property in state classes for the type detection (#8090)

Introduce a new property stateType in all state classes for avoid the
circular dependency issue which may happen in some scenarios.

Author: shenj

change/@azure-msal-browser-9da6f95d-2104-4ad8-9931-5ee8cd221505.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Introduce the stateType property in state classes for the type detection #8090",
+  "packageName": "@azure/msal-browser",
+  "email": "shen.jian@live.com",
+  "dependentChangeType": "patch"
+}

lib/msal-browser/src/custom_auth/core/auth_flow/AuthFlowState.ts

@@ -19,7 +19,12 @@ export interface AuthFlowActionRequiredStateParameters {
 /**
  * Base class for the state of an authentication flow.
  */
-export abstract class AuthFlowStateBase {}
+export abstract class AuthFlowStateBase {
+    /**
+     * The type of the state.
+     */
+    abstract stateType: string;
+}
 
 /**
  * Base class for the action requried state in an authentication flow.

lib/msal-browser/src/custom_auth/core/auth_flow/AuthFlowStateTypes.ts

@@ -0,0 +1,60 @@
+/*
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+// Sign in state types
+export const SIGN_IN_CODE_REQUIRED_STATE_TYPE = "SignInCodeRequiredState";
+export const SIGN_IN_PASSWORD_REQUIRED_STATE_TYPE =
+    "SignInPasswordRequiredState";
+export const SIGN_IN_CONTINUATION_STATE_TYPE = "SignInContinuationState";
+export const SIGN_IN_COMPLETED_STATE_TYPE = "SignInCompletedState";
+export const SIGN_IN_FAILED_STATE_TYPE = "SignInFailedState";
+
+// Sign up state types
+export const SIGN_UP_CODE_REQUIRED_STATE_TYPE = "SignUpCodeRequiredState";
+export const SIGN_UP_PASSWORD_REQUIRED_STATE_TYPE =
+    "SignUpPasswordRequiredState";
+export const SIGN_UP_ATTRIBUTES_REQUIRED_STATE_TYPE =
+    "SignUpAttributesRequiredState";
+export const SIGN_UP_COMPLETED_STATE_TYPE = "SignUpCompletedState";
+export const SIGN_UP_FAILED_STATE_TYPE = "SignUpFailedState";
+
+// Reset password state types
+export const RESET_PASSWORD_CODE_REQUIRED_STATE_TYPE =
+    "ResetPasswordCodeRequiredState";
+export const RESET_PASSWORD_PASSWORD_REQUIRED_STATE_TYPE =
+    "ResetPasswordPasswordRequiredState";
+export const RESET_PASSWORD_COMPLETED_STATE_TYPE =
+    "ResetPasswordCompletedState";
+export const RESET_PASSWORD_FAILED_STATE_TYPE = "ResetPasswordFailedState";
+
+// Get account state types
+export const GET_ACCOUNT_COMPLETED_STATE_TYPE = "GetAccountCompletedState";
+export const GET_ACCOUNT_FAILED_STATE_TYPE = "GetAccountFailedState";
+
+// Get access token state types
+export const GET_ACCESS_TOKEN_COMPLETED_STATE_TYPE =
+    "GetAccessTokenCompletedState";
+export const GET_ACCESS_TOKEN_FAILED_STATE_TYPE = "GetAccessTokenFailedState";
+
+// Sign out state types
+export const SIGN_OUT_COMPLETED_STATE_TYPE = "SignOutCompletedState";
+export const SIGN_OUT_FAILED_STATE_TYPE = "SignOutFailedState";
+
+// MFA state types
+export const MFA_AWAITING_STATE_TYPE = "MfaAwaitingState";
+export const MFA_VERIFICATION_REQUIRED_STATE_TYPE =
+    "MfaVerificationRequiredState";
+export const MFA_COMPLETED_STATE_TYPE = "MfaCompletedState";
+export const MFA_FAILED_STATE_TYPE = "MfaFailedState";
+
+// Auth method registration (JIT) state types
+export const AUTH_METHOD_REGISTRATION_REQUIRED_STATE_TYPE =
+    "AuthMethodRegistrationRequiredState";
+export const AUTH_METHOD_VERIFICATION_REQUIRED_STATE_TYPE =
+    "AuthMethodVerificationRequiredState";
+export const AUTH_METHOD_REGISTRATION_COMPLETED_STATE_TYPE =
+    "AuthMethodRegistrationCompletedState";
+export const AUTH_METHOD_REGISTRATION_FAILED_STATE_TYPE =
+    "AuthMethodRegistrationFailedState";

lib/msal-browser/src/custom_auth/core/auth_flow/jit/result/AuthMethodRegistrationChallengeMethodResult.ts

@@ -9,6 +9,11 @@ import type { AuthMethodVerificationRequiredState } from "../state/AuthMethodReg
 import { CustomAuthAccountData } from "../../../../get_account/auth_flow/CustomAuthAccountData.js";
 import { AuthMethodRegistrationCompletedState } from "../state/AuthMethodRegistrationCompletedState.js";
 import { AuthMethodRegistrationFailedState } from "../state/AuthMethodRegistrationFailedState.js";
+import {
+    AUTH_METHOD_VERIFICATION_REQUIRED_STATE_TYPE,
+    AUTH_METHOD_REGISTRATION_COMPLETED_STATE_TYPE,
+    AUTH_METHOD_REGISTRATION_FAILED_STATE_TYPE,
+} from "../../AuthFlowStateTypes.js";
 
 /**
  * Result of challenging an authentication method for registration.
@@ -41,10 +46,12 @@ export class AuthMethodRegistrationChallengeMethodResult extends AuthFlowResultB
      * @returns true if verification is required, false otherwise.
      * @warning This API is experimental. It may be changed in the future without notice. Do not use in production applications.
      */
-    isVerificationRequired(): boolean {
+    isVerificationRequired(): this is AuthMethodRegistrationChallengeMethodResult & {
+        state: AuthMethodVerificationRequiredState;
+    } {
         return (
-            this.state.constructor?.name ===
-            "AuthMethodVerificationRequiredState"
+            this.state.stateType ===
+            AUTH_METHOD_VERIFICATION_REQUIRED_STATE_TYPE
         );
     }
 
@@ -53,10 +60,12 @@ export class AuthMethodRegistrationChallengeMethodResult extends AuthFlowResultB
      * @returns true if registration is completed, false otherwise.
      * @warning This API is experimental. It may be changed in the future without notice. Do not use in production applications.
      */
-    isCompleted(): boolean {
+    isCompleted(): this is AuthMethodRegistrationChallengeMethodResult & {
+        state: AuthMethodRegistrationCompletedState;
+    } {
         return (
-            this.state.constructor?.name ===
-            "AuthMethodRegistrationCompletedState"
+            this.state.stateType ===
+            AUTH_METHOD_REGISTRATION_COMPLETED_STATE_TYPE
         );
     }
 
@@ -65,8 +74,12 @@ export class AuthMethodRegistrationChallengeMethodResult extends AuthFlowResultB
      * @returns true if the result is failed, false otherwise.
      * @warning This API is experimental. It may be changed in the future without notice. Do not use in production applications.
      */
-    isFailed(): boolean {
-        return this.state instanceof AuthMethodRegistrationFailedState;
+    isFailed(): this is AuthMethodRegistrationChallengeMethodResult & {
+        state: AuthMethodRegistrationFailedState;
+    } {
+        return (
+            this.state.stateType === AUTH_METHOD_REGISTRATION_FAILED_STATE_TYPE
+        );
     }
 }
 

lib/msal-browser/src/custom_auth/core/auth_flow/jit/result/AuthMethodRegistrationSubmitChallengeResult.ts

@@ -8,6 +8,10 @@ import { AuthMethodRegistrationSubmitChallengeError } from "../error_type/AuthMe
 import { CustomAuthAccountData } from "../../../../get_account/auth_flow/CustomAuthAccountData.js";
 import { AuthMethodRegistrationFailedState } from "../state/AuthMethodRegistrationFailedState.js";
 import { AuthMethodRegistrationCompletedState } from "../state/AuthMethodRegistrationCompletedState.js";
+import {
+    AUTH_METHOD_REGISTRATION_COMPLETED_STATE_TYPE,
+    AUTH_METHOD_REGISTRATION_FAILED_STATE_TYPE,
+} from "../../AuthFlowStateTypes.js";
 
 /**
  * Result of submitting a challenge for authentication method registration.
@@ -39,10 +43,12 @@ export class AuthMethodRegistrationSubmitChallengeResult extends AuthFlowResultB
      * @returns true if registration is completed, false otherwise.
      * @warning This API is experimental. It may be changed in the future without notice. Do not use in production applications.
      */
-    isCompleted(): boolean {
+    isCompleted(): this is AuthMethodRegistrationSubmitChallengeResult & {
+        state: AuthMethodRegistrationCompletedState;
+    } {
         return (
-            this.state.constructor?.name ===
-            "AuthMethodRegistrationCompletedState"
+            this.state.stateType ===
+            AUTH_METHOD_REGISTRATION_COMPLETED_STATE_TYPE
         );
     }
 
@@ -51,8 +57,12 @@ export class AuthMethodRegistrationSubmitChallengeResult extends AuthFlowResultB
      * @returns true if the result is failed, false otherwise.
      * @warning This API is experimental. It may be changed in the future without notice. Do not use in production applications.
      */
-    isFailed(): boolean {
-        return this.state instanceof AuthMethodRegistrationFailedState;
+    isFailed(): this is AuthMethodRegistrationSubmitChallengeResult & {
+        state: AuthMethodRegistrationFailedState;
+    } {
+        return (
+            this.state.stateType === AUTH_METHOD_REGISTRATION_FAILED_STATE_TYPE
+        );
     }
 }
 

lib/msal-browser/src/custom_auth/core/auth_flow/jit/state/AuthMethodRegistrationCompletedState.ts

@@ -4,5 +4,14 @@
  */
 
 import { AuthFlowStateBase } from "../../AuthFlowState.js";
+import { AUTH_METHOD_REGISTRATION_COMPLETED_STATE_TYPE } from "../../AuthFlowStateTypes.js";
 
-export class AuthMethodRegistrationCompletedState extends AuthFlowStateBase {}
+/**
+ * State indicating that the auth method registration flow has completed successfully.
+ */
+export class AuthMethodRegistrationCompletedState extends AuthFlowStateBase {
+    /**
+     * The type of the state.
+     */
+    stateType = AUTH_METHOD_REGISTRATION_COMPLETED_STATE_TYPE;
+}

lib/msal-browser/src/custom_auth/core/auth_flow/jit/state/AuthMethodRegistrationFailedState.ts

@@ -4,5 +4,14 @@
  */
 
 import { AuthFlowStateBase } from "../../AuthFlowState.js";
+import { AUTH_METHOD_REGISTRATION_FAILED_STATE_TYPE } from "../../AuthFlowStateTypes.js";
 
-export class AuthMethodRegistrationFailedState extends AuthFlowStateBase {}
+/**
+ * State indicating that the auth method registration flow has failed.
+ */
+export class AuthMethodRegistrationFailedState extends AuthFlowStateBase {
+    /**
+     * The type of the state.
+     */
+    stateType = AUTH_METHOD_REGISTRATION_FAILED_STATE_TYPE;
+}

lib/msal-browser/src/custom_auth/core/auth_flow/jit/state/AuthMethodRegistrationState.ts

@@ -25,6 +25,10 @@ import { GrantType } from "../../../../CustomAuthConstants.js";
 import { AuthMethodRegistrationChallengeMethodResult } from "../result/AuthMethodRegistrationChallengeMethodResult.js";
 import { AuthMethodRegistrationSubmitChallengeResult } from "../result/AuthMethodRegistrationSubmitChallengeResult.js";
 import { AuthMethodRegistrationCompletedState } from "./AuthMethodRegistrationCompletedState.js";
+import {
+    AUTH_METHOD_REGISTRATION_REQUIRED_STATE_TYPE,
+    AUTH_METHOD_VERIFICATION_REQUIRED_STATE_TYPE,
+} from "../../AuthFlowStateTypes.js";
 
 /**
  * Abstract base class for authentication method registration states.
@@ -134,6 +138,11 @@ abstract class AuthMethodRegistrationState<
  * State indicating that authentication method registration is required.
  */
 export class AuthMethodRegistrationRequiredState extends AuthMethodRegistrationState<AuthMethodRegistrationRequiredStateParameters> {
+    /**
+     * The type of the state.
+     */
+    stateType = AUTH_METHOD_REGISTRATION_REQUIRED_STATE_TYPE;
+
     /**
      * Gets the available authentication methods for registration.
      * @returns Array of available authentication methods.
@@ -160,6 +169,11 @@ export class AuthMethodRegistrationRequiredState extends AuthMethodRegistrationS
  * State indicating that verification is required for the challenged authentication method.
  */
 export class AuthMethodVerificationRequiredState extends AuthMethodRegistrationState<AuthMethodVerificationRequiredStateParameters> {
+    /**
+     * The type of the state.
+     */
+    stateType = AUTH_METHOD_VERIFICATION_REQUIRED_STATE_TYPE;
+
     /**
      * Gets the length of the expected verification code.
      * @returns The code length.

lib/msal-browser/src/custom_auth/core/auth_flow/mfa/result/MfaRequestChallengeResult.ts

@@ -7,6 +7,10 @@ import { AuthFlowResultBase } from "../../AuthFlowResultBase.js";
 import { MfaRequestChallengeError } from "../error_type/MfaError.js";
 import { MfaFailedState } from "../state/MfaFailedState.js";
 import type { MfaVerificationRequiredState } from "../state/MfaState.js";
+import {
+    MFA_VERIFICATION_REQUIRED_STATE_TYPE,
+    MFA_FAILED_STATE_TYPE,
+} from "../../AuthFlowStateTypes.js";
 
 /**
  * Result of requesting an MFA challenge.
@@ -34,17 +38,21 @@ export class MfaRequestChallengeResult extends AuthFlowResultBase<
      * @returns true if verification is required, false otherwise.
      * @warning This API is experimental. It may be changed in the future without notice. Do not use in production applications.
      */
-    isVerificationRequired(): boolean {
-        return this.state.constructor?.name === "MfaVerificationRequiredState";
+    isVerificationRequired(): this is MfaRequestChallengeResult & {
+        state: MfaVerificationRequiredState;
+    } {
+        return this.state.stateType === MFA_VERIFICATION_REQUIRED_STATE_TYPE;
     }
 
     /**
      * Checks if the result is in a failed state.
      * @returns true if the result is failed, false otherwise.
      * @warning This API is experimental. It may be changed in the future without notice. Do not use in production applications.
      */
-    isFailed(): boolean {
-        return this.state instanceof MfaFailedState;
+    isFailed(): this is MfaRequestChallengeResult & {
+        state: MfaFailedState;
+    } {
+        return this.state.stateType === MFA_FAILED_STATE_TYPE;
     }
 }
 

lib/msal-browser/src/custom_auth/core/auth_flow/mfa/result/MfaSubmitChallengeResult.ts

@@ -8,6 +8,10 @@ import { MfaSubmitChallengeError } from "../error_type/MfaError.js";
 import { CustomAuthAccountData } from "../../../../get_account/auth_flow/CustomAuthAccountData.js";
 import { MfaCompletedState } from "../state/MfaCompletedState.js";
 import { MfaFailedState } from "../state/MfaFailedState.js";
+import {
+    MFA_COMPLETED_STATE_TYPE,
+    MFA_FAILED_STATE_TYPE,
+} from "../../AuthFlowStateTypes.js";
 
 /**
  * Result of submitting an MFA challenge.
@@ -35,17 +39,21 @@ export class MfaSubmitChallengeResult extends AuthFlowResultBase<
      * @returns true if completed, false otherwise.
      * @warning This API is experimental. It may be changed in the future without notice. Do not use in production applications.
      */
-    isCompleted(): boolean {
-        return this.state instanceof MfaCompletedState;
+    isCompleted(): this is MfaSubmitChallengeResult & {
+        state: MfaCompletedState;
+    } {
+        return this.state.stateType === MFA_COMPLETED_STATE_TYPE;
     }
 
     /**
      * Checks if the result is in a failed state.
      * @returns true if the result is failed, false otherwise.
      * @warning This API is experimental. It may be changed in the future without notice. Do not use in production applications.
      */
-    isFailed(): boolean {
-        return this.state instanceof MfaFailedState;
+    isFailed(): this is MfaSubmitChallengeResult & {
+        state: MfaFailedState;
+    } {
+        return this.state.stateType === MFA_FAILED_STATE_TYPE;
     }
 }