Refactor authentication flow and improve code organization

The update implemented a redirect functionality in the multi-factor authentication flow for a better user experience. It also involved a refactoring of some parts of the code, substituting direct routing paths with path configs for easier future modifications. Import statements were adjusted for better code organization and readability.

apps/web/app/(dashboard)/home/[account]/_components/dashboard-demo.tsx

@@ -206,7 +206,9 @@ function generateDemoData() {
     });
   }
 
-  return [data, data[data.length - 1].value] as [typeof data, string];
+  const lastValue = data[data.length - 1]?.value;
+
+  return [data, lastValue] as [typeof data, string];
 }
 
 function Chart(

apps/web/app/(dashboard)/home/[account]/billing/_components/team-account-checkout-form.tsx

@@ -26,7 +26,6 @@ export function TeamAccountCheckoutForm(params: { accountId: string }) {
   if (checkoutToken) {
     return (
       <EmbeddedCheckout
-        load
         checkoutToken={checkoutToken}
         provider={billingConfig.provider}
       />

apps/web/app/(marketing)/blog/[slug]/page.tsx

@@ -9,7 +9,7 @@ import Post from '~/(marketing)/blog/_components/post';
 import appConfig from '~/config/app.config';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
-export function generateMetadata({
+export async function generateMetadata({
   params,
 }: {
   params: { slug: string };
@@ -17,7 +17,7 @@ export function generateMetadata({
   const post = allPosts.find((post) => post.slug === params.slug);
 
   if (!post) {
-    return;
+    notFound();
   }
 
   const { title, date, description, image, slug } = post;

apps/web/app/(marketing)/docs/_lib/build-documentation-tree.ts

@@ -5,8 +5,8 @@ import type { DocumentationPage } from 'contentlayer/generated';
 export interface ProcessedDocumentationPage extends DocumentationPage {
   collapsible: boolean;
   pathSegments: string[];
-  nextPage: ProcessedDocumentationPage | DocumentationPage | null;
+  nextPage: ProcessedDocumentationPage | DocumentationPage | undefined;
-  previousPage: ProcessedDocumentationPage | DocumentationPage | null;
+  previousPage: ProcessedDocumentationPage | DocumentationPage | undefined;
   children: DocsTree;
 }
 

apps/web/app/(marketing)/pricing/page.tsx

@@ -1,4 +1,4 @@
-import { PricingTable } from '@kit/billing/components/pricing-table';
+import { PricingTable } from '@kit/billing-gateway/components';
 
 import { SitePageHeader } from '~/(marketing)/_components/site-page-header';
 import billingConfig from '~/config/billing.config';

apps/web/app/auth/callback/route.ts

@@ -6,30 +6,37 @@ import { getSupabaseRouteHandlerClient } from '@kit/supabase/route-handler-clien
 
 import pathsConfig from '~/config/paths.config';
 
+const defaultNextUrl = pathsConfig.app.home;
+
 export async function GET(request: NextRequest) {
   const requestUrl = new URL(request.url);
   const searchParams = requestUrl.searchParams;
 
   const authCode = searchParams.get('code');
-  const inviteCode = searchParams.get('inviteCode');
   const error = searchParams.get('error');
-  const nextUrl = searchParams.get('next') ?? pathsConfig.app.home;
+  const nextUrlPathFromParams = searchParams.get('next');
+  const inviteToken = searchParams.get('invite_token');
 
-  let userId: string | undefined = undefined;
+  let nextUrl = nextUrlPathFromParams ?? defaultNextUrl;
+
+  // if we have an invite token, we redirect to the join team page
+  // instead of the default next url. This is because the user is trying
+  // to join a team and we want to make sure they are redirected to the
+  // correct page.
+  if (inviteToken) {
+    nextUrl = `${pathsConfig.app.joinTeam}?invite_token=${inviteToken}`;
+  }
 
   if (authCode) {
     const client = getSupabaseRouteHandlerClient();
 
     try {
-      const { error, data } =
+      const { error } = await client.auth.exchangeCodeForSession(authCode);
-        await client.auth.exchangeCodeForSession(authCode);
 
       // if we have an error, we redirect to the error page
       if (error) {
         return onError({ error: error.message });
       }
-
-      userId = data.user.id;
     } catch (error) {
       Logger.error(
         {
@@ -42,34 +49,6 @@ export async function GET(request: NextRequest) {
 
       return onError({ error: message as string });
     }
-
-    if (inviteCode && userId) {
-      try {
-        Logger.info(
-          {
-            userId,
-            inviteCode,
-          },
-          `Attempting to accept user invite...`,
-        );
-
-        // if we have an invite code, we accept the invite
-        await acceptInviteFromEmailLink({ inviteCode, userId });
-      } catch (error) {
-        Logger.error(
-          {
-            userId,
-            inviteCode,
-            error,
-          },
-          `An error occurred while accepting user invite`,
-        );
-
-        const message = error instanceof Error ? error.message : error;
-
-        return onError({ error: message as string });
-      }
-    }
   }
 
   if (error) {
@@ -79,37 +58,6 @@ export async function GET(request: NextRequest) {
   return redirect(nextUrl);
 }
 
-/**
- * @name acceptInviteFromEmailLink
- * @description If we find an invite code, we try to accept the invite
- * received from the email link method
- * @param params
- */
-async function acceptInviteFromEmailLink(params: {
-  inviteCode: string;
-  userId: string | undefined;
-}) {
-  if (!params.userId) {
-    Logger.error(params, `Attempted to accept invite, but no user id provided`);
-
-    return;
-  }
-
-  Logger.info(params, `Found invite code. Accepting invite...`);
-
-  await acceptInviteToOrganization(
-    getSupabaseRouteHandlerClient({
-      admin: true,
-    }),
-    {
-      code: params.inviteCode,
-      userId: params.userId,
-    },
-  );
-
-  Logger.info(params, `Invite successfully accepted`);
-}
-
 function onError({ error }: { error: string }) {
   const errorMessage = getAuthErrorMessage(error);
 

apps/web/app/join/page.tsx

@@ -1,9 +1,6 @@
 import { notFound } from 'next/navigation';
 
 import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
-import { Heading } from '@kit/ui/heading';
-import { If } from '@kit/ui/if';
-import { Trans } from '@kit/ui/trans';
 
 import { withI18n } from '~/lib/i18n/with-i18n';
 
@@ -25,36 +22,7 @@ async function JoinTeamAccountPage({ searchParams }: Context) {
     notFound();
   }
 
-  return (
+  return <></>;
-    <>
-      <Heading level={4}>
-        <Trans
-          i18nKey={'auth:joinOrganizationHeading'}
-          values={{
-            organization: organization.name,
-          }}
-        />
-      </Heading>
-
-      <div>
-        <p className={'text-center'}>
-          <Trans
-            i18nKey={'auth:joinOrganizationSubHeading'}
-            values={{
-              organization: organization.name,
-            }}
-            components={{ b: <b /> }}
-          />
-        </p>
-
-        <p className={'text-center'}>
-          <If condition={!data.session}>
-            <Trans i18nKey={'auth:signUpToAcceptInvite'} />
-          </If>
-        </p>
-      </div>
-    </>
-  );
 }
 
 export default withI18n(JoinTeamAccountPage);
@@ -66,7 +34,7 @@ async function getInviteDataFromInviteToken(token: string) {
 
   const { data: invitation, error } = await adminClient
     .from('invitations')
-    .select('*')
+    .select()
     .eq('invite_token', token)
     .single();
 

apps/web/config/auth.config.ts

@@ -24,7 +24,7 @@ const authConfig = AuthConfigSchema.parse({
     magicLink: false,
     oAuth: ['google'],
   },
-});
+} satisfies z.infer<typeof AuthConfigSchema>);
 
 export default authConfig;
 

apps/web/config/feature-flags.config.ts

@@ -36,7 +36,7 @@ const featuresFlagConfig = FeatureFlagsSchema.parse({
     process.env.NEXT_PUBLIC_ENABLE_ORGANIZATION_BILLING,
     false,
   ),
-});
+} satisfies z.infer<typeof FeatureFlagsSchema>);
 
 export default featuresFlagConfig;
 

apps/web/config/paths.config.ts

@@ -19,6 +19,7 @@ const PathsSchema = z.object({
     accountBilling: z.string().min(1),
     accountMembers: z.string().min(1),
     accountBillingReturn: z.string().min(1),
+    joinTeam: z.string().min(1),
   }),
 });
 
@@ -41,7 +42,8 @@ const pathsConfig = PathsSchema.parse({
     accountBilling: `/home/[account]/billing`,
     accountMembers: `/home/[account]/members`,
     accountBillingReturn: `/home/[account]/billing/return`,
+    joinTeam: '/join',
   },
-});
+} satisfies z.infer<typeof PathsSchema>);
 
 export default pathsConfig;

apps/web/next.config.mjs

@@ -57,11 +57,13 @@ export default withBundleAnalyzer({
 })(config);
 
 function getRemotePatterns() {
-  // add here the remote patterns for your images
+  /** @type {import('next').NextConfig['remotePatterns']} */
+    // add here the remote patterns for your images
   const remotePatterns = [];
 
   if (SUPABASE_URL) {
     const hostname = new URL(SUPABASE_URL).hostname;
+
     remotePatterns.push({
       protocol: 'https',
       hostname,

apps/web/public/locales/en/billing.json

@@ -2,7 +2,7 @@
   "subscriptionTabSubheading": "Manage your Subscription and Billing",
   "planCardTitle": "Your Plan",
   "planCardDescription": "Below are the details of your current plan. You can change your plan or cancel your subscription at any time.",
-  "planRenewal": "Renews every {{interval}} at {{currency}} {{price}}",
+  "planRenewal": "Renews every {{interval}} at {{price}}",
   "planDetails": "Plan Details",
   "checkout": "Proceed to Checkout",
   "trialEndsOn": "Your trial ends on",

packages/billing-gateway/src/components/current-plan-card.tsx

@@ -3,6 +3,7 @@ import { BadgeCheck, CheckCircle2 } from 'lucide-react';
 import { z } from 'zod';
 
 import { BillingSchema, getProductPlanPairFromId } from '@kit/billing';
+import { formatCurrency } from '@kit/shared/utils';
 import { Database } from '@kit/supabase/database';
 import {
   Accordion,
@@ -65,8 +66,7 @@ export function CurrentPlanCard({
               i18nKey="billing:planRenewal"
               values={{
                 interval: subscription.interval,
-                currency: product.currency,
+                price: formatCurrency(product.currency, plan.price),
-                price: plan.price,
               }}
             />
           </div>

packages/billing-gateway/src/components/embedded-checkout.tsx

@@ -11,7 +11,7 @@ export function EmbeddedCheckout(
   props: React.PropsWithChildren<{
     checkoutToken: string;
     provider: BillingProvider;
-    onClose: () => void;
+    onClose?: () => void;
   }>,
 ) {
   const CheckoutComponent = useMemo(

packages/billing-gateway/src/components/index.ts

@@ -3,3 +3,4 @@ export * from './current-plan-card';
 export * from './embedded-checkout';
 export * from './billing-session-status';
 export * from './billing-portal-card';
+export * from './pricing-table';

packages/billing-gateway/src/components/plan-picker.tsx

@@ -6,6 +6,7 @@ import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
 import { BillingSchema } from '@kit/billing';
+import { formatCurrency } from '@kit/shared/utils';
 import { Button } from '@kit/ui/button';
 import {
   Form,
@@ -233,10 +234,3 @@ function Price(props: React.PropsWithChildren) {
     </span>
   );
 }
-
-function formatCurrency(currencyCode: string, value: string) {
-  return new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: currencyCode,
-  }).format(value);
-}

packages/billing-gateway/src/components/pricing-table.tsx

@@ -7,14 +7,13 @@ import Link from 'next/link';
 import { CheckCircle, Sparkles } from 'lucide-react';
 import { z } from 'zod';
 
+import { BillingSchema, getPlanIntervals } from '@kit/billing';
 import { Button } from '@kit/ui/button';
 import { Heading } from '@kit/ui/heading';
 import { If } from '@kit/ui/if';
 import { Trans } from '@kit/ui/trans';
 import { cn } from '@kit/ui/utils';
 
-import { BillingSchema, getPlanIntervals } from '../create-billing-schema';
-
 type Config = z.infer<typeof BillingSchema>;
 
 interface Paths {

packages/features/admin/package.json

@@ -17,10 +17,14 @@
     "@kit/prettier-config": "0.1.0",
     "@kit/tailwind-config": "0.1.0",
     "@kit/tsconfig": "0.1.0",
-    "@kit/ui": "*"
+    "@kit/ui": "*",
+    "@kit/supabase": "*",
+    "@supabase/supabase-js": "2.40.0",
+    "lucide-react": "^0.363.0"
   },
   "exports": {
-    ".": "./src/index.ts"
+    ".": "./src/index.ts",
+    "./components/*": "./src/components/*"
   },
   "eslintConfig": {
     "root": true,

packages/features/admin/src/components/admin-dashboard.tsx

@@ -7,7 +7,7 @@ interface Data {
   trialSubscriptions: number;
 }
 
-function AdminDashboard({
+export function AdminDashboard({
   data,
 }: React.PropsWithChildren<{
   data: Data;
@@ -70,8 +70,6 @@ function AdminDashboard({
   );
 }
 
-export default AdminDashboard;
-
 function Figure(props: React.PropsWithChildren) {
   return <div className={'text-3xl font-bold'}>{props.children}</div>;
 }

packages/features/admin/src/components/admin-guard.tsx

@@ -1,22 +1,23 @@
 import { notFound } from 'next/navigation';
 
-import isUserSuperAdmin from '../../../app/admin/utils/is-user-super-admin';
+import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
+
+import { isSuperAdmin } from '../lib/is-super-admin';
 
 type LayoutOrPageComponent<Params> = React.ComponentType<Params>;
 
-function AdminGuard<Params extends object>(
+export function AdminGuard<Params extends object>(
   Component: LayoutOrPageComponent<Params>,
 ) {
   return async function AdminGuardServerComponentWrapper(params: Params) {
-    const isAdmin = await isUserSuperAdmin();
+    const client = getSupabaseServerComponentClient();
+    const isUserSuperAdmin = await isSuperAdmin(client);
 
     // if the user is not a super-admin, we redirect to a 404
-    if (!isAdmin) {
+    if (!isUserSuperAdmin) {
       notFound();
     }
 
     return <Component {...params} />;
   };
 }
-
-export default AdminGuard;

packages/features/admin/src/components/admin-header.tsx

@@ -5,11 +5,10 @@ import { ArrowLeft } from 'lucide-react';
 import { Button } from '@kit/ui/button';
 import { PageHeader } from '@kit/ui/page';
 
-function AdminHeader({
+export function AdminHeader({
   children,
   paths,
 }: React.PropsWithChildren<{
-  appHome: string;
   paths: {
     appHome: string;
   };
@@ -28,5 +27,3 @@ function AdminHeader({
     </PageHeader>
   );
 }
-
-export default AdminHeader;

packages/features/admin/src/components/admin-sidebar.tsx

@@ -1,10 +1,8 @@
-'use client';
-
 import { Home, User, Users } from 'lucide-react';
 
 import { Sidebar, SidebarContent, SidebarItem } from '@kit/ui/sidebar';
 
-function AdminSidebar(props: { Logo: React.ReactNode }) {
+export function AdminSidebar(props: { Logo: React.ReactNode }) {
   return (
     <Sidebar>
       <SidebarContent className={'mb-6 mt-4 pt-2'}>{props.Logo}</SidebarContent>
@@ -28,5 +26,3 @@ function AdminSidebar(props: { Logo: React.ReactNode }) {
     </Sidebar>
   );
 }
-
-export default AdminSidebar;

packages/features/admin/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/is-super-admin';

packages/features/admin/src/lib/is-super-admin.ts

@@ -0,0 +1,19 @@
+import { SupabaseClient } from '@supabase/supabase-js';
+
+import { Database } from '@kit/supabase/database';
+
+export async function isSuperAdmin(client: SupabaseClient<Database>) {
+  const { data, error } = await client.auth.getUser();
+
+  if (error) {
+    throw error;
+  }
+
+  if (!data.user) {
+    return false;
+  }
+
+  const appMetadata = data.user.app_metadata;
+
+  return appMetadata?.role === 'super-admin';
+}

packages/features/team-accounts/src/services/account-invitations.service.ts

@@ -72,7 +72,7 @@ export class AccountInvitationsService {
         role: params.role,
       })
       .match({
-        id: params.id,
+        id: params.invitationId,
       });
 
     if (error) {

packages/shared/src/utils.ts

@@ -1,3 +1,10 @@
 export function isBrowser() {
   return typeof window !== 'undefined';
 }
+
+export function formatCurrency(currencyCode: string, value: string | number) {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: currencyCode,
+  }).format(Number(value));
+}

packages/supabase/src/hooks/use-supabase.ts

@@ -1,8 +1,7 @@
 import { useMemo } from 'react';
 
 import { getSupabaseBrowserClient } from '../clients/browser.client';
-import { Database } from '../database.types';
 
-export function useSupabase<Schema = Database>() {
+export function useSupabase() {
-  return useMemo(() => getSupabaseBrowserClient<Schema>(), []);
+  return useMemo(() => getSupabaseBrowserClient(), []);
 }

packages/ui/src/makerkit/data-table.tsx

@@ -36,7 +36,7 @@ import {
   TableRow,
 } from '../shadcn/table';
 import { cn } from '../utils';
-import Trans from './trans';
+import { Trans } from './trans';
 
 interface ReactTableProps<T extends object> {
   data: T[];

packages/ui/src/makerkit/image-upload-input.tsx

@@ -49,6 +49,11 @@ export const ImageUploadInput = forwardRef<React.ElementRef<'input'>, Props>(
 
         if (files?.length) {
           const file = files[0];
+
+          if (!file) {
+            return;
+          }
+
           const data = URL.createObjectURL(file);
 
           setState({

packages/ui/src/makerkit/is-route-active.ts

@@ -14,7 +14,7 @@ export default function isRouteActive(
   depth: number,
 ) {
   // we remove any eventual query param from the route's URL
-  const currentRoutePath = currentRoute.split('?')[0];
+  const currentRoutePath = currentRoute.split('?')[0] ?? '';
 
   if (!isRoot(currentRoutePath) && isRoot(targetLink)) {
     return false;

packages/ui/src/makerkit/mdx/mdx-components.tsx

@@ -2,7 +2,7 @@ import { forwardRef } from 'react';
 
 import Image from 'next/image';
 
-import { cn } from '../../shadcn';
+import { cn } from '../../utils';
 import { LazyRender } from '../lazy-render';
 
 const NextImage: React.FC<{

packages/ui/src/makerkit/mdx/mdx-renderer.tsx

@@ -2,6 +2,7 @@ import type { MDXComponents } from 'mdx/types';
 import { getMDXComponent } from 'next-contentlayer/hooks';
 
 import Components from './mdx-components';
+// @ts-ignore
 import styles from './mdx-renderer.module.css';
 
 export function Mdx({

pnpm-lock.yaml

@@ -319,6 +319,9 @@ importers:
       '@kit/prettier-config':
         specifier: 0.1.0
         version: link:../../../tooling/prettier
+      '@kit/supabase':
+        specifier: '*'
+        version: link:../../supabase
       '@kit/tailwind-config':
         specifier: 0.1.0
         version: link:../../../tooling/tailwind
@@ -328,6 +331,12 @@ importers:
       '@kit/ui':
         specifier: '*'
         version: link:../../ui
+      '@supabase/supabase-js':
+        specifier: 2.40.0
+        version: 2.40.0
+      lucide-react:
+        specifier: ^0.363.0
+        version: 0.363.0(react@18.2.0)
 
   packages/features/auth:
     devDependencies: