Revert "A root that requires login, custom login page and user menu"

This reverts commit 6b03fb40f3.
2022-12-07 11:07:14 +00:00
parent 6b03fb40f3
commit cfb286ef87
6 changed files with 56 additions and 102 deletions
@@ -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) {
          <DocumentTextIcon className="h-4 w-4 transition group-hover:text-blue-600" />
          <span>Docs</span>
        </a>
-        <UserButton />
        {user ? (
          <UserProfileMenu user={user} />
        ) : (
@@ -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<LoaderData>(
+      {
        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 (
    <html>
      <head>
@@ -84,7 +79,7 @@ function ErrorBoundary() {
      </head>
      <body>
        <Title>
-          Error:{caught?.status} {caught?.statusText}
+          {caught.status} {caught.statusText}
        </Title>
        <Scripts />
      </body>
@@ -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 (
-    <div className="flex h-screen w-screen justify-between overflow-y-scroll">
-      <div className="flex grow items-center justify-center bg-gradient-background h-full w-full p-4">
-        <div className="mt-[100px] flex w-full max-w-xl flex-col justify-between rounded-lg border bg-white shadow-md lg:mt-0 lg:min-h-[430px]">
-          <SignIn routing={"path"} path={"/login"} />
-          <div className="w-full rounded-b-lg border-t bg-slate-50 px-8 py-4">
-            <p className="text-center text-xs text-slate-500">
-              By created an account you agree to our{" "}
-              <Link
-                className="underline transition hover:text-blue-500"
-                to="/legal/terms"
-              >
-                terms
-              </Link>{" "}
-              and{" "}
-              <Link
-                className="underline transition hover:text-blue-500"
-                to="/legal/privacy"
-              >
-                privacy
-              </Link>{" "}
-              policies.
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
@@ -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 (
-    <div className="flex h-screen flex-col overflow-auto">
-      <Header>Workspaces</Header>
-      <Outlet />
-    </div>
-  );
-}
@@ -0,0 +1,3 @@
+export type AuthUser = {
+  userId: string;
+};
@@ -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<string | null> {
-  const { userId } = await getAuth(request);
-  return userId;
+export async function getUserId(request: Request): Promise<string | undefined> {
+  //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<string> {
+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");
+}