coder · Emyrk · Dec 6, 2023 · Nov 29, 2023 · Nov 30, 2023 · Nov 29, 2023
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
diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -132,6 +132,10 @@ const ObservabilitySettingsPage = lazy(
 const ExternalAuthPage = lazy(
   () => import("./pages/ExternalAuthPage/ExternalAuthPage"),
 );
+const UserExternalAuthSettingsPage = lazy(
+  () =>
+    import("./pages/UserExternalAuthSettingsPage/UserExternalAuthSettingsPage"),
+);
 const TemplateVersionPage = lazy(
   () => import("./pages/TemplateVersionPage/TemplateVersionPage"),
 );
@@ -265,6 +269,10 @@ export const AppRouter: FC = () => {
                   <Route path="versions">
                     <Route path=":version">
                       <Route index element={<TemplateVersionPage />} />
+                      <Route
+                        path="edit"
+                        element={<TemplateVersionEditorPage />}
+                      />
                     </Route>
                   </Route>
                 </Route>
@@ -320,6 +328,10 @@ export const AppRouter: FC = () => {
                 <Route path="schedule" element={<SchedulePage />} />
                 <Route path="security" element={<SecurityPage />} />
                 <Route path="ssh-keys" element={<SSHKeysPage />} />
+                <Route
+                  path="external-auth"
+                  element={<UserExternalAuthSettingsPage />}
+                />
                 <Route path="tokens">
                   <Route index element={<TokensPage />} />
                   <Route path="new" element={<CreateTokenPage />} />
@@ -366,17 +378,13 @@ export const AppRouter: FC = () => {
               <Route path="*" element={<NotFoundPage />} />
             </Route>
 
-            {/* Pages that don't have the dashboard layout */}
+            {/* Terminal and CLI auth pages don't have the dashboard layout */}
             <Route
               path="/:username/:workspace/terminal"
               element={<TerminalPage />}
             />
             <Route path="/cli-auth" element={<CliAuthenticationPage />} />
             <Route path="/icons" element={<IconsPage />} />
-            <Route
-              path="/templates/:template/versions/:version/edit"
-              element={<TemplateVersionEditorPage />}
-            />
           </Route>
         </Routes>
       </Router>

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -939,6 +939,19 @@ export const exchangeExternalAuthDevice = async (
   return resp.data;
 };
 
+export const getUserExternalAuthProviders =
+  async (): Promise<TypesGen.ListUserExternalAuthResponse> => {
+    const resp = await axios.get(`/api/v2/external-auth`);
+    return resp.data;
+  };
+
+export const unlinkExternalAuthProvider = async (
+  provider: string,
+): Promise<string> => {
+  const resp = await axios.delete(`/api/v2/external-auth/${provider}`);
+  return resp.data;
+};
+
 export const getAuditLogs = async (
   options: TypesGen.AuditLogsRequest,
 ): Promise<TypesGen.AuditLogResponse> => {

diff --git a/site/src/api/queries/externalauth.ts b/site/src/api/queries/externalauth.ts
@@ -0,0 +1,40 @@
+import * as API from "api/api";
+import { QueryClient } from "react-query";
+
+const getUserExternalAuthsKey = () => ["list", "external-auth"];
+
+// listUserExternalAuths returns all configured external auths for a given user.
+export const listUserExternalAuths = () => {
+  return {
+    queryKey: getUserExternalAuthsKey(),
+    queryFn: () => API.getUserExternalAuthProviders(),
+  };
+};
+
+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,
+  };
+};
+
+export const unlinkExternalAuths = (queryClient: QueryClient) => {
+  return {
+    mutationFn: API.unlinkExternalAuthProvider,
+    onSuccess: async () => {
+      await queryClient.invalidateQueries(["external-auth"]);
+    },
+  };
+};
diff --git a/site/src/api/typesGenerated.ts b/site/src/api/typesGenerated.ts
diff --git a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx
@@ -18,6 +18,10 @@ export interface DeleteDialogProps {
   name: string;
   info?: string;
   confirmLoading?: boolean;
+  verb?: string;
+  title?: string;
+  label?: string;
+  confirmText?: string;
 }
 
 export const DeleteDialog: FC<PropsWithChildren<DeleteDialogProps>> = ({
@@ -28,6 +32,11 @@ export const DeleteDialog: FC<PropsWithChildren<DeleteDialogProps>> = ({
   info,
   name,
   confirmLoading,
+  // All optional to change the verbiage. For example, "unlinking" vs "deleting"
+  verb,
+  title,
+  label,
+  confirmText,
 }) => {
   const hookId = useId();
   const theme = useTheme();
@@ -52,14 +61,17 @@ export const DeleteDialog: FC<PropsWithChildren<DeleteDialogProps>> = ({
       type="delete"
       hideCancel={false}
       open={isOpen}
-      title={`Delete ${entity}`}
+      title={title ?? `Delete ${entity}`}
       onConfirm={onConfirm}
       onClose={onCancel}
       confirmLoading={confirmLoading}
       disabled={!deletionConfirmed}
+      confirmText={confirmText}
       description={
         <>
-          <p>Deleting this {entity} is irreversible!</p>
+          <p>
+            {verb ?? "Deleting"} this {entity} is irreversible!
+          </p>
 
           {Boolean(info) && (
             <p css={{ color: theme.palette.warning.light }}>{info}</p>
@@ -84,7 +96,7 @@ export const DeleteDialog: FC<PropsWithChildren<DeleteDialogProps>> = ({
               onChange={(event) => setUserConfirmationText(event.target.value)}
               onFocus={() => setIsFocused(true)}
               onBlur={() => setIsFocused(false)}
-              label={`Name of the ${entity} to delete`}
+              label={label ?? `Name of the ${entity} to delete`}
               color={inputColor}
               error={displayErrorMessage}
               helperText={

diff --git a/site/src/components/SettingsLayout/Sidebar.tsx b/site/src/components/SettingsLayout/Sidebar.tsx
@@ -11,6 +11,7 @@ import {
   SidebarHeader,
   SidebarNavItem,
 } from "components/Sidebar/Sidebar";
+import { GitIcon } from "components/Icons/GitIcon";
 
 export const Sidebar: React.FC<{ user: User }> = ({ user }) => {
   const { entitlements } = useDashboard();
@@ -40,6 +41,9 @@ export const Sidebar: React.FC<{ user: User }> = ({ user }) => {
       <SidebarNavItem href="ssh-keys" icon={FingerprintOutlinedIcon}>
         SSH Keys
       </SidebarNavItem>
+      <SidebarNavItem href="external-auth" icon={GitIcon}>
+        External Authentication
+      </SidebarNavItem>
       <SidebarNavItem href="tokens" icon={VpnKeyOutlined}>
         Tokens
       </SidebarNavItem>