fix: wip

apps/remix/app/components/forms/reset-password.tsx

@@ -3,11 +3,12 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router';
 import { match } from 'ts-pattern';
 import { z } from 'zod';
 
+import { authClient } from '@documenso/auth/client';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
-import { trpc } from '@documenso/trpc/react';
 import { ZPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -55,15 +56,15 @@ export const ResetPasswordForm = ({ className, token }: ResetPasswordFormProps)
 
   const isSubmitting = form.formState.isSubmitting;
 
-  const { mutateAsync: resetPassword } = trpc.profile.resetPassword.useMutation();
-
   const onFormSubmit = async ({ password }: Omit<TResetPasswordFormSchema, 'repeatedPassword'>) => {
     try {
-      await resetPassword({
+      await authClient.emailPassword.resetPassword({
         password,
         token,
       });
 
+      await navigate('/signin');
+
       form.reset();
 
       toast({
@@ -71,8 +72,6 @@ export const ResetPasswordForm = ({ className, token }: ResetPasswordFormProps)
         description: _(msg`Your password has been updated successfully.`),
         duration: 5000,
       });
-
-      navigate('/signin');
     } catch (err) {
       const error = AppError.parseError(err);
 

apps/remix/app/components/forms/send-confirmation-email.tsx

@@ -5,7 +5,7 @@ import { Trans } from '@lingui/react/macro';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
-import { trpc } from '@documenso/trpc/react';
+import { authClient } from '@documenso/auth/client';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -42,11 +42,9 @@ export const SendConfirmationEmailForm = ({ className }: SendConfirmationEmailFo
 
   const isSubmitting = form.formState.isSubmitting;
 
-  const { mutateAsync: sendConfirmationEmail } = trpc.profile.sendConfirmationEmail.useMutation();
-
   const onFormSubmit = async ({ email }: TSendConfirmationEmailFormSchema) => {
     try {
-      await sendConfirmationEmail({ email });
+      await authClient.emailPassword.resendVerifyEmail({ email });
 
       toast({
         title: _(msg`Confirmation email sent`),
@@ -59,6 +57,7 @@ export const SendConfirmationEmailForm = ({ className }: SendConfirmationEmailFo
       form.reset();
     } catch (err) {
       toast({
+        variant: 'destructive',
         title: _(msg`An error occurred while sending your confirmation email`),
         description: _(msg`Please try again and make sure you enter the correct email address.`),
       });

apps/remix/app/root.tsx

@@ -17,6 +17,7 @@ import { getOptionalLoaderSession } from 'server/utils/get-loader-session';
 
 import { SessionProvider } from '@documenso/lib/client-only/providers/session';
 import { APP_I18N_OPTIONS, type SupportedLanguageCodes } from '@documenso/lib/constants/i18n';
+import { createPublicEnv } from '@documenso/lib/utils/env';
 import { extractLocaleData } from '@documenso/lib/utils/i18n';
 import { TrpcProvider } from '@documenso/trpc/react';
 import { Toaster } from '@documenso/ui/primitives/toaster';
@@ -99,9 +100,7 @@ export async function loader({ request }: Route.LoaderArgs) {
       lang,
       theme: getTheme(),
       session,
-      __ENV__: Object.fromEntries(
+      publicEnv: createPublicEnv(),
-        Object.entries(process.env).filter(([key]) => key.startsWith('NEXT_')), // Todo: I'm pretty sure this will leak?
-      ),
     },
     {
       headers: {
@@ -112,7 +111,7 @@ export async function loader({ request }: Route.LoaderArgs) {
 }
 
 export function Layout({ children }: { children: React.ReactNode }) {
-  const { __ENV__, theme, lang } = useLoaderData<typeof loader>() || {};
+  const { publicEnv, theme, lang } = useLoaderData<typeof loader>() || {};
 
   // const [theme] = useTheme();
 
@@ -145,7 +144,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
 
         <script
           dangerouslySetInnerHTML={{
-            __html: `window.__ENV__ = ${JSON.stringify(__ENV__)}`,
+            __html: `window.__ENV__ = ${JSON.stringify(publicEnv)}`,
           }}
         />
       </body>

apps/remix/app/routes/_unauthenticated+/signin.tsx

@@ -11,6 +11,8 @@ import { env } from '@documenso/lib/utils/env';
 
 import { SignInForm } from '~/components/forms/signin';
 
+import type { Route } from './+types/signin';
+
 export function meta() {
   return [{ title: 'Sign In' }];
 }
@@ -18,13 +20,24 @@ export function meta() {
 export function loader() {
   const session = getOptionalLoaderSession();
 
+  // SSR env variables.
+  const isGoogleSSOEnabled = IS_GOOGLE_SSO_ENABLED;
+  const isOIDCSSOEnabled = IS_OIDC_SSO_ENABLED;
+  const oidcProviderLabel = OIDC_PROVIDER_LABEL;
+
   if (session) {
     throw redirect('/documents');
   }
+
+  return {
+    isGoogleSSOEnabled,
+    isOIDCSSOEnabled,
+    oidcProviderLabel,
+  };
 }
 
-export default function SignIn() {
+export default function SignIn({ loaderData }: Route.ComponentProps) {
-  const NEXT_PUBLIC_DISABLE_SIGNUP = env('NEXT_PUBLIC_DISABLE_SIGNUP');
+  const { isGoogleSSOEnabled, isOIDCSSOEnabled, oidcProviderLabel } = loaderData;
 
   return (
     <div className="w-screen max-w-lg px-4">
@@ -39,12 +52,12 @@ export default function SignIn() {
         <hr className="-mx-6 my-4" />
 
         <SignInForm
-          isGoogleSSOEnabled={IS_GOOGLE_SSO_ENABLED}
+          isGoogleSSOEnabled={isGoogleSSOEnabled}
-          isOIDCSSOEnabled={IS_OIDC_SSO_ENABLED}
+          isOIDCSSOEnabled={isOIDCSSOEnabled}
-          oidcProviderLabel={OIDC_PROVIDER_LABEL}
+          oidcProviderLabel={oidcProviderLabel}
         />
 
-        {NEXT_PUBLIC_DISABLE_SIGNUP !== 'true' && (
+        {env('NEXT_PUBLIC_DISABLE_SIGNUP') !== 'true' && (
           <p className="text-muted-foreground mt-6 text-center text-sm">
             <Trans>
               Don't have an account?{' '}

apps/remix/app/routes/_unauthenticated+/signup.tsx

@@ -5,6 +5,8 @@ import { env } from '@documenso/lib/utils/env';
 
 import { SignUpForm } from '~/components/forms/signup';
 
+import type { Route } from './+types/signup';
+
 export function meta() {
   return [{ title: 'Sign Up' }];
 }
@@ -12,17 +14,28 @@ export function meta() {
 export function loader() {
   const NEXT_PUBLIC_DISABLE_SIGNUP = env('NEXT_PUBLIC_DISABLE_SIGNUP');
 
+  // SSR env variables.
+  const isGoogleSSOEnabled = IS_GOOGLE_SSO_ENABLED;
+  const isOIDCSSOEnabled = IS_OIDC_SSO_ENABLED;
+
   if (NEXT_PUBLIC_DISABLE_SIGNUP === 'true') {
     throw redirect('/signin');
   }
+
+  return {
+    isGoogleSSOEnabled,
+    isOIDCSSOEnabled,
+  };
 }
 
-export default function SignUp() {
+export default function SignUp({ loaderData }: Route.ComponentProps) {
+  const { isGoogleSSOEnabled, isOIDCSSOEnabled } = loaderData;
+
   return (
     <SignUpForm
       className="w-screen max-w-screen-2xl px-4 md:px-16 lg:-my-16"
-      isGoogleSSOEnabled={IS_GOOGLE_SSO_ENABLED}
+      isGoogleSSOEnabled={isGoogleSSOEnabled}
-      isOIDCSSOEnabled={IS_OIDC_SSO_ENABLED}
+      isOIDCSSOEnabled={isOIDCSSOEnabled}
     />
   );
 }

apps/remix/app/routes/embed+/_layout.tsx

@@ -3,6 +3,22 @@ import { Outlet, isRouteErrorResponse, useRouteError } from 'react-router';
 import { EmbedAuthenticationRequired } from '~/components/embed/embed-authentication-required';
 import { EmbedPaywall } from '~/components/embed/embed-paywall';
 
+import type { Route } from './+types/_layout';
+
+// Todo: Test
+export function headers({ loaderHeaders }: Route.HeadersArgs) {
+  const origin = loaderHeaders.get('Origin') ?? '*';
+
+  // Allow third parties to iframe the document.
+  return {
+    'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+    'Access-Control-Allow-Origin': origin,
+    'Content-Security-Policy': `frame-ancestors ${origin}`,
+    'Referrer-Policy': 'strict-origin-when-cross-origin',
+    'X-Content-Type-Options': 'nosniff',
+  };
+}
+
 export default function Layout() {
   return <Outlet />;
 }

apps/remix/package.json

@@ -6,11 +6,12 @@
     "build": "sh .bin/build.sh",
     "build:app": "cross-env NODE_ENV=production react-router build",
     "build:server": "cross-env NODE_ENV=production rollup -c rollup.config.mjs",
-    "dev": "react-router dev",
+    "dev": "npm run with:env -- react-router dev",
-    "start": "cross-env NODE_ENV=production node build/server/main.js",
+    "start": "npm run with:env -- cross-env NODE_ENV=production node build/server/main.js",
     "clean": "rimraf .react-router && rimraf node_modules",
     "typecheck": "react-router typegen && tsc",
-    "copy:pdfjs": "node ../../scripts/copy-pdfjs.cjs"
+    "copy:pdfjs": "node ../../scripts/copy-pdfjs.cjs",
+    "with:env": "dotenv -e ../../.env -e ../../.env.local --"
   },
   "dependencies": {
     "@documenso/api": "*",

apps/remix/vite.config.ts

@@ -2,21 +2,18 @@ import { lingui } from '@lingui/vite-plugin';
 import { reactRouter } from '@react-router/dev/vite';
 import autoprefixer from 'autoprefixer';
 import serverAdapter from 'hono-react-router-adapter/vite';
-import path from 'path';
 import tailwindcss from 'tailwindcss';
-import { defineConfig, loadEnv } from 'vite';
+import { defineConfig } from 'vite';
 import macrosPlugin from 'vite-plugin-babel-macros';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
+/**
+ * Note: We load the env variables externally so we can have runtime enviroment variables
+ * for docker.
+ *
+ * Do not configure any envs here.
+ */
 export default defineConfig({
-  envDir: path.join(__dirname, '../../'),
-  envPrefix: '__DO_NOT_USE_OR_YOU_WILL_BE_FIRED__',
-  define: {
-    'process.env': {
-      ...process.env,
-      ...loadEnv('development', path.join(__dirname, '../../'), ''),
-    },
-  },
   css: {
     postcss: {
       plugins: [tailwindcss, autoprefixer],
@@ -37,18 +34,12 @@ export default defineConfig({
   ],
   ssr: {
     noExternal: ['react-dropzone', 'plausible-tracker', 'pdfjs-dist'],
-    external: ['@node-rs/bcrypt', '@node-rs/bcrypt-wasm32-wasi', '@prisma/client'],
+    external: ['@node-rs/bcrypt', '@prisma/client', '@documenso/tailwind-config'],
   },
   optimizeDeps: {
     entries: ['./app/**/*', '../../packages/ui/**/*', '../../packages/lib/**/*'],
     include: ['prop-types', 'file-selector', 'attr-accept'],
-    exclude: [
+    exclude: ['node_modules', '@node-rs/bcrypt', '@documenso/pdf-sign', 'sharp'],
-      'node_modules',
-      '@node-rs/bcrypt',
-      '@node-rs/bcrypt-wasm32-wasi',
-      '@documenso/pdf-sign',
-      'sharp',
-    ],
   },
   resolve: {
     alias: {

lingui.config.ts

@@ -9,10 +9,11 @@ const config: LinguiConfig = {
   catalogs: [
     {
       path: '<rootDir>/packages/lib/translations/{locale}/web',
-      include: ['apps/remix/src', 'packages/ui', 'packages/lib', 'packages/email'],
+      include: ['apps/remix/app', 'packages/ui', 'packages/lib', 'packages/email'],
       exclude: ['**/node_modules/**'],
     },
   ],
+  compileNamespace: 'es',
 };
 
 export default config;

package.json

@@ -80,4 +80,4 @@
   "trigger.dev": {
     "endpointId": "documenso-app"
   }
-}
+}

packages/api/package.json

@@ -19,7 +19,7 @@
     "@documenso/prisma": "*",
     "@ts-rest/core": "^3.30.5",
     "@ts-rest/open-api": "^3.33.0",
-    "@ts-rest/serverless": "^3.51.0",
+    "@ts-rest/serverless": "^3.30.5",
     "@types/swagger-ui-react": "^4.18.3",
     "luxon": "^3.4.0",
     "superjson": "^1.13.1",

packages/auth/client/index.ts

@@ -8,6 +8,7 @@ import type { AuthAppType } from '../server';
 import { handleSignInRedirect } from '../server/lib/utils/redirect';
 import type {
   TForgotPasswordSchema,
+  TResendVerifyEmailSchema,
   TResetPasswordSchema,
   TSignUpSchema,
   TUpdatePasswordSchema,
@@ -79,6 +80,13 @@ export class AuthClient {
       await this.handleError(response);
     },
 
+    resendVerifyEmail: async (data: TResendVerifyEmailSchema) => {
+      const response = await this.client['email-password']['resend-verify-email'].$post({
+        json: data,
+      });
+      await this.handleError(response);
+    },
+
     verifyEmail: async (data: TVerifyEmailSchema) => {
       const response = await this.client['email-password']['verify-email'].$post({ json: data });
       await this.handleError(response);

packages/auth/server/routes/email-password.ts

@@ -30,6 +30,7 @@ import { getRequiredSession, getSession } from '../lib/utils/get-session';
 import type { HonoAuthContext } from '../types/context';
 import {
   ZForgotPasswordSchema,
+  ZResendVerifyEmailSchema,
   ZResetPasswordSchema,
   ZSignInSchema,
   ZSignUpSchema,
@@ -196,17 +197,17 @@ export const emailPasswordRoute = new Hono<HonoAuthContext>()
   /**
    * Resend verification email endpoint.
    */
-  .post('/resend-email', zValidator('json', ZVerifyEmailSchema), async (c) => {
+  .post('/resend-verify-email', zValidator('json', ZResendVerifyEmailSchema), async (c) => {
-    const { state, userId } = await verifyEmail({ token: c.req.valid('json').token });
+    const { email } = c.req.valid('json');
 
-    // If email is verified, automatically authenticate user.
+    await jobsClient.triggerJob({
-    if (state === EMAIL_VERIFICATION_STATE.VERIFIED && userId !== null) {
+      name: 'send.signup.confirmation.email',
-      await onAuthorize({ userId }, c);
+      payload: {
-    }
+        email,
-
+      },
-    return c.json({
-      state,
     });
+
+    return c.text('OK', 201);
   })
   /**
    * Forgot password endpoint.

packages/auth/server/types/email-password.ts

@@ -68,6 +68,12 @@ export const ZVerifyEmailSchema = z.object({
 
 export type TVerifyEmailSchema = z.infer<typeof ZVerifyEmailSchema>;
 
+export const ZResendVerifyEmailSchema = z.object({
+  email: z.string().email().min(1),
+});
+
+export type TResendVerifyEmailSchema = z.infer<typeof ZResendVerifyEmailSchema>;
+
 export const ZUpdatePasswordSchema = z.object({
   currentPassword: ZCurrentPasswordSchema,
   password: ZPasswordSchema,

packages/email/mailer.ts

@@ -2,8 +2,8 @@ import type { Transporter } from 'nodemailer';
 import { createTransport } from 'nodemailer';
 
 import { env } from '@documenso/lib/utils/env';
+import { ResendTransport } from '@documenso/nodemailer-resend';
 
-// import { ResendTransport } from '@documenso/nodemailer-resend';
 import { MailChannelsTransport } from './transports/mailchannels';
 
 /**
@@ -63,14 +63,13 @@ const getTransport = (): Transporter => {
     );
   }
 
-  // Todo
+  if (transport === 'resend') {
-  // if (transport === 'resend') {
+    return createTransport(
-  //   return createTransport(
+      ResendTransport.makeTransport({
-  //     ResendTransport.makeTransport({
+        apiKey: env('NEXT_PRIVATE_RESEND_API_KEY') || '',
-  //       apiKey: env('NEXT_PRIVATE_RESEND_API_KEY') || '',
+      }),
-  //     }),
+    );
-  //   );
+  }
-  // }
 
   if (transport === 'smtp-api') {
     if (!env('NEXT_PRIVATE_SMTP_HOST') || !env('NEXT_PRIVATE_SMTP_APIKEY')) {

packages/email/package.json

@@ -35,11 +35,9 @@
     "@react-email/section": "0.0.10",
     "@react-email/tailwind": "0.0.9",
     "@react-email/text": "0.0.6",
-    "@lingui/macro": "^5.2.0",
+    "nodemailer": "6.9.9",
-    "@lingui/react": "^5.2.0",
+    "react-email": "1.9.5",
-    "nodemailer": "^6.9.9",
+    "resend": "2.0.0"
-    "react-email": "^1.9.5",
-    "resend": "^2.0.0"
   },
   "devDependencies": {
     "@documenso/tailwind-config": "*",

packages/email/render.tsx

@@ -1,11 +1,10 @@
 import * as ReactEmail from '@react-email/render';
 
+import config from '@documenso/tailwind-config';
+
 import { Tailwind } from './components';
 import { BrandingProvider, type BrandingSettings } from './providers/branding';
 
-// Todo:
-// import config from '@documenso/tailwind-config';
-
 export type RenderOptions = ReactEmail.Options & {
   branding?: BrandingSettings;
 };
@@ -18,7 +17,7 @@ export const render = (element: React.ReactNode, options?: RenderOptions) => {
       config={{
         theme: {
           extend: {
-            // colors: config.theme.extend.colors,
+            colors: config.theme.extend.colors,
           },
         },
       }}
@@ -37,7 +36,7 @@ export const renderAsync = async (element: React.ReactNode, options?: RenderOpti
       config={{
         theme: {
           extend: {
-            // colors: config.theme.extend.colors,
+            colors: config.theme.extend.colors,
           },
         },
       }}

packages/lib/client-only/providers/i18n-server.tsx

@@ -14,7 +14,7 @@ type SupportedLanguages = (typeof SUPPORTED_LANGUAGE_CODES)[number];
 export async function loadCatalog(lang: SupportedLanguages): Promise<{
   [k: string]: Messages;
 }> {
-  const extension = env('NODE_ENV') === 'development' ? 'po' : 'js';
+  const extension = env('NODE_ENV') === 'development' ? 'po' : 'mjs';
 
   const { messages } = await import(`../../translations/${lang}/web.${extension}`);
 

packages/lib/translations/.gitignore

@@ -2,3 +2,4 @@
 
 # Compiled translations.
 *.js
+*.mjs

packages/lib/utils/env.ts

@@ -1,18 +1,21 @@
 /// <reference types="@documenso/tsconfig/process-env.d.ts" />
 
+declare global {
+  interface Window {
+    __ENV__?: Record<string, string | undefined>;
+  }
+}
+
 type EnvironmentVariable = keyof NodeJS.ProcessEnv;
 
 export const env = (variable: EnvironmentVariable | (string & object)): string | undefined => {
-  // console.log({
-  //   ['typeof window']: typeof window,
-  //   ['process.env']: process.env,
-  //   ['window.__ENV__']: typeof window !== 'undefined' && window.__ENV__,
-  // });
-
-  // This may need ot be import.meta.env.SSR depending on vite.
   if (typeof window !== 'undefined' && typeof window.__ENV__ === 'object') {
     return window.__ENV__[variable];
   }
 
-  return process.env[variable];
+  return process?.env?.[variable];
 };
+
+// Todo: Test
+export const createPublicEnv = () =>
+  Object.fromEntries(Object.entries(process.env).filter(([key]) => key.startsWith('NEXT_PUBLIC_')));

packages/lib/utils/i18n.ts

@@ -3,13 +3,11 @@ import { i18n } from '@lingui/core';
 
 import type { I18nLocaleData, SupportedLanguageCodes } from '../constants/i18n';
 import { APP_I18N_OPTIONS } from '../constants/i18n';
+import { env } from './env';
 
 export async function dynamicActivate(locale: string) {
-  // const extension = import.meta.env.PROD env('NODE_ENV') === 'development' ? 'po' : 'js';
+  const extension = env('NODE_ENV') === 'development' ? 'po' : 'mjs';
-  // eslint-disable-next-line turbo/no-undeclared-env-vars
-  const extension = import.meta.env.PROD ? 'js' : 'po';
 
-  // Todo: Use extension (currently breaks).
   const { messages } = await import(`../translations/${locale}/web.${extension}`);
 
   i18n.loadAndActivate({ locale, messages });