coder · aslilac · Apr 25, 2024 · Apr 24, 2024 · Apr 24, 2024 · Apr 24, 2024
diff --git a/coderd/userauth.go b/coderd/userauth.go
@@ -472,6 +472,7 @@ func (api *API) userAuthMethods(rw http.ResponseWriter, r *http.Request) {
 	}
 
 	httpapi.Write(r.Context(), rw, http.StatusOK, codersdk.AuthMethods{
+		TermsOfServiceLink: api.DeploymentValues.TermsOfServiceLink.Value(),
 		Password: codersdk.AuthMethod{
 			Enabled: !api.DeploymentValues.DisablePasswordAuth.Value(),
 		},
@@ -486,7 +487,7 @@ func (api *API) userAuthMethods(rw http.ResponseWriter, r *http.Request) {
 
 // @Summary OAuth 2.0 GitHub Callback
 // @ID oauth-20-github-callback
-// @Security CoderSessionToken
+// @Security CoderSessionTokens
 // @Tags Users
 // @Success 307
 // @Router /users/oauth2/github/callback [get]

diff --git a/codersdk/deployment.go b/codersdk/deployment.go
@@ -200,6 +200,7 @@ type DeploymentValues struct {
 	AllowWorkspaceRenames           serpent.Bool                         `json:"allow_workspace_renames,omitempty" typescript:",notnull"`
 	Healthcheck                     HealthcheckConfig                    `json:"healthcheck,omitempty" typescript:",notnull"`
 	CLIUpgradeMessage               serpent.String                       `json:"cli_upgrade_message,omitempty" typescript:",notnull"`
+	TermsOfServiceLink              serpent.String                       `json:"terms_of_service_link,omitempty" typescript:",notnull"`
 
 	Config      serpent.YAMLConfigPath `json:"config,omitempty" typescript:",notnull"`
 	WriteConfig serpent.Bool           `json:"write_config,omitempty" typescript:",notnull"`
@@ -1683,6 +1684,14 @@ when required by your organization's security policy.`,
 			YAML:        "secureAuthCookie",
 			Annotations: serpent.Annotations{}.Mark(annotationExternalProxies, "true"),
 		},
+		{
+			Name:        "Terms of Service Link",
+			Description: "A link to an external Terms of Service that must be accepted by users when logging in.",
+			Flag:        "terms-of-service-link",
+			Env:         "CODER_TERMS_OF_SERVICE_LINK",
+			YAML:        "termsOfServiceLink",
+			Value:       &c.TermsOfServiceLink,
+		},
 		{
 			Name: "Strict-Transport-Security",
 			Description: "Controls if the 'Strict-Transport-Security' header is set on all static file responses. " +

diff --git a/codersdk/users.go b/codersdk/users.go
@@ -209,9 +209,10 @@ type CreateOrganizationRequest struct {
 
 // AuthMethods contains authentication method information like whether they are enabled or not or custom text, etc.
 type AuthMethods struct {
-	Password AuthMethod     `json:"password"`
-	Github   AuthMethod     `json:"github"`
-	OIDC     OIDCAuthMethod `json:"oidc"`
+	TermsOfServiceLink string         `json:"terms_of_service_link,omitempty"`
+	Password           AuthMethod     `json:"password"`
+	Github             AuthMethod     `json:"github"`
+	OIDC               OIDCAuthMethod `json:"oidc"`
 }
 
 type AuthMethod struct {

diff --git a/site/src/api/typesGenerated.ts b/site/src/api/typesGenerated.ts
@@ -3,6 +3,7 @@ import {
   MockAuthMethodsAll,
   MockAuthMethodsExternal,
   MockAuthMethodsPasswordOnly,
+  MockAuthMethodsPasswordTermsOfService,
   mockApiError,
 } from "testHelpers/entities";
 import { LoginPageView } from "./LoginPageView";
@@ -33,6 +34,12 @@ export const WithAllAuthMethods: Story = {
   },
 };
 
+export const WithTermsOfService: Story = {
+  args: {
+    authMethods: MockAuthMethodsPasswordTermsOfService,
+  },
+};
+
 export const AuthError: Story = {
   args: {
     error: mockApiError({
@@ -53,6 +60,7 @@ export const ExternalAuthError: Story = {
 
 export const LoadingAuthMethods: Story = {
   args: {
+    isLoading: true,
     authMethods: undefined,
   },
 };

@@ -1,11 +1,13 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import type { FC, ReactNode } from "react";
+import Checkbox from "@mui/material/Checkbox";
+import { type FC, type ReactNode, useState } from "react";
 import type { AuthMethods } from "api/typesGenerated";
 import { Alert } from "components/Alert/Alert";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { getApplicationName } from "utils/appearance";
 import { OAuthSignInForm } from "./OAuthSignInForm";
 import { PasswordSignInForm } from "./PasswordSignInForm";
+import { Link } from "@mui/material";
 
 export const Language = {
   emailLabel: "Email",
@@ -83,6 +85,10 @@ export const SignInForm: FC<SignInFormProps> = ({
   const passwordEnabled = authMethods?.password.enabled ?? true;
   const applicationName = getApplicationName();
 
+  const [tosAccepted, setTosAccepted] = useState(false);
+  const termsOfServiceAcceptanceRequired =
+    authMethods?.terms_of_service_link && !tosAccepted;
+
   return (
     <div css={styles.root}>
       <h1 css={styles.title}>{applicationName}</h1>
@@ -99,28 +105,53 @@ export const SignInForm: FC<SignInFormProps> = ({
         </div>
       )}
 
-      {oAuthEnabled && (
-        <OAuthSignInForm
-          isSigningIn={isSigningIn}
-          redirectTo={redirectTo}
-          authMethods={authMethods}
-        />
-      )}
+      {!termsOfServiceAcceptanceRequired && (
+        <>
+          {oAuthEnabled && (
+            <OAuthSignInForm
+              isSigningIn={isSigningIn}
+              redirectTo={redirectTo}
+              authMethods={authMethods}
+            />
+          )}
 
-      {passwordEnabled && oAuthEnabled && (
-        <div css={styles.divider}>
-          <div css={styles.dividerLine} />
-          <div css={styles.dividerLabel}>Or</div>
-          <div css={styles.dividerLine} />
-        </div>
+          {passwordEnabled && oAuthEnabled && (
+            <div css={styles.divider}>
+              <div css={styles.dividerLine} />
+              <div css={styles.dividerLabel}>or</div>
+              <div css={styles.dividerLine} />
+            </div>
+          )}
+
+          {passwordEnabled && (
+            <PasswordSignInForm
+              onSubmit={onSubmit}
+              autoFocus={!oAuthEnabled}
+              isSigningIn={isSigningIn}
+            />
+          )}
+        </>
       )}
 
-      {passwordEnabled && (
-        <PasswordSignInForm
-          onSubmit={onSubmit}
-          autoFocus={!oAuthEnabled}
-          isSigningIn={isSigningIn}
-        />
+      {authMethods?.terms_of_service_link && (
+        <div css={{ paddingTop: 8, fontSize: 14 }}>
+          <label>
+            <Checkbox
+              size="small"
+              checked={tosAccepted}
+              onChange={(event) => setTosAccepted(event.target.checked)}
+            />
+            I agree to the{" "}
+            <Link
+              href={authMethods.terms_of_service_link}
+              target="_blank"
+              rel="noreferrer"
+            >
+              Terms of Service
+            </Link>
+            .
+          </label>
+        </div>
       )}
 
       {!passwordEnabled && !oAuthEnabled && (

@@ -136,10 +136,7 @@ export const SingleSignOnSection: FC<SingleSignOnSectionProps> = ({
 }) => {
   const theme = useTheme();
 
-  const authList = Object.values(
-    authMethods,
-  ) as (typeof authMethods)[keyof typeof authMethods][];
-  const noSsoEnabled = !authList.some((method) => method.enabled);
+  const noSsoEnabled = !authMethods.github.enabled && !authMethods.oidc.enabled;
 
   return (
     <>

diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
@@ -1373,6 +1373,13 @@ export const MockAuthMethodsPasswordOnly: TypesGen.AuthMethods = {
   oidc: { enabled: false, signInText: "", iconUrl: "" },
 };
 
+export const MockAuthMethodsPasswordTermsOfService: TypesGen.AuthMethods = {
+  terms_of_service_link: "https://www.youtube.com/watch?v=C2f37Vb2NAE",
+  password: { enabled: true },
+  github: { enabled: false },
+  oidc: { enabled: false, signInText: "", iconUrl: "" },
+};
+
 export const MockAuthMethodsExternal: TypesGen.AuthMethods = {
   password: { enabled: false },
   github: { enabled: true },