Bugfix/fix auth bootstrap bounce

[saadmoumou]

Summary

• What does this PR change?

Why

• Why is this change needed?

Checklist

• Added/updated tests (if behavior changed)
• npm run lint passes
• npm run typecheck passes
• npm test passes
• npm run build passes
• Added a changeset (npx changeset) if this affects consumers

Notes

• Anything reviewers should pay attention to?

[Copilot]

Pull request overview

This PR expands the auth kit’s test setup (Vitest + RTL + coverage) and adjusts several auth/UI utilities and flows (error extraction, token refresh handling, signup customization, RBAC hooks), aiming to address an auth bootstrap “bounce” while adding broader automated test coverage.

Changes:

• Configure Vitest for jsdom + global setup + coverage and add a comprehensive tests/ suite.
• Introduce extractHttpErrorMessage and use it across auth pages + interceptor to surface backend error details.
• Update auth provider/bootstrap logic, RBAC permission checks, and Profile page field handling.

Reviewed changes

Copilot reviewed 8 out of 9 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
vitest.config.ts	Switch Vitest to jsdom, add setup file, test include glob, and coverage config.
tsconfig.json	Add TS paths mappings for react-related packages.
package.json	Update scripts, add testing/linting deps, and bump version.
eslint.config.mjs	Enable/downgrade new react-hooks rules.
README.md	Document test commands and test folder layout.
src/utils/errorHelpers.ts	Add shared helper to extract user-facing error messages from axios/common shapes.
src/utils/colorHelpers.ts	Refine Tailwind prefix typing.
src/utils/attachAuthInterceptor.ts	Improve _retry typing and store refresh failure message for UI display.
src/providers/AuthProvider.tsx	Rework bootstrap deps/logic and routing; add/retain callback-related code.
src/pages/auth/*.tsx	Use extractHttpErrorMessage; add signup customization and improve defaults.
src/models/AuthConfig.ts	Add new config options for custom signup URL/fields/endpoint/payload transform.
src/hooks/useAbility.ts	Add useCanAny helper.
src/context/RbacContext.ts	Fix hook call order by using useCanAny / unconditional hook calls.
src/components/RequirePermissions.tsx	Avoid conditional hook calls; support “any permission” checks via useCanAny.
src/components/ProfilePage.tsx	Split user name into fname/lname/username fields with cancel/original state tracking.
src/components/InlineError.tsx	Change dismissal logic to avoid set-state-in-effect patterns.
tests/**	Add unit/component tests across utils, hooks, contexts, providers, and pages.

Comments suppressed due to low confidence (4)

src/providers/AuthProvider.tsx:50

• GoogleOAuthCallback is introduced with an eslint suppression but is not used anywhere (the callback route renders <GoogleCallbackPage />). This dead code increases maintenance burden and can drift from the actual callback behavior. Remove it or wire the route to use it consistently.

  /* ── Google OAuth callback component (inside AuthProvider so it can touch state) ── */
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const GoogleOAuthCallback: React.FC = () => {
    const location = useLocation();

package.json:3

• Manual version bump in package.json conflicts with the repo’s Changesets-based versioning workflow. Please revert the direct version edit and add a .changeset/*.md entry instead (then run the changeset versioning step during release).

  "name": "@ciscode/ui-authentication-kit",
  "version": "1.0.15",

src/providers/AuthProvider.tsx:139

• The bootstrap effect no longer depends on accessToken, but it reads it and decodes it. When the interceptor refreshes the token via setAccessToken(...), user will not be updated (since the interceptor doesn’t call setUser), leaving user stale/null while isAuthenticated becomes true. Include accessToken in the effect deps or add a separate effect that decodes/updates user whenever accessToken changes.

  useEffect(() => {
    const init = async () => {
      if (accessToken) {
        setUser(decodeToken(accessToken));
        return;
      }

      try {
        const { data } = await axios.post(
          `${config.baseUrl}/api/auth/refresh-token`,
          {},
          { withCredentials: true }
        );
        setAccessToken(data.accessToken);
        setUser(decodeToken(data.accessToken));
        localStorage.setItem('authToken', data.accessToken);
      } catch {
        /* no valid refresh cookie – remain logged-out */
      }
    };
    init();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [config.baseUrl]);

src/providers/AuthProvider.tsx:76

• GoogleOAuthCallback is defined but unused (suppressed with an eslint disable). This dead code increases maintenance burden and can drift from the actual callback route (<GoogleCallbackPage />). Remove it or wire the route to use it consistently.

  /* ── Google OAuth callback component (inside AuthProvider so it can touch state) ── */
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const GoogleOAuthCallback: React.FC = () => {
    const location = useLocation();

    useEffect(() => {
      const params = new URLSearchParams(location.search);
      const tokenFromQuery = params.get('accessToken');

      if (tokenFromQuery) {
        try {
          setAccessToken(tokenFromQuery);
          setUser(decodeToken(tokenFromQuery));
          localStorage.setItem('authToken', tokenFromQuery);
          resetSessionFlag();
        } catch (e) {
          console.error("Failed to decode or store Google access token:", e);
        }
      } else {
        console.error("No accessToken found in Google OAuth callback URL.");
      }

      const redirectPath = sessionStorage.getItem('postLoginRedirect') || '/';
      sessionStorage.removeItem('postLoginRedirect');

      navigate(redirectPath, { replace: true });
    }, [location.search]);

    // No UI needed; this route just processes the tokens then redirects.
    return null;
  };

[Copilot]

react-dom is on React 19, but @types/react-dom remains on the 18.x line. This version mismatch can cause TS type incompatibilities. Align @types/react-dom with the React major version you’re using (or rely on the correct bundled types if applicable).

Suggested change

	"@types/react-dom": "^18.3.6",
	"@types/react-dom": "^19.0.0",

[sonarqubecloud]

Quality Gate passed

Issues
3 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud