chore: initial work on clerk migration (not working)

remix/app/.server/models/user/userModel.ts

@@ -1,6 +1,6 @@
 import type { ChatInsert, User, UserInsert } from '@remix/.server/db';
 import { isError, newError, promiseMayFail } from '@remix/.server/errors';
-import { db, chatSchema, userSchema, messageSchema } from '@remix/.server/db';
+import { db, userSchema } from '@remix/.server/db';
 import * as chatModel from '@remix/.server/models/chat/chatModel';
 
 export const ERRORS = {

remix/app/.server/services/auth.ts

@@ -1,5 +1,5 @@
 import type { Auth0Profile } from 'remix-auth-auth0';
-import type { ServiceCommonParams } from './types';
+import type { ServiceCommonArgs } from './types';
 
 import { createCookieSessionStorage, redirect } from '@remix-run/node';
 import { Authenticator } from 'remix-auth';
@@ -60,19 +60,19 @@ export const { commitSession, destroySession } = sessionStorage;
 
 export const isAuthenticated = () => auth.isAuthenticated;
 
-export const getSession = async ({ request }: ServiceCommonParams) => {
+export const getSession = async ({ request }: ServiceCommonArgs) => {
   if (!request?.headers.has('Cookie')) return null;
   const session = await sessionStorage.getSession(
     request.headers.get('Cookie'),
   );
   return session;
 };
 
-export type LogoutParams = ServiceCommonParams & {
+export type LogoutArgs = ServiceCommonArgs & {
   returnToPath?: string;
 };
 
-export const getLogoutURL = ({ request, returnToPath = '/' }: LogoutParams) => {
+export const getLogoutURL = ({ request, returnToPath = '/' }: LogoutArgs) => {
   // Parse the request URL to get the origin and replace the path
   const url = new URL(request.url);
   const returnToURL = new URL(returnToPath, url.origin);
@@ -84,8 +84,8 @@ export const getLogoutURL = ({ request, returnToPath = '/' }: LogoutParams) => {
   return logoutURL.toString();
 };
 
-export const getLogoutOptions = async (params: ServiceCommonParams) => {
-  const session = await getSession(params);
+export const getLogoutOptions = async (args: ServiceCommonArgs) => {
+  const session = await getSession(args);
   if (!session) return newError({ code: 'auth:noSession' });
 
   return {
@@ -95,17 +95,17 @@ export const getLogoutOptions = async (params: ServiceCommonParams) => {
   };
 };
 
-export const logout = async (params: LogoutParams) => {
-  const logoutUrl = getLogoutURL(params);
-  const logoutOptions = await getLogoutOptions(params);
+export const logout = async (args: LogoutArgs) => {
+  const logoutUrl = getLogoutURL(args);
+  const logoutOptions = await getLogoutOptions(args);
   if (isError(logoutOptions)) throw redirect('/');
 
   throw redirect(logoutUrl, logoutOptions);
 };
 
-export const getAuthProfile = async ({ request }: ServiceCommonParams) => {
+export const getAuthProfile = async (args: ServiceCommonArgs) => {
   if (getConfig('user.userAutoLogin')) return { id: 'mock-user' };
-  const session = await getSession({ request });
+  const session = await getSession(args);
 
   if (!session) return null;
   return session.data.user;

remix/app/.server/services/chat.ts

@@ -3,7 +3,7 @@ import type {
   AgentEmitterChannels,
   AgentHistoryItem,
 } from '@codellm/core';
-import type { ServiceCommonParams } from './types.js';
+import type { ServiceCommonArgs } from './types.js';
 
 import { EventEmitter } from 'events';
 import { remember } from '@epic-web/remember';
@@ -42,14 +42,13 @@ const eventStreamEmitter = remember(
 export const getEventStreamEmitter = () => eventStreamEmitter;
 
 // TODO: we're going to need channels for this eventually
-const onAgentEmit =
-  (chatId: User['id']) => async (params: AgentHistoryItem) => {
-    const chat = await chatModel.getById(chatId);
-    if (isError(chat)) return chat;
-    await chat.addMessage(params);
-    log('onAgentEmit emitting', 'debug', params);
-    eventStreamEmitter.emit(`agent:${chatId}`, params);
-  };
+const onAgentEmit = (chatId: User['id']) => async (args: AgentHistoryItem) => {
+  const chat = await chatModel.getById(chatId);
+  if (isError(chat)) return chat;
+  await chat.addMessage(args);
+  log('onAgentEmit emitting', 'debug', args);
+  eventStreamEmitter.emit(`agent:${chatId}`, args);
+};
 
 const onEmitListeners = (client: Agent, id: Chat['id']) =>
   channelsToForward.map((channel) => client.onEmit(channel, onAgentEmit(id)));
@@ -90,12 +89,12 @@ export const _getOrCreateClient = async (id: Chat['id']) => {
   return newLock;
 };
 
-export type ChatCommonParams = ServiceCommonParams & {
+export type ChatCommonArgs = ServiceCommonArgs & {
   id: Chat['id'];
 };
 
-export const createChat = async (params: ServiceCommonParams) => {
-  const user = await getValidatedUser(params);
+export const createChat = async (args: ServiceCommonArgs) => {
+  const user = await getValidatedUser(args);
   if (isError(user)) return user;
 
   const chat = await user.addChat({ name: 'new chat' });
@@ -108,7 +107,7 @@ export const createChat = async (params: ServiceCommonParams) => {
   return { client, ...chat };
 };
 
-export const getChat = async ({ id, request }: ChatCommonParams) => {
+export const getChat = async ({ id }: ChatCommonArgs) => {
   const chat = await chatModel.getById(id);
   if (isError(chat)) return chat;
 
@@ -118,26 +117,26 @@ export const getChat = async ({ id, request }: ChatCommonParams) => {
   return { client, ...chat };
 };
 
-export const deleteChat = async (params: ChatCommonParams) => {
-  const chat = await getChat(params);
+export const deleteChat = async (args: ChatCommonArgs) => {
+  const chat = await getChat(args);
   if (isError(chat)) return chat;
 
-  offEmitListeners(chat.client as Agent, params.id);
+  offEmitListeners(chat.client as Agent, args.id);
   await chat.destroy();
 };
 
-export const getChats = async (params: ServiceCommonParams) => {
-  const user = await getValidatedUser(params);
+export const getChats = async (args: ServiceCommonArgs) => {
+  const user = await getValidatedUser(args);
   if (isError(user)) return user;
 
   return user.getChats();
 };
 
-export type UpdateChatParams = ChatCommonParams & {
+export type UpdateChatArgs = ChatCommonArgs & {
   update: ChatUpdate;
 };
 
-export const updateChat = async ({ id, update }: UpdateChatParams) => {
+export const updateChat = async ({ id, update }: UpdateChatArgs) => {
   const chat = await chatModel.getById(id);
   if (isError(chat)) return chat;
 
@@ -146,8 +145,8 @@ export const updateChat = async ({ id, update }: UpdateChatParams) => {
   return updatedChat;
 };
 
-export const getMostRecentChat = async (params: ServiceCommonParams) => {
-  const user = await getValidatedUser(params);
+export const getMostRecentChat = async (args: ServiceCommonArgs) => {
+  const user = await getValidatedUser(args);
   if (isError(user)) return user;
 
   const chats = await user.getChats();
@@ -156,15 +155,15 @@ export const getMostRecentChat = async (params: ServiceCommonParams) => {
   return chats[0];
 };
 
-export type SendChatParams = ChatCommonParams & {
+export type SendChatArgs = ChatCommonArgs & {
   message: string;
 };
 
-export const sendChat = async (params: SendChatParams) => {
-  const chat = await getChat(params);
+export const sendChat = async (args: SendChatArgs) => {
+  const chat = await getChat(args);
   if (isError(chat)) return chat;
 
-  await updateChat({ ...params, update: { isLoading: true } });
-  await chat.client.chat(params.message);
-  await updateChat({ ...params, update: { isLoading: false } });
+  await updateChat({ ...args, update: { isLoading: true } });
+  await chat.client.chat(args.message);
+  await updateChat({ ...args, update: { isLoading: false } });
 };

remix/app/.server/services/types.ts

@@ -1,3 +1,3 @@
-export type ServiceCommonParams = {
-  request: Request;
-};
+import type { ActionFunctionArgs, LoaderFunctionArgs } from '@remix-run/node';
+
+export type ServiceCommonArgs = LoaderFunctionArgs | ActionFunctionArgs;

remix/app/.server/services/user.ts

@@ -1,10 +1,9 @@
-import type { ServiceCommonParams } from './types';
+import type { ServiceCommonArgs } from './types';
 import type { UserModel } from '@remix/.server/models';
 import type { RemixError } from '@remix/.server/errors';
 
-import { redirect } from '@remix-run/node';
+import { getAuth } from '@clerk/remix/ssr.server';
 import { userModel } from '@remix/.server/models';
-import { getAuthProfile, logout } from '@remix/.server/services/auth';
 import { isError, newError } from '@remix/.server/errors';
 
 export const ERRORS = {
@@ -19,17 +18,19 @@ export const ERRORS = {
   },
 } as const;
 
-export const getUser = async (params: ServiceCommonParams) => {
-  const authUser = await getAuthProfile(params);
-  if (!authUser) {
+export const getUser = async (args: ServiceCommonArgs) => {
+  const authUser = await getAuth(args);
+  console.log('authUser', authUser);
+  if (!authUser.userId) {
     return newError({
       code: 'userService:noAuthUser',
       message: 'No authenticated user found',
     });
   }
 
+  // @ts-expect-error - not fighting with types for now
   const user = await userModel.getByAuth0Id(authUser.id);
-  if (isError(user, 'userModel:notFound')) return logout(params);
+  // if (isError(user, 'userModel:notFound')) return logout(args);
   if (isError(user)) throw user;
 
   return user;
@@ -43,8 +44,8 @@ export const validateUser = (user: UserModel | RemixError) => {
   return user;
 };
 
-export const getValidatedUser = async (params: ServiceCommonParams) => {
-  const user = await getUser(params);
+export const getValidatedUser = async (args: ServiceCommonArgs) => {
+  const user = await getUser(args);
 
   return validateUser(user);
 };

remix/app/components/Navbar.tsx

@@ -1,9 +1,11 @@
-import useUser from '@remix/components/hooks/useUser';
 import { Form, Link } from '@remix-run/react';
 
+import { SignedIn, SignedOut, UserButton, useUser } from '@clerk/remix';
+
 const Navbar = () => {
-  const { isAuthed, isVerified } = useUser();
+  const user = useUser();
 
+  console.log('user', user);
   return (
     <nav className="navbar bg-base-100">
       <div className="navbar-start">
@@ -12,35 +14,20 @@ const Navbar = () => {
         </Link>
       </div>
       <div className="navbar-end">
-        {isAuthed ? (
-          <>
-            {isVerified && (
-              <>
-                <Link
-                  to="/chat"
-                  prefetch="intent"
-                  className="btn btn-ghost btn-sm"
-                >
-                  Chat
-                </Link>
-                <Link
-                  to="/import"
-                  prefetch="intent"
-                  className="btn btn-ghost btn-sm"
-                >
-                  Import
-                </Link>
-              </>
-            )}
-            <Form method="post" action="/logout">
-              <button className="btn btn-ghost btn-sm">Logout</button>
-            </Form>
-          </>
-        ) : (
-          <Form method="post" action="/#">
+        <SignedIn>
+          <Link to="/chat" prefetch="intent" className="btn btn-ghost btn-sm">
+            Chat
+          </Link>
+          <Link to="/import" prefetch="intent" className="btn btn-ghost btn-sm">
+            Import
+          </Link>
+          <UserButton />
+        </SignedIn>
+        <SignedOut>
+          <Link to="/#">
             <button className="btn btn-ghost btn-sm">Login</button>
-          </Form>
-        )}
+          </Link>
+        </SignedOut>
       </div>
     </nav>
   );

remix/app/components/common/ContentWrapper.tsx

@@ -1,7 +1,14 @@
-export const ContentWrapper = ({ children }: { children: React.ReactNode }) => {
+export const ContentWrapper = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  const myClassName = `p-5 border-2 border-primary rounded-lg ${className}`;
   return (
     <div className="bg-base-100 ">
-      <div className="p-5 border-2 border-primary rounded-lg">{children}</div>
+      <div className={myClassName}>{children}</div>
     </div>
   );
 };

remix/app/root.loader.server.ts

@@ -1,23 +1,15 @@
 import type { LoaderFunctionArgs } from '@remix-run/node';
+import { getAuth, rootAuthLoader } from '@clerk/remix/ssr.server';
+
 import { getUser, validateUser } from '@remix/.server/services/user';
 import { initClient } from '@remix/.server/db/db';
 import { isError } from '@remix/.server/errors';
-import { noAuthPayload } from '@remix/components/AuthProvider';
-
-export const loader = async ({ request }: LoaderFunctionArgs) => {
-  await initClient();
-  const user = await getUser({ request });
-  if (isError(user)) return noAuthPayload;
-
-  const validatedUser = validateUser(user);
-  const isVerified = !isError(validatedUser);
 
-  return {
-    isAuthed: true,
-    isVerified,
-    user,
-  };
-};
+export const loader = async (args: LoaderFunctionArgs) =>
+  rootAuthLoader(args, (cbArgs) => {
+    console.log('cbArgs', cbArgs);
+    return {};
+  });
 
 export type RootLoader = typeof loader;