docs: add security recommendation callout for React SPA setup in Universal Components docs#1366
docs: add security recommendation callout for React SPA setup in Universal Components docs#1366chakrihacker wants to merge 1 commit into
Conversation
…ersal Components docs
Summary
Redirects per inputRedirects in main/docs/get-started/universal-components/universal-components-overview.mdx
|
|
Preview deployment for your docs. Learn more about Mintlify Previews.
💡 Tip: Enable Workflows to automatically generate PRs for you. |
|
Preview deployment for your docs. Learn more about Mintlify Previews.
💡 Tip: Enable Workflows to automatically generate PRs for you. |
| <Tab title="React"> | ||
|
|
||
| <Callout icon="shield-halved" color="#F59E0B" iconType="solid"> | ||
| **Security recommendation:** For production applications, consider using the [Next.js setup](#next-js) instead. Next.js proxy mode keeps tokens server-side and never exposes them to the browser, reducing the risk of token theft via XSS. React SPA mode stores tokens in browser memory, which is suitable for lower-risk scenarios but does not provide the same level of protection. |
There was a problem hiding this comment.
@chakrihacker, has this verbatim been reviewed with @SurajThotakura? I wouldn't use the words like keeps, exposes etc. It needs to be aligned with the overall docs terminology
There was a problem hiding this comment.
I agree with Ajey's point, "exposes them to the browser" and "token theft via XSS" read like a vulnerability report rather than product docs.
Suggested copy:
Security recommendation: For production applications that manage Organization configuration, Auth0 recommends the Next.js setup (Regular Web App). Next.js proxy mode stores tokens server-side, which reduces the attack surface compared to browser-stored tokens in a Single Page Application. If you use React SPA mode, review the Token Storage guidance to understand the tradeoffs.
| <Tab title="React"> | ||
|
|
||
| <Callout icon="shield-halved" color="#F59E0B" iconType="solid"> | ||
| **Security recommendation:** For production applications, consider using the [Next.js setup](#next-js) instead. Next.js proxy mode keeps tokens server-side and never exposes them to the browser, reducing the risk of token theft via XSS. React SPA mode stores tokens in browser memory, which is suitable for lower-risk scenarios but does not provide the same level of protection. |
There was a problem hiding this comment.
@chakrihacker
The anchor [Next.js setup](#next-js) is not resolving properly, it works for the first time but if the user switches the tabs and tries to use this again it breaks.
Link the full next.js tab path directly /docs/get-started/universal-components/auth0-component-provider#next-js
| <Tab title="React"> | ||
|
|
||
| <Callout icon="shield-halved" color="#F59E0B" iconType="solid"> | ||
| **Security recommendation:** For production applications, consider using the [Next.js setup](#next-js) instead. Next.js proxy mode keeps tokens server-side and never exposes them to the browser, reducing the risk of token theft via XSS. React SPA mode stores tokens in browser memory, which is suitable for lower-risk scenarios but does not provide the same level of protection. |
There was a problem hiding this comment.
I agree with Ajey's point, "exposes them to the browser" and "token theft via XSS" read like a vulnerability report rather than product docs.
Suggested copy:
Security recommendation: For production applications that manage Organization configuration, Auth0 recommends the Next.js setup (Regular Web App). Next.js proxy mode stores tokens server-side, which reduces the attack surface compared to browser-stored tokens in a Single Page Application. If you use React SPA mode, review the Token Storage guidance to understand the tradeoffs.
| <Tabs> | ||
| <Tab title="React"> | ||
|
|
||
| <Callout icon="shield-halved" color="#F59E0B" iconType="solid"> |
There was a problem hiding this comment.
Same two changes needed here:
- fix the #next-js anchor
- align wording with the revised copy
| <Tabs> | ||
| <Tab title="React"> | ||
|
|
||
| <Callout icon="shield-halved" color="#F59E0B" iconType="solid"> |
There was a problem hiding this comment.
@SurajThotakura we should show this for shadcn as well right?
5 participants
Description
Checklist
CONTRIBUTING.md.