Skip to content

[release-4.19] OCPBUGS-62083: /auth/error?error=missing_state&error_type=auth is showing blank page #15523

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Sep 29, 2025
Merged

[release-4.19] OCPBUGS-62083: /auth/error?error=missing_state&error_type=auth is showing blank page #15523

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0653502
OCPBUGS-60912: `/auth/error?error=missing_state&error_type=auth` is s…
Leo6Leo Sep 22, 2025
977d1b9
fix: update AuthenticationErrorPage button link to redirect to home i…
Leo6Leo Sep 23, 2025
15fc213
fix: add missing period to error message for improved clarity
Leo6Leo Sep 25, 2025
778dac1
fix: correct punctuation in error message for consistency
Leo6Leo Sep 25, 2025
b5c402e
fix: add missing period to error message for consistency in localization
Leo6Leo Sep 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 20 additions & 19 deletions frontend/public/components/app.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,8 +206,6 @@ const App = (props) => {
}
};

const { productName } = getBrandingDetails();

const isNotificationDrawerExpanded = useSelector(
(state) => !!state.UI.getIn(['notifications', 'isExpanded']),
);
Expand All @@ -223,8 +221,7 @@ const App = (props) => {
};

const content = (
<HelmetProvider>
<Helmet titleTemplate={`%s · ${productName}`} defaultTitle={productName} />
<>
<ConsoleNotifier location="BannerTop" />
<QuickStartDrawer>
<Flex
Expand Down Expand Up @@ -279,7 +276,7 @@ const App = (props) => {
</QuickStartDrawer>
<ConsoleNotifier location="BannerBottom" />
<FeatureFlagExtensionLoader />
</HelmetProvider>
</>
);

return (
Expand Down Expand Up @@ -324,7 +321,7 @@ const AppRouter = () => {
<Router history={history} basename={window.SERVER_FLAGS.basePath}>
<CompatRouter>
<Routes>
<Route path={LOGIN_ERROR_PATH} component={AuthenticationErrorPage} />
<Route path={LOGIN_ERROR_PATH} element={<AuthenticationErrorPage />} />
{standaloneRouteExtensions.map((e) => (
<Route
key={e.uid}
Expand Down Expand Up @@ -606,6 +603,7 @@ const initApiDiscovery = (storeInstance) => {
};

graphQLReady.onReady(() => {
const { productName } = getBrandingDetails();
store.dispatch(detectFeatures());

// Global timer to ensure all <Timestamp> components update in sync
Expand Down Expand Up @@ -660,19 +658,22 @@ graphQLReady.onReady(() => {
<React.Suspense fallback={<LoadingBox />}>
<Provider store={store}>
<ThemeProvider>
<AppInitSDK
configurations={{
appFetch: appInternalFetch,
apiDiscovery: initApiDiscovery,
initPlugins,
}}
>
<ToastProvider>
<PollConsoleUpdates />
<AdmissionWebhookWarningNotifications />
<AppRouter />
</ToastProvider>
</AppInitSDK>
<HelmetProvider>
<Helmet titleTemplate={`%s · ${productName}`} defaultTitle={productName} />
<AppInitSDK
configurations={{
appFetch: appInternalFetch,
apiDiscovery: initApiDiscovery,
initPlugins,
}}
>
<ToastProvider>
<PollConsoleUpdates />
<AdmissionWebhookWarningNotifications />
<AppRouter />
</ToastProvider>
</AppInitSDK>
</HelmetProvider>
</ThemeProvider>
</Provider>
</React.Suspense>,
Expand Down
29 changes: 19 additions & 10 deletions frontend/public/components/error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,19 +97,27 @@ const LoginErrorMessage: React.FC = () => {
return t('public~There was an error generating login state.');
case 'cookie_error':
return t('public~There was an error setting login state cookie');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shall we update message to include period?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it looks like this one also needs to be updated

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Opps I missed it, thanks for catching that @yapei , updated.

case 'missing_code':
return t('public~Auth code is missing in query param.');
case 'missing_state':
return t('public~There was an error parsing your state cookie');
case 'invalid_code':
return t('public~There was an error logging you in. Please log out and try again.');
case 'invalid_state':
return t('public~There was an error verifying your session. Please log out and try again.');
case 'logout_error':
return t('public~There was an error logging you out. Please try again.');
case 'auth':
// When the error type is set as auth
switch (error) {
case 'missing_state':
return t('public~There was an error parsing your state cookie');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

period is missing here

case 'invalid_state':
return t(
'public~There was an error verifying your session. Please log out and try again.',
);
case 'missing_code':
return t('public~Auth code is missing in query param.');
case 'invalid_code':
return t('public~There was an error logging you in. Please log out and try again.');
default:
return t('public~There was an authentication error. Please log out and try again.');
}
default:
return (
<Trans>
<Trans ns="public">
There was an authentication error with the system:
<CodeBlock>
<CodeBlockCode>{error}</CodeBlockCode>
Expand All @@ -122,6 +130,7 @@ const LoginErrorMessage: React.FC = () => {
export const AuthenticationErrorPage: React.FC = () => {
const { t } = useTranslation();
const title = t('public~Authentication error');

return (
<>
<DocumentTitle>{title}</DocumentTitle>
Expand All @@ -139,7 +148,7 @@ export const AuthenticationErrorPage: React.FC = () => {
</Stack>
}
customFooter={
<ButtonLink variant="link" href="/logout">
<ButtonLink variant="primary" href="/logout">
{t('public~Try again')}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<ButtonLink variant="primary" href="/logout">
{t('public~Try again')}
<ButtonLink variant="primary" href="/logout">
{t('public~Try again')}

since href is triggering a log out, do we want to update the text to be "Log out" instead?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The link for that button will be updated to /, which will redirect the user to the dashboard. So we would want to keep it as it is now.

</ButtonLink>
}
Expand Down
7 changes: 4 additions & 3 deletions frontend/public/locales/en/public.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -535,11 +535,12 @@
"There was an error generating OAuth client from OIDC client.": "There was an error generating OAuth client from OIDC client.",
"There was an error generating login state.": "There was an error generating login state.",
"There was an error setting login state cookie": "There was an error setting login state cookie",
"Auth code is missing in query param.": "Auth code is missing in query param.",
"There was an error logging you out. Please try again.": "There was an error logging you out. Please try again.",
"There was an error parsing your state cookie": "There was an error parsing your state cookie",
"There was an error logging you in. Please log out and try again.": "There was an error logging you in. Please log out and try again.",
"There was an error verifying your session. Please log out and try again.": "There was an error verifying your session. Please log out and try again.",
"There was an error logging you out. Please try again.": "There was an error logging you out. Please try again.",
"Auth code is missing in query param.": "Auth code is missing in query param.",
"There was an error logging you in. Please log out and try again.": "There was an error logging you in. Please log out and try again.",
"There was an authentication error. Please log out and try again.": "There was an authentication error. Please log out and try again.",
"There was an authentication error with the system:<1><0>{error}</0></1>": "There was an authentication error with the system:<1><0>{error}</0></1>",
"Authentication error": "Authentication error",
"Try again": "Try again",
Expand Down