diff --git a/controllers/auth.go b/controllers/auth.go
index 65afbe2e..128c4a0a 100644
--- a/controllers/auth.go
+++ b/controllers/auth.go
@@ -341,8 +341,15 @@ func (c *ApiController) Login() {
 			}
 		}
 	} else {
-		c.ResponseError(fmt.Sprintf("unknown authentication type (not password or provider), form = %s", util.StructToJson(form)))
-		return
+		if c.GetSessionUsername() != "" {
+			// user already signed in to Casdoor, so let the user click the avatar button to do the quick sign-in
+			application := object.GetApplication(fmt.Sprintf("admin/%s", form.Application))
+			user := c.getCurrentUser()
+			resp = c.HandleLoggedIn(application, user, &form)
+		} else {
+			c.ResponseError(fmt.Sprintf("unknown authentication type (not password or provider), form = %s", util.StructToJson(form)))
+			return
+		}
 	}
 
 	c.Data["json"] = resp
diff --git a/web/src/App.js b/web/src/App.js
index 5ffb3d4c..2be9e8d9 100644
--- a/web/src/App.js
+++ b/web/src/App.js
@@ -529,11 +529,11 @@ class App extends Component {
     if (this.isDoorPages()) {
       return (
         <Switch>
-          <Route exact path="/signup" render={(props) => this.renderHomeIfLoggedIn(<SignupPage {...props} />)}/>
-          <Route exact path="/signup/:applicationName" render={(props) => this.renderHomeIfLoggedIn(<SignupPage {...props} onUpdateAccount={(account) => {this.onUpdateAccount(account)}} />)}/>
-          <Route exact path="/login" render={(props) => this.renderHomeIfLoggedIn(<SelfLoginPage {...props} />)}/>
-          <Route exact path="/signup/oauth/authorize" render={(props) => <LoginPage type={"code"} mode={"signup"} {...props} onUpdateAccount={(account) => {this.onUpdateAccount(account)}} />}/>
-          <Route exact path="/login/oauth/authorize" render={(props) => <LoginPage type={"code"} mode={"signin"} {...props} onUpdateAccount={(account) => {this.onUpdateAccount(account)}} />}/>
+          <Route exact path="/signup" render={(props) => this.renderHomeIfLoggedIn(<SignupPage account={this.state.account} {...props} />)}/>
+          <Route exact path="/signup/:applicationName" render={(props) => this.renderHomeIfLoggedIn(<SignupPage account={this.state.account} {...props} onUpdateAccount={(account) => {this.onUpdateAccount(account)}} />)}/>
+          <Route exact path="/login" render={(props) => this.renderHomeIfLoggedIn(<SelfLoginPage account={this.state.account} {...props} />)}/>
+          <Route exact path="/signup/oauth/authorize" render={(props) => <LoginPage account={this.state.account} type={"code"} mode={"signup"} {...props} onUpdateAccount={(account) => {this.onUpdateAccount(account)}} />}/>
+          <Route exact path="/login/oauth/authorize" render={(props) => <LoginPage account={this.state.account} type={"code"} mode={"signin"} {...props} onUpdateAccount={(account) => {this.onUpdateAccount(account)}} />}/>
           <Route exact path="/callback" component={AuthCallback}/>
           <Route exact path="/forget" render={(props) => this.renderHomeIfLoggedIn(<SelfForgetPage {...props} />)}/>
           <Route exact path="/forget/:applicationName" render={(props) => this.renderHomeIfLoggedIn(<ForgetPage {...props} />)}/>
diff --git a/web/src/auth/LoginPage.js b/web/src/auth/LoginPage.js
index 875c15c8..9a9d401f 100644
--- a/web/src/auth/LoginPage.js
+++ b/web/src/auth/LoginPage.js
@@ -21,6 +21,7 @@ import * as ApplicationBackend from "../backend/ApplicationBackend";
 import * as Provider from "./Provider";
 import * as Util from "./Util";
 import * as Setting from "../Setting";
+import SelfLoginButton from "./SelfLoginButton";
 import {GithubLoginButton, GoogleLoginButton} from "react-social-login-buttons";
 import FacebookLoginButton from "./FacebookLoginButton";
 import QqLoginButton from "./QqLoginButton";
@@ -380,6 +381,31 @@ class LoginPage extends React.Component {
     }
   }
 
+  renderSignedInBox() {
+    if (this.props.account === undefined || this.props.account === null) {
+      return null;
+    }
+
+    return (
+      <div>
+        <div style={{fontSize: 16, textAlign: "left"}}>
+          {i18next.t("login:Continue with")}&nbsp;:
+        </div>
+        <br/>
+        <SelfLoginButton account={this.props.account} onClick={() => {
+          let values = {};
+          values["application"] = this.state.application.name;
+          this.onFinish(values);
+        }} />
+        <br/>
+        <br/>
+        <div style={{fontSize: 16, textAlign: "left"}}>
+          {i18next.t("login:Or sign in with another account")}&nbsp;:
+        </div>
+      </div>
+    )
+  }
+
   render() {
     const application = this.getApplicationObj();
     if (application === null) {
@@ -409,6 +435,9 @@ class LoginPage extends React.Component {
             {/*{*/}
             {/*  this.state.clientId !== null ? "Redirect" : null*/}
             {/*}*/}
+            {
+              this.renderSignedInBox()
+            }
             {
               this.renderForm(application)
             }
diff --git a/web/src/auth/SelfLoginButton.js b/web/src/auth/SelfLoginButton.js
new file mode 100644
index 00000000..a6d574b8
--- /dev/null
+++ b/web/src/auth/SelfLoginButton.js
@@ -0,0 +1,39 @@
+// Copyright 2021 The casbin Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from "react";
+import {createButton} from "react-social-login-buttons";
+
+class SelfLoginButton extends React.Component {
+    generateIcon() {
+        const avatar = this.props.account.avatar;
+        return () => {
+            return <img width={36} height={36} src={avatar} alt="Sign in with Google"/>;
+        };
+    }
+
+    render() {
+        const config = {
+            icon: this.generateIcon(),
+            iconFormat: name => `fa fa-${name}`,
+            style: {background: "#ffffff", color: "#000000"},
+            activeStyle: {background: "#eff0ee"},
+        };
+
+        const SelfLoginButton = createButton(config);
+        return <SelfLoginButton text={`${this.props.account.name} (${this.props.account.displayName})`} onClick={() => this.props.onClick()} align={"center"} />
+    }
+}
+
+export default SelfLoginButton;