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/web/app/(marketing)/_components/site-header-account-section.tsx

@@ -3,11 +3,9 @@
 import dynamic from 'next/dynamic';
 import Link from 'next/link';
 
-import { useQuery } from '@tanstack/react-query';
-
 import { PersonalAccountDropdown } from '@kit/accounts/personal-account-dropdown';
 import { useSignOut } from '@kit/supabase/hooks/use-sign-out';
-import { useSupabase } from '@kit/supabase/hooks/use-supabase';
+import { JWTUserData } from '@kit/supabase/types';
 import { Button } from '@kit/ui/button';
 import { If } from '@kit/ui/if';
 import { Trans } from '@kit/ui/trans';
@@ -35,17 +33,20 @@ const features = {
   enableThemeToggle: featuresFlagConfig.enableThemeToggle,
 };
 
-export function SiteHeaderAccountSection() {
-  const session = useSession();
+export function SiteHeaderAccountSection({
+  user,
+}: {
+  user: JWTUserData | null;
+}) {
   const signOut = useSignOut();
 
-  if (session.data) {
+  if (user) {
     return (
       <PersonalAccountDropdown
         showProfileName={false}
         paths={paths}
         features={features}
-        user={session.data.user}
+        user={user}
         signOutRequested={() => signOut.mutateAsync()}
       />
     );
@@ -85,16 +86,3 @@ function AuthButtons() {
     </div>
   );
 }
-
-function useSession() {
-  const client = useSupabase();
-
-  return useQuery({
-    queryKey: ['session'],
-    queryFn: async () => {
-      const { data } = await client.auth.getSession();
-
-      return data.session;
-    },
-  });
-}

apps/web/app/(marketing)/_components/site-header.tsx

@@ -1,3 +1,4 @@
+import { JWTUserData } from '@kit/supabase/types';
 import { Header } from '@kit/ui/marketing';
 
 import { AppLogo } from '~/components/app-logo';
@@ -5,12 +6,12 @@ import { AppLogo } from '~/components/app-logo';
 import { SiteHeaderAccountSection } from './site-header-account-section';
 import { SiteNavigation } from './site-navigation';
 
-export function SiteHeader() {
+export function SiteHeader(props: { user?: JWTUserData | null }) {
   return (
     <Header
       logo={<AppLogo />}
       navigation={<SiteNavigation />}
-      actions={<SiteHeaderAccountSection />}
+      actions={<SiteHeaderAccountSection user={props.user ?? null} />}
     />
   );
 }

apps/web/app/(marketing)/layout.tsx

@@ -1,11 +1,17 @@
+import { requireUser } from '@kit/supabase/require-user';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
+
 import { SiteFooter } from '~/(marketing)/_components/site-footer';
 import { SiteHeader } from '~/(marketing)/_components/site-header';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
-function SiteLayout(props: React.PropsWithChildren) {
+async function SiteLayout(props: React.PropsWithChildren) {
+  const client = getSupabaseServerClient();
+  const user = await requireUser(client, { verifyMfa: false });
+
   return (
     <div className={'flex min-h-[100vh] flex-col'}>
-      <SiteHeader />
+      <SiteHeader user={user.data} />
 
       {props.children}
 

apps/web/app/error.tsx

@@ -5,6 +5,7 @@ import Link from 'next/link';
 import { ArrowLeft, MessageCircle } from 'lucide-react';
 
 import { useCaptureException } from '@kit/monitoring/hooks';
+import { useUser } from '@kit/supabase/hooks/use-user';
 import { Button } from '@kit/ui/button';
 import { Heading } from '@kit/ui/heading';
 import { Trans } from '@kit/ui/trans';
@@ -20,9 +21,11 @@ const ErrorPage = ({
 }) => {
   useCaptureException(error);
 
+  const user = useUser();
+
   return (
     <div className={'flex h-screen flex-1 flex-col'}>
-      <SiteHeader />
+      <SiteHeader user={user.data} />
 
       <div
         className={

apps/web/app/global-error.tsx

@@ -5,6 +5,7 @@ import Link from 'next/link';
 import { ArrowLeft, MessageCircle } from 'lucide-react';
 
 import { useCaptureException } from '@kit/monitoring/hooks';
+import { useUser } from '@kit/supabase/hooks/use-user';
 import { Button } from '@kit/ui/button';
 import { Heading } from '@kit/ui/heading';
 import { Trans } from '@kit/ui/trans';
@@ -21,12 +22,14 @@ const GlobalErrorPage = ({
 }) => {
   useCaptureException(error);
 
+  const user = useUser();
+
   return (
     <html>
       <body>
         <RootProviders>
           <div className={'flex h-screen flex-1 flex-col'}>
-            <SiteHeader />
+            <SiteHeader user={user.data} />
 
             <div
               className={

apps/web/app/home/[account]/_components/team-account-layout-sidebar.tsx

@@ -1,5 +1,4 @@
-import type { User } from '@supabase/supabase-js';
-
+import { JWTUserData } from '@kit/supabase/types';
 import {
   Sidebar,
   SidebarContent,
@@ -24,7 +23,7 @@ export function TeamAccountLayoutSidebar(props: {
   account: string;
   accountId: string;
   accounts: AccountModel[];
-  user: User;
+  user: JWTUserData;
 }) {
   return (
     <SidebarContainer
@@ -40,7 +39,7 @@ function SidebarContainer(props: {
   account: string;
   accountId: string;
   accounts: AccountModel[];
-  user: User;
+  user: JWTUserData;
 }) {
   const { account, accounts, user } = props;
   const userId = user.id;

apps/web/app/not-found.tsx

@@ -2,6 +2,8 @@ import Link from 'next/link';
 
 import { ArrowLeft } from 'lucide-react';
 
+import { requireUser } from '@kit/supabase/require-user';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { Button } from '@kit/ui/button';
 import { Heading } from '@kit/ui/heading';
 import { Trans } from '@kit/ui/trans';
@@ -20,9 +22,12 @@ export const generateMetadata = async () => {
 };
 
 const NotFoundPage = async () => {
+  const client = getSupabaseServerClient();
+  const user = await requireUser(client, { verifyMfa: false });
+
   return (
     <div className={'flex h-screen flex-1 flex-col'}>
-      <SiteHeader />
+      <SiteHeader user={user.data} />
 
       <div
         className={

apps/web/components/personal-account-dropdown-container.tsx

@@ -1,10 +1,9 @@
 'use client';
 
-import type { User } from '@supabase/supabase-js';
-
 import { PersonalAccountDropdown } from '@kit/accounts/personal-account-dropdown';
 import { useSignOut } from '@kit/supabase/hooks/use-sign-out';
 import { useUser } from '@kit/supabase/hooks/use-user';
+import { JWTUserData } from '@kit/supabase/types';
 
 import featuresFlagConfig from '~/config/feature-flags.config';
 import pathsConfig from '~/config/paths.config';
@@ -18,7 +17,7 @@ const features = {
 };
 
 export function ProfileAccountDropdownContainer(props: {
-  user?: User;
+  user?: JWTUserData | null;
   showProfileName?: boolean;
 
   account?: {