Skip to content

docs: add security recommendation callout for React SPA setup in Universal Components docs #1366

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chakrihacker merged 5 commits into from
Jun 25, 2026
Merged

docs: add security recommendation callout for React SPA setup in Universal Components docs #1366

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5c2f23c
feat: add security recommendation callout for React SPA setup in Univ…
chakrihacker Jun 9, 2026
9457c82
docs: fix callout copy, anchor, and add shadcn tab callout in overview
chakrihacker Jun 15, 2026
b2efd42
Merge remote-tracking branch 'origin/main' into feat/recommend-rwa-ca…
chakrihacker Jun 22, 2026
4642198
feat: add security recommendation for Auth0ComponentProvider in produ…
chakrihacker Jun 23, 2026
6799edd
fix: remove deprecated ReleaseStageNotice component from universal-co…
chakrihacker Jun 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 0 additions & 9 deletions main/docs/get-started/universal-components/universal-components-overview.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,6 @@ description: Learn what Auth0 Universal Components are and choose a platform to
sidebarTitle: Auth0 Universal Components
---

import { ReleaseStageNotice } from "/snippets/ReleaseStageNotice.jsx"

<ReleaseStageNotice
feature="Auth0 Universal Components"
stage="beta"
terms="true"
contact="Auth0 Support"
/>

Auth0 Universal Components is a library of pre-built UI components you can use to build your identity pipeline and experience inside your web and native applications. Built on [Auth0 SDKs](/docs/libraries) with an API-first approach, Universal Components allow you to embed Auth0's services, such as Organization management and MFA enrollment, without building the UI manually or managing high-privilege backend proxies.

With Universal Components, you can:
Expand Down
9 changes: 9 additions & 0 deletions main/docs/get-started/universal-components/web/auth0-component-provider.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,11 @@ Nest `Auth0ComponentProvider` in your authentication provider (`Auth0Provider`).

<Tabs>
<Tab title="React">

<Callout icon="shield-halved" color="#F59E0B" iconType="solid">
**Security recommendation:** For production applications that manage Organization configuration, Auth0 recommends the [Next.js setup](/docs/get-started/universal-components/auth0-component-provider#next-js) (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](/docs/secure/security-guidance/data-security/token-storage) guidance to understand the tradeoffs.
</Callout>

```tsx App.tsx
import { Auth0Provider } from "@auth0/auth0-react";
import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
Expand Down Expand Up @@ -970,6 +975,10 @@ All custom methods are optional. Only implement the ones you need. Methods recei
</Tab>

<Tab title="shadcn">
<Callout icon="shield-halved" color="#F59E0B" iconType="solid">
**Security recommendation:** For production applications that manage Organization configuration, Auth0 recommends the [Next.js setup](/docs/get-started/universal-components/auth0-component-provider#next-js) (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](/docs/secure/security-guidance/data-security/token-storage) guidance to understand the tradeoffs.
</Callout>

```tsx App.tsx
import { Auth0Provider } from "@auth0/auth0-react";
import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
Expand Down
Loading