From 5c2f23c7487051c1938faa6bb2bf9f5112a6fbb4 Mon Sep 17 00:00:00 2001 From: subramanyachakravarthy-okta Date: Tue, 9 Jun 2026 18:09:54 +0530 Subject: [PATCH 1/4] feat: add security recommendation callout for React SPA setup in Universal Components docs --- .../universal-components/auth0-component-provider.mdx | 5 +++++ .../universal-components/universal-components-overview.mdx | 5 +++++ 2 files changed, 10 insertions(+) diff --git a/main/docs/get-started/universal-components/auth0-component-provider.mdx b/main/docs/get-started/universal-components/auth0-component-provider.mdx index b91e8dc247..e5e05e896f 100644 --- a/main/docs/get-started/universal-components/auth0-component-provider.mdx +++ b/main/docs/get-started/universal-components/auth0-component-provider.mdx @@ -30,6 +30,11 @@ Nest `Auth0ComponentProvider` in your authentication provider (`Auth0Provider`). + + + **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. + + ```tsx App.tsx import { Auth0Provider } from "@auth0/auth0-react"; import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa"; diff --git a/main/docs/get-started/universal-components/universal-components-overview.mdx b/main/docs/get-started/universal-components/universal-components-overview.mdx index 33d68f094a..c10d6cad8d 100644 --- a/main/docs/get-started/universal-components/universal-components-overview.mdx +++ b/main/docs/get-started/universal-components/universal-components-overview.mdx @@ -42,6 +42,11 @@ To use Auth0 Universal Components: + + + **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. + + ## Install Universal Components From 9457c82d203d31e87534ed31041bf9d67f4c09f4 Mon Sep 17 00:00:00 2001 From: subramanyachakravarthy-okta Date: Mon, 15 Jun 2026 13:19:02 +0530 Subject: [PATCH 2/4] docs: fix callout copy, anchor, and add shadcn tab callout in overview --- .../universal-components/auth0-component-provider.mdx | 2 +- .../universal-components/universal-components-overview.mdx | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/main/docs/get-started/universal-components/auth0-component-provider.mdx b/main/docs/get-started/universal-components/auth0-component-provider.mdx index e5e05e896f..d04a94c403 100644 --- a/main/docs/get-started/universal-components/auth0-component-provider.mdx +++ b/main/docs/get-started/universal-components/auth0-component-provider.mdx @@ -32,7 +32,7 @@ Nest `Auth0ComponentProvider` in your authentication provider (`Auth0Provider`). - **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. + **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. ```tsx App.tsx diff --git a/main/docs/get-started/universal-components/universal-components-overview.mdx b/main/docs/get-started/universal-components/universal-components-overview.mdx index c10d6cad8d..2e2b0896b8 100644 --- a/main/docs/get-started/universal-components/universal-components-overview.mdx +++ b/main/docs/get-started/universal-components/universal-components-overview.mdx @@ -44,7 +44,7 @@ To use Auth0 Universal Components: - **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. + **Security recommendation:** For production applications that manage Organization configuration, Auth0 recommends the [Next.js setup](/docs/get-started/universal-components/universal-components-overview#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. ## Install Universal Components @@ -246,6 +246,10 @@ To learn more, read [Style Universal Components](/docs/get-started/universal-com + + **Security recommendation:** For production applications that manage Organization configuration, Auth0 recommends the [Next.js setup](/docs/get-started/universal-components/universal-components-overview#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. + + ## Install Universal Components Universal Components use `@/...` imports. Start by configuring the path alias and project dependencies: From 4642198959c94a23fcdfc790907d7ae459277149 Mon Sep 17 00:00:00 2001 From: subramanyachakravarthy-okta Date: Tue, 23 Jun 2026 12:05:12 +0530 Subject: [PATCH 3/4] feat: add security recommendation for Auth0ComponentProvider in production applications --- .../universal-components/web/auth0-component-provider.mdx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/main/docs/get-started/universal-components/web/auth0-component-provider.mdx b/main/docs/get-started/universal-components/web/auth0-component-provider.mdx index d11811298d..33499aaf51 100644 --- a/main/docs/get-started/universal-components/web/auth0-component-provider.mdx +++ b/main/docs/get-started/universal-components/web/auth0-component-provider.mdx @@ -975,6 +975,10 @@ All custom methods are optional. Only implement the ones you need. Methods recei + + **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. + + ```tsx App.tsx import { Auth0Provider } from "@auth0/auth0-react"; import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa"; From 6799eddf851d565caa676d2858f76d7414c76956 Mon Sep 17 00:00:00 2001 From: subramanyachakravarthy-okta Date: Wed, 24 Jun 2026 15:27:39 +0530 Subject: [PATCH 4/4] fix: remove deprecated ReleaseStageNotice component from universal-components-overview --- .../universal-components-overview.mdx | 9 --------- 1 file changed, 9 deletions(-) diff --git a/main/docs/get-started/universal-components/universal-components-overview.mdx b/main/docs/get-started/universal-components/universal-components-overview.mdx index 3a4940ce47..028e8cc43f 100644 --- a/main/docs/get-started/universal-components/universal-components-overview.mdx +++ b/main/docs/get-started/universal-components/universal-components-overview.mdx @@ -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" - - - 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: