[Bug]: Errors.AuthRequest.NotFound in callback.tsx

[Nulligma]

Preflight Checklist

• I could not find a solution in the documentation, the existing issues or discussions
• I have joined the ZITADEL chat

Environment

ZITADEL Cloud

Version

No response

Database

None

Database Version

No response

Describe the problem caused by this bug

While following the react tutorial of zitadel with ViteJS. I get the following error in the callback page (Callback.tsx), but it successfully sets the user data and displays it.

{
    "error": {
        "form": {},
        "name": "ErrorResponse",
        "error": "invalid_request",
        "error_description": "Errors.AuthRequest.NotFound",
        "error_uri": null,
        "session_state": null
    }
}

To reproduce

https://zitadel.com/docs/examples/login/react

use VIteJS to create the project

Screenshots

Expected behavior

No response

Operating System

No response

Relevant Configuration

No response

Additional Context

No response

[CodeJCM]

Thanks for sharing this @Nulligma, we'll keep you posted on any progress on this front.

[mridang]

Hi @Nulligma just to confirm. Is this the repo you were using? https://github.com/zitadel/zitadel-react

[Nulligma]

Yes

[mridang]

Okay, I will transfer the issue over.

[mridang]

Hi @Nulligma . I think I've managed to find the issue. This is caused by React StrictMode in development.

The Errors.AuthRequest.NotFound error occurs because React StrictMode intentionally double-invokes useEffect hooks to help detect side effects. This causes the OIDC callback to be processed twice:

1. First execution: Successfully processes the authorization code
2. Second execution: Tries to process the same code again, but it's already consumed → AuthRequest.NotFound

Fix

For development, remove StrictMode from src/index.tsx:

// Change this:
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// To this:
root.render(
  <App />
);

For production, you can conditionally include StrictMode:

const AppWrapper = process.env.NODE_ENV === 'development' ? 
  ({ children }: { children: React.ReactNode }) => <>{children}</> : 
  React.StrictMode;

root.render(
  <AppWrapper>
    <App />
  </AppWrapper>
);

Why this happens

• OAuth authorization codes are single-use tokens
• React StrictMode double-invokes effects in development
• First call succeeds, second call fails because the code is already consumed
• This is common with all OIDC libraries in React development, not specific to ZITADEL

The authorization flow works correctly - the error is just a side effect of the development tooling.