feat(feature-flags): fixes AmruthPillai#1592, introduces new flags DISABLE_SIGNUPS and DISABLE_EMAIL_AUTH, renamed STORAGE_SKIP_BUCKET_CHECK

Author: AmruthPillai

.env.example

@@ -46,6 +46,7 @@ STORAGE_BUCKET=default
 STORAGE_ACCESS_KEY=minioadmin
 STORAGE_SECRET_KEY=minioadmin
 STORAGE_USE_SSL=false
+STORAGE_SKIP_BUCKET_CHECK=false
 
 # Nx Cloud (Optional)
 # NX_CLOUD_ACCESS_TOKEN=
@@ -54,10 +55,9 @@ STORAGE_USE_SSL=false
 # CROWDIN_PROJECT_ID=
 # CROWDIN_PERSONAL_TOKEN=
 
-# Flags (Optional)
-# DISABLE_EMAIL_AUTH=true
-# VITE_DISABLE_SIGNUPS=false
-# SKIP_STORAGE_BUCKET_CHECK=false
+# Feature Flags (Optional)
+# DISABLE_SIGNUPS=false
+# DISABLE_EMAIL_AUTH=false
 
 # GitHub (OAuth, Optional)
 # GITHUB_CLIENT_ID=

.ncurc.json

@@ -3,5 +3,5 @@
   "upgrade": true,
   "install": "always",
   "packageManager": "pnpm",
-  "reject": ["eslint", "@reactive-resume/*"]
+  "reject": ["eslint", "eslint-plugin-unused-imports", "@reactive-resume/*"]
 }

apps/client/src/pages/auth/login/page.tsx

@@ -4,6 +4,8 @@ import { ArrowRight } from "@phosphor-icons/react";
 import { loginSchema } from "@reactive-resume/dto";
 import { usePasswordToggle } from "@reactive-resume/hooks";
 import {
+  Alert,
+  AlertTitle,
   Button,
   Form,
   FormControl,
@@ -22,15 +24,13 @@ import { Link } from "react-router-dom";
 import { z } from "zod";
 
 import { useLogin } from "@/client/services/auth";
-import { useAuthProviders } from "@/client/services/auth/providers";
+import { useFeatureFlags } from "@/client/services/feature";
 
 type FormValues = z.infer<typeof loginSchema>;
 
 export const LoginPage = () => {
   const { login, loading } = useLogin();
-
-  const { providers } = useAuthProviders();
-  const emailAuthDisabled = !providers?.includes("email");
+  const { flags } = useFeatureFlags();
 
   const formRef = useRef<HTMLFormElement>(null);
   usePasswordToggle(formRef);
@@ -58,7 +58,7 @@ export const LoginPage = () => {
 
       <div className="space-y-1.5">
         <h2 className="text-2xl font-semibold tracking-tight">{t`Sign in to your account`}</h2>
-        <h6 className={cn(emailAuthDisabled && "hidden")}>
+        <h6>
           <span className="opacity-75">{t`Don't have an account?`}</span>
           <Button asChild variant="link" className="px-1.5">
             <Link to="/auth/register">
@@ -69,7 +69,13 @@ export const LoginPage = () => {
         </h6>
       </div>
 
-      <div className={cn(emailAuthDisabled && "hidden")}>
+      {flags.isEmailAuthDisabled && (
+        <Alert variant="error">
+          <AlertTitle>{t`Signing in via email is currently disabled by the administrator.`}</AlertTitle>
+        </Alert>
+      )}
+
+      <div className={cn(flags.isEmailAuthDisabled && "pointer-events-none select-none blur-sm")}>
         <Form {...form}>
           <form
             ref={formRef}

apps/client/src/pages/auth/register/page.tsx

@@ -24,17 +24,14 @@ import { Link, useNavigate } from "react-router-dom";
 import { z } from "zod";
 
 import { useRegister } from "@/client/services/auth";
-import { useAuthProviders } from "@/client/services/auth/providers";
+import { useFeatureFlags } from "@/client/services/feature";
 
 type FormValues = z.infer<typeof registerSchema>;
 
 export const RegisterPage = () => {
   const navigate = useNavigate();
+  const { flags } = useFeatureFlags();
   const { register, loading } = useRegister();
-  const disableSignups = import.meta.env.VITE_DISABLE_SIGNUPS === "true";
-
-  const { providers } = useAuthProviders();
-  const emailAuthDisabled = !providers?.includes("email");
 
   const formRef = useRef<HTMLFormElement>(null);
   usePasswordToggle(formRef);
@@ -70,7 +67,7 @@ export const RegisterPage = () => {
 
       <div className="space-y-1.5">
         <h2 className="text-2xl font-semibold tracking-tight">{t`Create a new account`}</h2>
-        <h6 className={cn(emailAuthDisabled && "hidden")}>
+        <h6>
           <span className="opacity-75">{t`Already have an account?`}</span>
           <Button asChild variant="link" className="px-1.5">
             <Link to="/auth/login">
@@ -80,18 +77,13 @@ export const RegisterPage = () => {
         </h6>
       </div>
 
-      {disableSignups && (
+      {flags.isSignupsDisabled && (
         <Alert variant="error">
           <AlertTitle>{t`Signups are currently disabled by the administrator.`}</AlertTitle>
         </Alert>
       )}
 
-      <div
-        className={cn(
-          emailAuthDisabled && "hidden",
-          disableSignups && "pointer-events-none blur-sm",
-        )}
-      >
+      <div className={cn(flags.isSignupsDisabled && "pointer-events-none select-none blur-sm")}>
         <Form {...form}>
           <form
             ref={formRef}

apps/client/src/services/feature/flags.ts

@@ -0,0 +1,28 @@
+import { FeatureDto } from "@reactive-resume/dto";
+import { useQuery } from "@tanstack/react-query";
+
+import { axios } from "@/client/libs/axios";
+
+export const fetchFeatureFlags = async () => {
+  const response = await axios.get<FeatureDto>(`/feature/flags`);
+
+  return response.data;
+};
+
+export const useFeatureFlags = () => {
+  const {
+    error,
+    isPending: loading,
+    data: flags,
+  } = useQuery({
+    queryKey: ["feature_flags"],
+    queryFn: () => fetchFeatureFlags(),
+    refetchOnMount: "always",
+    initialData: {
+      isSignupsDisabled: false,
+      isEmailAuthDisabled: false,
+    },
+  });
+
+  return { flags, loading, error };
+};

apps/client/src/services/feature/index.ts

@@ -0,0 +1 @@
+export * from "./flags";

apps/client/src/vite-env.d.ts

@@ -1,13 +1,8 @@
-/* eslint-disable @typescript-eslint/consistent-type-definitions */
-
 /// <reference types="vite/client" />
 
 declare const appVersion: string;
 
-interface ImportMetaEnv {
-  VITE_DISABLE_SIGNUPS: string | undefined;
-}
-
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 interface ImportMeta {
   readonly env: ImportMetaEnv;
 }

apps/server/src/app.module.ts

@@ -10,6 +10,7 @@ import { AuthModule } from "./auth/auth.module";
 import { ConfigModule } from "./config/config.module";
 import { ContributorsModule } from "./contributors/contributors.module";
 import { DatabaseModule } from "./database/database.module";
+import { FeatureModule } from "./feature/feature.module";
 import { HealthModule } from "./health/health.module";
 import { MailModule } from "./mail/mail.module";
 import { PrinterModule } from "./printer/printer.module";
@@ -33,6 +34,7 @@ import { UserModule } from "./user/user.module";
     ResumeModule,
     StorageModule,
     PrinterModule,
+    FeatureModule,
     TranslationModule,
     ContributorsModule,
 

apps/server/src/config/schema.ts

@@ -44,17 +44,21 @@ export const configSchema = z.object({
     .string()
     .default("false")
     .transform((s) => s !== "false" && s !== "0"),
+  STORAGE_SKIP_BUCKET_CHECK: z
+    .string()
+    .default("false")
+    .transform((s) => s !== "false" && s !== "0"),
 
   // Crowdin (Optional)
   CROWDIN_PROJECT_ID: z.coerce.number().optional(),
   CROWDIN_PERSONAL_TOKEN: z.string().optional(),
 
-  // Flags (Optional)
-  DISABLE_EMAIL_AUTH: z
+  // Feature Flags (Optional)
+  DISABLE_SIGNUPS: z
     .string()
     .default("false")
     .transform((s) => s !== "false" && s !== "0"),
-  SKIP_STORAGE_BUCKET_CHECK: z
+  DISABLE_EMAIL_AUTH: z
     .string()
     .default("false")
     .transform((s) => s !== "false" && s !== "0"),

apps/server/src/contributors/contributors.service.ts

@@ -6,6 +6,7 @@ import { ContributorDto } from "@reactive-resume/dto";
 import { Config } from "../config/schema";
 
 type GitHubResponse = { id: number; login: string; html_url: string; avatar_url: string }[];
+
 type CrowdinContributorsResponse = {
   data: { data: { id: number; username: string; avatarUrl: string } }[];
 };

apps/server/src/feature/feature.controller.ts

@@ -0,0 +1,13 @@
+import { Controller, Get } from "@nestjs/common";
+
+import { FeatureService } from "./feature.service";
+
+@Controller("feature")
+export class FeatureController {
+  constructor(private readonly featureService: FeatureService) {}
+
+  @Get("/flags")
+  getFeatureFlags() {
+    return this.featureService.getFeatures();
+  }
+}

apps/server/src/feature/feature.module.ts

@@ -0,0 +1,11 @@
+import { Module } from "@nestjs/common";
+
+import { FeatureController } from "./feature.controller";
+import { FeatureService } from "./feature.service";
+
+@Module({
+  providers: [FeatureService],
+  controllers: [FeatureController],
+  exports: [FeatureService],
+})
+export class FeatureModule {}

apps/server/src/feature/feature.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from "@nestjs/common";
+import { ConfigService } from "@nestjs/config";
+
+import { Config } from "../config/schema";
+
+@Injectable()
+export class FeatureService {
+  constructor(private readonly configService: ConfigService<Config>) {}
+
+  getFeatures() {
+    const isSignupsDisabled = this.configService.getOrThrow<boolean>("DISABLE_SIGNUPS");
+    const isEmailAuthDisabled = this.configService.getOrThrow<boolean>("DISABLE_EMAIL_AUTH");
+
+    return {
+      isSignupsDisabled,
+      isEmailAuthDisabled,
+    };
+  }
+}

apps/server/src/storage/storage.service.ts

@@ -49,14 +49,13 @@ export class StorageService implements OnModuleInit {
     this.client = this.minioService.client;
     this.bucketName = this.configService.getOrThrow<string>("STORAGE_BUCKET");
 
-    const skipBucketCheck = this.configService.getOrThrow<boolean>("SKIP_STORAGE_BUCKET_CHECK");
+    const skipBucketCheck = this.configService.getOrThrow<boolean>("STORAGE_SKIP_BUCKET_CHECK");
 
     if (skipBucketCheck) {
-      this.logger.log("Skipping the verification of whether the storage bucket exists.");
-      this.logger.warn("Make sure that the following paths are publicly accessible: ");
-      this.logger.warn("- /pictures/*");
-      this.logger.warn("- /previews/*");
-      this.logger.warn("- /resumes/*");
+      this.logger.warn("Skipping the verification of whether the storage bucket exists.");
+      this.logger.warn(
+        "Make sure that the following paths are publicly accessible: `/{pictures,previews,resumes}/*`",
+      );
 
       return;
     }

libs/dto/src/feature/index.ts

@@ -0,0 +1,9 @@
+import { createZodDto } from "nestjs-zod/dto";
+import { z } from "nestjs-zod/z";
+
+export const featureSchema = z.object({
+  isSignupsDisabled: z.boolean().default(false),
+  isEmailAuthDisabled: z.boolean().default(false),
+});
+
+export class FeatureDto extends createZodDto(featureSchema) {}

libs/dto/src/index.ts

@@ -1,5 +1,7 @@
+// @index('./*', f => `export * from "${f.path}";`)
 export * from "./auth";
 export * from "./contributors";
+export * from "./feature";
 export * from "./resume";
 export * from "./secrets";
 export * from "./statistics";