Authentication auto configuration

apps/web/app/api/auth-config.ts

@@ -0,0 +1,9 @@
+import { trpc } from "./trpc";
+
+export const useAuthConfig = () => {
+  const { data } = trpc.auth.config.useQuery(undefined, {
+    staleTime: 60_000,
+  });
+
+  return data ?? null;
+};

apps/web/app/routes/auth/login.tsx

@@ -5,6 +5,7 @@ import { useForm } from "react-hook-form";
 import { z } from "zod";
 
 import { authClient } from "~/api/auth-client";
+import { useAuthConfig } from "~/api/auth-config";
 import { Button } from "~/components/ui/button";
 import {
   Card,
@@ -109,6 +110,9 @@ function LoginEmailPassword() {
 }
 
 export default function Login() {
+  const authConfig = useAuthConfig();
+  const isCredentialsEnabled = authConfig?.credentialsEnabled ?? false;
+
   return (
     <div className="bg-linear-to-br flex min-h-screen items-center justify-center from-background via-background to-muted/20 p-4">
       <div className="mx-auto w-full" style={{ maxWidth: "400px" }}>
@@ -169,8 +173,12 @@ export default function Login() {
                 </svg>
                 <span>Continue with Google</span>
               </Button>
-              <LoginSeparator />
-              <LoginEmailPassword />
+              {isCredentialsEnabled ? (
+                <>
+                  <LoginSeparator />
+                  <LoginEmailPassword />
+                </>
+              ) : null}
             </div>
           </CardContent>
         </Card>

apps/web/app/routes/auth/signup.tsx

@@ -3,6 +3,7 @@ import { useForm } from "react-hook-form";
 import { z } from "zod";
 
 import { authClient } from "~/api/auth-client";
+import { useAuthConfig } from "~/api/auth-config";
 import { Button } from "~/components/ui/button";
 import {
   Card,
@@ -101,6 +102,9 @@ function SignupForm() {
 }
 
 export default function Signup() {
+  const authConfig = useAuthConfig();
+  const credentialsEnabled = authConfig?.credentialsEnabled;
+
   return (
     <div className="bg-linear-to-br flex min-h-screen items-center justify-center from-background via-background to-muted/20 p-4">
       <div className="mx-auto w-full" style={{ maxWidth: "400px" }}>
@@ -134,7 +138,17 @@ export default function Signup() {
           </CardHeader>
 
           <CardContent className="space-y-6 px-6">
-            <SignupForm />
+            {credentialsEnabled === true ? (
+              <SignupForm />
+            ) : credentialsEnabled === false ? (
+              <p className="text-sm text-muted-foreground">
+                Email and password sign-up is disabled.
+              </p>
+            ) : (
+              <p className="text-sm text-muted-foreground">
+                Checking available sign-up options...
+              </p>
+            )}
           </CardContent>
         </Card>
       </div>

packages/auth/src/better/config.ts

@@ -13,12 +13,16 @@ export const isGoogleAuthEnabled =
   env.AUTH_GOOGLE_CLIENT_SECRET != null &&
   env.AUTH_GOOGLE_CLIENT_SECRET !== "";
 
-export const isOIDCAuthEnabled = false;
-// env.AUTH_OIDC_CLIENT_ID != null && env.AUTH_OIDC_ISSUER !== "";
-export const isCredentialsAuthEnabled = false;
-// env.AUTH_CREDENTIALS_ENABLED === "auto"
-//   ? !isGoogleAuthEnabled && !isOIDCAuthEnabled
-//   : env.AUTH_CREDENTIALS_ENABLED === "true";
+export const isOIDCAuthEnabled =
+  env.AUTH_OIDC_CLIENT_ID != null &&
+  env.AUTH_OIDC_CLIENT_ID !== "" &&
+  env.AUTH_OIDC_ISSUER != null &&
+  env.AUTH_OIDC_ISSUER !== "";
+
+export const isCredentialsAuthEnabled =
+  env.AUTH_CREDENTIALS_ENABLED === "auto"
+    ? !isGoogleAuthEnabled && !isOIDCAuthEnabled
+    : env.AUTH_CREDENTIALS_ENABLED === "true";
 
 export const auth = betterAuth({
   database: drizzleAdapter(db, {
@@ -39,7 +43,7 @@ export const auth = betterAuth({
     },
   },
   emailAndPassword: {
-    enabled: true,
+    enabled: isCredentialsAuthEnabled,
   },
   trustedOrigins: [env.BASE_URL, "http://localhost:5173"],
   advanced: {

packages/trpc/src/root.ts

@@ -1,3 +1,4 @@
+import { authRouter } from "./routes/auth.js";
 import { deploymentTracesRouter } from "./routes/deployment-traces.js";
 import { deploymentVersionsRouter } from "./routes/deployment-versions.js";
 import { deploymentsRouter } from "./routes/deployments.js";
@@ -18,6 +19,7 @@ import { workspaceRouter } from "./routes/workspace.js";
 import { router } from "./trpc.js";
 
 export const appRouter = router({
+  auth: authRouter,
   user: userRouter,
   resource: resourcesRouter,
   workspace: workspaceRouter,

packages/trpc/src/routes/auth.ts

@@ -0,0 +1,15 @@
+import {
+  isCredentialsAuthEnabled,
+  isGoogleAuthEnabled,
+  isOIDCAuthEnabled,
+} from "@ctrlplane/auth/server";
+
+import { publicProcedure, router } from "../trpc.js";
+
+export const authRouter = router({
+  config: publicProcedure.query(() => ({
+    credentialsEnabled: isCredentialsAuthEnabled,
+    googleEnabled: isGoogleAuthEnabled,
+    oidcEnabled: isOIDCAuthEnabled,
+  })),
+});