cleanup

app/auth/login.tsx

@@ -31,7 +31,7 @@ export const meta: MetaFunction = () => {
   return { title: "Webstudio Login" };
 };
 
-export const Login = ({ errorMessage }: { errorMessage: string | null }) => {
+export const Login = ({ errorMessage }: { errorMessage: string }) => {
   const [isDevLogin, setIsDevLogin] = useState(false);
   const loaderData = useLoaderData();
 
@@ -45,11 +45,11 @@ export const Login = ({ errorMessage }: { errorMessage: string | null }) => {
       <Card css={{ width: 200, padding: "$5", zoom: 1.4 }} variant="active">
         <Flex direction="column" gap="2" align="center">
           <Heading>Login</Heading>
-          {errorMessage && (
+          {errorMessage.length ? (
             <Text css={{ textAlign: "center" }} variant="red">
               {errorMessage}
             </Text>
-          )}
+          ) : null}
           <Flex gap="2" direction="column" align="center">
             <Form action="/auth/github" method="post">
               <Button type="submit">

app/routes/auth/github.tsx

@@ -26,7 +26,7 @@ export const action: ActionFunction = async ({ request }) => {
       sentryException({
         message: error.message,
         extra: {
-          loginMethod: "github",
+          loginMethod: AUTH_PROVIDERS.LOGIN_GITHUB,
         },
       });
       return redirect(

app/routes/auth/google.tsx

@@ -28,7 +28,7 @@ export const action: ActionFunction = async ({ request }) => {
       sentryException({
         message: error.message,
         extra: {
-          loginMethod: "google",
+          loginMethod: AUTH_PROVIDERS.LOGIN_GOOGLE,
         },
       });
       return redirect(

app/services/auth.server.ts

@@ -11,6 +11,7 @@ import {
   createOrLoginWithGoogle,
 } from "~/shared/db/user.server";
 import { sentryException } from "~/shared/sentry";
+import { AUTH_PROVIDERS } from "~/shared/session/useLoginErrors";
 
 const url = `${
   process.env.VERCEL_URL
@@ -66,7 +67,7 @@ if (process.env.DEV_LOGIN === "true") {
             sentryException({
               message: error.message,
               extra: {
-                loginMethod: "dev",
+                loginMethod: AUTH_PROVIDERS.LOGIN_DEV,
               },
             });
           }

app/shared/session/useLoginErrors.ts

@@ -16,15 +16,18 @@ export const LOGIN_ERROR_MESSAGES = {
     "There has been an issue logging you in with Google",
 };
 
-export const useLoginErrors = () => {
+export const useLoginErrors = (): string => {
   const [searchParams, setSearchParams] = useSearchParams();
   const [messageToReturn, setMessageToReturn] = useState("");
   const error = searchParams.get("error");
   const message = searchParams.get("message");
+
   useEffect(() => {
-    if (error !== null && Boolean(message) && typeof message === "string") {
+    const hasMessageToShow =
+      error !== null && Boolean(message) && typeof message === "string";
+    if (hasMessageToShow) {
       sentryException({
-        message: message as string,
+        message: message,
       });
       setMessageToReturn(message);