Add query param to un-hide password auth

normana10 · normana10 · commit 0858ad017222 · 2022-11-24T17:00:27.000Z
diff --git a/docs/admin/auth.md b/docs/admin/auth.md
@@ -5,9 +5,17 @@ By default, Coder is accessible via password authentication.
 The following steps explain how to set up GitHub OAuth or OpenID Connect.
 
 If after configuring another authentication method you'd like to hide password authentication, you can configure that like so:
+
 ```console
 CODER_PASSWORD_AUTH_HIDDEN=true
 ```
+
+If your external authentication method(s) were to go down, you can un-hide password authentication with the following URL query parameter:
+
+```console
+https://coder.domain.com/login?auth=password
+```
+
 ## GitHub
 
 ### Step 1: Configure the OAuth application in GitHub
@@ -80,12 +88,14 @@ Once complete, run `sudo service coder restart` to reboot Coder.
 > When a new user is created, the `preferred_username` claim becomes the username. If this claim is empty, the email address will be stripped of the domain, and become the username (e.g. `example@coder.com` becomes `example`).
 
 If your OpenID Connect provider requires client TLS certificates for authentication, you can configure them like so:
+
 ```console
 CODER_TLS_CLIENT_CERT_FILE=/path/to/cert.pem
 CODER_TLS_CLIENT_KEY_FILE=/path/to/key.pem
 ```
 
 If you'd like to change the OpenID Connect button text and/or icon, you can configure them like so:
+
 ```console
 CODER_OIDC_SIGN_IN_TEXT="Sign in with Gitea"
 CODER_OIDC_ICON_URL=https://gitea.io/images/gitea.png
diff --git a/site/src/components/SignInForm/SignInForm.tsx b/site/src/components/SignInForm/SignInForm.tsx
@@ -14,6 +14,8 @@ import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils"
 import { Welcome } from "../Welcome/Welcome"
 import { LoadingButton } from "./../LoadingButton/LoadingButton"
 import { AlertBanner } from "components/AlertBanner/AlertBanner"
+import { ContactlessOutlined } from "@material-ui/icons"
+import { useSearchParams } from "react-router-dom"
 
 /**
  * BuiltInAuthFormValues describes a form using built-in (email/password)
@@ -107,6 +109,7 @@ export const SignInForm: FC<React.PropsWithChildren<SignInFormProps>> = ({
   initialTouched,
 }) => {
   const styles = useStyles()
+  const [searchParams] = useSearchParams()
 
   const form: FormikContextType<BuiltInAuthFormValues> =
     useFormik<BuiltInAuthFormValues>({
@@ -128,10 +131,14 @@ export const SignInForm: FC<React.PropsWithChildren<SignInFormProps>> = ({
     loginErrors.authError,
   )
 
+  const passwordHidden = authMethods?.password.hidden
+  const urlParamOverride = searchParams.get("auth") === "password"
+  const showPasswordLogin = !passwordHidden || urlParamOverride
+
   return (
     <>
       <Welcome />
-      {!authMethods?.password.hidden && (
+      {showPasswordLogin && (
         <form onSubmit={form.handleSubmit}>
           <Stack>
             {Object.keys(loginErrors).map(
@@ -177,7 +184,7 @@ export const SignInForm: FC<React.PropsWithChildren<SignInFormProps>> = ({
           </Stack>
         </form>
       )}
-      {!authMethods?.password.hidden &&
+      {showPasswordLogin &&
         (authMethods?.github.enabled || authMethods?.oidc.enabled) && (
           <div className={styles.divider}>
             <div className={styles.dividerLine} />
