diff --git a/web/src/App.js b/web/src/App.js
index 013a2e9a..1696d6a9 100644
--- a/web/src/App.js
+++ b/web/src/App.js
@@ -45,6 +45,7 @@ class App extends Component {
     };
 
     Setting.initServerUrl();
+    Setting.initClientUrl();
   }
 
   componentWillMount() {
diff --git a/web/src/CustomGithubCorner.js b/web/src/CustomGithubCorner.js
index 23c00e05..06d8c0c2 100644
--- a/web/src/CustomGithubCorner.js
+++ b/web/src/CustomGithubCorner.js
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import React from "react";
-import * as Conf from "./Conf"
+import * as Conf from "./common/Conf"
 import GithubCorner from "react-github-corner";
 
 class CustomGithubCorner extends React.Component {
diff --git a/web/src/Face.js b/web/src/Face.js
index 3445dfbd..9c56d4aa 100644
--- a/web/src/Face.js
+++ b/web/src/Face.js
@@ -18,6 +18,7 @@ import {LockOutlined, UserOutlined} from "@ant-design/icons";
 import * as ApplicationBackend from "./backend/ApplicationBackend";
 import * as AccountBackend from "./backend/AccountBackend";
 import * as Setting from "./Setting";
+import * as Auth from "./common/Auth";
 
 class Face extends React.Component {
   constructor(props) {
@@ -115,6 +116,11 @@ class Face extends React.Component {
             No account yet, <a href="/register">sign up now</a>
           </div>
         </Form.Item>
+        <Form.Item>
+          <img width={30} height={30} src={Auth.GithubAuthLogo} alt={"GitHub"}
+               style={{cursor: "pointer"}} onClick={() => Auth.getGithubAuthCode("signup")}
+          />
+        </Form.Item>
       </Form>
     );
   }
diff --git a/web/src/Setting.js b/web/src/Setting.js
index f4760602..cbaf49ca 100644
--- a/web/src/Setting.js
+++ b/web/src/Setting.js
@@ -16,15 +16,25 @@ import {message} from "antd";
 import React from "react";
 import {isMobile as isMobileDevice} from "react-device-detect";
 
-export let ServerUrl = '';
+export let ServerUrl = "";
+export let ClientUrl = "";
 
 export function initServerUrl() {
   const hostname = window.location.hostname;
-  if (hostname === 'localhost') {
+  if (hostname === "localhost") {
     ServerUrl = `http://${hostname}:8000`;
   }
 }
 
+export function initClientUrl() {
+  const hostname = window.location.hostname;
+  if (hostname === "localhost") {
+    ClientUrl = `http://${hostname}:7001`;
+  } else {
+    ClientUrl = `https://${hostname}`;
+  }
+}
+
 export function parseJson(s) {
   if (s === "") {
     return null;
diff --git a/web/src/common/Auth.js b/web/src/common/Auth.js
new file mode 100644
index 00000000..5d7286fa
--- /dev/null
+++ b/web/src/common/Auth.js
@@ -0,0 +1,50 @@
+// 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 * as Setting from "../Setting";
+
+export const GoogleClientId  = "";
+export const GithubClientId  = "";
+export const QqClientId  = "";
+export const WechatClientId  = "";
+
+export const GoogleAuthScope  = "profile+email"
+export const GoogleAuthUri = "https://accounts.google.com/signin/oauth";
+export const GoogleAuthLogo = "https://cdn.jsdelivr.net/gh/casbin/static/img/social_google.png";
+export const GithubAuthScope  = "user:email+read:user"
+export const GithubAuthUri = "https://github.com/login/oauth/authorize";
+export const GithubAuthLogo = "https://cdn.jsdelivr.net/gh/casbin/static/img/social_github.png";
+export const QqAuthScope  = "get_user_info"
+export const QqAuthUri = "https://graph.qq.com/oauth2.0/authorize";
+export const QqAuthLogo = "https://cdn.jsdelivr.net/gh/casbin/static/img/social_qq.png";
+export const WeChatAuthScope = "snsapi_login"
+export const WeChatAuthUri = "https://open.weixin.qq.com/connect/qrconnect";
+export const WeChatAuthLogo = "https://cdn.jsdelivr.net/gh/casbin/static/img/social_wechat.png";
+export const AuthState = "casdoor";
+
+export function getGoogleAuthCode(method) {
+  window.location.href = `${GoogleAuthUri}?client_id=${GoogleClientId}&redirect_uri=${Setting.ClientUrl}/callback/google/${method}&scope=${GoogleAuthScope}&response_type=code&state=${AuthState}`;
+}
+
+export function getGithubAuthCode(method) {
+  window.location.href = `${GithubAuthUri}?client_id=${GithubClientId}&redirect_uri=${Setting.ClientUrl}/callback/github/${method}&scope=${GithubAuthScope}&response_type=code&state=${AuthState}`;
+}
+
+export function getQqAuthCode(method) {
+  window.location.href = `${QqAuthUri}?client_id=${QqClientId}&redirect_uri=${Setting.ClientUrl}/callback/qq/${method}&scope=${QqAuthScope}&response_type=code&state=${AuthState}`;
+}
+
+export function getWeChatAuthCode(method) {
+  window.location.href = `${WeChatAuthUri}?appid=${WechatClientId}&redirect_uri=${Setting.ClientUrl}/callback/wechat/${method}&scope=${WeChatAuthScope}&response_type=code&state=${AuthState}#wechat_redirect`;
+}
diff --git a/web/src/Conf.js b/web/src/common/Conf.js
similarity index 100%
rename from web/src/Conf.js
rename to web/src/common/Conf.js