Improve OAuth callback

wasp-lang · Mar 8, 2024 · 1cbb6dd · 1cbb6dd
1 parent d783c7c
commit 1cbb6dd
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 53 deletions.
diff --git a/waspc/data/Generator/templates/react-app/src/auth/pages/OAuthCallback.tsx b/waspc/data/Generator/templates/react-app/src/auth/pages/OAuthCallback.tsx
@@ -1,12 +1,33 @@
 {{={= =}=}}
-
 import { useEffect, useRef, useState } from "react";
 import { Redirect } from 'react-router-dom'
 import { useAuth } from 'wasp/client/auth'
 import { api } from 'wasp/client/api'
 import { initSession } from 'wasp/auth/helpers/user'
 
 export function OAuthCallbackPage() {
+  const { isLoading, error, user } = useOAuthCallbackHandler();
+
+  if (user) {
+    return <Redirect to="{= onAuthSucceededRedirectTo =}" />;
+  }
+
+  return (
+    <div style={{
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: "4rem",
+    }}>
+      {error && <div style={{
+        color: "rgb(239 68 68)"
+      }}>{error}</div>}
+      {isLoading && <div>Please wait a moment while we log you in.</div>}
+    </div>
+  );
+}
+
+function useOAuthCallbackHandler() {
   const { data: user } = useAuth();
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -20,11 +41,11 @@ export function OAuthCallbackPage() {
       if (sessionId) {
         await initSession(sessionId)
       } else {
-        setError("Something went wrong when trying to authenticate. Please try again.");
+        setError("Unable to login with the OAuth provider.");
       }
     } catch (e: unknown) {
       console.error(e);
-      setError("Something went wrong when trying to authenticate. Please try again.");
+      setError("Unable to login with the OAuth provider.");
     } finally {
       setIsLoading(false);
     }
@@ -37,29 +58,17 @@ export function OAuthCallbackPage() {
       handleCallback();
     }
   }, []);
-
-  if (user) {
-    return <Redirect to="{= onAuthSucceededRedirectTo =}" />;
-  }
 
-  return (
-    <div style={{
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      padding: "4rem",
-    }}>
-      {error && <div style={{
-        color: "rgb(239 68 68)"
-      }}>{error}</div>}
-      {isLoading && <div>Please wait a moment while we log you in.</div>}
-    </div>
-  );
+  return {
+    user,
+    error,
+    isLoading,
+  };
 }
 
 // TODO: don't hard code the URL
-export async function exchangeOAuthCodeForToken(data: { code: string }) {
+async function exchangeOAuthCodeForToken(data: { code: string }) {
   return api.post<
-    { success: true; sessionId: string } | { success: false; message: string }
+    { sessionId: string } | { message: string }
   >(`/auth/exchange-code`, data);
 }
diff --git a/waspc/data/Generator/templates/server/src/auth/providers/oauth/oneTimeCode.ts b/waspc/data/Generator/templates/server/src/auth/providers/oauth/oneTimeCode.ts
@@ -1,5 +1,7 @@
 import { Router } from "express";
 
+import { HttpError } from 'wasp/server';
+import { handleRejection } from 'wasp/server/utils'
 import { createJWT, validateJWT, TimeSpan } from 'wasp/auth/jwt'
 import { findAuthWithUserBy } from 'wasp/auth/utils'
 import { createSession } from 'wasp/auth/session'
@@ -9,44 +11,28 @@ export const tokenStore = createTokenStore();
 export function setupOneTimeCodeRoute(router: Router) {
   router.post(
     "/exchange-code",
-    async (req, res) => {
+    handleRejection(async (req, res) => {
       const { code } = req.body;
 
-      try {
-        if (tokenStore.isUsed(code)) {
-          return res.status(400).json({
-            success: false,
-            message: "Code already used",
-          });
-        }
-
-        const { id: authId } = await tokenStore.verifyToken(code);
-        const auth = await findAuthWithUserBy({ id: authId })
+      if (tokenStore.isUsed(code)) {
+        throw new HttpError(400, "Unable to login with the OAuth provider. The code has already been used.");
+      }
 
-        if (!auth) {
-          return res.status(400).json({
-            success: false,
-            message: "Invalid code",
-          });
-        }
+      const { id: authId } = await tokenStore.verifyToken(code);
+      const auth = await findAuthWithUserBy({ id: authId })
 
-        const session = await createSession(auth.id);
+      if (!auth) {
+        throw new HttpError(400, "Unable to login with the OAuth provider. The code is invalid.");
+      }
 
-        tokenStore.markUsed(code);
+      const session = await createSession(auth.id);
 
-        return res.json({
-          success: true,
-          sessionId: session.id,
-        });
-      } catch (e) {
-        console.error(e);
+      tokenStore.markUsed(code);
 
-        return res.status(500).json({
-          success: false,
-          message: "Something went wrong",
-        });
-      }
-    }
+      return res.json({
+        sessionId: session.id,
+      });
+    })
   );
 }