Fixes oAuth redirect behaviour in development (#1275)

waspc/data/Generator/templates/react-app/src/auth/pages/OAuthCodeExchange.jsx

@@ -1,5 +1,5 @@
 {{={= =}=}}
-import React, { useEffect } from 'react'
+import React, { useEffect, useRef } from 'react'
 import { useHistory } from 'react-router-dom'
 
 import config from '../../config.js'
@@ -14,12 +14,25 @@ import { initSession } from '../helpers/user'
 export default function OAuthCodeExchange({ pathToApiServerRouteHandlingOauthRedirect }) {
   const history = useHistory()
 
+  // We are using a ref to prevent sending the OAuth token twice in development.
+  // Since React 18 and using their StrictMode, useEffect is called twice in development.
+
+  // Fixing it this way is not recommended by the docs, but they don't offer any alternatives
+  // for this particular use case (oauth redirect page):
+  // https://react.dev/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development
+  const firstRender = useRef(true)
   useEffect(() => {
+    if (!firstRender.current) {
+      return
+    }
     // NOTE: Different auth methods will have different Wasp API server validation paths.
     // This helps us reuse one component for various methods (e.g., Google, Facebook, etc.).
     const apiServerUrlHandlingOauthRedirect = constructOauthRedirectApiServerUrl(pathToApiServerRouteHandlingOauthRedirect)
 
     exchangeCodeForJwtAndRedirect(history, apiServerUrlHandlingOauthRedirect)
+    return () => {
+      firstRender.current = false
+    }
   }, [history, pathToApiServerRouteHandlingOauthRedirect])
 
   return (