diff --git a/apps/webapp/app/components/Header.tsx b/apps/webapp/app/components/Header.tsx index 9d011d274..ad504b822 100644 --- a/apps/webapp/app/components/Header.tsx +++ b/apps/webapp/app/components/Header.tsx @@ -1,4 +1,3 @@ -import { UserButton } from "@clerk/remix"; import { DocumentTextIcon } from "@heroicons/react/24/solid"; import { Link } from "@remix-run/react"; import { useOptionalUser } from "~/utils"; @@ -30,7 +29,6 @@ export function Header({ children }: HeaderProps) { Docs - {user ? ( ) : ( diff --git a/apps/webapp/app/root.tsx b/apps/webapp/app/root.tsx index e38c573b4..622475f89 100644 --- a/apps/webapp/app/root.tsx +++ b/apps/webapp/app/root.tsx @@ -1,4 +1,8 @@ -import { LinksFunction, LoaderFunction, MetaFunction } from "@remix-run/node"; +import type { + LinksFunction, + LoaderFunction, + MetaFunction, +} from "@remix-run/node"; import { Links, LiveReload, @@ -15,13 +19,13 @@ import tailwindStylesheetUrl from "./styles/tailwind.css"; import { Toaster, toast } from "react-hot-toast"; import type { ToastMessage } from "~/models/message.server"; -import { getSession } from "~/models/message.server"; +import { commitSession, getSession } from "~/models/message.server"; import { useEffect, useRef } from "react"; import posthog from "posthog-js"; import { withSentry } from "@sentry/remix"; import { env } from "./env.server"; import { getUserById } from "./models/user.server"; -import { useTypedLoaderData } from "remix-typedjson"; +import { typedjson, useTypedLoaderData } from "remix-typedjson"; import { ClerkApp, ClerkCatchBoundary } from "@clerk/remix"; import { Title } from "./components/primitives/text/Title"; @@ -47,34 +51,25 @@ export const loader: LoaderFunction = async (args) => { const toastMessage = session.get("toastMessage") as ToastMessage; const posthogProjectKey = env.POSTHOG_PROJECT_KEY; - return rootAuthLoader( - args, - async ({ request }) => { - const { userId } = request.auth; + return rootAuthLoader(args, async ({ request }) => { + const { sessionId, userId, getToken } = request.auth; - console.log("request.auth", request.auth); - - return { + return typedjson( + { user: userId ? await getUserById(userId) : null, toastMessage, posthogProjectKey, - }; - - //todo figure out how to send a cookie too, it's erroring out - // { - // headers: { "Set-Cookie": await commitSession(session) }, - // } - }, - { loadUser: true } - ); + }, + { headers: { "Set-Cookie": await commitSession(session) } } + ); + }); }; export const CatchBoundary = ClerkCatchBoundary(ErrorBoundary); //todo we need to style the error page -function ErrorBoundary() { +export function ErrorBoundary() { const caught = useCatch(); - console.log(caught); return ( @@ -84,7 +79,7 @@ function ErrorBoundary() { - Error:{caught?.status} {caught?.statusText} + {caught.status} {caught.statusText} diff --git a/apps/webapp/app/routes/login/$.tsx b/apps/webapp/app/routes/login/$.tsx deleted file mode 100644 index 69da888e4..000000000 --- a/apps/webapp/app/routes/login/$.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { SignIn } from "@clerk/remix"; -import type { LoaderFunction, MetaFunction } from "@remix-run/node"; -import { json, redirect } from "@remix-run/node"; -import { Link } from "@remix-run/react"; -import { getUserId } from "~/services/session.server"; - -export const loader: LoaderFunction = async ({ request }) => { - const userId = await getUserId(request); - if (userId) return redirect("/"); - return json({}); -}; - -export const meta: MetaFunction = () => { - return { - title: "Login", - }; -}; - -export default function LoginPage() { - return ( -
-
-
- -
-

- By created an account you agree to our{" "} - - terms - {" "} - and{" "} - - privacy - {" "} - policies. -

-
-
-
-
- ); -} diff --git a/apps/webapp/app/routes/workspaces.tsx b/apps/webapp/app/routes/workspaces.tsx deleted file mode 100644 index 5a9698334..000000000 --- a/apps/webapp/app/routes/workspaces.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { UserButton } from "@clerk/remix"; -import type { LoaderArgs } from "@remix-run/node"; -import { Outlet } from "@remix-run/react"; -import { Header } from "~/components/Header"; -import { requireUserId } from "~/services/session.server"; - -export const loader = async ({ request }: LoaderArgs) => { - const userId = await requireUserId(request); - return { - userId, - }; -}; - -export default function AppLayout() { - return ( -
-
Workspaces
- -
- ); -} diff --git a/apps/webapp/app/services/authUser.ts b/apps/webapp/app/services/authUser.ts new file mode 100644 index 000000000..4c1ce6a20 --- /dev/null +++ b/apps/webapp/app/services/authUser.ts @@ -0,0 +1,3 @@ +export type AuthUser = { + userId: string; +}; diff --git a/apps/webapp/app/services/session.server.ts b/apps/webapp/app/services/session.server.ts index e312a71fd..e3cf43374 100644 --- a/apps/webapp/app/services/session.server.ts +++ b/apps/webapp/app/services/session.server.ts @@ -1,17 +1,44 @@ -import { getAuth } from "@clerk/remix/ssr.server"; import { redirect } from "@remix-run/node"; +import { getUserById } from "~/models/user.server"; -export async function getUserId(request: Request): Promise { - const { userId } = await getAuth(request); - return userId; +export async function getUserId(request: Request): Promise { + //todo get the user id from the session + // let authUser = await authenticator.isAuthenticated(request); + // return authUser?.userId; + return undefined; } -export async function requireUserId(request: Request): Promise { +export async function getUser(request: Request) { const userId = await getUserId(request); - console.log(userId, userId); - if (userId == null) { - throw redirect("/login"); - } + if (userId === undefined) return null; + const user = await getUserById(userId); + if (user) return user; + + throw await logout(request); +} + +export async function requireUserId(request: Request, redirectTo?: string) { + const userId = await getUserId(request); + if (!userId) { + const url = new URL(request.url); + const searchParams = new URLSearchParams([ + ["redirectTo", redirectTo ?? `${url.pathname}${url.search}`], + ]); + throw redirect(`/login?${searchParams}`); + } return userId; } + +export async function requireUser(request: Request) { + const userId = await requireUserId(request); + + const user = await getUserById(userId); + if (user) return user; + + throw await logout(request); +} + +export async function logout(request: Request) { + return redirect("/logout"); +}