update FE to add external settings page

coder · Emyrk · Dec 6, 2023 · Nov 29, 2023 · Nov 30, 2023 · Nov 29, 2023
commit add4d6f00b78d4ed8acc9f2f17fc7f74e6ec0372
diff --git a/coderd/apidoc/docs.go b/coderd/apidoc/docs.go
diff --git a/coderd/apidoc/swagger.json b/coderd/apidoc/swagger.json
diff --git a/coderd/database/db2sdk/db2sdk.go b/coderd/database/db2sdk/db2sdk.go
@@ -16,21 +16,28 @@ import (
 	"github.com/coder/coder/v2/provisionersdk/proto"
 )
 
-func ExternalAuths(auths []database.ExternalAuthLink) []codersdk.ExternalAuthLink {
+type ExternalAuthMeta struct {
+	Authenticated bool
+	ValidateError string
+}
+
+func ExternalAuths(auths []database.ExternalAuthLink, meta map[string]ExternalAuthMeta) []codersdk.ExternalAuthLink {
 	out := make([]codersdk.ExternalAuthLink, 0, len(auths))
 	for _, auth := range auths {
-		out = append(out, ExternalAuth(auth))
+		out = append(out, ExternalAuth(auth, meta[auth.ProviderID]))
 	}
 	return out
 }
 
-func ExternalAuth(auth database.ExternalAuthLink) codersdk.ExternalAuthLink {
+func ExternalAuth(auth database.ExternalAuthLink, meta ExternalAuthMeta) codersdk.ExternalAuthLink {
 	return codersdk.ExternalAuthLink{
 		ProviderID:      auth.ProviderID,
 		CreatedAt:       auth.CreatedAt,
 		UpdatedAt:       auth.UpdatedAt,
 		HasRefreshToken: auth.OAuthRefreshToken != "",
 		Expires:         auth.OAuthExpiry,
+		Authenticated:   meta.Authenticated,
+		ValidateError:   meta.ValidateError,
 	}
 }
 

diff --git a/coderd/externalauth.go b/coderd/externalauth.go
@@ -337,14 +337,44 @@ func (api *API) listUserExternalAuths(rw http.ResponseWriter, r *http.Request) {
 		return
 	}
 
+	// This process of authenticating each external link increases the
+	// response time. However, it is necessary to more correctly debug
+	// authentication issues.
+	// We can do this in parallel if we want to speed it up.
+	configs := make(map[string]*externalauth.Config)
+	for _, cfg := range api.ExternalAuthConfigs {
+		configs[cfg.ID] = cfg
+	}
+	// Check if the links are authenticated.
+	linkMeta := make(map[string]db2sdk.ExternalAuthMeta)
+	for i, link := range links {
+		if link.OAuthAccessToken != "" {
+			cfg, ok := configs[link.ProviderID]
+			if ok {
+				newLink, valid, err := cfg.RefreshToken(ctx, api.Database, link)
+				meta := db2sdk.ExternalAuthMeta{
+					Authenticated: valid,
+				}
+				if err != nil {
+					meta.ValidateError = err.Error()
+				}
+				// Update the link if it was potentially refreshed.
+				if err == nil && valid {
+					links[i] = newLink
+				}
+				break
+			}
+		}
+	}
+
 	// Note: It would be really nice if we could cfg.Validate() the links and
 	// return their authenticated status. To do this, we would also have to
 	// refresh expired tokens too. For now, I do not want to cause the excess
 	// traffic on this request, so the user will have to do this with a separate
 	// call.
 	httpapi.Write(ctx, rw, http.StatusOK, codersdk.ListUserExternalAuthResponse{
 		Providers: ExternalAuthConfigs(api.ExternalAuthConfigs),
-		Links:     db2sdk.ExternalAuths(links),
+		Links:     db2sdk.ExternalAuths(links, linkMeta),
 	})
 }
 

diff --git a/codersdk/externalauth.go b/codersdk/externalauth.go
@@ -76,6 +76,8 @@ type ExternalAuthLink struct {
 	UpdatedAt       time.Time `json:"updated_at" format:"date-time"`
 	HasRefreshToken bool      `json:"has_refresh_token"`
 	Expires         time.Time `json:"expires" format:"date-time"`
+	Authenticated   bool      `json:"authenticated"`
+	ValidateError   string    `json:"validate_error"`
 }
 
 // ExternalAuthLinkProvider are the static details of a provider.

diff --git a/docs/api/git.md b/docs/api/git.md
diff --git a/docs/api/schemas.md b/docs/api/schemas.md
@@ -11,6 +11,19 @@ export const listUserExternalAuths = () => {
   };
 };
 
+const getUserExternalAuthKey = (providerID: string) => [
+  providerID,
+  "get",
+  "external-auth",
+];
+
+export const userExternalAuth = (providerID: string) => {
+  return {
+    queryKey: getUserExternalAuthKey(providerID),
+    queryFn: () => API.getExternalAuthProvider(providerID),
+  };
+};
+
 export const validateExternalAuth = (_: QueryClient) => {
   return {
     mutationFn: API.getExternalAuthProvider,

diff --git a/site/src/api/typesGenerated.ts b/site/src/api/typesGenerated.ts
@@ -15,6 +15,7 @@ export interface ExternalAuthProps {
   externalAuthPollingState: ExternalAuthPollingState;
   startPollingExternalAuth: () => void;
   error?: string;
+  message?: string;
 }
 
 export const ExternalAuth: FC<ExternalAuthProps> = (props) => {
@@ -26,8 +27,14 @@ export const ExternalAuth: FC<ExternalAuthProps> = (props) => {
     externalAuthPollingState,
     startPollingExternalAuth,
     error,
+    message,
   } = props;
 
+  const messageContent =
+    message ??
+    (authenticated
+      ? `Authenticated with ${displayName}`
+      : `Login with ${displayName}`);
   return (
     <Tooltip
       title={authenticated && `${displayName} has already been connected.`}
@@ -40,12 +47,14 @@ export const ExternalAuth: FC<ExternalAuthProps> = (props) => {
           variant="contained"
           size="large"
           startIcon={
-            <img
-              src={displayIcon}
-              alt={`${displayName} Icon`}
-              width={16}
-              height={16}
-            />
+            displayIcon && (
+              <img
+                src={displayIcon}
+                alt={`${displayName} Icon`}
+                width={16}
+                height={16}
+              />
+            )
           }
           disabled={authenticated}
           css={{ height: 52 }}
@@ -61,9 +70,7 @@ export const ExternalAuth: FC<ExternalAuthProps> = (props) => {
             startPollingExternalAuth();
           }}
         >
-          {authenticated
-            ? `Authenticated with ${displayName}`
-            : `Login with ${displayName}`}
+          {messageContent}
         </LoadingButton>
 
         {externalAuthPollingState === "abandoned" && (

@@ -13,20 +13,37 @@ import { getErrorMessage } from "api/errors";
 
 const UserExternalAuthSettingsPage: FC = () => {
   const queryClient = useQueryClient();
+  // This is used to tell the child components something was unlinked and things
+  // need to be refetched
+  const [unlinked, setUnlinked] = useState(0);
 
-  const userExternalAuthsQuery = useQuery(listUserExternalAuths());
+  const {
+    data: externalAuths,
+    error,
+    isLoading,
+    refetch,
+  } = useQuery(listUserExternalAuths());
 
   const [appToUnlink, setAppToUnlink] = useState<string>();
-  const unlinkAppMutation = useMutation(unlinkExternalAuths(queryClient));
+  const mutateParams = unlinkExternalAuths(queryClient);
+  const unlinkAppMutation = useMutation({
+    ...mutateParams,
+    onSuccess: async () => {
+      await mutateParams.onSuccess();
+      await refetch();
+      setUnlinked(unlinked + 1);
+    },
+  });
 
   const validateAppMutation = useMutation(validateExternalAuth(queryClient));
 
   return (
     <Section title="External Authentication">
       <UserExternalAuthSettingsPageView
-        isLoading={userExternalAuthsQuery.isLoading}
-        getAuthsError={userExternalAuthsQuery.error}
-        auths={userExternalAuthsQuery.data}
+        isLoading={isLoading}
+        getAuthsError={error}
+        auths={externalAuths}
+        unlinked={unlinked}
         onUnlinkExternalAuth={(providerID: string) => {
           setAppToUnlink(providerID);
         }}