kinde-auth-react icon indicating copy to clipboard operation
kinde-auth-react copied to clipboard

fix: expose isLoading state initialization in KindeProvider

Open dtoxvanilla1991 opened this issue 1 month ago • 1 comments

Explain your changes

  • KindeProvider.tsx now sets isLoading to true as soon as login, register, or logout are invoked, so apps can treat that flag as “Kinde is busy” and delay their own redirects until the SDK finishes.
  • Wrapped the login flow in a try/catch, added an ERR_LOGIN callback path, and ensure every popup failure or setup error resets isLoading back to false.
  • Registration flow mirrors the same behavior: isLoading flips on at invocation and drops back to false if popup launch or URL generation fails.
  • Logout now keeps isLoading true throughout token clearing and redirect, avoiding premature consumer redirects while Kinde completes logout; only real failures clear the loading flag.

Checklist

🛟 If you need help, consider asking for advice over in the Kinde community.

dtoxvanilla1991 avatar Nov 27 '25 21:11 dtoxvanilla1991

Walkthrough

Added forceChildrenRender?: boolean to KindeProvider, introduced initStarted, contextRef, and setLoading() to manage global isLoading and conditional child rendering; callbacks now use contextRef.current. Tests were rewritten with rich mocks and a TestConsumer to validate loading and render behavior.

Changes

Cohort / File(s) Summary
Provider: loading & context ref
src/state/KindeProvider.tsx
Added forceChildrenRender?: boolean; introduced initStarted state, contextRef, and setLoading() helper; updated initialization and rendering to consider forceChildrenRender and initStarted; replaced direct context reads in callbacks with contextRef.current; login/register/logout flows call setLoading(true) at start and restore on completion/error; added memoized mergedCallbacks and adjusted dependency arrays.
Tests: mocks, consumer & coverage
src/state/KindeProvider.test.tsx
Rewrote tests to use rich mocks for @kinde/js-utils (MemoryStorage/LocalStorage and mocked API functions), added TestConsumer to surface context and trigger login, configured extensive beforeEach/teardown including window.location stubbing, and expanded test cases covering redirect defaults, init/loading states, forceChildrenRender behavior, and isLoading transitions.

Sequence Diagram(s)

sequenceDiagram
    participant Consumer as TestConsumer (Client)
    participant Provider as KindeProvider
    participant Auth as `@kinde/js-utils` (Auth)
    participant Browser as Browser (window.location)

    Consumer->>Provider: read context / call login()
    Provider->>Provider: setLoading(true) (initStarted when forceChildrenRender)
    Provider->>Auth: generateAuthUrl / navigateToKinde / exchangeAuthCode
    Auth-->>Provider: return url / token or error
    Provider->>Browser: navigate (redirect) or handle popup flow
    Provider->>Provider: invoke onSuccess/onError via contextRef.current
    Provider->>Provider: setLoading(false)
    Provider-->>Consumer: context updated (isLoading changes / children render)

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

  • Inspect contextRef usage for stale-closure or race conditions in async callbacks (src/state/KindeProvider.tsx).
  • Verify setLoading() interactions with forceChildrenRender, initStarted, and any initRef to ensure consistent rendering and state transitions.
  • Confirm all error paths (token exchange, popup errors, navigation failures) clear loading and propagate callbacks.
  • Review dependency arrays and useMemo for mergedCallbacks to avoid missed updates.
  • Validate tests/mocks accurately emulate @kinde/js-utils behaviors and that assertions reflect intended loading/render semantics.

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately describes the main change—exposing the isLoading state during initialization in KindeProvider—which aligns with the core objective of making isLoading observable when forceChildrenRender is enabled.
Description check ✅ Passed The description is directly related to the changeset, explaining the problem statement, solution approach, implementation details, and verification steps relevant to the code modifications.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing touches
  • [ ] 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • [ ] Create PR with unit tests
  • [ ] Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

coderabbitai[bot] avatar Nov 27 '25 21:11 coderabbitai[bot]

@dtoxvanilla1991 - Why is this not merged yet?

samirpdl avatar Dec 15 '25 10:12 samirpdl

@dtoxvanilla1991 - Why is this not merged yet? @samirpdl

Had to be reviewed, primarily. Was reviewed earlier today, so hopefully within next few days.

dtoxvanilla1991 avatar Dec 19 '25 00:12 dtoxvanilla1991