Skip to content

Commit cf52c3b

Browse files
authored
docs: add security recommendation callout for React SPA setup in Universal Components docs (#1366)
* feat: add security recommendation callout for React SPA setup in Universal Components docs * docs: fix callout copy, anchor, and add shadcn tab callout in overview * feat: add security recommendation for Auth0ComponentProvider in production applications * fix: remove deprecated ReleaseStageNotice component from universal-components-overview
1 parent 4514ae6 commit cf52c3b

2 files changed

Lines changed: 9 additions & 9 deletions

File tree

main/docs/get-started/universal-components/universal-components-overview.mdx

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,6 @@ description: Learn what Auth0 Universal Components are and choose a platform to
44
sidebarTitle: Auth0 Universal Components
55
---
66

7-
import { ReleaseStageNotice } from "/snippets/ReleaseStageNotice.jsx"
8-
9-
<ReleaseStageNotice
10-
feature="Auth0 Universal Components"
11-
stage="beta"
12-
terms="true"
13-
contact="Auth0 Support"
14-
/>
15-
167
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.
178

189
With Universal Components, you can:

main/docs/get-started/universal-components/web/auth0-component-provider.mdx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,11 @@ Nest `Auth0ComponentProvider` in your authentication provider (`Auth0Provider`).
3131

3232
<Tabs>
3333
<Tab title="React">
34+
35+
<Callout icon="shield-halved" color="#F59E0B" iconType="solid">
36+
**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.
37+
</Callout>
38+
3439
```tsx App.tsx
3540
import { Auth0Provider } from "@auth0/auth0-react";
3641
import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
@@ -970,6 +975,10 @@ All custom methods are optional. Only implement the ones you need. Methods recei
970975
</Tab>
971976

972977
<Tab title="shadcn">
978+
<Callout icon="shield-halved" color="#F59E0B" iconType="solid">
979+
**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.
980+
</Callout>
981+
973982
```tsx App.tsx
974983
import { Auth0Provider } from "@auth0/auth0-react";
975984
import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";

0 commit comments

Comments
 (0)