Wasp•2mo ago•

8 replies

OAuth double exchange-code request due to React StrictMode in production (v0.18.1)

✅SolvedGeneral Wasp

Wasp Version: 0.18.1

Google OAuth login fails in production with error "The code has already been used" because

exchange-code

exchange-code

endpoint is called twice. The second request always fails with 400 status.

Root Cause Analysis:

After extensive debugging, I found that Wasp hardcodes

React.StrictMode

React.StrictMode

in production builds (

index.tsx

index.tsx

). In React 18+, StrictMode causes double invocation of useEffect (mount → unmount → mount) even in production.

The

isFirstRender

isFirstRender

guard in

OAuthCallbackPage

OAuthCallbackPage

uses

useRef

useRef

const isFirstRender = useRef(true);
useEffect(() => {
  if (isFirstRender.current) {
    isFirstRender.current = false;
    handleCallback();
  }
}, []);

const isFirstRender = useRef(true);
useEffect(() => {
  if (isFirstRender.current) {
    isFirstRender.current = false;
    handleCallback();
  }
}, []);

Problem: When StrictMode unmounts and remounts the component, the

useRef

useRef

resets to

true

true

, causing

handleCallback()

handleCallback()

(which calls

exchangeOAuthCodeForToken

exchangeOAuthCodeForToken

) to execute twice.

Network Requests (Production):

POST /auth/exchange-code 200 Success, code consumed
POST /auth/exchange-code 400 "The code has already been used"

Console Error:

Unable to login with the OAuth provider. The code has already been used.

Expected Behavior:

exchange-code

exchange-code

should only be called once, regardless of StrictMode?

Wasp•2mo ago•

8 replies

NEROX

OAuth double exchange-code request due to React StrictMode in production (v0.18.1)

✅SolvedGeneral Wasp

Wasp Version: 0.18.1

Google OAuth login fails in production with error "The code has already been used" because

exchange-code

exchange-code

endpoint is called twice. The second request always fails with 400 status.

Root Cause Analysis:

After extensive debugging, I found that Wasp hardcodes

React.StrictMode

React.StrictMode

in production builds (

index.tsx

index.tsx

). In React 18+, StrictMode causes double invocation of useEffect (mount → unmount → mount) even in production.

The

isFirstRender

isFirstRender

guard in

OAuthCallbackPage

OAuthCallbackPage

uses

useRef

useRef

const isFirstRender = useRef(true);
useEffect(() => {
  if (isFirstRender.current) {
    isFirstRender.current = false;
    handleCallback();
  }
}, []);

const isFirstRender = useRef(true);
useEffect(() => {
  if (isFirstRender.current) {
    isFirstRender.current = false;
    handleCallback();
  }
}, []);

Problem: When StrictMode unmounts and remounts the component, the

useRef

useRef

resets to

true

true

, causing

handleCallback()

handleCallback()

(which calls

exchangeOAuthCodeForToken

exchangeOAuthCodeForToken

) to execute twice.

Network Requests (Production):

POST /auth/exchange-code 200 Success, code consumed
POST /auth/exchange-code 400 "The code has already been used"

Console Error:

Unable to login with the OAuth provider. The code has already been used.

Expected Behavior:

exchange-code

exchange-code

should only be called once, regardless of StrictMode?

OAuth double exchange-code request due to React StrictMode in production (v0.18.1)

Similar Threads

OAuth double exchange-code request due to React StrictMode in production (v0.18.1)

Similar Threads

Similar Threads

Similar Threads