fix: wip

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

@@ -1,29 +1,25 @@
 import { Outlet } from 'react-router';
 import { redirect } from 'react-router';
 
-import { getSession } from '@documenso/auth/server/lib/utils/get-session';
 import { LimitsProvider } from '@documenso/ee/server-only/limits/provider/client';
-import { getTeams } from '@documenso/lib/server-only/team/get-teams';
+import { SessionProvider } from '@documenso/lib/client-only/providers/session';
 
 import { Header } from '~/components/(dashboard)/layout/header';
 import { VerifyEmailBanner } from '~/components/(dashboard)/layout/verify-email-banner';
-import { AuthProvider } from '~/providers/auth';
 
 import type { Route } from './+types/_layout';
 
-export const loader = async ({ request }: Route.LoaderArgs) => {
-  const { session, user, isAuthenticated } = await getSession(request);
+export const loader = ({ context }: Route.LoaderArgs) => {
+  const { session } = context;
 
-  if (!isAuthenticated) {
+  if (!session) {
     return redirect('/signin');
   }
 
-  const teams = await getTeams({ userId: user.id });
-
   return {
-    user,
-    session,
-    teams,
+    user: session.user,
+    session: session.session,
+    teams: session.teams,
   };
 };
 
@@ -31,7 +27,7 @@ export default function Layout({ loaderData }: Route.ComponentProps) {
   const { user, session, teams } = loaderData;
 
   return (
-    <AuthProvider session={session} user={user}>
+    <SessionProvider session={session} user={user}>
       <LimitsProvider>
         {!user.emailVerified && <VerifyEmailBanner email={user.email} />}
 
@@ -44,6 +40,6 @@ export default function Layout({ loaderData }: Route.ComponentProps) {
           <Outlet />
         </main>
       </LimitsProvider>
-    </AuthProvider>
+    </SessionProvider>
   );
 }

apps/remix/app/routes/_authenticated+/admin+/_layout.tsx

@@ -1,16 +1,16 @@
 import { Trans } from '@lingui/macro';
 import { BarChart3, FileStack, Settings, Trophy, Users, Wallet2 } from 'lucide-react';
 import { Link, Outlet, redirect, useLocation } from 'react-router';
+import { getRequiredSessionContext } from 'server/utils/get-required-session-context';
 
-import { getSession } from '@documenso/auth/server/lib/utils/get-session';
 import { isAdmin } from '@documenso/lib/next-auth/guards/is-admin';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
 import type { Route } from './+types/_layout';
 
-export async function loader({ request }: Route.LoaderArgs) {
-  const { user } = await getSession(request);
+export function loader({ context }: Route.LoaderArgs) {
+  const { user } = getRequiredSessionContext(context);
 
   if (!user || !isAdmin(user)) {
     return redirect('/documents');

apps/remix/app/routes/_authenticated+/admin+/documents.$id.tsx

@@ -2,7 +2,7 @@ import { Trans, msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import { SigningStatus } from '@prisma/client';
 import { DateTime } from 'luxon';
-import { Link } from 'react-router';
+import { Link, redirect } from 'react-router';
 
 import { getEntireDocument } from '@documenso/lib/server-only/admin/get-entire-document';
 import { trpc } from '@documenso/trpc/react';
@@ -30,10 +30,13 @@ import type { Route } from './+types/documents.$id';
 
 export async function loader({ params }: Route.LoaderArgs) {
   const id = Number(params.id);
+  // Todo: Is it possible for this to return data to the frontend w/out auth layout due to race condition?
+  // Todo: Is it possible for this to return data to the frontend w/out auth layout due to race condition?
+  // Todo: Is it possible for this to return data to the frontend w/out auth layout due to race condition?
 
-  // if (isNaN(id)) {
-  //   return redirect('/admin/documents');
-  // }
+  if (isNaN(id)) {
+    return redirect('/admin/documents');
+  }
 
   const document = await getEntireDocument({ id });
 

apps/remix/app/routes/_authenticated+/admin+/site-settings.tsx

@@ -29,6 +29,10 @@ import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header'
 
 import type { Route } from './+types/site-settings';
 
+const ZBannerFormSchema = ZSiteSettingsBannerSchema;
+
+type TBannerFormSchema = z.infer<typeof ZBannerFormSchema>;
+
 export async function loader() {
   const banner = await getSiteSettings().then((settings) =>
     settings.find((setting) => setting.id === SITE_SETTINGS_BANNER_ID),
@@ -37,10 +41,6 @@ export async function loader() {
   return { banner };
 }
 
-const ZBannerFormSchema = ZSiteSettingsBannerSchema;
-
-type TBannerFormSchema = z.infer<typeof ZBannerFormSchema>;
-
 export default function AdminBannerPage({ loaderData }: Route.ComponentProps) {
   const { banner } = loaderData;
 

apps/remix/app/routes/_authenticated+/documents+/$id._index.tsx

@@ -4,9 +4,10 @@ import { DocumentStatus } from '@prisma/client';
 import { TeamMemberRole } from '@prisma/client';
 import { ChevronLeft, Clock9, Users2 } from 'lucide-react';
 import { Link, redirect } from 'react-router';
+import { getRequiredSessionContext } from 'server/utils/get-required-session-context';
 import { match } from 'ts-pattern';
 
-import { getRequiredSession } from '@documenso/auth/server/lib/utils/get-session';
+import { useSession } from '@documenso/lib/client-only/providers/session';
 import { DOCUMENSO_ENCRYPTION_KEY } from '@documenso/lib/constants/crypto';
 import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
 import { getFieldsForDocument } from '@documenso/lib/server-only/field/get-fields-for-document';
@@ -14,7 +15,6 @@ import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/g
 import { DocumentVisibility } from '@documenso/lib/types/document-visibility';
 import { symmetricDecrypt } from '@documenso/lib/universal/crypto';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
-import { prisma } from '@documenso/prisma';
 import { Badge } from '@documenso/ui/primitives/badge';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
@@ -33,26 +33,14 @@ import { DocumentPageViewDropdown } from '~/components/pages/document/document-p
 import { DocumentPageViewInformation } from '~/components/pages/document/document-page-view-information';
 import { DocumentPageViewRecentActivity } from '~/components/pages/document/document-page-view-recent-activity';
 import { DocumentPageViewRecipients } from '~/components/pages/document/document-page-view-recipients';
-import { useAuth } from '~/providers/auth';
 
 import type { Route } from './+types/$id._index';
 
-export async function loader({ request, params }: Route.LoaderArgs) {
+export async function loader({ params, context }: Route.LoaderArgs) {
+  const { user, currentTeam: team } = getRequiredSessionContext(context);
+
   const { id } = params;
 
-  const { user } = await getRequiredSession(request);
-
-  // Todo: Get from parent loader, this is just for testing.
-  const team = await prisma.team.findFirst({
-    where: {
-      documents: {
-        some: {
-          id: Number(id),
-        },
-      },
-    },
-  });
-
   const documentId = Number(id);
 
   const documentRootPath = formatDocumentsPath(team?.url);
@@ -142,7 +130,7 @@ export async function loader({ request, params }: Route.LoaderArgs) {
 
 export default function DocumentPage({ loaderData }: Route.ComponentProps) {
   const { _ } = useLingui();
-  const { user } = useAuth();
+  const { user } = useSession();
 
   const { document, documentRootPath, fields } = loaderData;
 

apps/remix/app/routes/_authenticated+/documents+/$id.edit.tsx

@@ -3,16 +3,15 @@ import { TeamMemberRole } from '@prisma/client';
 import { DocumentStatus as InternalDocumentStatus } from '@prisma/client';
 import { ChevronLeft, Users2 } from 'lucide-react';
 import { Link, redirect } from 'react-router';
+import { getRequiredSessionContext } from 'server/utils/get-required-session-context';
 import { match } from 'ts-pattern';
 
-import { getRequiredSession } from '@documenso/auth/server/lib/utils/get-session';
 import { isUserEnterprise } from '@documenso/ee/server-only/util/is-document-enterprise';
 import { DOCUMENSO_ENCRYPTION_KEY } from '@documenso/lib/constants/crypto';
 import { getDocumentWithDetailsById } from '@documenso/lib/server-only/document/get-document-with-details-by-id';
 import { DocumentVisibility } from '@documenso/lib/types/document-visibility';
 import { symmetricDecrypt } from '@documenso/lib/universal/crypto';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
-import { prisma } from '@documenso/prisma';
 
 import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip';
 import { DocumentStatus } from '~/components/formatter/document-status';
@@ -20,22 +19,11 @@ import { DocumentEditForm } from '~/components/pages/document/document-edit-form
 
 import type { Route } from './+types/$id.edit';
 
-export async function loader({ request, params }: Route.LoaderArgs) {
+export async function loader({ params, context }: Route.LoaderArgs) {
+  const { user, currentTeam: team } = getRequiredSessionContext(context);
+
   const { id } = params;
 
-  const { user } = await getRequiredSession(request);
-
-  // Todo: Get from parent loader, this is just for testing.
-  const team = await prisma.team.findFirst({
-    where: {
-      documents: {
-        some: {
-          id: Number(id),
-        },
-      },
-    },
-  });
-
   const documentId = Number(id);
 
   const documentRootPath = formatDocumentsPath(team?.url);

apps/remix/app/routes/_authenticated+/documents+/$id.logs.tsx

@@ -5,6 +5,7 @@ import type { Recipient } from '@prisma/client';
 import { ChevronLeft } from 'lucide-react';
 import { DateTime } from 'luxon';
 import { Link, redirect } from 'react-router';
+import { getRequiredSessionContext } from 'server/utils/get-required-session-context';
 
 import { getRequiredSession } from '@documenso/auth/server/lib/utils/get-session';
 import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
@@ -23,21 +24,10 @@ import { DocumentLogsTable } from '~/components/tables/document-logs-table';
 
 import type { Route } from './+types/$id.logs';
 
-export async function loader({ request, params }: Route.LoaderArgs) {
+export async function loader({ params, context }: Route.LoaderArgs) {
   const { id } = params;
 
-  const { user } = await getRequiredSession(request);
-
-  // Todo: Get from parent loader, this is just for testing.
-  const team = await prisma.team.findFirst({
-    where: {
-      documents: {
-        some: {
-          id: Number(id),
-        },
-      },
-    },
-  });
+  const { user, currentTeam: team } = getRequiredSessionContext(context);
 
   const documentId = Number(id);
 

apps/remix/app/routes/_authenticated+/documents+/_index.tsx

@@ -2,6 +2,7 @@ import { Trans } from '@lingui/macro';
 import { useSearchParams } from 'react-router';
 import { Link } from 'react-router';
 
+import { useSession } from '@documenso/lib/client-only/providers/session';
 import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
 import { parseToIntegerArray } from '@documenso/lib/utils/params';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
@@ -20,7 +21,6 @@ import { UpcomingProfileClaimTeaser } from '~/components/general/upcoming-profil
 import { DocumentsTable } from '~/components/tables/documents-table';
 import { DocumentsTableEmptyState } from '~/components/tables/documents-table-empty-state';
 import { DocumentsTableSenderFilter } from '~/components/tables/documents-table-sender-filter';
-import { useAuth } from '~/providers/auth';
 import { useOptionalCurrentTeam } from '~/providers/team';
 
 export function meta() {
@@ -39,7 +39,7 @@ export function meta() {
 export default function DocumentsPage() {
   const [searchParams] = useSearchParams();
 
-  const { user } = useAuth();
+  const { user } = useSession();
   const team = useOptionalCurrentTeam();
 
   const status = isExtendedDocumentStatus(searchParams.status) ? searchParams.status : 'ALL';

apps/remix/app/routes/_authenticated+/settings+/public-profile+/index.tsx

@@ -4,8 +4,9 @@ import { Trans, msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import type { TemplateDirectLink } from '@prisma/client';
 import { TemplateType } from '@prisma/client';
+import { getRequiredSessionContext } from 'server/utils/get-required-session-context';
 
-import { getRequiredSession } from '@documenso/auth/server/lib/utils/get-session';
+import { useSession } from '@documenso/lib/client-only/providers/session';
 import { getUserPublicProfile } from '@documenso/lib/server-only/user/get-user-public-profile';
 import { trpc } from '@documenso/trpc/react';
 import type { FindTemplateRow } from '@documenso/trpc/server/template-router/schema';
@@ -16,10 +17,9 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitive
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
+import { ManagePublicTemplateDialog } from '~/components/dialogs/public-profile-template-manage-dialog';
 import type { TPublicProfileFormSchema } from '~/components/forms/public-profile-form';
 import { PublicProfileForm } from '~/components/forms/public-profile-form';
-import { ManagePublicTemplateDialog } from '~/components/templates/manage-public-template-dialog';
-import { useAuth } from '~/providers/auth';
 import { useOptionalCurrentTeam } from '~/providers/team';
 
 import { SettingsPublicProfileTemplatesTable } from '../../../../components/tables/settings-public-profile-templates-table';
@@ -43,8 +43,8 @@ const teamProfileText = {
   templatesSubtitle: msg`Show templates in your team public profile for your audience to sign and get started quickly`,
 };
 
-export async function loader({ request }: Route.LoaderArgs) {
-  const { user } = await getRequiredSession(request); // Todo: Pull from...
+export async function loader({ context }: Route.LoaderArgs) {
+  const { user } = getRequiredSessionContext(context);
 
   const { profile } = await getUserPublicProfile({
     userId: user.id,
@@ -59,7 +59,7 @@ export default function PublicProfilePage({ loaderData }: Route.ComponentProps)
   const { _ } = useLingui();
   const { toast } = useToast();
 
-  const user = useAuth();
+  const user = useSession();
   const team = useOptionalCurrentTeam();
 
   const [isPublicProfileVisible, setIsPublicProfileVisible] = useState(profile.enabled);

apps/remix/app/routes/_authenticated+/settings+/security+/index.tsx

@@ -2,6 +2,7 @@ import { Trans, msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import { Link } from 'react-router';
 
+import { useSession } from '@documenso/lib/client-only/providers/session';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 
@@ -10,7 +11,6 @@ import { DisableAuthenticatorAppDialog } from '~/components/forms/2fa/disable-au
 import { EnableAuthenticatorAppDialog } from '~/components/forms/2fa/enable-authenticator-app-dialog';
 import { ViewRecoveryCodesDialog } from '~/components/forms/2fa/view-recovery-codes-dialog';
 import { PasswordForm } from '~/components/forms/password';
-import { useAuth } from '~/providers/auth';
 
 export function meta() {
   return [{ title: 'Security' }];
@@ -18,7 +18,7 @@ export function meta() {
 
 export default function SettingsSecurity() {
   const { _ } = useLingui();
-  const { user } = useAuth();
+  const { user } = useSession();
 
   return (
     <div>

apps/remix/app/routes/_authenticated+/settings+/tokens+/index.tsx

@@ -1,8 +1,8 @@
 import { Trans } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import { DateTime } from 'luxon';
+import { getRequiredSessionContext } from 'server/utils/get-required-session-context';
 
-import { getRequiredSession } from '@documenso/auth/server/lib/utils/get-session';
 import { getUserTokens } from '@documenso/lib/server-only/public-api/get-all-user-tokens';
 import { Button } from '@documenso/ui/primitives/button';
 
@@ -11,9 +11,8 @@ import { ApiTokenForm } from '~/components/forms/token';
 
 import type { Route } from './+types/index';
 
-export async function loader({ request }: Route.LoaderArgs) {
-  // Todo: Make better
-  const { user } = await getRequiredSession(request);
+export async function loader({ context }: Route.LoaderArgs) {
+  const { user } = getRequiredSessionContext(context);
 
   // Todo: Use TRPC & use table instead
   const tokens = await getUserTokens({ userId: user.id });

apps/remix/app/routes/_authenticated+/settings+/webhooks+/$id.tsx

@@ -24,7 +24,7 @@ import { Switch } from '@documenso/ui/primitives/switch';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
-import { TriggerMultiSelectCombobox } from '~/components/general/webhook-multiselect-combobox';
+import { WebhookMultiSelectCombobox } from '~/components/general/webhook-multiselect-combobox';
 
 const ZEditWebhookFormSchema = ZEditWebhookMutationSchema.omit({ id: true });
 
@@ -158,7 +158,7 @@ export default function WebhookPage() {
                     <Trans>Triggers</Trans>
                   </FormLabel>
                   <FormControl>
-                    <TriggerMultiSelectCombobox
+                    <WebhookMultiSelectCombobox
                       listValues={value}
                       onChange={(values: string[]) => {
                         onChange(values);

apps/remix/app/routes/_authenticated+/settings+/webhooks+/index.tsx

@@ -11,8 +11,8 @@ import { Badge } from '@documenso/ui/primitives/badge';
 import { Button } from '@documenso/ui/primitives/button';
 
 import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
-import { CreateWebhookDialog } from '~/components/dialogs/webhook-create-dialog';
-import { DeleteWebhookDialog } from '~/components/dialogs/webhook-delete-dialog';
+import { WebhookCreateDialog } from '~/components/dialogs/webhook-create-dialog';
+import { WebhookDeleteDialog } from '~/components/dialogs/webhook-delete-dialog';
 
 export default function WebhookPage() {
   const { _, i18n } = useLingui();
@@ -25,7 +25,7 @@ export default function WebhookPage() {
         title={_(msg`Webhooks`)}
         subtitle={_(msg`On this page, you can create new Webhooks and manage the existing ones.`)}
       >
-        <CreateWebhookDialog />
+        <WebhookCreateDialog />
       </SettingsHeader>
 
       {isLoading && (
@@ -92,11 +92,11 @@ export default function WebhookPage() {
                       <Trans>Edit</Trans>
                     </Link>
                   </Button>
-                  <DeleteWebhookDialog webhook={webhook}>
+                  <WebhookDeleteDialog webhook={webhook}>
                     <Button variant="destructive">
                       <Trans>Delete</Trans>
                     </Button>
-                  </DeleteWebhookDialog>
+                  </WebhookDeleteDialog>
                 </div>
               </div>
             </div>

apps/remix/app/routes/_authenticated+/t.$teamUrl+/_layout.tsx

@@ -2,13 +2,11 @@ import type { MessageDescriptor } from '@lingui/core';
 import { Trans, msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import { ChevronLeft } from 'lucide-react';
-import { Link, Outlet, isRouteErrorResponse, replace, useNavigate } from 'react-router';
+import { Link, Outlet, isRouteErrorResponse, redirect, useNavigate } from 'react-router';
+import { getRequiredSessionContext } from 'server/utils/get-required-session-context';
 import { match } from 'ts-pattern';
 
-import { getRequiredSession } from '@documenso/auth/server/lib/utils/get-session';
 import { AppErrorCode } from '@documenso/lib/errors/app-error';
-import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
-import { getTeams } from '@documenso/lib/server-only/team/get-teams';
 import { TrpcProvider } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 
@@ -16,43 +14,28 @@ import { TeamProvider } from '~/providers/team';
 
 import type { Route } from './+types/_layout';
 
-export const loader = async ({ request, params }: Route.LoaderArgs) => {
-  // Todo: get user better from context or something
-  // Todo: get user better from context or something
-  const { user } = await getRequiredSession(request);
+export const loader = ({ context }: Route.LoaderArgs) => {
+  const { currentTeam } = getRequiredSessionContext(context);
 
-  const [getTeamsPromise, getTeamPromise] = await Promise.allSettled([
-    getTeams({ userId: user.id }),
-    getTeamByUrl({ userId: user.id, teamUrl: params.teamUrl }),
-  ]);
-
-  console.log('1');
-  console.log({ userId: user.id, teamUrl: params.teamUrl });
-  console.log(getTeamPromise.status);
-  if (getTeamPromise.status === 'rejected') {
-    console.log('2');
-    return replace('/documents');
+  if (!currentTeam) {
+    return redirect('/documents');
   }
 
-  const team = getTeamPromise.value;
-  const teams = getTeamsPromise.status === 'fulfilled' ? getTeamsPromise.value : [];
-
   const trpcHeaders = {
-    'x-team-Id': team.id.toString(),
+    'x-team-Id': currentTeam.id.toString(),
   };
 
   return {
-    team,
-    teams,
+    currentTeam,
     trpcHeaders,
   };
 };
 
 export default function Layout({ loaderData }: Route.ComponentProps) {
-  const { team, trpcHeaders } = loaderData;
+  const { currentTeam, trpcHeaders } = loaderData;
 
   return (
-    <TeamProvider team={team}>
+    <TeamProvider team={currentTeam}>
       <TrpcProvider headers={trpcHeaders}>
         {/* Todo: Do this. */}
         {/* {team.subscription && team.subscription.status !== SubscriptionStatus.ACTIVE && (

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings+/_index.tsx

@@ -2,6 +2,7 @@ import { Trans } from '@lingui/macro';
 import { CheckCircle2, Clock } from 'lucide-react';
 import { P, match } from 'ts-pattern';
 
+import { useSession } from '@documenso/lib/client-only/providers/session';
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
 import { isTokenExpired } from '@documenso/lib/utils/token-verification';
@@ -16,11 +17,10 @@ import { TeamTransferDialog } from '~/components/dialogs/team-transfer-dialog';
 import { AvatarImageForm } from '~/components/forms/avatar-image';
 import { TeamEmailDropdown } from '~/components/pages/teams/team-email-dropdown';
 import { TeamTransferStatus } from '~/components/pages/teams/team-transfer-status';
-import { useAuth } from '~/providers/auth';
 import { useCurrentTeam } from '~/providers/team';
 
 export default function TeamsSettingsPage() {
-  const { user } = useAuth();
+  const { user } = useSession();
 
   const team = useCurrentTeam();
 

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings+/_layout.tsx

@@ -1,9 +1,7 @@
 import { Trans } from '@lingui/macro';
 import { Outlet } from 'react-router';
+import { getRequiredTeamSessionContext } from 'server/utils/get-required-session-context';
 
-import { getRequiredSession } from '@documenso/auth/server/lib/utils/get-session';
-import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
-import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
 import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
 
 import { TeamSettingsDesktopNav } from '~/components/pages/teams/team-settings-desktop-nav';
@@ -11,26 +9,12 @@ import { TeamSettingsMobileNav } from '~/components/pages/teams/team-settings-mo
 
 import type { Route } from '../+types/_layout';
 
-export async function loader({ request, params }: Route.LoaderArgs) {
-  // Todo: Get from parent loaders...
-  const { user } = await getRequiredSession(request);
-  const teamUrl = params.teamUrl;
+export async function loader({ context }: Route.LoaderArgs) {
+  const { currentTeam: team } = getRequiredTeamSessionContext(context);
 
-  try {
-    const team = await getTeamByUrl({ userId: user.id, teamUrl });
-
-    if (!canExecuteTeamAction('MANAGE_TEAM', team.currentTeamMember.role)) {
-      // Unauthorized.
-      throw new Response(null, { status: 401 }); // Todo: Test
-    }
-  } catch (e) {
-    const error = AppError.parseError(e);
-
-    if (error.code === AppErrorCode.NOT_FOUND) {
-      throw new Response(null, { status: 404 }); // Todo: Test
-    }
-
-    throw e;
+  // Todo: Test that 404 page shows up from error.
+  if (!team || !canExecuteTeamAction('MANAGE_TEAM', team.currentTeamMember.role)) {
+    throw new Response(null, { status: 401 }); // Unauthorized.
   }
 }
 

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings+/billing.tsx

@@ -1,12 +1,11 @@
 import { Plural, Trans, msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import { DateTime } from 'luxon';
+import { getRequiredTeamSessionContext } from 'server/utils/get-required-session-context';
 import type Stripe from 'stripe';
 import { match } from 'ts-pattern';
 
-import { getRequiredSession } from '@documenso/auth/server/lib/utils/get-session';
 import { stripe } from '@documenso/lib/server-only/stripe';
-import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
 import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 
@@ -16,10 +15,8 @@ import { TeamBillingPortalButton } from '~/components/pages/teams/team-billing-p
 
 import type { Route } from './+types/billing';
 
-export async function loader({ request, params }: Route.LoaderArgs) {
-  const { user } = await getRequiredSession(request);
-
-  const team = await getTeamByUrl({ userId: user.id, teamUrl: params.teamUrl });
+export async function loader({ context }: Route.LoaderArgs) {
+  const { currentTeam: team } = getRequiredTeamSessionContext(context);
 
   let teamSubscription: Stripe.Subscription | null = null;
 

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings+/public-profile.tsx

@@ -1,14 +1,13 @@
-import { getRequiredSession } from '@documenso/auth/server/lib/utils/get-session';
+import { getRequiredTeamSessionContext } from 'server/utils/get-required-session-context';
+
 import { getTeamPublicProfile } from '@documenso/lib/server-only/team/get-team-public-profile';
 
 import PublicProfilePage from '~/routes/_authenticated+/settings+/public-profile+/index';
 
 import type { Route } from './+types/public-profile';
 
-export async function loader({ request }: Route.LoaderArgs) {
-  // Todo: Pull from...
-  const team = { id: 1 };
-  const { user } = await getRequiredSession(request);
+export async function loader({ context }: Route.LoaderArgs) {
+  const { user, currentTeam: team } = getRequiredTeamSessionContext(context);
 
   const { profile } = await getTeamPublicProfile({
     userId: user.id,
@@ -20,4 +19,5 @@ export async function loader({ request }: Route.LoaderArgs) {
   };
 }
 
+// Todo: Test that the profile shows up correctly for teams.
 export default PublicProfilePage;

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings+/tokens.tsx

@@ -1,11 +1,10 @@
 import { Trans } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import { DateTime } from 'luxon';
+import { getRequiredTeamSessionContext } from 'server/utils/get-required-session-context';
 
-import { getRequiredSession } from '@documenso/auth/server/lib/utils/get-session';
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { getTeamTokens } from '@documenso/lib/server-only/public-api/get-all-team-tokens';
-import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
 import { Button } from '@documenso/ui/primitives/button';
 
 import DeleteTokenDialog from '~/components/(dashboard)/settings/token/delete-token-dialog';
@@ -13,11 +12,8 @@ import { ApiTokenForm } from '~/components/forms/token';
 
 import type { Route } from './+types/tokens';
 
-export async function loader({ request, params }: Route.LoaderArgs) {
-  const { user } = await getRequiredSession(request); // Todo
-
-  // Todo
-  const team = await getTeamByUrl({ userId: user.id, teamUrl: params.teamUrl });
+export async function loader({ context }: Route.LoaderArgs) {
+  const { user, currentTeam: team } = getRequiredTeamSessionContext(context);
 
   const tokens = await getTeamTokens({ userId: user.id, teamId: team.id }).catch(() => null);
 

apps/remix/app/routes/_authenticated+/t.$teamUrl+/templates.$id._index.tsx

@@ -0,0 +1,5 @@
+import TemplatePage, { loader } from '~/routes/_authenticated+/templates+/$id._index';
+
+export { loader };
+
+export default TemplatePage;

apps/remix/app/routes/_authenticated+/t.$teamUrl+/templates.$id.edit.tsx

@@ -0,0 +1,5 @@
+import TemplateEditPage, { loader } from '~/routes/_authenticated+/templates+/$id.edit';
+
+export { loader };
+
+export default TemplateEditPage;

apps/remix/app/routes/_authenticated+/t.$teamUrl+/templates._index.tsx

@@ -0,0 +1,5 @@
+import TemplatesPage, { meta } from '~/routes/_authenticated+/templates+/_index';
+
+export { meta };
+
+export default TemplatesPage;

apps/remix/app/routes/_authenticated+/templates+/$id._index.tsx

@@ -0,0 +1,209 @@
+import { Trans } from '@lingui/macro';
+import { DocumentSigningOrder, SigningStatus, type Team } from '@prisma/client';
+import { ChevronLeft, LucideEdit } from 'lucide-react';
+import { Link, redirect } from 'react-router';
+import { getRequiredSessionContext } from 'server/utils/get-required-session-context';
+
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { getTemplateById } from '@documenso/lib/server-only/template/get-template-by-id';
+import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+
+import { TemplateDirectLinkDialogWrapper } from '~/components/dialogs/template-direct-link-dialog-wrapper';
+import { TemplateUseDialog } from '~/components/dialogs/template-use-dialog';
+import { DocumentReadOnlyFields } from '~/components/document/document-read-only-fields';
+import { TemplateType } from '~/components/formatter/template-type';
+import { TemplateDirectLinkBadge } from '~/components/pages/template/template-direct-link-badge';
+import { TemplatePageViewDocumentsTable } from '~/components/pages/template/template-page-view-documents-table';
+import { TemplatePageViewInformation } from '~/components/pages/template/template-page-view-information';
+import { TemplatePageViewRecentActivity } from '~/components/pages/template/template-page-view-recent-activity';
+import { TemplatePageViewRecipients } from '~/components/pages/template/template-page-view-recipients';
+import { TemplatesTableActionDropdown } from '~/components/tables/templates-table-action-dropdown';
+import { useOptionalCurrentTeam } from '~/providers/team';
+
+import type { Route } from './+types/$id._index';
+
+export async function loader({ params, context }: Route.LoaderArgs) {
+  const { user, currentTeam: team } = getRequiredSessionContext(context);
+
+  const { id } = params;
+
+  const templateId = Number(id);
+  const templateRootPath = formatTemplatesPath(team?.url);
+  const documentRootPath = formatDocumentsPath(team?.url);
+
+  if (!templateId || Number.isNaN(templateId)) {
+    return redirect(templateRootPath);
+  }
+
+  const template = await getTemplateById({
+    id: templateId,
+    userId: user.id,
+    teamId: team?.id,
+  }).catch(() => null);
+
+  if (!template || !template.templateDocumentData || (template?.teamId && !team?.url)) {
+    return redirect(templateRootPath);
+  }
+
+  return {
+    user,
+    team,
+    template,
+    templateRootPath,
+    documentRootPath,
+  };
+}
+
+export default function TemplatePage({ loaderData }: Route.ComponentProps) {
+  const { user, team, template, templateRootPath, documentRootPath } = loaderData;
+
+  const { templateDocumentData, fields, recipients, templateMeta } = template;
+
+  // Remap to fit the DocumentReadOnlyFields component.
+  const readOnlyFields = fields.map((field) => {
+    const recipient = recipients.find((recipient) => recipient.id === field.recipientId) || {
+      name: '',
+      email: '',
+      signingStatus: SigningStatus.NOT_SIGNED,
+    };
+
+    return {
+      ...field,
+      recipient,
+      signature: null,
+    };
+  });
+
+  const mockedDocumentMeta = templateMeta
+    ? {
+        ...templateMeta,
+        signingOrder: templateMeta.signingOrder || DocumentSigningOrder.SEQUENTIAL,
+        documentId: 0,
+      }
+    : undefined;
+
+  return (
+    <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
+      <Link to={templateRootPath} className="flex items-center text-[#7AC455] hover:opacity-80">
+        <ChevronLeft className="mr-2 inline-block h-5 w-5" />
+        <Trans>Templates</Trans>
+      </Link>
+
+      <div className="flex flex-row justify-between truncate">
+        <div>
+          <h1
+            className="mt-4 block max-w-[20rem] truncate text-2xl font-semibold md:max-w-[30rem] md:text-3xl"
+            title={template.title}
+          >
+            {template.title}
+          </h1>
+
+          <div className="mt-2.5 flex items-center">
+            <TemplateType inheritColor className="text-muted-foreground" type={template.type} />
+
+            {template.directLink?.token && (
+              <TemplateDirectLinkBadge
+                className="ml-4"
+                token={template.directLink.token}
+                enabled={template.directLink.enabled}
+              />
+            )}
+          </div>
+        </div>
+
+        <div className="mt-2 flex flex-row space-x-4 sm:mt-0 sm:self-end">
+          <TemplateDirectLinkDialogWrapper template={template} />
+
+          <Button className="w-full" asChild>
+            <Link to={`${templateRootPath}/${template.id}/edit`}>
+              <LucideEdit className="mr-1.5 h-3.5 w-3.5" />
+              <Trans>Edit Template</Trans>
+            </Link>
+          </Button>
+        </div>
+      </div>
+
+      <div className="mt-6 grid w-full grid-cols-12 gap-8">
+        <Card
+          className="relative col-span-12 rounded-xl before:rounded-xl lg:col-span-6 xl:col-span-7"
+          gradient
+        >
+          <CardContent className="p-2">
+            <LazyPDFViewer
+              document={template}
+              key={template.id}
+              documentData={templateDocumentData}
+            />
+          </CardContent>
+        </Card>
+
+        <DocumentReadOnlyFields
+          fields={readOnlyFields}
+          showFieldStatus={false}
+          documentMeta={mockedDocumentMeta}
+        />
+
+        <div className="col-span-12 lg:col-span-6 xl:col-span-5">
+          <div className="space-y-6">
+            <section className="border-border bg-widget flex flex-col rounded-xl border pb-4 pt-6">
+              <div className="flex flex-row items-center justify-between px-4">
+                <h3 className="text-foreground text-2xl font-semibold">
+                  <Trans>Template</Trans>
+                </h3>
+
+                <div>
+                  <TemplatesTableActionDropdown
+                    row={template}
+                    teamId={team?.id}
+                    templateRootPath={templateRootPath}
+                  />
+                </div>
+              </div>
+
+              <p className="text-muted-foreground mt-2 px-4 text-sm">
+                <Trans>Manage and view template</Trans>
+              </p>
+
+              <div className="mt-4 border-t px-4 pt-4">
+                <TemplateUseDialog
+                  templateId={template.id}
+                  templateSigningOrder={template.templateMeta?.signingOrder}
+                  recipients={template.recipients}
+                  documentRootPath={documentRootPath}
+                  trigger={
+                    <Button className="w-full">
+                      <Trans>Use</Trans>
+                    </Button>
+                  }
+                />
+              </div>
+            </section>
+
+            {/* Template information section. */}
+            <TemplatePageViewInformation template={template} userId={user.id} />
+
+            {/* Recipients section. */}
+            <TemplatePageViewRecipients template={template} templateRootPath={templateRootPath} />
+
+            {/* Recent activity section. */}
+            <TemplatePageViewRecentActivity
+              documentRootPath={documentRootPath}
+              templateId={template.id}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-16" id="documents">
+        <h1 className="mb-4 text-2xl font-bold">
+          <Trans>Documents created from template</Trans>
+        </h1>
+
+        <TemplatePageViewDocumentsTable templateId={template.id} />
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/templates+/$id.edit.tsx

@@ -0,0 +1,99 @@
+import { Trans } from '@lingui/macro';
+import { ChevronLeft } from 'lucide-react';
+import { Link, redirect } from 'react-router';
+import { getRequiredSessionContext } from 'server/utils/get-required-session-context';
+
+import { isUserEnterprise } from '@documenso/ee/server-only/util/is-document-enterprise';
+import { getTemplateById } from '@documenso/lib/server-only/template/get-template-by-id';
+import { formatTemplatesPath } from '@documenso/lib/utils/teams';
+
+import { TemplateType } from '~/components/formatter/template-type';
+import { TemplateDirectLinkBadge } from '~/components/pages/template/template-direct-link-badge';
+import { TemplateEditForm } from '~/components/pages/template/template-edit-form';
+
+import { TemplateDirectLinkDialogWrapper } from '../../../components/dialogs/template-direct-link-dialog-wrapper';
+import type { Route } from './+types/$id.edit';
+
+export async function loader({ context, params }: Route.LoaderArgs) {
+  const { user, currentTeam: team } = getRequiredSessionContext(context);
+
+  const { id } = params;
+
+  const templateId = Number(id);
+  const templateRootPath = formatTemplatesPath(team?.url);
+
+  if (!templateId || Number.isNaN(templateId)) {
+    return redirect(templateRootPath);
+  }
+
+  const template = await getTemplateById({
+    id: templateId,
+    userId: user.id,
+    teamId: team?.id,
+  }).catch(() => null);
+
+  if (!template || !template.templateDocumentData) {
+    return redirect(templateRootPath);
+  }
+
+  const isTemplateEnterprise = await isUserEnterprise({
+    userId: user.id,
+    teamId: team?.id,
+  });
+
+  return {
+    template,
+    isTemplateEnterprise,
+    templateRootPath,
+  };
+}
+
+export default function TemplateEditPage({ loaderData }: Route.ComponentProps) {
+  const { template, isTemplateEnterprise, templateRootPath } = loaderData;
+
+  return (
+    <div className="mx-auto -mt-4 max-w-screen-xl px-4 md:px-8">
+      <div className="flex flex-col justify-between sm:flex-row">
+        <div>
+          <Link
+            to={`${templateRootPath}/${template.id}`}
+            className="flex items-center text-[#7AC455] hover:opacity-80"
+          >
+            <ChevronLeft className="mr-2 inline-block h-5 w-5" />
+            <Trans>Template</Trans>
+          </Link>
+
+          <h1
+            className="mt-4 block max-w-[20rem] truncate text-2xl font-semibold md:max-w-[30rem] md:text-3xl"
+            title={template.title}
+          >
+            {template.title}
+          </h1>
+
+          <div className="mt-2.5 flex items-center">
+            <TemplateType inheritColor className="text-muted-foreground" type={template.type} />
+
+            {template.directLink?.token && (
+              <TemplateDirectLinkBadge
+                className="ml-4"
+                token={template.directLink.token}
+                enabled={template.directLink.enabled}
+              />
+            )}
+          </div>
+        </div>
+
+        <div className="mt-2 sm:mt-0 sm:self-end">
+          <TemplateDirectLinkDialogWrapper template={template} />
+        </div>
+      </div>
+
+      <TemplateEditForm
+        className="mt-6"
+        initialTemplate={template}
+        templateRootPath={templateRootPath}
+        isEnterprise={isTemplateEnterprise}
+      />
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/templates+/_index.tsx

@@ -0,0 +1,88 @@
+import { Trans } from '@lingui/macro';
+import { Bird } from 'lucide-react';
+import { useSearchParams } from 'react-router';
+
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
+import { trpc } from '@documenso/trpc/react';
+import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
+
+import { TemplateCreateDialog } from '~/components/dialogs/template-create-dialog';
+import { TemplatesTable } from '~/components/tables/templates-table';
+import { useOptionalCurrentTeam } from '~/providers/team';
+
+export function meta() {
+  return [{ title: 'Templates' }];
+}
+
+export default function TemplatesPage() {
+  const [searchParams] = useSearchParams();
+
+  const team = useOptionalCurrentTeam();
+
+  const page = Number(searchParams.get('page')) || 1;
+  const perPage = Number(searchParams.get('perPage')) || 10;
+
+  const documentRootPath = formatDocumentsPath(team?.url);
+  const templateRootPath = formatTemplatesPath(team?.url);
+
+  const { data, isLoading, isLoadingError } = trpc.template.findTemplates.useQuery({
+    page: page,
+    perPage: perPage,
+  });
+
+  return (
+    <div className="mx-auto max-w-screen-xl px-4 md:px-8">
+      <div className="flex items-baseline justify-between">
+        <div className="flex flex-row items-center">
+          {team && (
+            <Avatar className="dark:border-border mr-3 h-12 w-12 border-2 border-solid border-white">
+              {team.avatarImageId && (
+                <AvatarImage src={`${NEXT_PUBLIC_WEBAPP_URL()}/api/avatar/${team.avatarImageId}`} />
+              )}
+              <AvatarFallback className="text-xs text-gray-400">
+                {team.name.slice(0, 1)}
+              </AvatarFallback>
+            </Avatar>
+          )}
+
+          <h1 className="truncate text-2xl font-semibold md:text-3xl">
+            <Trans>Templates</Trans>
+          </h1>
+        </div>
+
+        <div>
+          <TemplateCreateDialog templateRootPath={templateRootPath} teamId={team?.id} />
+        </div>
+      </div>
+
+      <div className="relative mt-5">
+        {data && data.count === 0 ? (
+          <div className="text-muted-foreground/60 flex h-96 flex-col items-center justify-center gap-y-4">
+            <Bird className="h-12 w-12" strokeWidth={1.5} />
+
+            <div className="text-center">
+              <h3 className="text-lg font-semibold">
+                <Trans>We're all empty</Trans>
+              </h3>
+
+              <p className="mt-2 max-w-[50ch]">
+                <Trans>
+                  You have not yet created any templates. To create a template please upload one.
+                </Trans>
+              </p>
+            </div>
+          </div>
+        ) : (
+          <TemplatesTable
+            data={data}
+            isLoading={isLoading}
+            isLoadingError={isLoadingError}
+            documentRootPath={documentRootPath}
+            templateRootPath={templateRootPath}
+          />
+        )}
+      </div>
+    </div>
+  );
+}