refactor(auth): migrate to new Supabase JWT Signing keys (#303)

* refactor(auth): replace Supabase `User` type with new `JWTUserData` type across the codebase

- Replaced usage of Supabase's `User` type with the newly defined `JWTUserData` type for better type mapping and alignment with JWT claims.
- Refactored session-related components and hooks (`useUser`, `requireUser`) to use the updated user structure.
- Updated Supabase client keys to use `publicKey` instead of `anonKey`.
- Adjusted multi-factor authentication logic and components to use `aal` and additional properties.
- Applied consistent naming for Supabase secret key functions.
- Incremented version to 2.12.0.

- Introduced a new `deprecated` property in the `EnvVariableModel` type to handle deprecated environment variables.
- Updated the `EnvList` component to display a warning badge for deprecated variables, including reason and alternative suggestions.
- Enhanced filtering logic to allow users to toggle the visibility of deprecated variables.
- Added new deprecated variables for Supabase keys with appropriate reasons and alternatives.

- Added support for filtering deprecated environment variables in the `FilterSwitcher` component.
- Updated the `Summary` component to display a badge for the count of deprecated variables.
- Introduced a button to filter and display only deprecated variables.
- Adjusted filtering logic to include deprecated variables in the overall state management.

add BILLING_MODE configuration to environment variables

- Introduced a new environment variable `BILLING_MODE` to configure billing options for the application.
- The variable supports two values: `subscription` and `one-time`.
- Marked as deprecated with a reason indicating that this configuration is no longer required, as billing mode is now automatically determined.
- Added validation logic for the new variable to ensure correct value parsing.

apps/dev-tool/app/variables/components/app-environment-variables-manager.tsx

@@ -16,6 +16,7 @@ import {
   EyeOff,
   EyeOffIcon,
   InfoIcon,
+  TriangleAlertIcon,
 } from 'lucide-react';
 import { Subject, debounceTime } from 'rxjs';
 
@@ -121,6 +122,7 @@ function EnvList({ appState }: { appState: AppEnvState }) {
   const showPrivateVars = searchParams.get('private') === 'true';
   const showOverriddenVars = searchParams.get('overridden') === 'true';
   const showInvalidVars = searchParams.get('invalid') === 'true';
+  const showDeprecatedVars = searchParams.get('deprecated') === 'true';
 
   const toggleShowValue = (key: string) => {
     setShowValues((prev) => ({
@@ -421,6 +423,35 @@ function EnvList({ appState }: { appState: AppEnvState }) {
                 </TooltipProvider>
               </Badge>
             </If>
+
+            <If condition={model?.deprecated}>
+              {(deprecated) => (
+                <Badge variant="warning">
+                  Deprecated
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger>
+                        <TriangleAlertIcon className="ml-2 h-3 w-3" />
+                      </TooltipTrigger>
+
+                      <TooltipContent>
+                        <div className="space-y-2">
+                          <div className="font-medium">This variable is deprecated</div>
+                          <div className="text-sm">
+                            <strong>Reason:</strong> {deprecated.reason}
+                          </div>
+                          {deprecated.alternative && (
+                            <div className="text-sm">
+                              <strong>Use instead:</strong> {deprecated.alternative}
+                            </div>
+                          )}
+                        </div>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                </Badge>
+              )}
+            </If>
           </div>
         </div>
 
@@ -506,7 +537,8 @@ function EnvList({ appState }: { appState: AppEnvState }) {
       !showPublicVars &&
       !showPrivateVars &&
       !showInvalidVars &&
-      !showOverriddenVars
+      !showOverriddenVars &&
+      !showDeprecatedVars
     ) {
       return true;
     }
@@ -539,6 +571,10 @@ function EnvList({ appState }: { appState: AppEnvState }) {
       return !varState.validation.success;
     }
 
+    if (showDeprecatedVars && isInSearch) {
+      return !!model?.deprecated;
+    }
+
     return isInSearch;
   };
 
@@ -561,6 +597,7 @@ function EnvList({ appState }: { appState: AppEnvState }) {
                 overridden: showOverriddenVars,
                 private: showPrivateVars,
                 invalid: showInvalidVars,
+                deprecated: showDeprecatedVars,
               }}
             />
           </div>
@@ -640,6 +677,7 @@ function FilterSwitcher(props: {
     overridden: boolean;
     private: boolean;
     invalid: boolean;
+    deprecated: boolean;
   };
 }) {
   const secretVars = props.filters.secret;
@@ -647,6 +685,7 @@ function FilterSwitcher(props: {
   const overriddenVars = props.filters.overridden;
   const privateVars = props.filters.private;
   const invalidVars = props.filters.invalid;
+  const deprecatedVars = props.filters.deprecated;
 
   const handleFilterChange = useUpdateFilteredVariables();
 
@@ -658,6 +697,7 @@ function FilterSwitcher(props: {
     if (overriddenVars) filters.push('Overridden');
     if (privateVars) filters.push('Private');
     if (invalidVars) filters.push('Invalid');
+    if (deprecatedVars) filters.push('Deprecated');
 
     if (filters.length === 0) return 'Filter variables';
 
@@ -665,7 +705,7 @@ function FilterSwitcher(props: {
   };
 
   const allSelected =
-    !secretVars && !publicVars && !overriddenVars && !invalidVars;
+    !secretVars && !publicVars && !overriddenVars && !invalidVars && !deprecatedVars;
 
   return (
     <DropdownMenu>
@@ -731,6 +771,15 @@ function FilterSwitcher(props: {
         >
           Overridden
         </DropdownMenuCheckboxItem>
+
+        <DropdownMenuCheckboxItem
+          checked={deprecatedVars}
+          onCheckedChange={() => {
+            handleFilterChange('deprecated', !deprecatedVars);
+          }}
+        >
+          Deprecated
+        </DropdownMenuCheckboxItem>
       </DropdownMenuContent>
     </DropdownMenu>
   );
@@ -746,6 +795,12 @@ function Summary({ appState }: { appState: AppEnvState }) {
     return !variable.validation.success;
   });
 
+  // Find deprecated variables
+  const deprecatedVariables = varsArray.filter((variable) => {
+    const model = envVariables.find((env) => env.name === variable.key);
+    return !!model?.deprecated;
+  });
+
   const validVariables = varsArray.length - variablesWithErrors.length;
 
   return (
@@ -773,6 +828,15 @@ function Summary({ appState }: { appState: AppEnvState }) {
             {overridden.length} Overridden
           </Badge>
         </If>
+
+        <If condition={deprecatedVariables.length > 0}>
+          <Badge
+            variant={'outline'}
+            className={cn({ 'text-amber-500': deprecatedVariables.length > 0 })}
+          >
+            {deprecatedVariables.length} Deprecated
+          </Badge>
+        </If>
       </div>
 
       <div className={'flex items-center gap-x-2'}>
@@ -787,6 +851,17 @@ function Summary({ appState }: { appState: AppEnvState }) {
           </Button>
         </If>
 
+        <If condition={deprecatedVariables.length > 0}>
+          <Button
+            size={'sm'}
+            variant={'outline'}
+            onClick={() => handleFilterChange('deprecated', true, true)}
+          >
+            <TriangleAlertIcon className="mr-2 h-3 w-3" />
+            Display Deprecated only
+          </Button>
+        </If>
+
         <TooltipProvider>
           <Tooltip>
             <TooltipTrigger asChild>
@@ -860,6 +935,7 @@ function useUpdateFilteredVariables() {
       searchParams.delete('overridden');
       searchParams.delete('private');
       searchParams.delete('invalid');
+      searchParams.delete('deprecated');
     };
 
     if (reset) {