From 21bb3c1d550d168bfa52bb04eb1dfed3b83775fb Mon Sep 17 00:00:00 2001
From: Alex Tugarev <alex@gitpod.io>
Date: Thu, 16 Nov 2023 16:53:54 +0100
Subject: [PATCH] =?UTF-8?q?Use=20AuthProviderService=20API=20in=20Dashboar?=
 =?UTF-8?q?d=20=E2=80=93=20EXP-847=20(#19057)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* convert Login.ts

* extract auth provider utils into protocol

* complete migration from useAuthProviders to  useAuthProviderDescriptions

* fixup import of scopes util

* revert rename

* migrate useDeleteOrgAuthProviderMutation

* migrate Org Git Integrations

* fix label for authprovider types

* wip migration user-level git integrations

* WIP updateProviderEntry

* wip migration

* fixup: label of auth provider types

* fixup: dont render Unknown type

* fix label

* fix this undefined

* bump CACHE_VERSION

* fixup allow to change the `clientId` only

* fixup add AuthProviderClasses to supported messages

---------

Co-authored-by: Huiwen <mhqnwt@gmail.com>
---
 components/dashboard/src/Login.tsx            |  12 +-
 .../dashboard/src/components/AuthorizeGit.tsx |  23 +-
 .../src/components/RepositoryFinder.tsx       |  10 +-
 .../auth-provider-descriptions-query.ts       |  34 +++
 .../auth-providers/auth-provider-query.ts     |  18 --
 .../create-org-auth-provider-mutation.ts      |  46 ++++
 .../create-user-auth-provider-mutation.ts     |  46 ++++
 .../delete-org-auth-provider-mutation.ts      |  18 +-
 .../delete-user-auth-provider-mutation.ts     |  47 ++++
 .../auth-providers/get-auth-provider-query.ts |  26 ++
 .../org-auth-providers-query.ts               |  20 +-
 .../update-org-auth-provider-mutation.ts      |  42 ++++
 .../update-user-auth-provider-mutation.ts     |  42 ++++
 .../upsert-org-auth-provider-mutation.ts      |  34 ---
 .../user-auth-providers-query.ts              |  38 +++
 .../src/data/git-providers/github-queries.ts  |   7 +-
 .../provider-repositories-query.ts            |   7 +-
 components/dashboard/src/data/setup.tsx       |   4 +-
 .../dashboard/src/projects/NewProject.tsx     |  38 ++-
 .../new-project/NewProjectAuthRequired.tsx    |  10 +-
 .../new-project/NewProjectRepoSelection.tsx   |   7 +-
 components/dashboard/src/provider-utils.tsx   |  22 +-
 .../service/json-rpc-authprovider-client.ts   |   8 +-
 .../GitIntegrationListItem.tsx                |  15 +-
 .../git-integrations/GitIntegrationModal.tsx  | 146 +++++++-----
 .../git-integrations/GitIntegrationsList.tsx  |   4 +-
 .../src/user-settings/AuthEntryItem.tsx       |  19 +-
 .../user-settings/IntegrationItemEntry.tsx    |  11 +-
 .../src/user-settings/Integrations.tsx        | 225 +++++++++++-------
 .../src/workspaces/CreateWorkspacePage.tsx    |  12 +-
 .../gitpod-protocol/src/auth-providers.ts     | 131 ++++++++++
 components/gitpod-protocol/src/index.ts       |   1 +
 .../server/src/auth/auth-provider-service.ts  |   8 +-
 33 files changed, 827 insertions(+), 304 deletions(-)
 create mode 100644 components/dashboard/src/data/auth-providers/auth-provider-descriptions-query.ts
 delete mode 100644 components/dashboard/src/data/auth-providers/auth-provider-query.ts
 create mode 100644 components/dashboard/src/data/auth-providers/create-org-auth-provider-mutation.ts
 create mode 100644 components/dashboard/src/data/auth-providers/create-user-auth-provider-mutation.ts
 create mode 100644 components/dashboard/src/data/auth-providers/delete-user-auth-provider-mutation.ts
 create mode 100644 components/dashboard/src/data/auth-providers/get-auth-provider-query.ts
 create mode 100644 components/dashboard/src/data/auth-providers/update-org-auth-provider-mutation.ts
 create mode 100644 components/dashboard/src/data/auth-providers/update-user-auth-provider-mutation.ts
 delete mode 100644 components/dashboard/src/data/auth-providers/upsert-org-auth-provider-mutation.ts
 create mode 100644 components/dashboard/src/data/auth-providers/user-auth-providers-query.ts
 create mode 100644 components/gitpod-protocol/src/auth-providers.ts

diff --git a/components/dashboard/src/Login.tsx b/components/dashboard/src/Login.tsx
index 3990df02bf041e..fb7c2a41142b37 100644
--- a/components/dashboard/src/Login.tsx
+++ b/components/dashboard/src/Login.tsx
@@ -4,7 +4,6 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import { AuthProviderInfo } from "@gitpod/gitpod-protocol";
 import * as GitpodCookie from "@gitpod/gitpod-protocol/lib/util/gitpod-cookie";
 import { useContext, useEffect, useState, useMemo, useCallback, FC } from "react";
 import { UserContext } from "./user-context";
@@ -18,9 +17,10 @@ import { getURLHash } from "./utils";
 import ErrorMessage from "./components/ErrorMessage";
 import { Heading1, Heading2, Subheading } from "./components/typography/headings";
 import { SSOLoginForm } from "./login/SSOLoginForm";
-import { useAuthProviders } from "./data/auth-providers/auth-provider-query";
+import { useAuthProviderDescriptions } from "./data/auth-providers/auth-provider-descriptions-query";
 import { SetupPending } from "./login/SetupPending";
 import { useNeedsSetup } from "./dedicated-setup/use-needs-setup";
+import { AuthProviderDescription } from "@gitpod/public-api/lib/gitpod/v1/authprovider_pb";
 
 export function markLoggedIn() {
     document.cookie = GitpodCookie.generateCookie(window.location.hostname);
@@ -38,7 +38,7 @@ export const Login: FC<LoginProps> = ({ onLoggedIn }) => {
 
     const urlHash = useMemo(() => getURLHash(), []);
 
-    const authProviders = useAuthProviders();
+    const authProviders = useAuthProviderDescriptions();
     const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined);
     const [hostFromContext, setHostFromContext] = useState<string | undefined>();
     const [repoPathname, setRepoPathname] = useState<string | undefined>();
@@ -58,7 +58,7 @@ export const Login: FC<LoginProps> = ({ onLoggedIn }) => {
         }
     }, [urlHash]);
 
-    let providerFromContext: AuthProviderInfo | undefined;
+    let providerFromContext: AuthProviderDescription | undefined;
     if (hostFromContext && authProviders.data) {
         providerFromContext = authProviders.data.find((provider) => provider.host === hostFromContext);
     }
@@ -158,7 +158,7 @@ export const Login: FC<LoginProps> = ({ onLoggedIn }) => {
                                             className="btn-login flex-none w-56 h-10 p-0 inline-flex rounded-xl"
                                             onClick={() => openLogin(providerFromContext!.host)}
                                         >
-                                            {iconForAuthProvider(providerFromContext.authProviderType)}
+                                            {iconForAuthProvider(providerFromContext.type)}
                                             <span className="pt-2 pb-2 mr-3 text-sm my-auto font-medium truncate overflow-ellipsis">
                                                 Continue with {simplifyProviderName(providerFromContext.host)}
                                             </span>
@@ -170,7 +170,7 @@ export const Login: FC<LoginProps> = ({ onLoggedIn }) => {
                                                 className="btn-login flex-none w-56 h-10 p-0 inline-flex rounded-xl"
                                                 onClick={() => openLogin(ap.host)}
                                             >
-                                                {iconForAuthProvider(ap.authProviderType)}
+                                                {iconForAuthProvider(ap.type)}
                                                 <span className="pt-2 pb-2 mr-3 text-sm my-auto font-medium truncate overflow-ellipsis">
                                                     Continue with {simplifyProviderName(ap.host)}
                                                 </span>
diff --git a/components/dashboard/src/components/AuthorizeGit.tsx b/components/dashboard/src/components/AuthorizeGit.tsx
index 96e945b1aa8cd9..aa8ad0c0cd1640 100644
--- a/components/dashboard/src/components/AuthorizeGit.tsx
+++ b/components/dashboard/src/components/AuthorizeGit.tsx
@@ -4,10 +4,9 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import { AuthProviderInfo } from "@gitpod/gitpod-protocol";
 import { FC, useCallback, useContext } from "react";
 import { Link } from "react-router-dom";
-import { useAuthProviders } from "../data/auth-providers/auth-provider-query";
+import { useAuthProviderDescriptions } from "../data/auth-providers/auth-provider-descriptions-query";
 import { openAuthorizeWindow } from "../provider-utils";
 import { getGitpodService } from "../service/service";
 import { UserContext, useCurrentUser } from "../user-context";
@@ -16,29 +15,29 @@ import { Heading2, Heading3, Subheading } from "./typography/headings";
 import classNames from "classnames";
 import { iconForAuthProvider, simplifyProviderName } from "../provider-utils";
 import { useIsOwner } from "../data/organizations/members-query";
+import { AuthProviderDescription } from "@gitpod/public-api/lib/gitpod/v1/authprovider_pb";
 
 export function useNeedsGitAuthorization() {
-    const authProviders = useAuthProviders();
+    const authProviders = useAuthProviderDescriptions();
     const user = useCurrentUser();
     if (!user || !authProviders.data) {
         return false;
     }
-    return !authProviders.data.some((ap) => user.identities.some((i) => ap.authProviderId === i.authProviderId));
+    return !authProviders.data.some((ap) => user.identities.some((i) => ap.id === i.authProviderId));
 }
 
 export const AuthorizeGit: FC<{ className?: string }> = ({ className }) => {
     const { setUser } = useContext(UserContext);
     const owner = useIsOwner();
-    const authProviders = useAuthProviders();
+    const { data: authProviders } = useAuthProviderDescriptions();
     const updateUser = useCallback(() => {
         getGitpodService().server.getLoggedInUser().then(setUser);
     }, [setUser]);
 
     const connect = useCallback(
-        (ap: AuthProviderInfo) => {
+        (ap: AuthProviderDescription) => {
             openAuthorizeWindow({
                 host: ap.host,
-                scopes: ap.requirements?.default,
                 overrideScopes: true,
                 onSuccess: updateUser,
             });
@@ -46,15 +45,13 @@ export const AuthorizeGit: FC<{ className?: string }> = ({ className }) => {
         [updateUser],
     );
 
-    if (authProviders.data === undefined) {
+    if (authProviders === undefined) {
         return <></>;
     }
 
-    const verifiedProviders = authProviders.data.filter((ap) => ap.verified);
-
     return (
         <div className={classNames("text-center p-4 m-4 py-10", className)}>
-            {verifiedProviders.length === 0 ? (
+            {authProviders.length === 0 ? (
                 <>
                     <Heading3 className="pb-2">No Git integrations</Heading3>
                     {!!owner ? (
@@ -82,7 +79,7 @@ export const AuthorizeGit: FC<{ className?: string }> = ({ className }) => {
                         Select one of the following available providers to access repositories for your account.
                     </Subheading>
                     <div className="flex flex-col items-center">
-                        {verifiedProviders.map((ap) => {
+                        {authProviders.map((ap) => {
                             return (
                                 <Button
                                     onClick={() => connect(ap)}
@@ -91,7 +88,7 @@ export const AuthorizeGit: FC<{ className?: string }> = ({ className }) => {
                                     className="mt-3 btn-login flex-none w-56 px-0 py-0.5 inline-flex"
                                 >
                                     <div className="flex relative -left-4 w-56">
-                                        {iconForAuthProvider(ap.authProviderType)}
+                                        {iconForAuthProvider(ap.type)}
                                         <span className="pt-2 pb-2 mr-3 text-sm my-auto font-medium truncate overflow-ellipsis">
                                             Continue with {simplifyProviderName(ap.host)}
                                         </span>
diff --git a/components/dashboard/src/components/RepositoryFinder.tsx b/components/dashboard/src/components/RepositoryFinder.tsx
index 3f185b8e527f2c..3fa6ca2486abe8 100644
--- a/components/dashboard/src/components/RepositoryFinder.tsx
+++ b/components/dashboard/src/components/RepositoryFinder.tsx
@@ -11,8 +11,9 @@ import { ReactComponent as RepositoryIcon } from "../icons/RepositoryWithColor.s
 import { SuggestedRepository } from "@gitpod/gitpod-protocol";
 import { MiddleDot } from "./typography/MiddleDot";
 import { useUnifiedRepositorySearch } from "../data/git-providers/unified-repositories-search-query";
-import { useAuthProviders } from "../data/auth-providers/auth-provider-query";
+import { useAuthProviderDescriptions } from "../data/auth-providers/auth-provider-descriptions-query";
 import { ReactComponent as Exclamation2 } from "../images/exclamation2.svg";
+import { AuthProviderType } from "@gitpod/public-api/lib/gitpod/v1/authprovider_pb";
 
 interface RepositoryFinderProps {
     selectedContextURL?: string;
@@ -39,7 +40,7 @@ export default function RepositoryFinder({
         hasMore,
     } = useUnifiedRepositorySearch({ searchString, excludeProjects });
 
-    const authProviders = useAuthProviders();
+    const authProviders = useAuthProviderDescriptions();
 
     const handleSelectionChange = useCallback(
         (selectedID: string) => {
@@ -115,7 +116,10 @@ export default function RepositoryFinder({
                     isSelectable: false,
                 } as ComboboxElement);
             }
-            if (searchString.length >= 3 && authProviders.data?.some((p) => p.authProviderType === "BitbucketServer")) {
+            if (
+                searchString.length >= 3 &&
+                authProviders.data?.some((p) => p.type === AuthProviderType.BITBUCKET_SERVER)
+            ) {
                 // add an element that tells the user that the Bitbucket Server does only support prefix search
                 result.push({
                     id: "bitbucket-server",
diff --git a/components/dashboard/src/data/auth-providers/auth-provider-descriptions-query.ts b/components/dashboard/src/data/auth-providers/auth-provider-descriptions-query.ts
new file mode 100644
index 00000000000000..aa600720abc263
--- /dev/null
+++ b/components/dashboard/src/data/auth-providers/auth-provider-descriptions-query.ts
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { useQuery } from "@tanstack/react-query";
+import { authProviderClient } from "../../service/public-api";
+import { useCurrentUser } from "../../user-context";
+import {
+    AuthProviderDescription,
+    ListAuthProviderDescriptionsRequest,
+} from "@gitpod/public-api/lib/gitpod/v1/authprovider_pb";
+
+export const useAuthProviderDescriptions = () => {
+    const user = useCurrentUser();
+    const query = useQuery<AuthProviderDescription[]>({
+        queryKey: getAuthProviderDescriptionsQueryKey(),
+        queryFn: async () => {
+            const params = new ListAuthProviderDescriptionsRequest();
+            if (user) {
+                params.id = {
+                    case: "userId",
+                    value: user.id,
+                };
+            }
+            const response = await authProviderClient.listAuthProviderDescriptions(params);
+            return response.descriptions;
+        },
+    });
+    return query;
+};
+
+export const getAuthProviderDescriptionsQueryKey = () => ["auth-provider-descriptions", {}];
diff --git a/components/dashboard/src/data/auth-providers/auth-provider-query.ts b/components/dashboard/src/data/auth-providers/auth-provider-query.ts
deleted file mode 100644
index 383c43ffd94cbb..00000000000000
--- a/components/dashboard/src/data/auth-providers/auth-provider-query.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
- * Licensed under the GNU Affero General Public License (AGPL).
- * See License.AGPL.txt in the project root for license information.
- */
-
-import { AuthProviderInfo } from "@gitpod/gitpod-protocol";
-import { useQuery } from "@tanstack/react-query";
-import { getGitpodService } from "../../service/service";
-
-export const useAuthProviders = () => {
-    return useQuery<AuthProviderInfo[]>({
-        queryKey: ["auth-providers"],
-        queryFn: async () => {
-            return await getGitpodService().server.getAuthProviders();
-        },
-    });
-};
diff --git a/components/dashboard/src/data/auth-providers/create-org-auth-provider-mutation.ts b/components/dashboard/src/data/auth-providers/create-org-auth-provider-mutation.ts
new file mode 100644
index 00000000000000..5e26c643a0e610
--- /dev/null
+++ b/components/dashboard/src/data/auth-providers/create-org-auth-provider-mutation.ts
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { getOrgAuthProvidersQueryKey } from "./org-auth-providers-query";
+import { CreateAuthProviderRequest } from "@gitpod/public-api/lib/gitpod/v1/authprovider_pb";
+import { authProviderClient } from "../../service/public-api";
+
+type CreateAuthProviderArgs = {
+    provider: Pick<CreateAuthProviderRequest, "host" | "type"> & {
+        clientId: string;
+        clientSecret: string;
+        orgId: string;
+    };
+};
+export const useCreateOrgAuthProviderMutation = () => {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: async ({ provider }: CreateAuthProviderArgs) => {
+            const response = await authProviderClient.createAuthProvider(
+                new CreateAuthProviderRequest({
+                    owner: { case: "organizationId", value: provider.orgId },
+                    host: provider.host,
+                    oauth2Config: {
+                        clientId: provider.clientId,
+                        clientSecret: provider.clientSecret,
+                    },
+                    type: provider.type,
+                }),
+            );
+            return response.authProvider!;
+        },
+        onSuccess(provider) {
+            const orgId = provider?.owner?.value;
+            if (!orgId) {
+                return;
+            }
+
+            queryClient.invalidateQueries({ queryKey: getOrgAuthProvidersQueryKey(orgId) });
+        },
+    });
+};
diff --git a/components/dashboard/src/data/auth-providers/create-user-auth-provider-mutation.ts b/components/dashboard/src/data/auth-providers/create-user-auth-provider-mutation.ts
new file mode 100644
index 00000000000000..998e08da506e9b
--- /dev/null
+++ b/components/dashboard/src/data/auth-providers/create-user-auth-provider-mutation.ts
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { CreateAuthProviderRequest } from "@gitpod/public-api/lib/gitpod/v1/authprovider_pb";
+import { authProviderClient } from "../../service/public-api";
+import { getUserAuthProvidersQueryKey } from "./user-auth-providers-query";
+
+type CreateAuthProviderArgs = {
+    provider: Pick<CreateAuthProviderRequest, "host" | "type"> & {
+        clientId: string;
+        clientSecret: string;
+        userId: string;
+    };
+};
+export const useCreateUserAuthProviderMutation = () => {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: async ({ provider }: CreateAuthProviderArgs) => {
+            const response = await authProviderClient.createAuthProvider(
+                new CreateAuthProviderRequest({
+                    owner: { case: "ownerId", value: provider.userId },
+                    host: provider.host,
+                    oauth2Config: {
+                        clientId: provider.clientId,
+                        clientSecret: provider.clientSecret,
+                    },
+                    type: provider.type,
+                }),
+            );
+            return response.authProvider!;
+        },
+        onSuccess(provider) {
+            const userId = provider?.owner?.value;
+            if (!userId) {
+                return;
+            }
+
+            queryClient.invalidateQueries({ queryKey: getUserAuthProvidersQueryKey(userId) });
+        },
+    });
+};
diff --git a/components/dashboard/src/data/auth-providers/delete-org-auth-provider-mutation.ts b/components/dashboard/src/data/auth-providers/delete-org-auth-provider-mutation.ts
index 3d071b04c9aa0e..1069f1785e0a62 100644
--- a/components/dashboard/src/data/auth-providers/delete-org-auth-provider-mutation.ts
+++ b/components/dashboard/src/data/auth-providers/delete-org-auth-provider-mutation.ts
@@ -5,9 +5,10 @@
  */
 
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { getGitpodService } from "../../service/service";
 import { useCurrentOrg } from "../organizations/orgs-query";
-import { getOrgAuthProvidersQueryKey, OrgAuthProvidersQueryResult } from "./org-auth-providers-query";
+import { getOrgAuthProvidersQueryKey } from "./org-auth-providers-query";
+import { authProviderClient } from "../../service/public-api";
+import { AuthProvider, DeleteAuthProviderRequest } from "@gitpod/public-api/lib/gitpod/v1/authprovider_pb";
 
 type DeleteAuthProviderArgs = {
     providerId: string;
@@ -22,10 +23,13 @@ export const useDeleteOrgAuthProviderMutation = () => {
                 throw new Error("No current organization selected");
             }
 
-            return await getGitpodService().server.deleteOrgAuthProvider({
-                id: providerId,
-                organizationId: organization.id,
-            });
+            const response = await authProviderClient.deleteAuthProvider(
+                new DeleteAuthProviderRequest({
+                    authProviderId: providerId,
+                }),
+            );
+
+            return response;
         },
         onSuccess: (_, { providerId }) => {
             if (!organization) {
@@ -33,7 +37,7 @@ export const useDeleteOrgAuthProviderMutation = () => {
             }
 
             const queryKey = getOrgAuthProvidersQueryKey(organization.id);
-            queryClient.setQueryData<OrgAuthProvidersQueryResult>(queryKey, (providers) => {
+            queryClient.setQueryData<AuthProvider[]>(queryKey, (providers) => {
                 return providers?.filter((p) => p.id !== providerId);
             });
 
diff --git a/components/dashboard/src/data/auth-providers/delete-user-auth-provider-mutation.ts b/components/dashboard/src/data/auth-providers/delete-user-auth-provider-mutation.ts
new file mode 100644
index 00000000000000..15357edc36486f
--- /dev/null
+++ b/components/dashboard/src/data/auth-providers/delete-user-auth-provider-mutation.ts
@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { authProviderClient } from "../../service/public-api";
+import { AuthProvider, DeleteAuthProviderRequest } from "@gitpod/public-api/lib/gitpod/v1/authprovider_pb";
+import { getUserAuthProvidersQueryKey } from "./user-auth-providers-query";
+import { useCurrentUser } from "../../user-context";
+
+type DeleteAuthProviderArgs = {
+    providerId: string;
+};
+export const useDeleteUserAuthProviderMutation = () => {
+    const queryClient = useQueryClient();
+    const user = useCurrentUser();
+
+    return useMutation({
+        mutationFn: async ({ providerId }: DeleteAuthProviderArgs) => {
+            if (!user) {
+                throw new Error("No current user");
+            }
+
+            const response = await authProviderClient.deleteAuthProvider(
+                new DeleteAuthProviderRequest({
+                    authProviderId: providerId,
+                }),
+            );
+
+            return response;
+        },
+        onSuccess: (_, { providerId }) => {
+            if (!user) {
+                throw new Error("No current user");
+            }
+
+            const queryKey = getUserAuthProvidersQueryKey(user.id);
+            queryClient.setQueryData<AuthProvider[]>(queryKey, (providers) => {
+                return providers?.filter((p) => p.id !== providerId);
+            });
+
+            queryClient.invalidateQueries({ queryKey });
+        },
+    });
+};
diff --git a/components/dashboard/src/data/auth-providers/get-auth-provider-query.ts b/components/dashboard/src/data/auth-providers/get-auth-provider-query.ts
new file mode 100644
index 00000000000000..93faf19b670509
--- /dev/null
+++ b/components/dashboard/src/data/auth-providers/get-auth-provider-query.ts
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { useQuery } from "@tanstack/react-query";
+import { authProviderClient } from "../../service/public-api";
+import { AuthProvider, GetAuthProviderRequest } from "@gitpod/public-api/lib/gitpod/v1/authprovider_pb";
+
+export const useGetAuthProviderQuery = (authProviderId: string | undefined) => {
+    return useQuery<AuthProvider | undefined, Error>(getAuthProviderQueryKey(authProviderId || ""), async () => {
+        if (!authProviderId) {
+            return;
+        }
+        const { authProvider } = await authProviderClient.getAuthProvider(
+            new GetAuthProviderRequest({
+                authProviderId: authProviderId,
+            }),
+        );
+
+        return authProvider;
+    });
+};
+
+export const getAuthProviderQueryKey = (authProviderId: string) => ["auth-provider", { authProviderId }];
diff --git a/components/dashboard/src/data/auth-providers/org-auth-providers-query.ts b/components/dashboard/src/data/auth-providers/org-auth-providers-query.ts
index 140ef744f12bef..df98c32da94eed 100644
--- a/components/dashboard/src/data/auth-providers/org-auth-providers-query.ts
+++ b/components/dashboard/src/data/auth-providers/org-auth-providers-query.ts
@@ -4,24 +4,32 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import { AuthProviderEntry } from "@gitpod/gitpod-protocol";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useCallback } from "react";
-import { getGitpodService } from "../../service/service";
 import { useCurrentOrg } from "../organizations/orgs-query";
+import { authProviderClient } from "../../service/public-api";
+import { AuthProvider, ListAuthProvidersRequest } from "@gitpod/public-api/lib/gitpod/v1/authprovider_pb";
 
-export type OrgAuthProvidersQueryResult = AuthProviderEntry[];
 export const useOrgAuthProvidersQuery = () => {
     const organization = useCurrentOrg().data;
 
-    return useQuery<OrgAuthProvidersQueryResult>({
+    return useQuery<AuthProvider[]>({
         queryKey: getOrgAuthProvidersQueryKey(organization?.id ?? ""),
         queryFn: async () => {
             if (!organization) {
                 throw new Error("No current organization selected");
             }
 
-            return await getGitpodService().server.getOrgAuthProviders({ organizationId: organization.id });
+            const response = await authProviderClient.listAuthProviders(
+                new ListAuthProvidersRequest({
+                    id: {
+                        case: "organizationId",
+                        value: organization.id,
+                    },
+                }),
+            );
+
+            return response.authProviders;
         },
     });
 };
@@ -34,4 +42,4 @@ export const useInvalidateOrgAuthProvidersQuery = (organizationId: string) => {
     }, [organizationId, queryClient]);
 };
 
-export const getOrgAuthProvidersQueryKey = (organizationId: string) => ["auth-providers", { organizationId }];
+export const getOrgAuthProvidersQueryKey = (organizationId: string) => ["org-auth-providers", { organizationId }];
diff --git a/components/dashboard/src/data/auth-providers/update-org-auth-provider-mutation.ts b/components/dashboard/src/data/auth-providers/update-org-auth-provider-mutation.ts
new file mode 100644
index 00000000000000..5c24d0d0afd65a
--- /dev/null
+++ b/components/dashboard/src/data/auth-providers/update-org-auth-provider-mutation.ts
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { getOrgAuthProvidersQueryKey } from "./org-auth-providers-query";
+import { UpdateAuthProviderRequest } from "@gitpod/public-api/lib/gitpod/v1/authprovider_pb";
+import { authProviderClient } from "../../service/public-api";
+
+type UpdateAuthProviderArgs = {
+    provider: {
+        id: string;
+        clientId: string;
+        clientSecret: string;
+    };
+};
+export const useUpdateOrgAuthProviderMutation = () => {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: async ({ provider }: UpdateAuthProviderArgs) => {
+            const response = await authProviderClient.updateAuthProvider(
+                new UpdateAuthProviderRequest({
+                    authProviderId: provider.id,
+                    clientId: provider.clientId,
+                    clientSecret: provider.clientSecret,
+                }),
+            );
+            return response.authProvider!;
+        },
+        onSuccess(provider) {
+            const orgId = provider?.owner?.value;
+            if (!orgId) {
+                return;
+            }
+
+            queryClient.invalidateQueries({ queryKey: getOrgAuthProvidersQueryKey(orgId) });
+        },
+    });
+};
diff --git a/components/dashboard/src/data/auth-providers/update-user-auth-provider-mutation.ts b/components/dashboard/src/data/auth-providers/update-user-auth-provider-mutation.ts
new file mode 100644
index 00000000000000..046fa61ad376eb
--- /dev/null
+++ b/components/dashboard/src/data/auth-providers/update-user-auth-provider-mutation.ts
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { UpdateAuthProviderRequest } from "@gitpod/public-api/lib/gitpod/v1/authprovider_pb";
+import { authProviderClient } from "../../service/public-api";
+import { getUserAuthProvidersQueryKey } from "./user-auth-providers-query";
+
+type UpdateAuthProviderArgs = {
+    provider: {
+        id: string;
+        clientId: string;
+        clientSecret: string;
+    };
+};
+export const useUpdateUserAuthProviderMutation = () => {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: async ({ provider }: UpdateAuthProviderArgs) => {
+            const response = await authProviderClient.updateAuthProvider(
+                new UpdateAuthProviderRequest({
+                    authProviderId: provider.id,
+                    clientId: provider.clientId,
+                    clientSecret: provider.clientSecret,
+                }),
+            );
+            return response.authProvider!;
+        },
+        onSuccess(provider) {
+            const userId = provider?.owner?.value;
+            if (!userId) {
+                return;
+            }
+
+            queryClient.invalidateQueries({ queryKey: getUserAuthProvidersQueryKey(userId) });
+        },
+    });
+};
diff --git a/components/dashboard/src/data/auth-providers/upsert-org-auth-provider-mutation.ts b/components/dashboard/src/data/auth-providers/upsert-org-auth-provider-mutation.ts
deleted file mode 100644
index 29c7e6f178fe8c..00000000000000
--- a/components/dashboard/src/data/auth-providers/upsert-org-auth-provider-mutation.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
- * Licensed under the GNU Affero General Public License (AGPL).
- * See License.AGPL.txt in the project root for license information.
- */
-
-import { GitpodServer } from "@gitpod/gitpod-protocol";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { getGitpodService } from "../../service/service";
-import { getOrgAuthProvidersQueryKey } from "./org-auth-providers-query";
-
-type UpsertAuthProviderArgs = {
-    provider: GitpodServer.CreateOrgAuthProviderParams["entry"] | GitpodServer.UpdateOrgAuthProviderParams["entry"];
-};
-export const useUpsertOrgAuthProviderMutation = () => {
-    const queryClient = useQueryClient();
-
-    return useMutation({
-        mutationFn: async ({ provider }: UpsertAuthProviderArgs) => {
-            if ("id" in provider) {
-                return await getGitpodService().server.updateOrgAuthProvider({ entry: provider });
-            } else {
-                return await getGitpodService().server.createOrgAuthProvider({ entry: provider });
-            }
-        },
-        onSuccess(provider) {
-            if (!provider || !provider.organizationId) {
-                return;
-            }
-
-            queryClient.invalidateQueries({ queryKey: getOrgAuthProvidersQueryKey(provider.organizationId) });
-        },
-    });
-};
diff --git a/components/dashboard/src/data/auth-providers/user-auth-providers-query.ts b/components/dashboard/src/data/auth-providers/user-auth-providers-query.ts
new file mode 100644
index 00000000000000..9563df65cf4075
--- /dev/null
+++ b/components/dashboard/src/data/auth-providers/user-auth-providers-query.ts
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { useQuery } from "@tanstack/react-query";
+import { authProviderClient } from "../../service/public-api";
+import { AuthProvider, ListAuthProvidersRequest } from "@gitpod/public-api/lib/gitpod/v1/authprovider_pb";
+import { useCurrentUser } from "../../user-context";
+
+export type OrgAuthProvidersQueryResult = AuthProvider[];
+export const useOrgAuthProvidersQuery = () => {
+    const user = useCurrentUser();
+
+    return useQuery<OrgAuthProvidersQueryResult>({
+        queryKey: getUserAuthProvidersQueryKey(user?.id ?? ""),
+        queryFn: async () => {
+            if (!user) {
+                throw new Error("No user");
+            }
+
+            const response = await authProviderClient.listAuthProviders(
+                new ListAuthProvidersRequest({
+                    id: {
+                        case: "userId",
+                        value: user.id,
+                    },
+                }),
+            );
+
+            return response.authProviders;
+        },
+        enabled: !!user,
+    });
+};
+
+export const getUserAuthProvidersQueryKey = (userId: string) => ["user-auth-providers", { userId }];
diff --git a/components/dashboard/src/data/git-providers/github-queries.ts b/components/dashboard/src/data/git-providers/github-queries.ts
index 6a50b8c4e734b9..041e0c4ff50e6f 100644
--- a/components/dashboard/src/data/git-providers/github-queries.ts
+++ b/components/dashboard/src/data/git-providers/github-queries.ts
@@ -6,8 +6,9 @@
 
 import { useQuery } from "@tanstack/react-query";
 import { getGitpodService } from "../../service/service";
-import { useAuthProviders } from "../auth-providers/auth-provider-query";
+import { useAuthProviderDescriptions } from "../auth-providers/auth-provider-descriptions-query";
 import { useCurrentUser } from "../../user-context";
+import { AuthProviderType } from "@gitpod/public-api/lib/gitpod/v1/authprovider_pb";
 
 export const useIsGithubAppEnabled = () => {
     return useQuery(["github-app-enabled"], async () => {
@@ -17,7 +18,7 @@ export const useIsGithubAppEnabled = () => {
 };
 
 export const useAreGithubWebhooksUnauthorized = (providerHost: string) => {
-    const { data: authProviders } = useAuthProviders();
+    const { data: authProviders } = useAuthProviderDescriptions();
     const { data: isGitHubAppEnabled } = useIsGithubAppEnabled();
     const { data: token } = useGetGitToken(providerHost);
 
@@ -33,7 +34,7 @@ export const useAreGithubWebhooksUnauthorized = (providerHost: string) => {
 
     // Find matching auth provider - if none, treat as authorized
     const ap = authProviders?.find((ap) => ap.host === providerHost);
-    if (!ap || ap.authProviderType !== "GitHub") {
+    if (!ap || ap.type !== AuthProviderType.GITHUB) {
         return false;
     }
 
diff --git a/components/dashboard/src/data/git-providers/provider-repositories-query.ts b/components/dashboard/src/data/git-providers/provider-repositories-query.ts
index a65c8f2e229894..929f5f6fcb172f 100644
--- a/components/dashboard/src/data/git-providers/provider-repositories-query.ts
+++ b/components/dashboard/src/data/git-providers/provider-repositories-query.ts
@@ -8,9 +8,10 @@ import { useQuery } from "@tanstack/react-query";
 import { getGitpodService } from "../../service/service";
 import { useCurrentUser } from "../../user-context";
 import { CancellationTokenSource } from "vscode-jsonrpc";
-import { useAuthProviders } from "../auth-providers/auth-provider-query";
+import { useAuthProviderDescriptions } from "../auth-providers/auth-provider-descriptions-query";
 import { GetProviderRepositoriesParams } from "@gitpod/gitpod-protocol";
 import { useFeatureFlag } from "../featureflag-query";
+import { AuthProviderType } from "@gitpod/public-api/lib/gitpod/v1/authprovider_pb";
 
 type UseProviderRepositoriesQueryArgs = {
     providerHost: string;
@@ -24,12 +25,12 @@ export const useProviderRepositoriesForUser = ({
 }: UseProviderRepositoriesQueryArgs) => {
     const user = useCurrentUser();
     const newProjectIncrementalRepoSearchBBS = useFeatureFlag("newProjectIncrementalRepoSearchBBS");
-    const { data: authProviders } = useAuthProviders();
+    const { data: authProviders } = useAuthProviderDescriptions();
     const selectedProvider = authProviders?.find((p) => p.host === providerHost);
 
     const queryKey: any[] = ["provider-repositories", { userId: user?.id }, { providerHost, installationId }];
 
-    const isBitbucketServer = selectedProvider?.authProviderType === "BitbucketServer";
+    const isBitbucketServer = selectedProvider?.type === AuthProviderType.BITBUCKET_SERVER;
     const enableIncrementalSearch = isBitbucketServer && newProjectIncrementalRepoSearchBBS;
     if (enableIncrementalSearch) {
         queryKey.push({ search });
diff --git a/components/dashboard/src/data/setup.tsx b/components/dashboard/src/data/setup.tsx
index 1278a19b8e0cd5..195fc8ab830141 100644
--- a/components/dashboard/src/data/setup.tsx
+++ b/components/dashboard/src/data/setup.tsx
@@ -21,11 +21,12 @@ import * as OrganizationClasses from "@gitpod/public-api/lib/gitpod/v1/organizat
 import * as WorkspaceClasses from "@gitpod/public-api/lib/gitpod/v1/workspace_pb";
 import * as PaginationClasses from "@gitpod/public-api/lib/gitpod/v1/pagination_pb";
 import * as ConfigurationClasses from "@gitpod/public-api/lib/gitpod/v1/configuration_pb";
+import * as AuthProviderClasses from "@gitpod/public-api/lib/gitpod/v1/authprovider_pb";
 
 // This is used to version the cache
 // If data we cache changes in a non-backwards compatible way, increment this version
 // That will bust any previous cache versions a client may have stored
-const CACHE_VERSION = "3";
+const CACHE_VERSION = "4";
 
 export function noPersistence(queryKey: QueryKey): QueryKey {
     return [...queryKey, "no-persistence"];
@@ -143,6 +144,7 @@ function initializeMessages() {
         ...Object.values(WorkspaceClasses),
         ...Object.values(PaginationClasses),
         ...Object.values(ConfigurationClasses),
+        ...Object.values(AuthProviderClasses),
     ];
     for (const c of constr) {
         if ((c as any).prototype instanceof Message) {
diff --git a/components/dashboard/src/projects/NewProject.tsx b/components/dashboard/src/projects/NewProject.tsx
index 315f4b33da6e6c..f7d275894b91f8 100644
--- a/components/dashboard/src/projects/NewProject.tsx
+++ b/components/dashboard/src/projects/NewProject.tsx
@@ -4,7 +4,7 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import { AuthProviderInfo, Project } from "@gitpod/gitpod-protocol";
+import { Project } from "@gitpod/gitpod-protocol";
 import { FC, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import ErrorMessage from "../components/ErrorMessage";
 import { useCurrentOrg } from "../data/organizations/orgs-query";
@@ -13,19 +13,20 @@ import { iconForAuthProvider, openAuthorizeWindow, simplifyProviderName } from "
 import { getGitpodService } from "../service/service";
 import { UserContext, useCurrentUser } from "../user-context";
 import { Heading1, Subheading } from "../components/typography/headings";
-import { useAuthProviders } from "../data/auth-providers/auth-provider-query";
+import { useAuthProviderDescriptions } from "../data/auth-providers/auth-provider-descriptions-query";
 import { AuthorizeGit, useNeedsGitAuthorization } from "../components/AuthorizeGit";
 import { NewProjectRepoSelection } from "./new-project/NewProjectRepoSelection";
 import { NewProjectSubheading } from "./new-project/NewProjectSubheading";
 import { Button } from "../components/Button";
+import { AuthProviderDescription, AuthProviderType } from "@gitpod/public-api/lib/gitpod/v1/authprovider_pb";
 
 export default function NewProject() {
     const currentTeam = useCurrentOrg()?.data;
     const user = useCurrentUser();
-    const authProviders = useAuthProviders();
+    const authProviders = useAuthProviderDescriptions();
 
     // State this component manages
-    const [selectedProvider, setSelectedProvider] = useState<AuthProviderInfo>();
+    const [selectedProvider, setSelectedProvider] = useState<AuthProviderDescription>();
     const [project, setProject] = useState<Project>();
 
     // Defaults selectedProviderHost if not set yet
@@ -34,9 +35,7 @@ export default function NewProject() {
             for (let i = user.identities.length - 1; i >= 0; i--) {
                 const candidate = user.identities[i];
                 if (candidate) {
-                    const authProvider = authProviders.data.find(
-                        (ap) => ap.authProviderId === candidate.authProviderId,
-                    );
+                    const authProvider = authProviders.data.find((ap) => ap.id === candidate.authProviderId);
                     if (authProvider) {
                         setSelectedProvider(authProvider);
                         break;
@@ -107,8 +106,8 @@ export default function NewProject() {
 }
 
 type NewProjectMainContentProps = {
-    selectedProvider?: AuthProviderInfo;
-    onProviderSelected: (ap: AuthProviderInfo, updateUser?: boolean) => void;
+    selectedProvider?: AuthProviderDescription;
+    onProviderSelected: (ap: AuthProviderDescription, updateUser?: boolean) => void;
     onProjectCreated: (project: Project) => void;
 };
 const NewProjectMainContent: FC<NewProjectMainContentProps> = ({
@@ -117,12 +116,12 @@ const NewProjectMainContent: FC<NewProjectMainContentProps> = ({
     onProjectCreated,
 }) => {
     const { setUser } = useContext(UserContext);
-    const authProviders = useAuthProviders();
+    const authProviders = useAuthProviderDescriptions();
     const needsGitAuth = useNeedsGitAuthorization();
     const [showGitProviders, setShowGitProviders] = useState(false);
 
     const onGitProviderSeleted = useCallback(
-        async (ap: AuthProviderInfo, updateUser?: boolean) => {
+        async (ap: AuthProviderDescription, updateUser?: boolean) => {
             // TODO: Can we push this down into where sends updateUser=true?
             if (updateUser) {
                 setUser(await getGitpodService().server.getLoggedInUser());
@@ -151,23 +150,22 @@ const NewProjectMainContent: FC<NewProjectMainContentProps> = ({
 };
 
 const GitProviders: FC<{
-    authProviders: AuthProviderInfo[];
-    onProviderSelected: (ap: AuthProviderInfo, updateUser?: boolean) => void;
+    authProviders: AuthProviderDescription[];
+    onProviderSelected: (ap: AuthProviderDescription, updateUser?: boolean) => void;
 }> = ({ authProviders, onProviderSelected }) => {
     const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined);
 
     const selectProvider = useCallback(
-        async (ap: AuthProviderInfo) => {
+        async (ap: AuthProviderDescription) => {
             setErrorMessage(undefined);
 
             const token = await getGitpodService().server.getToken({ host: ap.host });
-            if (token && !(ap.authProviderType === "GitHub" && !token.scopes.includes("repo"))) {
+            if (token && !(ap.type === AuthProviderType.GITHUB && !token.scopes.includes("repo"))) {
                 onProviderSelected(ap);
                 return;
             }
             await openAuthorizeWindow({
                 host: ap.host,
-                scopes: ap.authProviderType === "GitHub" ? ["repo"] : ap.requirements?.default,
                 onSuccess: async () => {
                     onProviderSelected(ap, true);
                 },
@@ -194,10 +192,10 @@ const GitProviders: FC<{
         () =>
             authProviders.filter(
                 (p) =>
-                    p.authProviderType === "GitHub" ||
+                    p.type === AuthProviderType.GITHUB ||
                     p.host === "bitbucket.org" ||
-                    p.authProviderType === "GitLab" ||
-                    p.authProviderType === "BitbucketServer",
+                    p.type === AuthProviderType.GITLAB ||
+                    p.type === AuthProviderType.BITBUCKET_SERVER,
             ),
         [authProviders],
     );
@@ -216,7 +214,7 @@ const GitProviders: FC<{
                                 className="btn-login flex-none w-56 h-10 p-0 inline-flex"
                                 onClick={() => selectProvider(ap)}
                             >
-                                {iconForAuthProvider(ap.authProviderType)}
+                                {iconForAuthProvider(ap.type)}
                                 <span className="pt-2 pb-2 mr-3 text-sm my-auto font-medium truncate overflow-ellipsis">
                                     Continue with {simplifyProviderName(ap.host)}
                                 </span>
diff --git a/components/dashboard/src/projects/new-project/NewProjectAuthRequired.tsx b/components/dashboard/src/projects/new-project/NewProjectAuthRequired.tsx
index aef5370d501f7a..647f8ccdf4ec74 100644
--- a/components/dashboard/src/projects/new-project/NewProjectAuthRequired.tsx
+++ b/components/dashboard/src/projects/new-project/NewProjectAuthRequired.tsx
@@ -5,7 +5,7 @@
  */
 
 import { FC, useCallback } from "react";
-import { useAuthProviders } from "../../data/auth-providers/auth-provider-query";
+import { useAuthProviderDescriptions } from "../../data/auth-providers/auth-provider-descriptions-query";
 import { openAuthorizeWindow } from "../../provider-utils";
 
 type Props = {
@@ -18,7 +18,7 @@ export const NewProjectAuthRequired: FC<Props> = ({
     areGitHubWebhooksUnauthorized = false,
     onReconfigure,
 }) => {
-    const authProviders = useAuthProviders();
+    const authProviders = useAuthProviderDescriptions();
 
     const handleAuthorize = useCallback(() => {
         const ap = authProviders.data?.find((ap) => ap.host === selectedProviderHost);
@@ -27,12 +27,8 @@ export const NewProjectAuthRequired: FC<Props> = ({
         }
         openAuthorizeWindow({
             host: ap.host,
-            scopes: ap.authProviderType === "GitHub" ? ["repo"] : ap.requirements?.default,
             onSuccess: async () => {
-                // TODO: Verify this works correctly
-                if (ap.authProviderType === "GitHub") {
-                    authProviders.refetch();
-                }
+                authProviders.refetch();
             },
             onError: (payload) => {
                 console.error("Authorization failed", selectedProviderHost, payload);
diff --git a/components/dashboard/src/projects/new-project/NewProjectRepoSelection.tsx b/components/dashboard/src/projects/new-project/NewProjectRepoSelection.tsx
index 7cf489f1d0b22f..2fad3a5a90b949 100644
--- a/components/dashboard/src/projects/new-project/NewProjectRepoSelection.tsx
+++ b/components/dashboard/src/projects/new-project/NewProjectRepoSelection.tsx
@@ -4,7 +4,7 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import { AuthProviderInfo, Project } from "@gitpod/gitpod-protocol";
+import { Project } from "@gitpod/gitpod-protocol";
 import { FC, useCallback, useEffect, useMemo, useState } from "react";
 import { useAreGithubWebhooksUnauthorized, useIsGithubAppEnabled } from "../../data/git-providers/github-queries";
 import { LinkButton } from "../../components/LinkButton";
@@ -22,9 +22,10 @@ import { NewProjectCreateFromURL } from "./NewProjectCreateFromURL";
 import { useStateWithDebounce } from "../../hooks/use-state-with-debounce";
 import { useFeatureFlag } from "../../data/featureflag-query";
 import Alert from "../../components/Alert";
+import { AuthProviderDescription, AuthProviderType } from "@gitpod/public-api/lib/gitpod/v1/authprovider_pb";
 
 type Props = {
-    selectedProvider?: AuthProviderInfo;
+    selectedProvider?: AuthProviderDescription;
     onProjectCreated: (project: Project) => void;
     onChangeGitProvider: () => void;
 };
@@ -59,7 +60,7 @@ export const NewProjectRepoSelection: FC<Props> = ({ selectedProvider, onProject
     // Memoized & derived values
     const noReposAvailable = !!(reposInAccounts?.length === 0 || areGitHubWebhooksUnauthorized);
     const isGitHub = selectedProvider?.host === "github.com";
-    const isBitbucketServer = selectedProvider?.authProviderType === "BitbucketServer";
+    const isBitbucketServer = selectedProvider?.type === AuthProviderType.BITBUCKET_SERVER;
     const enableBBSIncrementalSearch = isBitbucketServer && newProjectIncrementalRepoSearchBBS;
 
     const accounts = useMemo(() => {
diff --git a/components/dashboard/src/provider-utils.tsx b/components/dashboard/src/provider-utils.tsx
index 17ab7588d7c6cf..98fe5d491feebb 100644
--- a/components/dashboard/src/provider-utils.tsx
+++ b/components/dashboard/src/provider-utils.tsx
@@ -4,26 +4,46 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
+import { AuthProviderType } from "@gitpod/public-api/lib/gitpod/v1/authprovider_pb";
 import bitbucket from "./images/bitbucket.svg";
 import github from "./images/github.svg";
 import gitlab from "./images/gitlab.svg";
 import { gitpodHostUrl } from "./service/service";
 
-function iconForAuthProvider(type: string) {
+function iconForAuthProvider(type: string | AuthProviderType) {
     switch (type) {
         case "GitHub":
+        case AuthProviderType.GITHUB:
             return <img className="fill-current dark:filter-invert w-5 h-5 ml-3 mr-3 my-auto" src={github} alt="" />;
         case "GitLab":
+        case AuthProviderType.GITLAB:
             return <img className="fill-current filter-grayscale w-5 h-5 ml-3 mr-3 my-auto" src={gitlab} alt="" />;
         case "Bitbucket":
+        case AuthProviderType.BITBUCKET:
             return <img className="fill-current filter-grayscale w-5 h-5 ml-3 mr-3 my-auto" src={bitbucket} alt="" />;
         case "BitbucketServer":
+        case AuthProviderType.BITBUCKET_SERVER:
             return <img className="fill-current filter-grayscale w-5 h-5 ml-3 mr-3 my-auto" src={bitbucket} alt="" />;
         default:
             return <></>;
     }
 }
 
+export function toAuthProviderLabel(type: AuthProviderType) {
+    switch (type) {
+        case AuthProviderType.GITHUB:
+            return "GitHub";
+        case AuthProviderType.GITLAB:
+            return "GitLab";
+        case AuthProviderType.BITBUCKET:
+            return "Bitbucket Cloud";
+        case AuthProviderType.BITBUCKET_SERVER:
+            return "Bitbucket Server";
+        default:
+            return "-";
+    }
+}
+
 function simplifyProviderName(host: string) {
     switch (host) {
         case "github.com":
diff --git a/components/dashboard/src/service/json-rpc-authprovider-client.ts b/components/dashboard/src/service/json-rpc-authprovider-client.ts
index 2480144dae7188..e8576ca04019ab 100644
--- a/components/dashboard/src/service/json-rpc-authprovider-client.ts
+++ b/components/dashboard/src/service/json-rpc-authprovider-client.ts
@@ -95,7 +95,7 @@ export class JsonRpcAuthProviderClient implements PromiseClient<typeof AuthProvi
               })
             : await getGitpodService().server.getOwnAuthProviders();
         const response = new ListAuthProvidersResponse({
-            authProviders: authProviders.map(converter.toAuthProvider),
+            authProviders: authProviders.map(converter.toAuthProvider.bind(converter)),
         });
         return response;
     }
@@ -113,9 +113,9 @@ export class JsonRpcAuthProviderClient implements PromiseClient<typeof AuthProvi
         if (!request.authProviderId) {
             throw new ConnectError("authProviderId is required", Code.InvalidArgument);
         }
-        const clientId = request?.clientId;
-        const clientSecret = request?.clientSecret;
-        if (!clientId || !clientSecret) {
+        const clientId = request?.clientId || "";
+        const clientSecret = request?.clientSecret || "";
+        if (!clientId && !clientSecret) {
             throw new ConnectError("clientId or clientSecret are required", Code.InvalidArgument);
         }
 
diff --git a/components/dashboard/src/teams/git-integrations/GitIntegrationListItem.tsx b/components/dashboard/src/teams/git-integrations/GitIntegrationListItem.tsx
index 6f85f512da4059..537420200acdf2 100644
--- a/components/dashboard/src/teams/git-integrations/GitIntegrationListItem.tsx
+++ b/components/dashboard/src/teams/git-integrations/GitIntegrationListItem.tsx
@@ -4,7 +4,6 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import { AuthProviderEntry } from "@gitpod/gitpod-protocol";
 import { FunctionComponent, useCallback, useMemo, useState } from "react";
 import ConfirmationModal from "../../components/ConfirmationModal";
 import { ContextMenuEntry } from "../../components/ContextMenu";
@@ -14,9 +13,11 @@ import { GitIntegrationModal } from "./GitIntegrationModal";
 import { ModalFooterAlert } from "../../components/Modal";
 import { useToast } from "../../components/toasts/Toasts";
 import { useListOrganizationMembers } from "../../data/organizations/members-query";
+import { AuthProvider } from "@gitpod/public-api/lib/gitpod/v1/authprovider_pb";
+import { toAuthProviderLabel } from "../../provider-utils";
 
 type Props = {
-    provider: AuthProviderEntry;
+    provider: AuthProvider;
 };
 export const GitIntegrationListItem: FunctionComponent<Props> = ({ provider }) => {
     const [showEditModal, setShowEditModal] = useState(false);
@@ -30,7 +31,7 @@ export const GitIntegrationListItem: FunctionComponent<Props> = ({ provider }) =
     const menuEntries = useMemo(() => {
         const result: ContextMenuEntry[] = [];
         result.push({
-            title: provider.status === "verified" ? "Edit" : "Activate",
+            title: provider.verified ? "Edit" : "Activate",
             onClick: () => setShowEditModal(true),
             separator: true,
         });
@@ -40,7 +41,7 @@ export const GitIntegrationListItem: FunctionComponent<Props> = ({ provider }) =
             onClick: () => setShowDeleteConfirmation(true),
         });
         return result;
-    }, [provider.status]);
+    }, [provider.verified]);
 
     const deleteProvider = useCallback(async () => {
         try {
@@ -58,14 +59,14 @@ export const GitIntegrationListItem: FunctionComponent<Props> = ({ provider }) =
                     <div
                         className={
                             "rounded-full w-3 h-3 text-sm align-middle m-auto " +
-                            (provider.status === "verified" ? "bg-green-500" : "bg-gray-400")
+                            (provider.verified ? "bg-green-500" : "bg-gray-400")
                         }
                     >
                         &nbsp;
                     </div>
                 </ItemFieldIcon>
                 <ItemField className="w-5/12 flex items-center">
-                    <span className="font-medium truncate overflow-ellipsis">{provider.type}</span>
+                    <span className="font-medium truncate overflow-ellipsis">{toAuthProviderLabel(provider.type)}</span>
                 </ItemField>
                 <ItemField className="w-5/12 flex items-center">
                     <span className="my-auto truncate text-gray-500 overflow-ellipsis">{provider.host}</span>
@@ -81,7 +82,7 @@ export const GitIntegrationListItem: FunctionComponent<Props> = ({ provider }) =
                             : "You are about to delete an organization-wide Git providers integration. Are you sure?"
                     }
                     children={{
-                        name: provider.type,
+                        name: toAuthProviderLabel(provider.type),
                         description: provider.host,
                     }}
                     buttonText="Remove Provider"
diff --git a/components/dashboard/src/teams/git-integrations/GitIntegrationModal.tsx b/components/dashboard/src/teams/git-integrations/GitIntegrationModal.tsx
index 5d262f3b6c153e..d8644d3f86f9ae 100644
--- a/components/dashboard/src/teams/git-integrations/GitIntegrationModal.tsx
+++ b/components/dashboard/src/teams/git-integrations/GitIntegrationModal.tsx
@@ -4,7 +4,6 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import { AuthProviderEntry } from "@gitpod/gitpod-protocol";
 import { FunctionComponent, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { Button } from "../../components/Button";
 import { InputField } from "../../components/forms/InputField";
@@ -14,18 +13,19 @@ import { InputWithCopy } from "../../components/InputWithCopy";
 import Modal, { ModalBody, ModalFooter, ModalFooterAlert, ModalHeader } from "../../components/Modal";
 import { Subheading } from "../../components/typography/headings";
 import { useInvalidateOrgAuthProvidersQuery } from "../../data/auth-providers/org-auth-providers-query";
-import { useUpsertOrgAuthProviderMutation } from "../../data/auth-providers/upsert-org-auth-provider-mutation";
 import { useCurrentOrg } from "../../data/organizations/orgs-query";
 import { useOnBlurError } from "../../hooks/use-onblur-error";
-import { openAuthorizeWindow } from "../../provider-utils";
+import { openAuthorizeWindow, toAuthProviderLabel } from "../../provider-utils";
 import { getGitpodService, gitpodHostUrl } from "../../service/service";
 import { UserContext } from "../../user-context";
 import { useToast } from "../../components/toasts/Toasts";
-
-type ProviderType = "GitHub" | "GitLab" | "Bitbucket" | "BitbucketServer";
+import { AuthProvider, AuthProviderType } from "@gitpod/public-api/lib/gitpod/v1/authprovider_pb";
+import { useCreateOrgAuthProviderMutation } from "../../data/auth-providers/create-org-auth-provider-mutation";
+import { useUpdateOrgAuthProviderMutation } from "../../data/auth-providers/update-org-auth-provider-mutation";
+import { authProviderClient } from "../../service/public-api";
 
 type Props = {
-    provider?: AuthProviderEntry;
+    provider?: AuthProvider;
     onClose: () => void;
 };
 
@@ -33,10 +33,10 @@ export const GitIntegrationModal: FunctionComponent<Props> = (props) => {
     const { setUser } = useContext(UserContext);
     const { toast } = useToast();
     const team = useCurrentOrg().data;
-    const [type, setType] = useState<ProviderType>((props.provider?.type as ProviderType) ?? "GitLab");
+    const [type, setType] = useState<AuthProviderType>(props.provider?.type ?? AuthProviderType.GITLAB);
     const [host, setHost] = useState<string>(props.provider?.host ?? "");
-    const [clientId, setClientId] = useState<string>(props.provider?.oauth.clientId ?? "");
-    const [clientSecret, setClientSecret] = useState<string>(props.provider?.oauth.clientSecret ?? "");
+    const [clientId, setClientId] = useState<string>(props.provider?.oauth2Config?.clientId ?? "");
+    const [clientSecret, setClientSecret] = useState<string>(props.provider?.oauth2Config?.clientSecret ?? "");
 
     const [savedProvider, setSavedProvider] = useState(props.provider);
     const isNew = !savedProvider;
@@ -47,14 +47,15 @@ export const GitIntegrationModal: FunctionComponent<Props> = (props) => {
     // "bitbucket.org" is set as host value whenever "Bitbucket" is selected
     useEffect(() => {
         if (isNew) {
-            setHost(type === "Bitbucket" ? "bitbucket.org" : "");
+            setHost(type === AuthProviderType.BITBUCKET ? "bitbucket.org" : "");
         }
     }, [isNew, type]);
 
     const [savingProvider, setSavingProvider] = useState(false);
     const [errorMessage, setErrorMessage] = useState<string | undefined>();
 
-    const upsertProvider = useUpsertOrgAuthProviderMutation();
+    const createProvider = useCreateOrgAuthProviderMutation();
+    const updateProvider = useUpdateOrgAuthProviderMutation();
     const invalidateOrgAuthProviders = useInvalidateOrgAuthProvidersQuery(team?.id ?? "");
 
     const {
@@ -67,13 +68,19 @@ export const GitIntegrationModal: FunctionComponent<Props> = (props) => {
         message: clientIdError,
         onBlur: clientIdOnBlur,
         isValid: clientIdValid,
-    } = useOnBlurError(`${type === "GitLab" ? "Application ID" : "Client ID"} is missing.`, clientId.trim().length > 0);
+    } = useOnBlurError(
+        `${type === AuthProviderType.GITLAB ? "Application ID" : "Client ID"} is missing.`,
+        clientId.trim().length > 0,
+    );
 
     const {
         message: clientSecretError,
         onBlur: clientSecretOnBlur,
         isValid: clientSecretValid,
-    } = useOnBlurError(`${type === "GitLab" ? "Secret" : "Client Secret"} is missing.`, clientSecret.trim().length > 0);
+    } = useOnBlurError(
+        `${type === AuthProviderType.GITLAB ? "Secret" : "Client Secret"} is missing.`,
+        clientSecret.trim().length > 0,
+    );
 
     // Call our error onBlur handler, and remove prefixed "https://"
     const hostOnBlur = useCallback(() => {
@@ -82,18 +89,14 @@ export const GitIntegrationModal: FunctionComponent<Props> = (props) => {
         setHost(cleanHost(host));
     }, [host, hostOnBlurErrorTracking]);
 
-    // TODO: We could remove this extra state management if we convert the modal into a detail flow w/ it's own route
-    // Used to grab latest provider record after activation flow
     const reloadSavedProvider = useCallback(async () => {
         if (!savedProvider || !team) {
             return;
         }
 
-        const provider = (await getGitpodService().server.getOrgAuthProviders({ organizationId: team.id })).find(
-            (ap) => ap.id === savedProvider.id,
-        );
-        if (provider) {
-            setSavedProvider(provider);
+        const { authProvider } = await authProviderClient.getAuthProvider({ authProviderId: savedProvider.id });
+        if (authProvider) {
+            setSavedProvider(authProvider);
         }
     }, [savedProvider, team]);
 
@@ -111,22 +114,26 @@ export const GitIntegrationModal: FunctionComponent<Props> = (props) => {
         const trimmedSecret = clientSecret.trim();
 
         try {
-            const newProvider = await upsertProvider.mutateAsync({
-                provider: isNew
-                    ? {
-                          host: cleanHost(host),
-                          type,
-                          clientId: trimmedId,
-                          clientSecret: trimmedSecret,
-                          organizationId: team.id,
-                      }
-                    : {
-                          id: savedProvider.id,
-                          clientId: trimmedId,
-                          clientSecret: clientSecret === "redacted" ? "" : trimmedSecret,
-                          organizationId: team.id,
-                      },
-            });
+            let newProvider: AuthProvider;
+            if (isNew) {
+                newProvider = await createProvider.mutateAsync({
+                    provider: {
+                        host: cleanHost(host),
+                        type,
+                        orgId: team.id,
+                        clientId: trimmedId,
+                        clientSecret: trimmedSecret,
+                    },
+                });
+            } else {
+                newProvider = await updateProvider.mutateAsync({
+                    provider: {
+                        id: savedProvider.id,
+                        clientId: trimmedId,
+                        clientSecret: clientSecret === "redacted" ? "" : trimmedSecret,
+                    },
+                });
+            }
 
             // switch mode to stay and edit this integration.
             setSavedProvider(newProvider);
@@ -145,7 +152,7 @@ export const GitIntegrationModal: FunctionComponent<Props> = (props) => {
                     // Refresh the current user - they may have a new identity record now
                     // setup a promise and don't wait so we can close the modal right away
                     getGitpodService().server.getLoggedInUser().then(setUser);
-                    toast(`${newProvider.type} integration has been activated.`);
+                    toast(`${toAuthProviderLabel(newProvider.type)} integration has been activated.`);
 
                     props.onClose();
                 },
@@ -174,13 +181,14 @@ export const GitIntegrationModal: FunctionComponent<Props> = (props) => {
         invalidateOrgAuthProviders,
         isNew,
         props,
-        reloadSavedProvider,
         savedProvider?.id,
         setUser,
         team,
         toast,
         type,
-        upsertProvider,
+        createProvider,
+        updateProvider,
+        reloadSavedProvider,
     ]);
 
     const isValid = useMemo(
@@ -188,6 +196,23 @@ export const GitIntegrationModal: FunctionComponent<Props> = (props) => {
         [clientIdValid, clientSecretValid, hostValid],
     );
 
+    const getNumber = (paramValue: string | null) => {
+        if (!paramValue) {
+            return 0;
+        }
+
+        try {
+            const number = Number.parseInt(paramValue, 10);
+            if (Number.isNaN(number)) {
+                return 0;
+            }
+
+            return number;
+        } catch (e) {
+            return 0;
+        }
+    };
+
     return (
         <Modal visible onClose={props.onClose} onSubmit={activate} autoFocus={isNew}>
             <ModalHeader>{isNew ? "New Git Provider" : "Git Provider"}</ModalHeader>
@@ -202,19 +227,19 @@ export const GitIntegrationModal: FunctionComponent<Props> = (props) => {
                     <SelectInputField
                         disabled={!isNew}
                         label="Provider Type"
-                        value={type}
+                        value={type.toString()}
                         topMargin={false}
-                        onChange={(val) => setType(val as ProviderType)}
+                        onChange={(val) => setType(getNumber(val))}
                     >
-                        <option value="GitHub">GitHub</option>
-                        <option value="GitLab">GitLab</option>
-                        <option value="Bitbucket">Bitbucket Cloud</option>
-                        <option value="BitbucketServer">Bitbucket Server</option>
+                        <option value={AuthProviderType.GITHUB}>GitHub</option>
+                        <option value={AuthProviderType.GITLAB}>GitLab</option>
+                        <option value={AuthProviderType.BITBUCKET}>Bitbucket Cloud</option>
+                        <option value={AuthProviderType.BITBUCKET_SERVER}>Bitbucket Server</option>
                     </SelectInputField>
                     <TextInputField
                         label="Provider Host Name"
                         value={host}
-                        disabled={!isNew || type === "Bitbucket"}
+                        disabled={!isNew || type === AuthProviderType.BITBUCKET}
                         placeholder={getPlaceholderForIntegrationType(type)}
                         error={hostError}
                         onChange={setHost}
@@ -226,7 +251,7 @@ export const GitIntegrationModal: FunctionComponent<Props> = (props) => {
                     </InputField>
 
                     <TextInputField
-                        label={type === "GitLab" ? "Application ID" : "Client ID"}
+                        label={type === AuthProviderType.GITLAB ? "Application ID" : "Client ID"}
                         value={clientId}
                         error={clientIdError}
                         onBlur={clientIdOnBlur}
@@ -234,7 +259,7 @@ export const GitIntegrationModal: FunctionComponent<Props> = (props) => {
                     />
 
                     <TextInputField
-                        label={type === "GitLab" ? "Secret" : "Client Secret"}
+                        label={type === AuthProviderType.GITLAB ? "Secret" : "Client Secret"}
                         type="password"
                         value={clientSecret}
                         error={clientSecretError}
@@ -250,7 +275,7 @@ export const GitIntegrationModal: FunctionComponent<Props> = (props) => {
                             <ModalFooterAlert type="danger">{errorMessage}</ModalFooterAlert>
                         ) : (
                             !isNew &&
-                            savedProvider?.status !== "verified" && (
+                            !savedProvider?.verified && (
                                 <ModalFooterAlert type="warning" closable={false}>
                                     You need to activate this configuration.
                                 </ModalFooterAlert>
@@ -275,15 +300,15 @@ const callbackUrl = () => {
     return gitpodHostUrl.with({ pathname }).toString();
 };
 
-const getPlaceholderForIntegrationType = (type: ProviderType) => {
+const getPlaceholderForIntegrationType = (type: AuthProviderType) => {
     switch (type) {
-        case "GitHub":
+        case AuthProviderType.GITHUB:
             return "github.example.com";
-        case "GitLab":
+        case AuthProviderType.GITLAB:
             return "gitlab.example.com";
-        case "Bitbucket":
+        case AuthProviderType.BITBUCKET:
             return "bitbucket.org";
-        case "BitbucketServer":
+        case AuthProviderType.BITBUCKET_SERVER:
             return "bitbucket.example.com";
         default:
             return "";
@@ -291,21 +316,21 @@ const getPlaceholderForIntegrationType = (type: ProviderType) => {
 };
 
 type RedirectUrlDescriptionProps = {
-    type: ProviderType;
+    type: AuthProviderType;
 };
 const RedirectUrlDescription: FunctionComponent<RedirectUrlDescriptionProps> = ({ type }) => {
     let docsUrl = ``;
     switch (type) {
-        case "GitHub":
+        case AuthProviderType.GITHUB:
             docsUrl = `https://www.gitpod.io/docs/configure/authentication/github-enterprise`;
             break;
-        case "GitLab":
+        case AuthProviderType.GITLAB:
             docsUrl = `https://www.gitpod.io/docs/configure/authentication/gitlab#registering-a-self-hosted-gitlab-installation`;
             break;
-        case "Bitbucket":
+        case AuthProviderType.BITBUCKET:
             docsUrl = `https://www.gitpod.io/docs/configure/authentication`;
             break;
-        case "BitbucketServer":
+        case AuthProviderType.BITBUCKET_SERVER:
             docsUrl = "https://www.gitpod.io/docs/configure/authentication/bitbucket-server";
             break;
         default:
@@ -314,7 +339,8 @@ const RedirectUrlDescription: FunctionComponent<RedirectUrlDescriptionProps> = (
 
     return (
         <span>
-            Use this redirect URI to register a {type} instance as an authorized Git provider in Gitpod.{" "}
+            Use this redirect URI to register a {toAuthProviderLabel(type)} instance as an authorized Git provider in
+            Gitpod.{" "}
             <a href={docsUrl} target="_blank" rel="noreferrer noopener" className="gp-link">
                 Learn more
             </a>
diff --git a/components/dashboard/src/teams/git-integrations/GitIntegrationsList.tsx b/components/dashboard/src/teams/git-integrations/GitIntegrationsList.tsx
index 28a226f11051ff..fd3b94c033df93 100644
--- a/components/dashboard/src/teams/git-integrations/GitIntegrationsList.tsx
+++ b/components/dashboard/src/teams/git-integrations/GitIntegrationsList.tsx
@@ -4,7 +4,6 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import { AuthProviderEntry } from "@gitpod/gitpod-protocol";
 import { FunctionComponent, useCallback, useState } from "react";
 import { Button } from "../../components/Button";
 import { EmptyMessage } from "../../components/EmptyMessage";
@@ -12,9 +11,10 @@ import { Item, ItemField, ItemFieldIcon, ItemsList } from "../../components/Item
 import { Heading2, Subheading } from "../../components/typography/headings";
 import { GitIntegrationListItem } from "./GitIntegrationListItem";
 import { GitIntegrationModal } from "./GitIntegrationModal";
+import { AuthProvider } from "@gitpod/public-api/lib/gitpod/v1/authprovider_pb";
 
 type Props = {
-    providers: AuthProviderEntry[];
+    providers: AuthProvider[];
 };
 export const GitIntegrationsList: FunctionComponent<Props> = ({ providers }) => {
     const [showCreateModal, setShowCreateModal] = useState(false);
diff --git a/components/dashboard/src/user-settings/AuthEntryItem.tsx b/components/dashboard/src/user-settings/AuthEntryItem.tsx
index d2d801faf3544c..e076726ceb5aac 100644
--- a/components/dashboard/src/user-settings/AuthEntryItem.tsx
+++ b/components/dashboard/src/user-settings/AuthEntryItem.tsx
@@ -4,17 +4,18 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import { AuthProviderInfo } from "@gitpod/gitpod-protocol";
 import { useState } from "react";
 import { ContextMenuEntry } from "../components/ContextMenu";
 import { Item, ItemFieldIcon, ItemField, ItemFieldContextMenu } from "../components/ItemsList";
+import { AuthProviderDescription } from "@gitpod/public-api/lib/gitpod/v1/authprovider_pb";
+import { toAuthProviderLabel } from "../provider-utils";
 
 interface AuthEntryItemParams {
-    ap: AuthProviderInfo;
+    ap: AuthProviderDescription;
     isConnected: (authProviderId: string) => boolean;
     getUsername: (authProviderId: string) => string | undefined;
     getPermissions: (authProviderId: string) => string[] | undefined;
-    gitProviderMenu: (provider: AuthProviderInfo) => ContextMenuEntry[];
+    gitProviderMenu: (provider: AuthProviderDescription) => ContextMenuEntry[];
 }
 
 export const AuthEntryItem = (props: AuthEntryItemParams) => {
@@ -25,32 +26,34 @@ export const AuthEntryItem = (props: AuthEntryItemParams) => {
     };
 
     return (
-        <Item key={"ap-" + props.ap.authProviderId} className="h-16" solid={menuVisible}>
+        <Item key={"ap-" + props.ap.id} className="h-16" solid={menuVisible}>
             <ItemFieldIcon>
                 <div
                     className={
                         "rounded-full w-3 h-3 text-sm align-middle m-auto " +
-                        (props.isConnected(props.ap.authProviderId) ? "bg-green-500" : "bg-gray-400")
+                        (props.isConnected(props.ap.id) ? "bg-green-500" : "bg-gray-400")
                     }
                 >
                     &nbsp;
                 </div>
             </ItemFieldIcon>
             <ItemField className="w-4/12 xl:w-3/12 flex flex-col my-auto">
-                <span className="my-auto font-medium truncate overflow-ellipsis">{props.ap.authProviderType}</span>
+                <span className="my-auto font-medium truncate overflow-ellipsis">
+                    {toAuthProviderLabel(props.ap.type)}
+                </span>
                 <span className="text-sm my-auto text-gray-400 truncate overflow-ellipsis dark:text-gray-500">
                     {props.ap.host}
                 </span>
             </ItemField>
             <ItemField className="w-6/12 xl:w-3/12 flex flex-col my-auto">
                 <span className="my-auto truncate text-gray-500 overflow-ellipsis dark:text-gray-400">
-                    {props.getUsername(props.ap.authProviderId) || "–"}
+                    {props.getUsername(props.ap.id) || "–"}
                 </span>
                 <span className="text-sm my-auto text-gray-400 dark:text-gray-500">Username</span>
             </ItemField>
             <ItemField className="hidden xl:w-1/3 xl:flex xl:flex-col my-auto">
                 <span className="my-auto truncate text-gray-500 overflow-ellipsis dark:text-gray-400">
-                    {props.getPermissions(props.ap.authProviderId)?.join(", ") || "–"}
+                    {props.getPermissions(props.ap.id)?.join(", ") || "–"}
                 </span>
                 <span className="text-sm my-auto text-gray-400 dark:text-gray-500">Permissions</span>
             </ItemField>
diff --git a/components/dashboard/src/user-settings/IntegrationItemEntry.tsx b/components/dashboard/src/user-settings/IntegrationItemEntry.tsx
index be69554cd422bc..5de6d86a5bf2c8 100644
--- a/components/dashboard/src/user-settings/IntegrationItemEntry.tsx
+++ b/components/dashboard/src/user-settings/IntegrationItemEntry.tsx
@@ -4,13 +4,14 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import { AuthProviderEntry } from "@gitpod/gitpod-protocol";
 import { ContextMenuEntry } from "../components/ContextMenu";
 import { Item, ItemFieldIcon, ItemField, ItemFieldContextMenu } from "../components/ItemsList";
+import { AuthProvider } from "@gitpod/public-api/lib/gitpod/v1/authprovider_pb";
+import { toAuthProviderLabel } from "../provider-utils";
 
 export const IntegrationEntryItem = (props: {
-    ap: AuthProviderEntry;
-    gitProviderMenu: (provider: AuthProviderEntry) => ContextMenuEntry[];
+    ap: AuthProvider;
+    gitProviderMenu: (provider: AuthProvider) => ContextMenuEntry[];
 }) => {
     return (
         <Item key={"ap-" + props.ap.id} className="h-16">
@@ -18,14 +19,14 @@ export const IntegrationEntryItem = (props: {
                 <div
                     className={
                         "rounded-full w-3 h-3 text-sm align-middle m-auto " +
-                        (props.ap.status === "verified" ? "bg-green-500" : "bg-gray-400")
+                        (props.ap.verified ? "bg-green-500" : "bg-gray-400")
                     }
                 >
                     &nbsp;
                 </div>
             </ItemFieldIcon>
             <ItemField className="w-3/12 flex flex-col my-auto">
-                <span className="font-medium truncate overflow-ellipsis">{props.ap.type}</span>
+                <span className="font-medium truncate overflow-ellipsis">{toAuthProviderLabel(props.ap.type)}</span>
             </ItemField>
             <ItemField className="w-7/12 flex flex-col my-auto">
                 <span className="my-auto truncate text-gray-500 overflow-ellipsis">{props.ap.host}</span>
diff --git a/components/dashboard/src/user-settings/Integrations.tsx b/components/dashboard/src/user-settings/Integrations.tsx
index c044fe1c2abe23..22950f1445ba60 100644
--- a/components/dashboard/src/user-settings/Integrations.tsx
+++ b/components/dashboard/src/user-settings/Integrations.tsx
@@ -4,10 +4,10 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import { AuthProviderEntry, AuthProviderInfo, User } from "@gitpod/gitpod-protocol";
+import { User, getScopesForAuthProviderType } from "@gitpod/gitpod-protocol";
 import { SelectAccountPayload } from "@gitpod/gitpod-protocol/lib/auth";
 import { useQuery } from "@tanstack/react-query";
-import React, { useCallback, useContext, useEffect, useState } from "react";
+import React, { useCallback, useContext, useEffect, useMemo, useState } from "react";
 import Alert from "../components/Alert";
 import { CheckboxInputField, CheckboxListField } from "../components/forms/CheckboxInputField";
 import ConfirmationModal from "../components/ConfirmationModal";
@@ -19,17 +19,26 @@ import Modal, { ModalBody, ModalHeader, ModalFooter } from "../components/Modal"
 import { Heading2, Subheading } from "../components/typography/headings";
 import copy from "../images/copy.svg";
 import exclamation from "../images/exclamation.svg";
-import { openAuthorizeWindow } from "../provider-utils";
+import { openAuthorizeWindow, toAuthProviderLabel } from "../provider-utils";
 import { getGitpodService, gitpodHostUrl } from "../service/service";
 import { UserContext } from "../user-context";
 import { AuthEntryItem } from "./AuthEntryItem";
 import { IntegrationEntryItem } from "./IntegrationItemEntry";
 import { PageWithSettingsSubMenu } from "./PageWithSettingsSubMenu";
 import { SelectAccountModal } from "./SelectAccountModal";
-import { useAuthProviders } from "../data/auth-providers/auth-provider-query";
+import { useAuthProviderDescriptions } from "../data/auth-providers/auth-provider-descriptions-query";
 import { useFeatureFlag } from "../data/featureflag-query";
 import { EmptyMessage } from "../components/EmptyMessage";
 import { Delayed } from "@podkit/loading/Delayed";
+import {
+    AuthProvider,
+    AuthProviderDescription,
+    AuthProviderType,
+} from "@gitpod/public-api/lib/gitpod/v1/authprovider_pb";
+import { authProviderClient } from "../service/public-api";
+import { useCreateUserAuthProviderMutation } from "../data/auth-providers/create-user-auth-provider-mutation";
+import { useUpdateUserAuthProviderMutation } from "../data/auth-providers/update-user-auth-provider-mutation";
+import { useDeleteUserAuthProviderMutation } from "../data/auth-providers/delete-user-auth-provider-mutation";
 
 export default function Integrations() {
     return (
@@ -46,11 +55,13 @@ export default function Integrations() {
 function GitProviders() {
     const { user, setUser } = useContext(UserContext);
 
-    const authProviders = useAuthProviders();
+    const authProviders = useAuthProviderDescriptions();
     const [allScopes, setAllScopes] = useState<Map<string, string[]>>(new Map());
-    const [disconnectModal, setDisconnectModal] = useState<{ provider: AuthProviderInfo } | undefined>(undefined);
+    const [disconnectModal, setDisconnectModal] = useState<{ provider: AuthProviderDescription } | undefined>(
+        undefined,
+    );
     const [editModal, setEditModal] = useState<
-        { provider: AuthProviderInfo; prevScopes: Set<string>; nextScopes: Set<string> } | undefined
+        { provider: AuthProviderDescription; prevScopes: Set<string>; nextScopes: Set<string> } | undefined
     >(undefined);
     const [selectAccountModal, setSelectAccountModal] = useState<SelectAccountPayload | undefined>(undefined);
     const [errorMessage, setErrorMessage] = useState<string | undefined>();
@@ -59,14 +70,14 @@ function GitProviders() {
         if (user) {
             const scopesByProvider = new Map<string, string[]>();
             const connectedProviders = user.identities.map((i) =>
-                authProviders.data?.find((ap) => ap.authProviderId === i.authProviderId),
+                authProviders.data?.find((ap) => ap.id === i.authProviderId),
             );
             for (let provider of connectedProviders) {
                 if (!provider) {
                     continue;
                 }
                 const token = await getGitpodService().server.getToken({ host: provider.host });
-                scopesByProvider.set(provider.authProviderId, token?.scopes?.slice() || []);
+                scopesByProvider.set(provider.id, token?.scopes?.slice() || []);
             }
             setAllScopes(scopesByProvider);
         }
@@ -80,29 +91,39 @@ function GitProviders() {
         return !!user?.identities?.find((i) => i.authProviderId === authProviderId);
     };
 
-    const gitProviderMenu = (provider: AuthProviderInfo) => {
+    const getSettingsUrl = (ap: AuthProviderDescription) => {
+        switch (ap.type) {
+            case AuthProviderType.GITHUB:
+                return `${ap.host}/settings/developers`;
+            case AuthProviderType.GITLAB:
+                return `${ap.host}/-/profile/applications`;
+            default:
+                return undefined;
+        }
+    };
+
+    const gitProviderMenu = (provider: AuthProviderDescription) => {
         const result: ContextMenuEntry[] = [];
-        const connected = isConnected(provider.authProviderId);
+        const connected = isConnected(provider.id);
         if (connected) {
+            const settingsUrl = getSettingsUrl(provider);
             result.push({
                 title: "Edit Permissions",
                 onClick: () => startEditPermissions(provider),
-                separator: !provider.settingsUrl,
+                separator: !settingsUrl,
             });
-            if (provider.settingsUrl) {
+            if (settingsUrl) {
                 result.push({
                     title: `Manage on ${provider.host}`,
                     onClick: () => {
-                        window.open(provider.settingsUrl, "_blank", "noopener,noreferrer");
+                        window.open(settingsUrl, "_blank", "noopener,noreferrer");
                     },
                     separator: true,
                 });
             }
             const canDisconnect =
                 (user && User.isOrganizationOwned(user)) ||
-                authProviders.data?.some(
-                    (p) => p.authProviderId !== provider.authProviderId && isConnected(p.authProviderId),
-                );
+                authProviders.data?.some((p) => p.id !== provider.id && isConnected(p.id));
             if (canDisconnect) {
                 result.push({
                     title: "Disconnect",
@@ -128,11 +149,11 @@ function GitProviders() {
         return allScopes.get(authProviderId);
     };
 
-    const connect = async (ap: AuthProviderInfo) => {
-        await doAuthorize(ap.host, ap.requirements?.default);
+    const connect = async (ap: AuthProviderDescription) => {
+        await doAuthorize(ap.host);
     };
 
-    const disconnect = async (ap: AuthProviderInfo) => {
+    const disconnect = async (ap: AuthProviderDescription) => {
         setDisconnectModal(undefined);
         const returnTo = gitpodHostUrl.with({ pathname: "complete-auth", search: "message=success" }).toString();
         const deauthorizeUrl = gitpodHostUrl
@@ -157,7 +178,7 @@ function GitProviders() {
             );
     };
 
-    const startEditPermissions = async (provider: AuthProviderInfo) => {
+    const startEditPermissions = async (provider: AuthProviderDescription) => {
         // todo: add spinner
 
         const token = await getGitpodService().server.getToken({ host: provider.host });
@@ -271,7 +292,7 @@ function GitProviders() {
                     title="Disconnect Provider"
                     areYouSureText="Are you sure you want to disconnect the following provider?"
                     children={{
-                        name: disconnectModal.provider.authProviderType,
+                        name: toAuthProviderLabel(disconnectModal.provider.type),
                         description: disconnectModal.provider.host,
                     }}
                     buttonText="Disconnect Provider"
@@ -296,14 +317,14 @@ function GitProviders() {
                     <ModalHeader>Edit Permissions</ModalHeader>
                     <ModalBody>
                         <CheckboxListField label="Configure provider permissions.">
-                            {(editModal.provider.scopes || []).map((scope) => (
+                            {(getScopesForAuthProviderType(editModal.provider.type) || []).map((scope) => (
                                 <CheckboxInputField
                                     key={scope}
                                     value={scope}
                                     label={scope}
                                     hint={getDescriptionForScope(scope)}
                                     checked={editModal.nextScopes.has(scope)}
-                                    disabled={editModal.provider.requirements?.default.includes(scope)}
+                                    // disabled={editModal.provider.requirements?.default.includes(scope)} // what?!
                                     topMargin={false}
                                     onChange={(checked) => onChangeScopeHandler(checked, scope)}
                                 />
@@ -340,7 +361,7 @@ function GitProviders() {
                     ) : (
                         authProviders.data.map((ap) => (
                             <AuthEntryItem
-                                key={ap.authProviderId}
+                                key={ap.id}
                                 isConnected={isConnected}
                                 gitProviderMenu={gitProviderMenu}
                                 getUsername={getUsername}
@@ -358,10 +379,12 @@ function GitIntegrations() {
     const { user } = useContext(UserContext);
     const userGitAuthProviders = useFeatureFlag("userGitAuthProviders");
 
+    const deleteUserAuthProvider = useDeleteUserAuthProviderMutation();
+
     const [modal, setModal] = useState<
         | { mode: "new" }
-        | { mode: "edit"; provider: AuthProviderEntry }
-        | { mode: "delete"; provider: AuthProviderEntry }
+        | { mode: "edit"; provider: AuthProvider }
+        | { mode: "delete"; provider: AuthProvider }
         | undefined
     >(undefined);
 
@@ -371,13 +394,20 @@ function GitIntegrations() {
         refetch,
     } = useQuery(
         ["own-auth-providers", { userId: user?.id ?? "" }],
-        async () => await getGitpodService().server.getOwnAuthProviders(),
+        async () => {
+            const { authProviders } = await authProviderClient.listAuthProviders({
+                id: { case: "userId", value: user?.id || "" },
+            });
+            return authProviders;
+        },
         { enabled: !!user },
     );
 
-    const deleteProvider = async (provider: AuthProviderEntry) => {
+    const deleteProvider = async (provider: AuthProvider) => {
         try {
-            await getGitpodService().server.deleteOwnAuthProvider(provider);
+            await deleteUserAuthProvider.mutateAsync({
+                providerId: provider.id,
+            });
         } catch (error) {
             console.log(error);
         }
@@ -385,10 +415,10 @@ function GitIntegrations() {
         refetch();
     };
 
-    const gitProviderMenu = (provider: AuthProviderEntry) => {
+    const gitProviderMenu = (provider: AuthProvider) => {
         const result: ContextMenuEntry[] = [];
         result.push({
-            title: provider.status === "verified" ? "Edit Configuration" : "Activate Integration",
+            title: provider.verified ? "Edit Configuration" : "Activate Integration",
             onClick: () => setModal({ mode: "edit", provider }),
             separator: true,
         });
@@ -438,7 +468,7 @@ function GitIntegrations() {
                     title="Remove Integration"
                     areYouSureText="Are you sure you want to remove the following Git integration?"
                     children={{
-                        name: modal.provider.type,
+                        name: toAuthProviderLabel(modal.provider.type),
                         description: modal.provider.host,
                     }}
                     buttonText="Remove Integration"
@@ -494,7 +524,7 @@ export function GitIntegrationModal(
           }
         | {
               mode: "edit";
-              provider: AuthProviderEntry;
+              provider: AuthProvider;
           }
     ) & {
         login?: boolean;
@@ -506,32 +536,30 @@ export function GitIntegrationModal(
         onAuthorize?: (payload?: string) => void;
     },
 ) {
-    const callbackUrl = () => {
-        const pathname = `/auth/callback`;
-        return gitpodHostUrl.with({ pathname }).toString();
-    };
+    const callbackUrl = useMemo(() => gitpodHostUrl.with({ pathname: `/auth/callback` }).toString(), []);
 
     const [mode, setMode] = useState<"new" | "edit">("new");
-    const [providerEntry, setProviderEntry] = useState<AuthProviderEntry | undefined>(undefined);
+    const [providerEntry, setProviderEntry] = useState<AuthProvider | undefined>(undefined);
 
-    const [type, setType] = useState<string>("GitLab");
+    const [type, setType] = useState<AuthProviderType>(AuthProviderType.GITLAB);
     const [host, setHost] = useState<string>("");
-    const [redirectURI, setRedirectURI] = useState<string>(callbackUrl());
     const [clientId, setClientId] = useState<string>("");
     const [clientSecret, setClientSecret] = useState<string>("");
     const [busy, setBusy] = useState<boolean>(false);
     const [errorMessage, setErrorMessage] = useState<string | undefined>();
     const [validationError, setValidationError] = useState<string | undefined>();
 
+    const createProvider = useCreateUserAuthProviderMutation();
+    const updateProvider = useUpdateUserAuthProviderMutation();
+
     useEffect(() => {
         setMode(props.mode);
         if (props.mode === "edit") {
             setProviderEntry(props.provider);
             setType(props.provider.type);
             setHost(props.provider.host);
-            setClientId(props.provider.oauth.clientId);
-            setClientSecret(props.provider.oauth.clientSecret);
-            setRedirectURI(props.provider.oauth.callBackUrl);
+            setClientId(props.provider.oauth2Config?.clientId || "");
+            setClientSecret(props.provider.oauth2Config?.clientSecret || "");
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
@@ -546,26 +574,30 @@ export function GitIntegrationModal(
     const onUpdate = () => props.onUpdate && props.onUpdate();
 
     const activate = async () => {
-        let entry =
-            mode === "new"
-                ? ({
-                      host,
-                      type,
-                      clientId,
-                      clientSecret,
-                      ownerId: props.userId,
-                  } as AuthProviderEntry.NewEntry)
-                : ({
-                      id: providerEntry?.id,
-                      ownerId: props.userId,
-                      clientId,
-                      clientSecret: clientSecret === "redacted" ? undefined : clientSecret,
-                  } as AuthProviderEntry.UpdateEntry);
-
         setBusy(true);
         setErrorMessage(undefined);
         try {
-            const newProvider = await getGitpodService().server.updateOwnAuthProvider({ entry });
+            let newProvider: AuthProvider;
+
+            if (mode === "new") {
+                newProvider = await createProvider.mutateAsync({
+                    provider: {
+                        clientId,
+                        clientSecret,
+                        type,
+                        host,
+                        userId: props.userId,
+                    },
+                });
+            } else {
+                newProvider = await updateProvider.mutateAsync({
+                    provider: {
+                        id: providerEntry?.id || "",
+                        clientId,
+                        clientSecret: clientSecret === "redacted" ? "" : clientSecret,
+                    },
+                });
+            }
 
             // the server is checking periodically for updates of dynamic providers, thus we need to
             // wait at least 2 seconds for the changes to be propagated before we try to use this provider.
@@ -574,11 +606,11 @@ export function GitIntegrationModal(
             onUpdate();
 
             const updateProviderEntry = async () => {
-                const provider = (await getGitpodService().server.getOwnAuthProviders()).find(
-                    (ap) => ap.id === newProvider.id,
-                );
-                if (provider) {
-                    setProviderEntry(provider);
+                const { authProvider } = await authProviderClient.getAuthProvider({
+                    authProviderId: newProvider.id,
+                });
+                if (authProvider) {
+                    setProviderEntry(authProvider);
                 }
             };
 
@@ -643,10 +675,10 @@ export function GitIntegrationModal(
     const validate = () => {
         const errors: string[] = [];
         if (clientId.trim().length === 0) {
-            errors.push(`${type === "GitLab" ? "Application ID" : "Client ID"} is missing.`);
+            errors.push(`${type === AuthProviderType.GITLAB ? "Application ID" : "Client ID"} is missing.`);
         }
         if (clientSecret.trim().length === 0) {
-            errors.push(`${type === "GitLab" ? "Secret" : "Client Secret"} is missing.`);
+            errors.push(`${type === AuthProviderType.GITLAB ? "Secret" : "Client Secret"} is missing.`);
         }
         if (errors.length === 0) {
             setValidationError(undefined);
@@ -657,13 +689,13 @@ export function GitIntegrationModal(
         }
     };
 
-    const getRedirectUrlDescription = (type: string, host: string) => {
+    const getRedirectUrlDescription = (type: AuthProviderType, host: string) => {
         let settingsUrl = ``;
         switch (type) {
-            case "GitHub":
+            case AuthProviderType.GITHUB:
                 settingsUrl = `${host}/settings/developers`;
                 break;
-            case "GitLab":
+            case AuthProviderType.GITLAB:
                 settingsUrl = `${host}/-/profile/applications`;
                 break;
             default:
@@ -671,10 +703,10 @@ export function GitIntegrationModal(
         }
         let docsUrl = ``;
         switch (type) {
-            case "GitHub":
+            case AuthProviderType.GITHUB:
                 docsUrl = `https://www.gitpod.io/docs/github-integration/#oauth-application`;
                 break;
-            case "GitLab":
+            case AuthProviderType.GITLAB:
                 docsUrl = `https://www.gitpod.io/docs/gitlab-integration/#oauth-application`;
                 break;
             default:
@@ -696,13 +728,15 @@ export function GitIntegrationModal(
         );
     };
 
-    const getPlaceholderForIntegrationType = (type: string) => {
+    const getPlaceholderForIntegrationType = (type: AuthProviderType) => {
         switch (type) {
-            case "GitHub":
+            case AuthProviderType.GITHUB:
                 return "github.example.com";
-            case "GitLab":
+            case AuthProviderType.GITLAB:
                 return "gitlab.example.com";
-            case "BitbucketServer":
+            case AuthProviderType.BITBUCKET:
+                return "bitbucket.org";
+            case AuthProviderType.BITBUCKET_SERVER:
                 return "bitbucket.example.com";
             default:
                 return "";
@@ -711,7 +745,7 @@ export function GitIntegrationModal(
 
     const copyRedirectURI = () => {
         const el = document.createElement("textarea");
-        el.value = redirectURI;
+        el.value = callbackUrl;
         document.body.appendChild(el);
         el.select();
         try {
@@ -721,12 +755,29 @@ export function GitIntegrationModal(
         }
     };
 
+    const getNumber = (paramValue: string | null) => {
+        if (!paramValue) {
+            return 0;
+        }
+
+        try {
+            const number = Number.parseInt(paramValue, 10);
+            if (Number.isNaN(number)) {
+                return 0;
+            }
+
+            return number;
+        } catch (e) {
+            return 0;
+        }
+    };
+
     return (
         // TODO: Use title and buttons props
         <Modal visible={!!props} onClose={onClose} closeable={props.closeable}>
             <Heading2 className="pb-2">{mode === "new" ? "New Git Integration" : "Git Integration"}</Heading2>
             <div className="space-y-4 border-t border-b border-gray-200 dark:border-gray-800 mt-2 -mx-6 px-6 py-4">
-                {mode === "edit" && providerEntry?.status !== "verified" && (
+                {mode === "edit" && !providerEntry?.verified && (
                     <Alert type="warning">You need to activate this integration.</Alert>
                 )}
                 <div className="flex flex-col">
@@ -747,15 +798,15 @@ export function GitIntegrationModal(
                                 value={type}
                                 disabled={mode !== "new"}
                                 className="w-full"
-                                onChange={(e) => setType(e.target.value)}
+                                onChange={(e) => setType(getNumber(e.target.value))}
                             >
-                                <option value="GitHub">GitHub</option>
-                                <option value="GitLab">GitLab</option>
-                                <option value="BitbucketServer">Bitbucket Server</option>
+                                <option value={AuthProviderType.GITHUB}>GitHub</option>
+                                <option value={AuthProviderType.GITLAB}>GitLab</option>
+                                <option value={AuthProviderType.BITBUCKET_SERVER}>Bitbucket Server</option>
                             </select>
                         </div>
                     )}
-                    {mode === "new" && type === "BitbucketServer" && (
+                    {mode === "new" && type === AuthProviderType.BITBUCKET_SERVER && (
                         <InfoBox className="my-4 mx-auto">
                             OAuth 2.0 support in Bitbucket Server was added in version 7.20.{" "}
                             <a
@@ -792,7 +843,7 @@ export function GitIntegrationModal(
                                 disabled={true}
                                 readOnly={true}
                                 type="text"
-                                value={redirectURI}
+                                value={callbackUrl}
                                 className="w-full pr-8"
                             />
                             <div className="cursor-pointer" onClick={() => copyRedirectURI()}>
@@ -808,7 +859,7 @@ export function GitIntegrationModal(
                     </div>
                     <div className="flex flex-col space-y-2">
                         <label htmlFor="clientId" className="font-medium">{`${
-                            type === "GitLab" ? "Application ID" : "Client ID"
+                            type === AuthProviderType.GITLAB ? "Application ID" : "Client ID"
                         }`}</label>
                         <input
                             name="clientId"
@@ -820,7 +871,7 @@ export function GitIntegrationModal(
                     </div>
                     <div className="flex flex-col space-y-2">
                         <label htmlFor="clientSecret" className="font-medium">{`${
-                            type === "GitLab" ? "Secret" : "Client Secret"
+                            type === AuthProviderType.GITLAB ? "Secret" : "Client Secret"
                         }`}</label>
                         <input
                             name="clientSecret"
diff --git a/components/dashboard/src/workspaces/CreateWorkspacePage.tsx b/components/dashboard/src/workspaces/CreateWorkspacePage.tsx
index efe6d490422349..9ffbb620f58293 100644
--- a/components/dashboard/src/workspaces/CreateWorkspacePage.tsx
+++ b/components/dashboard/src/workspaces/CreateWorkspacePage.tsx
@@ -27,7 +27,7 @@ import SelectWorkspaceClassComponent from "../components/SelectWorkspaceClassCom
 import { UsageLimitReachedModal } from "../components/UsageLimitReachedModal";
 import { InputField } from "../components/forms/InputField";
 import { Heading1 } from "../components/typography/headings";
-import { useAuthProviders } from "../data/auth-providers/auth-provider-query";
+import { useAuthProviderDescriptions } from "../data/auth-providers/auth-provider-descriptions-query";
 import { useCurrentOrg } from "../data/organizations/orgs-query";
 import { useListAllProjectsQuery } from "../data/projects/list-all-projects-query";
 import { useCreateWorkspaceMutation } from "../data/workspaces/create-workspace-mutation";
@@ -43,6 +43,7 @@ import { UserContext, useCurrentUser } from "../user-context";
 import { SelectAccountModal } from "../user-settings/SelectAccountModal";
 import { settingsPathIntegrations } from "../user-settings/settings.routes";
 import { WorkspaceEntry } from "./WorkspaceEntry";
+import { AuthProviderType } from "@gitpod/public-api/lib/gitpod/v1/authprovider_pb";
 
 export function CreateWorkspacePage() {
     const { user, setUser } = useContext(UserContext);
@@ -574,14 +575,19 @@ const RepositoryInputError: FC<RepositoryInputErrorProps> = ({ title, message, l
 export const RepositoryNotFound: FC<{ error: StartWorkspaceError }> = ({ error }) => {
     const { host, owner, userIsOwner, userScopes = [], lastUpdate } = error.data || {};
 
-    const authProviders = useAuthProviders();
+    const authProviders = useAuthProviderDescriptions();
     const authProvider = authProviders.data?.find((a) => a.host === host);
     if (!authProvider) {
         return <RepositoryInputError title="The repository was not found in your account." />;
     }
 
     // TODO: this should be aware of already granted permissions
-    const missingScope = authProvider.authProviderType === "GitHub" ? "repo" : "read_repository";
+    const missingScope =
+        authProvider.type === AuthProviderType.GITHUB
+            ? "repo"
+            : authProvider.type === AuthProviderType.GITLAB
+            ? "api"
+            : "";
     const authorizeURL = gitpodHostUrl
         .withApi({
             pathname: "/authorize",
diff --git a/components/gitpod-protocol/src/auth-providers.ts b/components/gitpod-protocol/src/auth-providers.ts
new file mode 100644
index 00000000000000..ce2baa69f649c0
--- /dev/null
+++ b/components/gitpod-protocol/src/auth-providers.ts
@@ -0,0 +1,131 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { AuthProviderType } from "@gitpod/public-api/lib/gitpod/v1/authprovider_pb";
+
+export namespace GitLabScope {
+    export const READ_USER = "read_user";
+    export const API = "api";
+    export const READ_REPO = "read_repository";
+
+    export const ALL = [READ_USER, API, READ_REPO];
+    /**
+     * Minimal required permission.
+     * GitLab API usage requires the permission of a user.
+     */
+    export const DEFAULT = [READ_USER, API];
+    export const REPO = [API, READ_REPO];
+}
+
+export namespace GitHubScope {
+    export const EMAIL = "user:email";
+    export const READ_USER = "read:user";
+    export const PUBLIC = "public_repo";
+    export const PRIVATE = "repo";
+    export const ORGS = "read:org";
+    export const WORKFLOW = "workflow";
+
+    export const ALL = [EMAIL, READ_USER, PUBLIC, PRIVATE, ORGS, WORKFLOW];
+    export const DEFAULT = ALL;
+    export const PUBLIC_REPO = ALL;
+    export const PRIVATE_REPO = ALL;
+}
+
+export namespace BitbucketOAuthScopes {
+    // https://confluence.atlassian.com/bitbucket/oauth-on-bitbucket-cloud-238027431.html
+
+    /** Read user info like name, e-mail adresses etc. */
+    export const ACCOUNT_READ = "account";
+    /** Access repo info, clone repo over https, read and write issues */
+    export const REPOSITORY_READ = "repository";
+    /** Push over https, fork repo */
+    export const REPOSITORY_WRITE = "repository:write";
+    /** Lists and read pull requests */
+    export const PULL_REQUEST_READ = "pullrequest";
+    /** Create, comment and merge pull requests */
+    export const PULL_REQUEST_WRITE = "pullrequest:write";
+    /** Create, list web hooks */
+    export const WEBHOOK = "webhook";
+
+    export const ALL = [
+        ACCOUNT_READ,
+        REPOSITORY_READ,
+        REPOSITORY_WRITE,
+        PULL_REQUEST_READ,
+        PULL_REQUEST_WRITE,
+        WEBHOOK,
+    ];
+
+    export const DEFAULT = ALL;
+}
+
+export namespace BitbucketServerOAuthScopes {
+    // https://confluence.atlassian.com/bitbucketserver/bitbucket-oauth-2-0-provider-api-1108483661.html#BitbucketOAuth2.0providerAPI-scopesScopes
+
+    /** View projects and repositories that are publicly accessible, including pulling code and cloning repositories. */
+    export const PUBLIC_REPOS = "PUBLIC_REPOS";
+    /** View projects and repositories the user account can view, including pulling code, cloning, and forking repositories. Create and comment on pull requests. */
+    export const REPO_READ = "REPO_READ";
+    /** Push over https, fork repo */
+    export const REPO_WRITE = "REPO_WRITE";
+
+    export const REPO_ADMIN = "REPO_ADMIN";
+    export const PROJECT_ADMIN = "PROJECT_ADMIN";
+
+    export const ALL = [PUBLIC_REPOS, REPO_READ, REPO_WRITE, REPO_ADMIN, PROJECT_ADMIN];
+
+    export const DEFAULT = ALL;
+}
+
+export function getScopesForAuthProviderType(type: AuthProviderType | string) {
+    switch (type) {
+        case AuthProviderType.GITHUB:
+        case "GitHub":
+            return GitHubScope.ALL;
+        case AuthProviderType.GITLAB:
+        case "GitLab":
+            return GitLabScope.ALL;
+        case AuthProviderType.BITBUCKET:
+        case "Bitbucket":
+            return BitbucketOAuthScopes.ALL;
+        case AuthProviderType.BITBUCKET_SERVER:
+        case "BitbucketServer":
+            return BitbucketServerOAuthScopes.ALL;
+    }
+}
+
+export function getRequiredScopes(type: AuthProviderType | string) {
+    switch (type) {
+        case AuthProviderType.GITHUB:
+        case "GitHub":
+            return {
+                default: GitHubScope.DEFAULT,
+                publicRepo: GitHubScope.PUBLIC_REPO,
+                privateRepo: GitHubScope.PRIVATE_REPO,
+            };
+        case AuthProviderType.GITLAB:
+        case "GitLab":
+            return {
+                default: GitLabScope.DEFAULT,
+                publicRepo: GitLabScope.DEFAULT,
+                privateRepo: GitLabScope.REPO,
+            };
+        case AuthProviderType.BITBUCKET:
+        case "Bitbucket":
+            return {
+                default: BitbucketOAuthScopes.DEFAULT,
+                publicRepo: BitbucketOAuthScopes.DEFAULT,
+                privateRepo: BitbucketOAuthScopes.DEFAULT,
+            };
+        case AuthProviderType.BITBUCKET_SERVER:
+        case "BitbucketServer":
+            return {
+                default: BitbucketServerOAuthScopes.DEFAULT,
+                publicRepo: BitbucketServerOAuthScopes.DEFAULT,
+                privateRepo: BitbucketServerOAuthScopes.DEFAULT,
+            };
+    }
+}
diff --git a/components/gitpod-protocol/src/index.ts b/components/gitpod-protocol/src/index.ts
index 6c6edaa2af2589..f46bb9687720fb 100644
--- a/components/gitpod-protocol/src/index.ts
+++ b/components/gitpod-protocol/src/index.ts
@@ -18,3 +18,4 @@ export * from "./teams-projects-protocol";
 export * from "./snapshot-url";
 export * from "./webhook-event";
 export * from "./redis";
+export * from "./auth-providers";
diff --git a/components/server/src/auth/auth-provider-service.ts b/components/server/src/auth/auth-provider-service.ts
index e75a977a92d2fa..b3d39583cb581b 100644
--- a/components/server/src/auth/auth-provider-service.ts
+++ b/components/server/src/auth/auth-provider-service.ts
@@ -227,9 +227,11 @@ export class AuthProviderService {
         if (!existing) {
             throw new ApplicationError(ErrorCodes.NOT_FOUND, "Provider resource not found.");
         }
-        const changed =
-            entry.clientId !== existing.oauth.clientId ||
-            (entry.clientSecret && entry.clientSecret !== existing.oauth.clientSecret);
+
+        // Explicitly check if any update needs to be performed
+        const changedId = entry.clientId && entry.clientId !== existing.oauth.clientId;
+        const changedSecret = entry.clientSecret && entry.clientSecret !== existing.oauth.clientSecret;
+        const changed = changedId || changedSecret;
 
         if (!changed) {
             return existing;