Refactor authentication permissions and update feature flags in environment configuration

.env.example

@@ -13,13 +13,4 @@ POSTGRES_PASSWORD=<INSERT_POSTGRES_PASSWORD>
 # VARIOUS
 ACCESS_TOKEN_SALT=<INSERT_RANDOM_STRING>
 DATABASE_URL=postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@postgres:5432/${POSTGRES_DB}?connect_timeout=300&sslmode=prefer
-JWT_SECRET_KEY=<INSERT_RANDOM_STRING>
-
-# AUTHENTICATION
-# Enable authentication with Google OAuth (default: false)
-# ENABLE_FEATURE_AUTH_GOOGLE=true
-# GOOGLE_CLIENT_ID=<INSERT_GOOGLE_CLIENT_ID>
-# GOOGLE_SECRET=<INSERT_GOOGLE_SECRET>
-
-# Enable authentication with Security Token (default: true)
-# ENABLE_FEATURE_AUTH_TOKEN=true
+JWT_SECRET_KEY=<INSERT_RANDOM_STRING>

apps/api/src/app/info/info.service.ts

@@ -51,6 +51,14 @@ export class InfoService {
 
     const globalPermissions: string[] = [];
 
+    if (this.configurationService.get('ENABLE_FEATURE_AUTH_GOOGLE')) {
+      globalPermissions.push(permissions.enableAuthGoogle);
+    }
+
+    if (this.configurationService.get('ENABLE_FEATURE_AUTH_TOKEN')) {
+      globalPermissions.push(permissions.enableAuthToken);
+    }
+
     if (this.configurationService.get('ENABLE_FEATURE_FEAR_AND_GREED_INDEX')) {
       if (this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION')) {
         info.fearAndGreedDataSource = encodeDataSource(
@@ -64,14 +72,6 @@ export class InfoService {
       globalPermissions.push(permissions.enableFearAndGreedIndex);
     }
 
-    if (this.configurationService.get('ENABLE_FEATURE_AUTH_GOOGLE')) {
-      globalPermissions.push(permissions.enableAuthGoogle);
-    }
-
-    if (this.configurationService.get('ENABLE_FEATURE_AUTH_TOKEN')) {
-      globalPermissions.push(permissions.enableAuthToken);
-    }
-
     if (this.configurationService.get('ENABLE_FEATURE_READ_ONLY_MODE')) {
       isReadOnlyMode = await this.propertyService.getByKey<boolean>(
         PROPERTY_IS_READ_ONLY_MODE

apps/api/src/services/interfaces/environment.interface.ts

@@ -16,10 +16,10 @@ export interface Environment extends CleanedEnvAccessors {
   DATA_SOURCE_IMPORT: string;
   DATA_SOURCES: string[];
   DATA_SOURCES_GHOSTFOLIO_DATA_PROVIDER: string[];
-  ENABLE_FEATURE_FEAR_AND_GREED_INDEX: boolean;
-  ENABLE_FEATURE_READ_ONLY_MODE: boolean;
   ENABLE_FEATURE_AUTH_GOOGLE: boolean;
   ENABLE_FEATURE_AUTH_TOKEN: boolean;
+  ENABLE_FEATURE_FEAR_AND_GREED_INDEX: boolean;
+  ENABLE_FEATURE_READ_ONLY_MODE: boolean;
   ENABLE_FEATURE_STATISTICS: boolean;
   ENABLE_FEATURE_SUBSCRIPTION: boolean;
   ENABLE_FEATURE_SYSTEM_MESSAGE: boolean;

apps/client/src/app/components/admin-overview/admin-overview.html

@@ -30,23 +30,19 @@
               }
             </div>
           </div>
-          @if (hasPermissionForAuthToken) {
-            <div class="d-flex my-3">
-              <div class="w-50" i18n>User Signup</div>
-              <div class="w-50">
-                <mat-slide-toggle
-                  color="primary"
-                  hideIcon="true"
-                  [checked]="
-                    info.globalPermissions.includes(
-                      permissions.createUserAccount
-                    )
-                  "
-                  (change)="onEnableUserSignupModeChange($event)"
-                />
-              </div>
+          <div class="d-flex my-3">
+            <div class="w-50" i18n>User Signup</div>
+            <div class="w-50">
+              <mat-slide-toggle
+                color="primary"
+                hideIcon="true"
+                [checked]="
+                  info.globalPermissions.includes(permissions.createUserAccount)
+                "
+                (change)="onEnableUserSignupModeChange($event)"
+              />
             </div>
-          }
+          </div>
           @if (hasPermissionToToggleReadOnlyMode) {
             <div class="d-flex my-3">
               <div class="w-50" i18n>Read-only Mode</div>

apps/client/src/app/components/header/header.component.html

@@ -422,11 +422,7 @@
           <ng-container i18n>Sign in</ng-container>
         </button>
       </li>
-      @if (
-        currentRoute !== 'register' &&
-        hasPermissionToCreateUser &&
-        hasPermissionForAuthToken
-      ) {
+      @if (currentRoute !== 'register' && hasPermissionToCreateUser) {
         <li class="list-inline-item ml-1">
           <a
             class="d-none d-sm-block"

apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.html

@@ -51,11 +51,9 @@
 
 <div mat-dialog-actions>
   <div class="flex-grow-1">
-    @if (data.hasPermissionToUseAuthToken) {
-      <mat-checkbox color="primary" i18n (change)="onChangeStaySignedIn($event)"
-        >Stay signed in</mat-checkbox
-      >
-    }
+    <mat-checkbox color="primary" i18n (change)="onChangeStaySignedIn($event)"
+      >Stay signed in</mat-checkbox
+    >
   </div>
   <div>
     @if (data.hasPermissionToUseAuthToken) {

apps/client/src/app/pages/features/features-page.component.ts

@@ -26,6 +26,7 @@ import { Subject, takeUntil } from 'rxjs';
 export class GfFeaturesPageComponent implements OnDestroy {
   public hasPermissionForAuthToken: boolean;
   public hasPermissionForSubscription: boolean;
+  public hasPermissionToCreateUser: boolean;
   public info: InfoItem;
   public routerLinkRegister = publicRoutes.register.routerLink;
   public routerLinkResources = publicRoutes.resources.routerLink;
@@ -61,6 +62,11 @@ export class GfFeaturesPageComponent implements OnDestroy {
       this.info?.globalPermissions,
       permissions.enableSubscription
     );
+
+    this.hasPermissionToCreateUser = hasPermission(
+      this.info?.globalPermissions,
+      permissions.createUserAccount
+    );
   }
 
   public ngOnDestroy() {

apps/client/src/app/pages/features/features-page.html

@@ -309,7 +309,7 @@
       </div>
     </div>
   </div>
-  @if (!user && hasPermissionForAuthToken) {
+  @if (!user && hasPermissionToCreateUser) {
     <div class="row">
       <div class="col mt-3 text-center">
         <a

apps/client/src/app/pages/landing/landing-page.component.ts

@@ -127,12 +127,13 @@ export class GfLandingPageComponent implements OnDestroy, OnInit {
       };
     }
 
-    this.hasPermissionForDemo = !!demoAuthToken;
     this.hasPermissionForAuthToken = hasPermission(
       globalPermissions,
       permissions.enableAuthToken
     );
 
+    this.hasPermissionForDemo = !!demoAuthToken;
+
     this.hasPermissionForStatistics = hasPermission(
       globalPermissions,
       permissions.enableStatistics

apps/client/src/app/pages/landing/landing-page.html

@@ -32,7 +32,7 @@
 <div class="container">
   <div class="button-container mb-5 row">
     <div class="align-items-center col d-flex justify-content-center">
-      @if (hasPermissionToCreateUser && hasPermissionForAuthToken) {
+      @if (hasPermissionToCreateUser) {
         <a
           color="primary"
           i18n
@@ -42,7 +42,7 @@
         >
       }
       @if (hasPermissionForDemo) {
-        @if (hasPermissionToCreateUser && hasPermissionForAuthToken) {
+        @if (hasPermissionToCreateUser) {
           <div class="mx-3 text-muted" i18n>or</div>
         }
         <a i18n mat-stroked-button [routerLink]="routerLinkDemo">Live Demo</a>
@@ -323,7 +323,7 @@
     </div>
   }
 
-  @if (hasPermissionToCreateUser && hasPermissionForAuthToken) {
+  @if (hasPermissionToCreateUser) {
     <div class="row my-5">
       <div class="col">
         <h2 class="h4 mb-1 text-center" i18n>

apps/client/src/app/pages/pricing/pricing-page.component.ts

@@ -53,6 +53,7 @@ export class GfPricingPageComponent implements OnDestroy, OnInit {
   public couponId: string;
   public durationExtension: StringValue;
   public hasPermissionForAuthToken: boolean;
+  public hasPermissionToCreateUser: boolean;
   public hasPermissionToUpdateUserSettings: boolean;
   public importAndExportTooltipBasic = translate(
     'DATA_IMPORT_AND_EXPORT_TOOLTIP_BASIC'
@@ -103,17 +104,22 @@ export class GfPricingPageComponent implements OnDestroy, OnInit {
   public ngOnInit() {
     const { baseCurrency, globalPermissions, subscriptionOffer } =
       this.dataService.fetchInfo();
+
     this.baseCurrency = baseCurrency;
+    this.coupon = subscriptionOffer?.coupon;
+    this.durationExtension = subscriptionOffer?.durationExtension;
+    this.label = subscriptionOffer?.label;
+    this.price = subscriptionOffer?.price;
 
     this.hasPermissionForAuthToken = hasPermission(
       globalPermissions,
       permissions.enableAuthToken
     );
 
-    this.coupon = subscriptionOffer?.coupon;
-    this.durationExtension = subscriptionOffer?.durationExtension;
-    this.label = subscriptionOffer?.label;
-    this.price = subscriptionOffer?.price;
+    this.hasPermissionToCreateUser = hasPermission(
+      globalPermissions,
+      permissions.createUserAccount
+    );
 
     this.userService.stateChanged
       .pipe(takeUntil(this.unsubscribeSubject))

apps/client/src/app/pages/pricing/pricing-page.html

@@ -367,7 +367,7 @@
         </p>
       </div>
     </div>
-  } @else if (!user && hasPermissionForAuthToken) {
+  } @else if (!user && hasPermissionToCreateUser) {
     <div class="row">
       <div class="col mt-3 text-center">
         <a

apps/client/src/app/pages/register/register-page.html

@@ -14,20 +14,24 @@
     </div>
   </div>
 
-  @if (hasPermissionToCreateUser && hasPermissionForAuthToken) {
+  @if (hasPermissionToCreateUser) {
     <div class="button-container row">
       <div class="align-items-center col d-flex justify-content-center">
         <div class="py-5 text-center">
-          <button
-            class="d-inline-block"
-            color="primary"
-            mat-flat-button
-            (click)="openShowAccessTokenDialog()"
-          >
-            <ng-container i18n>Create Account</ng-container>
-          </button>
-          @if (hasPermissionForAuthGoogle) {
+          @if (hasPermissionForAuthToken) {
+            <button
+              class="d-inline-block"
+              color="primary"
+              mat-flat-button
+              (click)="openShowAccessTokenDialog()"
+            >
+              <ng-container i18n>Create Account</ng-container>
+            </button>
+          }
+          @if (hasPermissionForAuthToken && hasPermissionForAuthGoogle) {
             <div class="my-3 text-muted" i18n>or</div>
+          }
+          @if (hasPermissionForAuthGoogle) {
             <a
               class="px-4 rounded-pill w-100"
               href="../api/v1/auth/google"

libs/common/src/lib/permissions.ts

@@ -28,12 +28,12 @@ export const permissions = {
   deleteTag: 'deleteTag',
   deleteUser: 'deleteUser',
   deleteWatchlistItem: 'deleteWatchlistItem',
+  enableAuthGoogle: 'enableAuthGoogle',
+  enableAuthToken: 'enableAuthToken',
   enableDataProviderGhostfolio: 'enableDataProviderGhostfolio',
   enableFearAndGreedIndex: 'enableFearAndGreedIndex',
   enableImport: 'enableImport',
   enableBlog: 'enableBlog',
-  enableAuthGoogle: 'enableAuthGoogle',
-  enableAuthToken: 'enableAuthToken',
   enableStatistics: 'enableStatistics',
   enableSubscription: 'enableSubscription',
   enableSubscriptionInterstitial: 'enableSubscriptionInterstitial',