diff --git a/web/packages/teleport/src/AuthConnectors/AuthConnectorEditor/GitHubConnectorEditor.story.tsx b/web/packages/teleport/src/AuthConnectors/AuthConnectorEditor/GitHubConnectorEditor.story.tsx
new file mode 100644
index 0000000000000..f4f680ad5521e
--- /dev/null
+++ b/web/packages/teleport/src/AuthConnectors/AuthConnectorEditor/GitHubConnectorEditor.story.tsx
@@ -0,0 +1,122 @@
+/**
+ * Teleport
+ * Copyright (C) 2023  Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { delay, http, HttpResponse } from 'msw';
+import { MemoryRouter, Route } from 'react-router';
+
+import { ContextProvider } from 'teleport';
+import cfg from 'teleport/config';
+import { createTeleportContext } from 'teleport/mocks/contexts';
+
+import { GitHubConnectorEditor } from './GitHubConnectorEditor';
+
+export default {
+  title: 'Teleport/AuthConnectors/GitHubConnectorEditor',
+};
+
+export function Processing() {
+  return (
+    <MemoryRouter
+      initialEntries={[
+        cfg.getEditAuthConnectorRoute('github', 'github_connector'),
+      ]}
+    >
+      <ContextWrapper>
+        <Route path={cfg.routes.ssoConnectorEdit}>
+          <GitHubConnectorEditor />
+        </Route>
+      </ContextWrapper>
+    </MemoryRouter>
+  );
+}
+Processing.parameters = {
+  msw: {
+    handlers: [
+      http.get(
+        cfg.getGithubConnectorUrl('github_connector'),
+        async () => await delay('infinite')
+      ),
+    ],
+  },
+};
+
+export function Loaded() {
+  return (
+    <MemoryRouter
+      initialEntries={[
+        cfg.getEditAuthConnectorRoute('github', 'github_connector'),
+      ]}
+    >
+      <ContextWrapper>
+        <Route path={cfg.routes.ssoConnectorEdit}>
+          <GitHubConnectorEditor />
+        </Route>
+      </ContextWrapper>
+    </MemoryRouter>
+  );
+}
+Loaded.parameters = {
+  msw: {
+    handlers: [
+      http.get(cfg.getGithubConnectorUrl('github_connector'), () =>
+        HttpResponse.json({
+          id: 'github:github',
+          kind: 'github' as const,
+          name: 'github',
+          content:
+            "kind: oidc\nmetadata:\n  name: google\nspec:\n  claims_to_roles:\n  - claim: hd\n    roles:\n    - '@teleadmin'\n    value: gravitational.com\n  - claim: hd\n    roles:\n    - '@teleadmin'\n    value: gravitational.io\n  client_id: 529920086732-v30abileumfve0vhjtasn7l0k5cqt3p7.apps.googleusercontent.com\n  client_secret: k1NZ2WiB0VjVEpf-XInlHkCz\n  display: Google\n  issuer_url: https://accounts.google.com\n  redirect_url: https://demo.gravitational.io:443/portalapi/v1/oidc/callback\n  scope:\n  - email\nversion: v2\n",
+        })
+      ),
+    ],
+  },
+};
+
+export function Failed() {
+  return (
+    <MemoryRouter
+      initialEntries={[
+        cfg.getEditAuthConnectorRoute('github', 'github_connector'),
+      ]}
+    >
+      <ContextWrapper>
+        <Route path={cfg.routes.ssoConnectorEdit}>
+          <GitHubConnectorEditor />
+        </Route>
+      </ContextWrapper>
+    </MemoryRouter>
+  );
+}
+Failed.parameters = {
+  msw: {
+    handlers: [
+      http.get(cfg.getGithubConnectorUrl('github_connector'), () =>
+        HttpResponse.json(
+          { message: 'something went wrong' },
+          {
+            status: 500,
+          }
+        )
+      ),
+    ],
+  },
+};
+
+function ContextWrapper({ children }: { children: JSX.Element }) {
+  const ctx = createTeleportContext();
+  return <ContextProvider ctx={ctx}>{children}</ContextProvider>;
+}
diff --git a/web/packages/teleport/src/AuthConnectors/AuthConnectors.story.tsx b/web/packages/teleport/src/AuthConnectors/AuthConnectors.story.tsx
index 7ebde97af3555..ada2344e6e069 100644
--- a/web/packages/teleport/src/AuthConnectors/AuthConnectors.story.tsx
+++ b/web/packages/teleport/src/AuthConnectors/AuthConnectors.story.tsx
@@ -16,7 +16,11 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import { delay, http, HttpResponse } from 'msw';
+import { MemoryRouter } from 'react-router';
+
 import { ContextProvider } from 'teleport';
+import cfg from 'teleport/config';
 import { createTeleportContext } from 'teleport/mocks/contexts';
 
 import { AuthConnectors } from './AuthConnectors';
@@ -27,38 +31,83 @@ export default {
 
 export function Processing() {
   return (
-    <ContextWrapper>
-      <AuthConnectors {...sample} attempt={{ status: 'processing' as any }} />
-    </ContextWrapper>
+    <MemoryRouter initialEntries={[cfg.routes.sso]}>
+      <ContextWrapper>
+        <AuthConnectors />
+      </ContextWrapper>
+    </MemoryRouter>
   );
 }
+Processing.parameters = {
+  msw: {
+    handlers: [
+      http.get(
+        cfg.getGithubConnectorsUrl(),
+        async () => await delay('infinite')
+      ),
+    ],
+  },
+};
 
 export function Loaded() {
   return (
-    <ContextWrapper>
-      <AuthConnectors {...sample} />
-    </ContextWrapper>
+    <MemoryRouter initialEntries={[cfg.routes.sso]}>
+      <ContextWrapper>
+        <AuthConnectors />
+      </ContextWrapper>
+    </MemoryRouter>
   );
 }
+Loaded.parameters = {
+  msw: {
+    handlers: [
+      http.get(cfg.getGithubConnectorsUrl(), () =>
+        HttpResponse.json(connectors)
+      ),
+    ],
+  },
+};
 
 export function Empty() {
   return (
-    <ContextWrapper>
-      <AuthConnectors {...sample} items={[]} />
-    </ContextWrapper>
+    <MemoryRouter initialEntries={[cfg.routes.sso]}>
+      <ContextWrapper>
+        <AuthConnectors />
+      </ContextWrapper>
+    </MemoryRouter>
   );
 }
+Empty.parameters = {
+  msw: {
+    handlers: [
+      http.get(cfg.getGithubConnectorsUrl(), () => HttpResponse.json([])),
+    ],
+  },
+};
 
 export function Failed() {
   return (
-    <ContextWrapper>
-      <AuthConnectors
-        {...sample}
-        attempt={{ status: 'failed', statusText: 'some error message' }}
-      />
-    </ContextWrapper>
+    <MemoryRouter initialEntries={[cfg.routes.sso]}>
+      <ContextWrapper>
+        <AuthConnectors />
+      </ContextWrapper>
+    </MemoryRouter>
   );
 }
+Failed.parameters = {
+  msw: {
+    handlers: [
+      http.get(cfg.getGithubConnectorsUrl(), () =>
+        HttpResponse.json(
+          { message: 'something went wrong' },
+          {
+            status: 500,
+          }
+        )
+      ),
+    ],
+  },
+};
 
 function ContextWrapper({ children }: { children: JSX.Element }) {
   const ctx = createTeleportContext();
@@ -81,12 +130,3 @@ const connectors = [
       "kind: oidc\nmetadata:\n  name: google\nspec:\n  claims_to_roles:\n  - claim: hd\n    roles:\n    - '@teleadmin'\n    value: gravitational.com\n  - claim: hd\n    roles:\n    - '@teleadmin'\n    value: gravitational.io\n  client_id: 529920086732-v30abileumfve0vhjtasn7l0k5cqt3p7.apps.googleusercontent.com\n  client_secret: k1NZ2WiB0VjVEpf-XInlHkCz\n  display: Google\n  issuer_url: https://accounts.google.com\n  redirect_url: https://demo.gravitational.io:443/portalapi/v1/oidc/callback\n  scope:\n  - email\nversion: v2\n",
   },
 ];
-
-const sample = {
-  attempt: {
-    status: 'success' as any,
-  },
-  items: connectors,
-  remove: () => null,
-  save: () => null,
-};