Refactor auth methods, remove i18n, and update UI

This commit covers a variety of actions that includes the refactoring of the authentication components to accept paths and invite tokens as props instead of a singular callback prop, thereby improving the component's flexibility. This refactor process removes 'withI18n' calls as i18n functionalities are no longer used. The commit also contains several adjustments to the UI components, including the authorization layout, pricing table, and sign-up page. It also includes minor changes to error messages, specifically those related to password resetting. Lastly, several peer dependencies are removed in the 'package.json' files and changes made to the 'browser.client.ts' file providing a significant code cleanup.

apps/web/app/(dashboard)/home/(user)/loading.tsx

@@ -1,5 +1,3 @@
 import { GlobalLoader } from '@kit/ui/global-loader';
 
-import { withI18n } from '~/lib/i18n/with-i18n';
-
-export default withI18n(GlobalLoader);
+export default GlobalLoader;

apps/web/app/(dashboard)/home/[account]/loading.tsx

@@ -1,5 +1,3 @@
 import { GlobalLoader } from '@kit/ui/global-loader';
 
-import { withI18n } from '~/lib/i18n/with-i18n';
-
-export default withI18n(GlobalLoader);
+export default GlobalLoader;

apps/web/app/(dashboard)/home/loading.tsx

@@ -1,5 +1,3 @@
 import { GlobalLoader } from '@kit/ui/global-loader';
 
-import { withI18n } from '~/lib/i18n/with-i18n';
-
-export default withI18n(GlobalLoader);
+export default GlobalLoader;

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

@@ -1,5 +0,0 @@
-import { GlobalLoader } from '@kit/ui/global-loader';
-
-import { withI18n } from '~/lib/i18n/with-i18n';
-
-export default withI18n(GlobalLoader);

apps/web/app/auth/password-reset/page.tsx

@@ -18,6 +18,8 @@ export const generateMetadata = async () => {
 };
 
 function PasswordResetPage() {
+  const redirectPath = `${pathsConfig.auth.callback}?next=${pathsConfig.auth.passwordUpdate}`;
+
   return (
     <>
       <Heading level={5}>
@@ -25,9 +27,7 @@ function PasswordResetPage() {
       </Heading>
 
       <div className={'flex flex-col space-y-4'}>
-        <PasswordResetRequestContainer
-          redirectTo={pathsConfig.auth.passwordUpdate}
-        />
+        <PasswordResetRequestContainer redirectPath={redirectPath} />
 
         <div className={'flex justify-center text-xs'}>
           <Link href={pathsConfig.auth.signIn}>

apps/web/app/auth/sign-up/page.tsx

@@ -18,7 +18,15 @@ export const generateMetadata = async () => {
   };
 };
 
-function SignUpPage() {
+interface Props {
+  searchParams: {
+    invite_token?: string;
+  };
+}
+
+function SignUpPage({ searchParams }: Props) {
+  const inviteToken = searchParams.invite_token;
+
   return (
     <>
       <Heading level={5}>
@@ -27,7 +35,10 @@ function SignUpPage() {
 
       <SignUpMethodsContainer
         providers={authConfig.providers}
-        callbackPath={pathsConfig.auth.callback}
+        paths={{
+          callback: pathsConfig.auth.callback,
+        }}
+        inviteToken={inviteToken}
       />
 
       <div className={'justify-centers flex'}>

apps/web/app/loading.tsx

@@ -1,5 +1,3 @@
 import { GlobalLoader } from '@kit/ui/global-loader';
 
-import { withI18n } from '~/lib/i18n/with-i18n';
-
-export default withI18n(GlobalLoader);
+export default GlobalLoader;

apps/web/app/update-password/page.tsx

@@ -2,6 +2,7 @@ import { redirect } from 'next/navigation';
 
 import { PasswordResetForm } from '@kit/auth/password-reset';
 import { AuthLayoutShell } from '@kit/auth/shared';
+import { requireAuth } from '@kit/supabase/require-auth';
 import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
 
 import { AppLogo } from '~/components/app-logo';
@@ -10,18 +11,16 @@ import { withI18n } from '~/lib/i18n/with-i18n';
 
 async function PasswordResetPage() {
   const client = getSupabaseServerComponentClient();
-  const user = await client.auth.getUser();
+  const auth = await requireAuth(client);
 
   // we require the user to be logged in to access this page
-  if (!user.data) {
-    redirect(pathsConfig.auth.passwordReset);
+  if (auth.error) {
+    redirect(auth.redirectTo);
   }
 
-  const redirectTo = `/${pathsConfig.auth.callback}?next=${pathsConfig.app.home}`;
-
   return (
     <AuthLayoutShell Logo={AppLogo}>
-      <PasswordResetForm redirectTo={redirectTo} />
+      <PasswordResetForm redirectTo={pathsConfig.app.home} />
     </AuthLayoutShell>
   );
 }

apps/web/config/auth.config.ts

@@ -8,7 +8,6 @@ const AuthConfigSchema = z.object({
   providers: z.object({
     password: z.boolean(),
     magicLink: z.boolean(),
-    otp: z.boolean(),
     oAuth: providers.array(),
   }),
 });
@@ -17,9 +16,8 @@ const authConfig = AuthConfigSchema.parse({
   // NB: Enable the providers below in the Supabase Console
   // in your production project
   providers: {
-    password: true,
-    magicLink: false,
-    otp: false,
+    password: false,
+    magicLink: true,
     oAuth: ['google'],
   },
 });

apps/web/config/paths.config.ts

@@ -29,7 +29,7 @@ const pathsConfig = PathsSchema.parse({
     verifyMfa: '/auth/verify',
     callback: '/auth/callback',
     passwordReset: '/auth/password-reset',
-    passwordUpdate: '/password-reset',
+    passwordUpdate: '/update-password',
   },
   app: {
     home: '/home',

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

@@ -38,7 +38,8 @@
   "passwordLengthError": "Please provide a password with at least 6 characters",
   "sendEmailLink": "Send Email Link",
   "sendingEmailLink": "Sending Email Link...",
-  "sendLinkSuccess": "We sent you a link to your email! Follow the link to sign in.",
+  "sendLinkSuccessDescription": "Check your email, we just sent you a link. Follow the link to sign in.",
+  "sendLinkSuccess": "We send you a link.",
   "sendLinkSuccessToast": "Link successfully sent",
   "getNewLink": "Get a new link",
   "verificationCode": "Verification Code",