Add OIDC to the frontend

coder · kylecarbs · Aug 1, 2022 · Jul 29, 2022 · Jul 31, 2022 · Jul 31, 2022
commit 6eae62770bc0ba4e563b610ab2bf6f20d5b6b80a
diff --git a/site/src/components/SignInForm/SignInForm.stories.tsx b/site/src/components/SignInForm/SignInForm.stories.tsx
@@ -99,5 +99,26 @@ WithGithub.args = {
   authMethods: {
     password: true,
     github: true,
+    oidc: false,
+  },
+}
+
+export const WithOIDC = Template.bind({})
+WithOIDC.args = {
+  ...SignedOut.args,
+  authMethods: {
+    password: true,
+    github: false,
+    oidc: true,
+  },
+}
+
+export const WithGithubAndOIDC = Template.bind({})
+WithGithubAndOIDC.args = {
+  ...SignedOut.args,
+  authMethods: {
+    password: true,
+    github: true,
+    oidc: true,
   },
 }
diff --git a/site/src/components/SignInForm/SignInForm.tsx b/site/src/components/SignInForm/SignInForm.tsx
@@ -1,8 +1,10 @@
+import Box from "@material-ui/core/Box"
 import Button from "@material-ui/core/Button"
 import Link from "@material-ui/core/Link"
 import { makeStyles } from "@material-ui/core/styles"
 import TextField from "@material-ui/core/TextField"
 import GitHubIcon from "@material-ui/icons/GitHub"
+import KeyIcon from "@material-ui/icons/VpnKey"
 import { ErrorSummary } from "components/ErrorSummary/ErrorSummary"
 import { Stack } from "components/Stack/Stack"
 import { FormikContextType, FormikTouched, useFormik } from "formik"
@@ -43,6 +45,7 @@ export const Language = {
   },
   passwordSignIn: "Sign In",
   githubSignIn: "GitHub",
+  oidcSignIn: "OpenID Connect",
 }
 
 const validationSchema = Yup.object({
@@ -155,32 +158,51 @@ export const SignInForm: FC<SignInFormProps> = ({
           </div>
         </Stack>
       </form>
-      {authMethods?.github && (
+      {(authMethods?.github || authMethods?.oidc) && (
         <>
           <div className={styles.divider}>
             <div className={styles.dividerLine} />
             <div className={styles.dividerLabel}>Or</div>
             <div className={styles.dividerLine} />
           </div>
 
-          <div>
-            <Link
-              underline="none"
-              href={`/api/v2/users/oauth2/github/callback?redirect=${encodeURIComponent(
-                redirectTo,
-              )}`}
-            >
-              <Button
-                startIcon={<GitHubIcon className={styles.buttonIcon} />}
-                disabled={isLoading}
-                fullWidth
-                type="submit"
-                variant="contained"
+          <Box display="grid" gridGap="16px">
+            {authMethods.github && (
+              <Link
+                underline="none"
+                href={`/api/v2/users/oauth2/github/callback?redirect=${encodeURIComponent(
+                  redirectTo,
+                )}`}
               >
-                {Language.githubSignIn}
-              </Button>
-            </Link>
-          </div>
+                <Button
+                  startIcon={<GitHubIcon className={styles.buttonIcon} />}
+                  disabled={isLoading}
+                  fullWidth
+                  type="submit"
+                  variant="contained"
+                >
+                  {Language.githubSignIn}
+                </Button>
+              </Link>
+            )}
+
+            {authMethods.oidc && (
+              <Link
+                underline="none"
+                href={`/api/v2/users/oidc/callback?redirect=${encodeURIComponent(redirectTo)}`}
+              >
+                <Button
+                  startIcon={<KeyIcon className={styles.buttonIcon} />}
+                  disabled={isLoading}
+                  fullWidth
+                  type="submit"
+                  variant="contained"
+                >
+                  {Language.oidcSignIn}
+                </Button>
+              </Link>
+            )}
+          </Box>
         </>
       )}
     </>

diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
@@ -304,6 +304,7 @@ export const MockUserAgent: Types.UserAgent = {
 export const MockAuthMethods: TypesGen.AuthMethods = {
   password: true,
   github: false,
+  oidc: false,
 }
 
 export const MockGitSSHKey: TypesGen.GitSSHKey = {