diff --git a/web/client/codechecker_client/helpers/authentication.py b/web/client/codechecker_client/helpers/authentication.py
index b0226b61a7..484234f816 100644
--- a/web/client/codechecker_client/helpers/authentication.py
+++ b/web/client/codechecker_client/helpers/authentication.py
@@ -48,6 +48,10 @@ def performLogin(self, auth_method, auth_string):
     def createLink(self, provider):
         pass
 
+    @thrift_client_call
+    def getOauthProviders(self):
+        pass
+
     @thrift_client_call
     def destroySession(self):
         pass
diff --git a/web/requirements.txt b/web/requirements.txt
index 157ddb4a7d..b827484521 100644
--- a/web/requirements.txt
+++ b/web/requirements.txt
@@ -9,8 +9,6 @@ gitpython==3.1.41
 PyYAML==6.0.1
 types-PyYAML==6.0.12.12
 sarif-tools==1.0.0
-Authlib==1.3.1
-requests==2.32.3
 
 ./api/py/codechecker_api/dist/codechecker_api.tar.gz
 ./api/py/codechecker_api_shared/dist/codechecker_api_shared.tar.gz
diff --git a/web/requirements_py/auth/requirements.txt b/web/requirements_py/auth/requirements.txt
index eceacddcef..593b26a246 100644
--- a/web/requirements_py/auth/requirements.txt
+++ b/web/requirements_py/auth/requirements.txt
@@ -1,2 +1,4 @@
 python-ldap==3.4.0
 python-pam==1.8.4
+Authlib==1.3.1
+requests==2.32.3
diff --git a/web/server/vue-cli/src/views/Login.vue b/web/server/vue-cli/src/views/Login.vue
index 8026ecf273..64364e1ea1 100644
--- a/web/server/vue-cli/src/views/Login.vue
+++ b/web/server/vue-cli/src/views/Login.vue
@@ -70,21 +70,52 @@
             >
               Login
             </v-btn>
-            <v-btn 
-              v-for="provider in providers"
-              :id="login-btn-{provider}"
-              :key="provider"
+            <v-btn
               block
               x-large
               color="primary"
-              @click="oauth(provider)"
+              @click="openModal"
             >
-              Login with {{ provider }}
+              OAuth login
             </v-btn>
           </v-card-actions>
         </v-card>
       </v-col>
     </v-row>
+    <v-dialog
+      v-model="dialog"
+      width="500"
+      :scrollable="true"
+    >
+      <v-card>
+        <v-card-title
+          class="headline primary white--text"
+          primary-title
+        >
+          OAuth Login Methods
+
+          <v-spacer />
+
+          <v-btn icon dark @click="dialog = false">
+            <v-icon>mdi-close</v-icon>
+          </v-btn>
+        </v-card-title>
+        <v-card-text>
+          <v-btn
+            v-for="provider in providers"
+            :id="login-btn-{provider}"
+            :key="provider"
+            block
+            x-large
+            color="primary"
+            style="margin-top: 10px"
+            @click="oauth(provider)"
+          >
+            Login with {{ provider }}
+          </v-btn>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
   </v-container>
 </template>
 
@@ -109,7 +140,10 @@ export default {
       error: false,
       errorMsg: null,
       valid: false,
-      providers: []
+      providers: [],
+      dialog: false,
+      on: false,
+      test : "GFGDFG"
     };
   },
 
@@ -141,6 +175,10 @@ export default {
   },
 
   methods: {
+    openModal() {
+      this.dialog = true;
+      this.on = true;
+    },
     login() {
       if (!this.valid) return;
 
@@ -158,16 +196,10 @@ export default {
         });
     },
     detectCallback() {
-      const url = new URL(window.location.href);
-      let code = null, state = null;
-
-      code = url.searchParams.get("code");
-      state = url.searchParams.get("state");
-
-      const provider = document.cookie.split(";").find(
-        c => c.includes("oauth_provider")).split("=")[1];
+      const url = this.$route.query;
+      const provider = localStorage.getItem("oauth_provider");
 
-      if (code != null && state != null) {
+      if (url.code != null && url.state != null) {
         this.$store
           .dispatch(LOGIN, {
             type: "oauth",
@@ -204,7 +236,7 @@ export default {
     },
     oauth(provider) {
       new Promise(resolve => {
-        document.cookie = `oauth_provider=${provider}; path=*`;
+        localStorage.setItem("oauth_provider", provider);
         // console output the provider for debugging
         authService.getClient().createLink(provider,
           handleThriftError(url => {