Revert "WIP: Update react-sdk.mdx" #352
Conversation
WalkthroughThe changes update the Kinde React SDK documentation to reflect specific improvements: the SDK is now optimized for React 18.2.0, and sign in/sign up flows have been rephrased to use a dedicated React hook rather than separate link components. The callback mechanism has been consolidated into a single Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant SDK as useKindeAuth Hook
participant Auth as Authentication Service
U->>SDK: Initiate login(authUrlParams)
SDK->>Auth: Redirect with authUrlParams
Auth-->>SDK: Return user and app state via redirection
SDK->>SDK: Invoke onRedirectCallback with state
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Deploying kinde-docs-previews with
|
| Latest commit: |
96d0c74
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://5beb3f00.kinde-docs-previews.pages.dev |
| Branch Preview URL: | https://revert-335-feat-react-v5.kinde-docs-previews.pages.dev |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (5)
src/content/docs/developer-tools/sdks/frontend/react-sdk.mdx (5)
82-89: Refine the redirect callback section wording.
The description—“…any application state you set prior to the redirect”—could be simplified to “before the redirect” for improved clarity. TheonRedirectCallbackcode snippet is clear and concise.🧰 Tools
🪛 LanguageTool
[style] ~84-~84: ‘prior to’ might be wordy. Consider a shorter alternative.
Context: ...bject and any application state you set prior to the redirect. ```jsx onRedirectCallbac...(EN_WORDINESS_PREMIUM_PRIOR_TO)
98-99: Improve punctuation and possessive forms in parameter descriptions.
Consider revising the bullet points to:
• “login_hint– this allows you to ask Kinde to prepopulate a user's email address…”
• “lang– if you offer multi-language support, Kinde will automatically figure out the best language for your user; however, if you want to force a language and override the user's preference, you can do so by passing this attribute.”
This will enhance readability.🧰 Tools
🪛 LanguageTool
[uncategorized] ~98-~98: It seems likely that a singular genitive (’s) apostrophe is missing.
Context: ...llows you to ask Kinde to prepopulate a users email address on the sign-up and sign-i...(AI_HYDRA_LEO_APOSTROPHE_S_XS)
[uncategorized] ~99-~99: Possible missing comma found.
Context: ...s. -langif you offer multi-language support Kinde will automatically figure out the...(AI_HYDRA_LEO_MISSING_COMMA)
[uncategorized] ~99-~99: It seems likely that a singular genitive (’s) apostrophe is missing.
Context: ...nt to force a language and override the users preference, you can do so by passing th...(AI_HYDRA_LEO_APOSTROPHE_S_XS)
146-165: Examine the UserProfile component’s JSX structure.
While the component correctly handles the loading state and displays the user’s first name and preferred email, the return statement wraps the conditional rendering within an extra set of curly braces. This pattern can lead to unexpected results in JSX. Consider using a fragment or returning the conditional expression directly.
375-375: Review the explanatory text for feature flag wrappers.
The line “We also require wrapper functions by type which should leveragegetFlagabove.” may benefit from a slight punctuation improvement (e.g., inserting a comma after “flag”).🧰 Tools
🪛 LanguageTool
[uncategorized] ~375-~375: Possible missing comma found.
Context: ...We also require wrapper functions by type which should leveragegetFlag` above. ...(AI_HYDRA_LEO_MISSING_COMMA)
339-347: Examine the JSDoc for the getFlag helper function.
The documentation is informative; however, consider updating the parameter type fordefaultValuefrom “obj” to “object” for clarity and consistency with typical JSDoc conventions.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/content/docs/developer-tools/sdks/frontend/react-sdk.mdx(11 hunks)
🧰 Additional context used
🪛 LanguageTool
src/content/docs/developer-tools/sdks/frontend/react-sdk.mdx
[style] ~84-~84: ‘prior to’ might be wordy. Consider a shorter alternative.
Context: ...bject and any application state you set prior to the redirect. ```jsx onRedirectCallbac...
(EN_WORDINESS_PREMIUM_PRIOR_TO)
[uncategorized] ~98-~98: It seems likely that a singular genitive (’s) apostrophe is missing.
Context: ...llows you to ask Kinde to prepopulate a users email address on the sign-up and sign-i...
(AI_HYDRA_LEO_APOSTROPHE_S_XS)
[uncategorized] ~99-~99: Possible missing comma found.
Context: ...s. - lang if you offer multi-language support Kinde will automatically figure out the...
(AI_HYDRA_LEO_MISSING_COMMA)
[uncategorized] ~99-~99: It seems likely that a singular genitive (’s) apostrophe is missing.
Context: ...nt to force a language and override the users preference, you can do so by passing th...
(AI_HYDRA_LEO_APOSTROPHE_S_XS)
[uncategorized] ~143-~143: Possible missing comma found.
Context: ...t_name}!
isAuthenticated...
(AI_HYDRA_LEO_MISSING_COMMA)
[uncategorized] ~193-~193: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ... working on more. You can also use any open source JWT verification library for your langu...
(EN_COMPOUND_ADJECTIVE_INTERNAL)
[uncategorized] ~197-~197: Possible missing comma found.
Context: ...nded recipient of an access token - for example the API for your application. The `audi...
(AI_HYDRA_LEO_MISSING_COMMA)
[uncategorized] ~375-~375: Possible missing comma found.
Context: ... We also require wrapper functions by type which should leverage getFlag` above. ...
(AI_HYDRA_LEO_MISSING_COMMA)
🔇 Additional comments (23)
src/content/docs/developer-tools/sdks/frontend/react-sdk.mdx (23)
17-17: Review the React version optimization note.
The updated line “This SDK is optimized for React version 18.2.0.” changes the React version detail. Given that this PR is a reversion of a WIP update, please verify that this change is either intentional or should be reverted to the previous text.
66-68: Examine the sign in & sign up section header and description.
The revised header (“## Sign in and sign up”) and accompanying text now emphasize the use of the React hook for login/register flows. Confirm that this change aligns with the intended documentation state post-reversion.
73-79: Review the login/register hook usage code snippet.
The snippet properly importsuseKindeAuthand destructures theloginandregistermethods for use in button handlers. Ensure that any references to previous components (such as separate link components) have been fully removed as per the latest documentation guidance.
101-115: Validate the login example with additional auth URL parameters.
The code clearly demonstrates how to pass anauthUrlParamsobject with snake_case keys (login_hintandlang). Please ensure that this example remains consistent with the expected API behavior.
117-125: Confirm the sign-out example correctness.
The snippet for logging out viauseKindeAuthis straightforward. Verify that the updated documentation still intends to use this approach for signing out after the reversion.
136-141: Review the simple user greeting example.
TheSayHellocomponent correctly demonstrates importinguseKindeAuthand using theuserobject to display a greeting. Ensure consistency with the rest of the documentation examples.
173-189: Assess the API call example using getToken.
The provided asynchronous example demonstrates token retrieval and an API call viafetcheffectively. Please confirm that the placeholder<your-api>will be replaced appropriately in production documentation.
219-223: Verify the organization creation section heading and introduction.
The headers “## Organizations” and “### Create an organization” along with the introductory text are clear. Double-check that these descriptions align with the reverted documentation’s intent regarding organization management.
226-231: Review the createOrg usage example.
The code snippet effectively illustrates how to import and invokecreateOrgfromuseKindeAuth. Ensure that any accompanying text also reflects the reverted functionality if applicable.
233-238: Examine the instructions for signing users into organizations.
The section now clearly instructs the user to pass anorg_codeduring registration or login. Verify that this updated guidance matches the currently supported API and that it aligns with the overall documentation style after reversion.
286-289: Review the permission helper functions usage examples.
The snippet demonstratinggetPermission("create:todos")andgetPermissions()is concise and effective. Confirm that the documented return structures match the latest API specifications.
295-298: Verify the conditional rendering for permissions.
The example showing how to conditionally render a button based on the permission'sisGrantedflag is clear. Ensure that the JSX syntax is correct within the broader context of the documentation.
349-356: Validate the getFlag example usage.
The code snippet that callsgetFlag('theme')and includes a commented expected output is clear. Ensure that the formatting and inline comments match the documentation style used throughout the file.
368-372: Review the conditional rendering example for feature flags.
The snippet that conditionally renders a button based ongetFlag("create_competition").valueis concise and clear. Verify that it accurately reflects how feature flags are intended to be used.
379-387: Evaluate the JSDoc for the getBooleanFlag helper.
The commentary and function signature explanation are clear. Confirm that the type annotations and descriptions align with the overall documentation standards.
388-391: Confirm the example usage for getBooleanFlag.
The usage example properly demonstrates callinggetBooleanFlag("is_dark_mode")and expectations for its output.
392-397: Verify the default value behavior in the getBooleanFlag example.
The demonstration using a default fallback value is clear and correctly documents the behavior when a flag does not exist.
401-409: Review the JSDoc for the getStringFlag helper.
The documentation is clear and informative. If needed, consider explicitly stating that an empty string (or another falsy value) may be used as a default.
410-417: Review the JSDoc for the getIntegerFlag helper.
The explanation and type annotations are appropriate. Verify that the documentation meets the overall formatting and detail standards.
421-427: Assess the combined feature flag usage example.
The snippet effectively shows how to combinegetBooleanFlagandgetStringFlagto conditionally render a button with a dynamic class name. Ensure that the JSX syntax and use of template literals are correct.
443-447: Review the KindeProvider scope override example.
The example correctly demonstrates overriding the default scope by explicitly specifyingscope="openid". Confirm that the ellipsis (...) are intended placeholders for additional properties.
455-462: Evaluate the getClaim helper usage example.
The snippet shows both a basic claim retrieval and one that specifies"id_token", which is clear and accurate.
498-504: Review the redirect handler code snippet.
The example for handling redirection post-authentication is clear. Consider whether usingwindow.locationwithout a property (e.g.,window.location.href) is preferable for clarity, though the current implementation is acceptable if it meets project conventions.
| <button onClick={() => register({org_code: ‘org_1234’})} type="button">Register</button> | ||
| <button onClick={() => login({org_code: ‘org_1234’})} type="button">Sign in</button> | ||
| ``` |
There was a problem hiding this comment.
Fix typographic quotes in organization sign up/sign in examples.
The code examples use curly quotes (‘org_1234’) which can lead to syntax errors. Replace these with standard single quotes ('org_1234').
Waiting on package
Summary by CodeRabbit
Documentation
New Features