diff --git a/web/src/auth/LoginPage.js b/web/src/auth/LoginPage.js
index 5f315f23..a7f862d6 100644
--- a/web/src/auth/LoginPage.js
+++ b/web/src/auth/LoginPage.js
@@ -337,7 +337,7 @@ class LoginPage extends React.Component {
       const casParams = Util.getCasParameters();
       values["type"] = this.state.type;
       AuthBackend.loginCas(values, casParams).then((res) => {
-        if (res.status === "ok") {
+        const loginHandler = (res) => {
           let msg = "Logged in successfully. ";
           if (casParams.service === "") {
             // If service was not specified, Casdoor must display a message notifying the client that it has successfully initiated a single sign-on session.
@@ -351,6 +351,28 @@ class LoginPage extends React.Component {
             newUrl.searchParams.append("ticket", st);
             window.location.href = newUrl.toString();
           }
+        };
+
+        if (res.status === "ok") {
+          if (res.data === NextMfa) {
+            this.setState({
+              getVerifyTotp: () => {
+                return (
+                  <MfaAuthVerifyForm
+                    mfaProps={res.data2}
+                    formValues={values}
+                    authParams={casParams}
+                    application={this.getApplicationObj()}
+                    onFail={() => {
+                      Setting.showMessage("error", i18next.t("mfa:Verification failed"));
+                    }}
+                    onSuccess={(res) => loginHandler(res)}
+                  />);
+              },
+            });
+          } else {
+            loginHandler(res);
+          }
         } else {
           Setting.showMessage("error", `${i18next.t("application:Failed to sign in")}: ${res.msg}`);
         }
@@ -361,7 +383,7 @@ class LoginPage extends React.Component {
       this.populateOauthValues(values);
       AuthBackend.login(values, oAuthParams)
         .then((res) => {
-          const callback = (res) => {
+          const loginHandler = (res) => {
             const responseType = values["type"];
 
             if (responseType === "login") {
@@ -396,12 +418,12 @@ class LoginPage extends React.Component {
                     <MfaAuthVerifyForm
                       mfaProps={res.data2}
                       formValues={values}
-                      oAuthParams={oAuthParams}
+                      authParams={oAuthParams}
                       application={this.getApplicationObj()}
                       onFail={() => {
                         Setting.showMessage("error", i18next.t("mfa:Verification failed"));
                       }}
-                      onSuccess={(res) => callback(res)}
+                      onSuccess={(res) => loginHandler(res)}
                     />);
                 },
               });
@@ -414,7 +436,7 @@ class LoginPage extends React.Component {
               const sub = res.data2;
               Setting.goToLink(`/buy-plan/${sub.owner}/${sub.pricing}/result?subscription=${sub.name}`);
             } else {
-              callback(res);
+              loginHandler(res);
             }
           } else {
             Setting.showMessage("error", `${i18next.t("application:Failed to sign in")}: ${res.msg}`);
diff --git a/web/src/auth/mfa/MfaAuthVerifyForm.js b/web/src/auth/mfa/MfaAuthVerifyForm.js
index e7971a69..f2ad9e09 100644
--- a/web/src/auth/mfa/MfaAuthVerifyForm.js
+++ b/web/src/auth/mfa/MfaAuthVerifyForm.js
@@ -24,7 +24,7 @@ import MfaVerifyTotpForm from "./MfaVerifyTotpForm";
 export const NextMfa = "NextMfa";
 export const RequiredMfa = "RequiredMfa";
 
-export function MfaAuthVerifyForm({formValues, oAuthParams, mfaProps, application, onSuccess, onFail}) {
+export function MfaAuthVerifyForm({formValues, authParams, mfaProps, application, onSuccess, onFail}) {
   formValues.password = "";
   formValues.username = "";
   const [loading, setLoading] = useState(false);
@@ -34,7 +34,8 @@ export function MfaAuthVerifyForm({formValues, oAuthParams, mfaProps, applicatio
   const verify = ({passcode}) => {
     setLoading(true);
     const values = {...formValues, passcode, mfaType};
-    AuthBackend.login(values, oAuthParams).then((res) => {
+    const loginFunction = formValues.type === "cas" ? AuthBackend.loginCas : AuthBackend.login;
+    loginFunction(values, authParams).then((res) => {
       if (res.status === "ok") {
         onSuccess(res);
       } else {
@@ -49,7 +50,9 @@ export function MfaAuthVerifyForm({formValues, oAuthParams, mfaProps, applicatio
 
   const recover = () => {
     setLoading(true);
-    AuthBackend.login({...formValues, recoveryCode}, oAuthParams).then(res => {
+    const values = {...formValues, recoveryCode};
+    const loginFunction = formValues.type === "cas" ? AuthBackend.loginCas : AuthBackend.login;
+    loginFunction(values, authParams).then((res) => {
       if (res.status === "ok") {
         onSuccess(res);
       } else {