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.

packages/features/accounts/src/components/personal-account-dropdown.tsx

@@ -4,8 +4,6 @@ import { useMemo } from 'react';
 
 import Link from 'next/link';
 
-import type { User } from '@supabase/supabase-js';
-
 import {
   ChevronsUpDown,
   Home,
@@ -14,6 +12,7 @@ import {
   Shield,
 } from 'lucide-react';
 
+import { JWTUserData } from '@kit/supabase/types';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -38,7 +37,7 @@ export function PersonalAccountDropdown({
   features,
   account,
 }: {
-  user: User;
+  user: JWTUserData;
 
   account?: {
     id: string | null;
@@ -76,13 +75,10 @@ export function PersonalAccountDropdown({
     personalAccountData?.name ?? account?.name ?? user?.email ?? '';
 
   const isSuperAdmin = useMemo(() => {
-    const factors = user?.factors ?? [];
     const hasAdminRole = user?.app_metadata.role === 'super-admin';
-    const hasTotpFactor = factors.some(
-      (factor) => factor.factor_type === 'totp' && factor.status === 'verified',
-    );
+    const isAal2 = user?.aal === 'aal2';
 
-    return hasAdminRole && hasTotpFactor;
+    return hasAdminRole && isAal2;
   }, [user]);
 
   return (

packages/features/accounts/src/components/personal-account-settings/email/update-email-form-container.tsx

@@ -12,9 +12,11 @@ export function UpdateEmailFormContainer(props: { callbackPath: string }) {
     return <LoadingOverlay fullPage={false} />;
   }
 
-  if (!user) {
+  if (!user || !user.email) {
     return null;
   }
 
-  return <UpdateEmailForm callbackPath={props.callbackPath} user={user} />;
+  return (
+    <UpdateEmailForm callbackPath={props.callbackPath} email={user.email} />
+  );
 }

packages/features/accounts/src/components/personal-account-settings/email/update-email-form.tsx

@@ -1,7 +1,5 @@
 'use client';
 
-import type { User } from '@supabase/supabase-js';
-
 import { zodResolver } from '@hookform/resolvers/zod';
 import { CheckIcon } from '@radix-ui/react-icons';
 import { useForm } from 'react-hook-form';
@@ -34,10 +32,10 @@ function createEmailResolver(currentEmail: string, errorMessage: string) {
 }
 
 export function UpdateEmailForm({
-  user,
+  email,
   callbackPath,
 }: {
-  user: User;
+  email: string;
   callbackPath: string;
 }) {
   const { t } = useTranslation('account');
@@ -61,10 +59,8 @@ export function UpdateEmailForm({
     });
   };
 
-  const currentEmail = user.email;
-
   const form = useForm({
-    resolver: createEmailResolver(currentEmail!, t('emailNotMatching')),
+    resolver: createEmailResolver(email, t('emailNotMatching')),
     defaultValues: {
       email: '',
       repeatEmail: '',

packages/features/accounts/src/components/personal-account-settings/mfa/multi-factor-auth-setup-dialog.tsx

@@ -413,6 +413,7 @@ function FactorNameForm(
 
 function QrImage({ src }: { src: string }) {
   return (
+    // eslint-disable-next-line @next/next/no-img-element
     <img
       alt={'QR Code'}
       src={src}

packages/features/accounts/src/components/personal-account-settings/password/update-password-container.tsx

@@ -20,5 +20,7 @@ export function UpdatePasswordFormContainer(
     return null;
   }
 
-  return <UpdatePasswordForm callbackPath={props.callbackPath} user={user} />;
+  return (
+    <UpdatePasswordForm callbackPath={props.callbackPath} email={user.email} />
+  );
 }

packages/features/accounts/src/components/personal-account-settings/password/update-password-form.tsx

@@ -2,8 +2,6 @@
 
 import { useState } from 'react';
 
-import type { User } from '@supabase/supabase-js';
-
 import { zodResolver } from '@hookform/resolvers/zod';
 import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
 import { Check } from 'lucide-react';
@@ -31,10 +29,10 @@ import { Trans } from '@kit/ui/trans';
 import { PasswordUpdateSchema } from '../../../schema/update-password.schema';
 
 export const UpdatePasswordForm = ({
-  user,
+  email,
   callbackPath,
 }: {
-  user: User;
+  email: string;
   callbackPath: string;
 }) => {
   const { t } = useTranslation('account');
@@ -69,8 +67,6 @@ export const UpdatePasswordForm = ({
   }: {
     newPassword: string;
   }) => {
-    const email = user.email;
-
     // if the user does not have an email assigned, it's possible they
     // don't have an email/password factor linked, and the UI is out of sync
     if (!email) {

packages/features/accounts/src/components/user-workspace-context.tsx

@@ -2,9 +2,8 @@
 
 import { createContext } from 'react';
 
-import { User } from '@supabase/supabase-js';
-
 import { Tables } from '@kit/supabase/database';
+import { JWTUserData } from '@kit/supabase/types';
 
 interface UserWorkspace {
   accounts: Array<{
@@ -20,7 +19,7 @@ interface UserWorkspace {
     subscription_status: Tables<'subscriptions'>['status'] | null;
   };
 
-  user: User;
+  user: JWTUserData;
 }
 
 export const UserWorkspaceContext = createContext<UserWorkspace>(