fix(auth): Google Sign-In audience mismatch + remove per-user accent color
CI and Deploy / test (pull_request) Successful in 2m8s
CI and Deploy / deploy (pull_request) Has been skipped

Root cause of "Google authentication failed": appsettings.Development.json
had Auth:GoogleClientId set to the literal placeholder
"CHANGE_ME_GOOGLE_CLIENT_ID" while the frontend's .env.development had a
real (already-public, already-committed) client ID -- every Google ID
token's audience check failed against the backend's placeholder. Fixed
by setting the same real client ID on both sides (a client ID is a
public identifier, not a secret, safe to commit -- unlike a client
secret). Also enabled Auth:AllowRegistration in dev so the existing
Google-first self-serve-signup path (auto-create on unmatched verified
email, auto-link on matching verified email -- built during Wave 7) is
actually exercisable locally.

Wired the previously-missing Auth__MicrosoftClientId /
NEXT_PUBLIC_MICROSOFT_CLIENT_ID into docker-compose.yml/.env.example
(distinct from the existing MICROSOFT_CLIENT_ID used for Outlook mail
linking) -- Microsoft sign-in was never deployable, a leftover gap from
when it was built. Fixed a stale env-var name in the Microsoft setup
hint copy (still said REACT_APP_*, predates the Next.js migration).

Removed the per-user accent color picker entirely: it was purely
client-side (localStorage + theme.ts), never touched the backend/DB.
theme.ts now hardcodes a single ACCENT constant; themePrefs.ts drops
get/set/clearAccentColor; App.tsx and SettingsView.tsx drop the
accentColor prop threading. Dead accent-related i18n keys removed from
both locales.

Consolidated Settings' "Account" tab (duplicated GoogleAuthCard, which
already lives on the Profile page) into Profile: moved AuthStatusCard
and EmailProviderConnections there alongside the existing Google/
Microsoft auth cards, so identity/account-linking lives in one place.
Settings drops from 5 tabs to 4 and its General tab uses a consistent
SectionCard layout instead of ad-hoc per-card styling.

Verified: dotnet build/test (177/177) and npm build/test (57/57) both
green; confirmed live against a running dev server that /auth/config
now reports googleEnabled with the corrected client ID, Settings has
no accent controls, and Profile shows the consolidated auth section.
This commit is contained in:
cesnimda
2026-07-12 02:43:10 +02:00
parent 86cdafb3ef
commit 33d899c243
11 changed files with 115 additions and 255 deletions
+21 -34
View File
@@ -1,6 +1,6 @@
import React from 'react';
import '@testing-library/jest-dom';
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import { fireEvent, render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import SettingsView from './components/SettingsView';
@@ -21,35 +21,27 @@ jest.mock('./api', () => ({
}));
jest.mock('./components/ImportExportJobs', () => () => <div>Import Export Stub</div>);
jest.mock('./components/GoogleAuthCard', () => () => <div>Google Auth Stub</div>);
jest.mock('./components/BackupCard', () => () => <div>Backup Stub</div>);
jest.mock('./components/AuthStatusCard', () => () => <div>Auth Status Stub</div>);
const mockedApi = api as jest.Mocked<typeof api>;
function renderView(onAccentColorChange = jest.fn()) {
return {
onAccentColorChange,
...render(
<MemoryRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
<ToastProvider>
<I18nProvider>
<SettingsView
pageSize={20}
onPageSizeChange={jest.fn()}
columns={{ status: true, dateApplied: true, daysSince: true, jobUrl: false }}
onColumnsChange={jest.fn()}
themeMode="dark"
onThemeModeChange={jest.fn()}
accentColor="#15803d"
onAccentColorChange={onAccentColorChange}
onResetAccentColor={jest.fn()}
/>
</I18nProvider>
</ToastProvider>
</MemoryRouter>,
),
};
function renderView() {
return render(
<MemoryRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
<ToastProvider>
<I18nProvider>
<SettingsView
pageSize={20}
onPageSizeChange={jest.fn()}
columns={{ status: true, dateApplied: true, daysSince: true, jobUrl: false }}
onColumnsChange={jest.fn()}
themeMode="dark"
onThemeModeChange={jest.fn()}
/>
</I18nProvider>
</ToastProvider>
</MemoryRouter>,
);
}
beforeEach(() => {
@@ -76,15 +68,10 @@ afterEach(() => {
jest.clearAllMocks();
});
test('settings view uses one follow-up section, one notification section, and staged accent apply', async () => {
const { onAccentColorChange } = renderView();
test('settings view has no accent picker and uses one follow-up section, one notification section', async () => {
renderView();
fireEvent.click(screen.getByRole('button', { name: /#15803D/i }));
const accentInput = (await screen.findAllByLabelText('Accent'))[1] as HTMLInputElement;
fireEvent.change(accentInput, { target: { value: '#2563eb' } });
expect(onAccentColorChange).not.toHaveBeenCalled();
fireEvent.click(screen.getByRole('button', { name: /^save$/i }));
expect(onAccentColorChange).toHaveBeenCalledWith('#2563eb');
expect(screen.queryByText(/accent/i)).not.toBeInTheDocument();
fireEvent.click(screen.getByRole('tab', { name: /follow-ups/i }));
expect(await screen.findByText(/follow-up rules by scenario/i)).toBeInTheDocument();