diff --git a/docs/content/guides/key-concepts/authentication/integration-models.mdx b/docs/content/guides/key-concepts/authentication/integration-models.mdx index 2ce18f62cd..ea51afbace 100644 --- a/docs/content/guides/key-concepts/authentication/integration-models.mdx +++ b/docs/content/guides/key-concepts/authentication/integration-models.mdx @@ -51,11 +51,13 @@ The core principle is **shared responsibility**: enforces authen Choose this approach when your application must render its own authentication screens (no redirects to hosted pages) while enforces authentication logic, MFA, and policies server-side. This model suits native mobile and desktop apps, or confidential server-side applications, where the client can be trusted to drive the flow directly. :::warning -App-native flow execution is **not supported for browser-based single-page applications (SPAs)** such as React, Angular, or Vue apps. SPAs are public clients that cannot be verified when calling the Flow Execution API directly, so they must use the [Redirect-Based](#redirect-based) model with the OAuth 2.0 Authorization Code grant and PKCE. +App-native **sign-in** is **not supported for browser-based single-page applications (SPAs)** such as React, Angular, or Vue apps. SPAs are public clients that cannot be verified when calling the Flow Execution API directly, so they must sign users in through the [Redirect-Based](#redirect-based) model with the OAuth 2.0 Authorization Code grant and PKCE. Registration and recovery have no redirect-based equivalent today, so SPAs continue to drive those flows through the Flow Execution API. ::: :::note[Grant Type Requirement] -The Flow Execution API only accepts new flow initiation requests from applications that do **not** have the `authorization_code` grant type configured. Applications registered with `authorization_code` must initiate authentication through the [Authorization endpoint](/docs/next/apis/#tag/authorization) (`GET /oauth2/authorize`), which then drives the flow internally. Continuation requests that carry a valid `executionId` are always accepted regardless of grant type. +This restriction applies to **authentication** flows only. The Flow Execution API rejects a new authentication-flow initiation request (`flowType: AUTHENTICATION` with no `executionId`) from an application configured with the `authorization_code` grant type. Such applications must initiate authentication through the [Authorization endpoint](/docs/next/apis/#tag/authorization) (`GET /oauth2/authorize`), which then drives the flow internally. + +Registration, recovery, and user onboarding flows are **not** restricted — they have no redirect-based equivalent and can still be initiated directly through the Flow Execution API regardless of grant type. Continuation requests that carry a valid `executionId` are also always accepted. ::: ### Key Features diff --git a/docs/content/sdks/browser/overview.mdx b/docs/content/sdks/browser/overview.mdx index 835870d821..bea8a1bf2c 100644 --- a/docs/content/sdks/browser/overview.mdx +++ b/docs/content/sdks/browser/overview.mdx @@ -36,6 +36,15 @@ Install the Browser SDK using your preferred package manager: To get started quickly, check out our [Vanilla JavaScript Quickstart Guide](/docs/next/guides/getting-started/connect-your-application/browser) for step-by-step instructions. +:::warning Use the redirect-based sign-in flow +Browser SPAs should sign in using the redirect-based OAuth2 `authorization_code` + PKCE flow. Use +the client's `signIn()` method, which redirects to `/oauth2/authorize`. + +**Initiating a sign-in flow directly in the browser** via `executeEmbeddedSignInFlowV2` (passing +`applicationId` and `flowType`) is **not supported** for browser SPAs. See +[Register an application](/docs/next/guides/getting-started/register-an-application). +::: + ## Quick Example ```js diff --git a/docs/content/sdks/javascript/overview.mdx b/docs/content/sdks/javascript/overview.mdx index 60f5887c2e..11a7eb623d 100644 --- a/docs/content/sdks/javascript/overview.mdx +++ b/docs/content/sdks/javascript/overview.mdx @@ -88,7 +88,18 @@ await auth.initialize({ Standalone functions for driving authentication flows step-by-step without browser redirects. -#### V2 Flows (Recommended) +:::warning Browser SPAs: use the redirect-based sign-in flow +Initiating a **sign-in** flow directly from a **browser SPA** via `POST /flow/execute` (passing +`applicationId` and `flowType`) is **not supported**. + +Browser SPAs must use the redirect-based OAuth2 `authorization_code` + PKCE flow instead — see +[Register an application](/docs/next/guides/getting-started/register-an-application) and the +[Browser SDK overview](/docs/next/sdks/browser/overview). Calling these functions to *continue* a +flow with an `executionId` (as the hosted sign-in pages do) and initiating the flow from server-side +(confidential client) code are unaffected. +::: + +#### V2 Flows - **[Sign-In Flow](/docs/next/sdks/javascript/apis/flows/embedded-sign-in-flow-v2)** — `executeEmbeddedSignInFlowV2` - **[Sign-Up Flow](/docs/next/sdks/javascript/apis/flows/embedded-sign-up-flow-v2)** — `executeEmbeddedSignUpFlowV2` - **[Recovery Flow](/docs/next/sdks/javascript/apis/flows/embedded-recovery-flow-v2)** — `executeEmbeddedRecoveryFlowV2` diff --git a/docs/content/sdks/react/overview.mdx b/docs/content/sdks/react/overview.mdx index f1d79f4d90..738b4a562d 100644 --- a/docs/content/sdks/react/overview.mdx +++ b/docs/content/sdks/react/overview.mdx @@ -35,6 +35,16 @@ Install the React SDK using your preferred package manager: To get started quickly, check out our [React Quickstart Guide](/docs/next/guides/getting-started/connect-your-application/react) for step-by-step instructions. +:::warning Use the redirect-based sign-in flow +Browser SPAs should sign in using the redirect-based OAuth2 `authorization_code` + PKCE flow. Use +the [``](/docs/next/sdks/react/apis/components/sign-in-button) component. + +**Initiating a sign-in flow directly in the browser** — the embedded `` component or +`useThunderID().signIn({ applicationId })` used standalone — is **not supported** for browser SPAs. +See +[Register an application](/docs/next/guides/getting-started/register-an-application). +::: + ## Features ### Contexts diff --git a/docs/content/sdks/vue/overview.mdx b/docs/content/sdks/vue/overview.mdx index 81af9b3847..951818e55e 100644 --- a/docs/content/sdks/vue/overview.mdx +++ b/docs/content/sdks/vue/overview.mdx @@ -35,6 +35,16 @@ Install the Vue SDK using your preferred package manager: To get started quickly, check out our [Vue Quickstart Guide](/docs/next/guides/getting-started/connect-your-application/vue) for step-by-step instructions. +:::warning Use the redirect-based sign-in flow +Browser SPAs should sign in using the redirect-based OAuth2 `authorization_code` + PKCE flow. Use +the [``](/docs/next/sdks/vue/apis/components/sign-in-button) component. + +**Initiating a sign-in flow directly in the browser** — the embedded `` component or +`useThunderID().signIn({ applicationId })` used standalone — is **not supported** for browser SPAs. +See +[Register an application](/docs/next/guides/getting-started/register-an-application). +::: + ## Features ### Providers diff --git a/samples/apps/react-vanilla-sample/README.md b/samples/apps/react-vanilla-sample/README.md index 2fd43ab904..71973ae9a8 100644 --- a/samples/apps/react-vanilla-sample/README.md +++ b/samples/apps/react-vanilla-sample/README.md @@ -2,6 +2,14 @@ A sample React application that demonstrates app-native flow orchestration with ThunderID — covering login, registration, and basic profile management. +> [!WARNING] +> **Not supported for browser SPAs (sign-in).** This sample initiates **sign-in** by calling +> `POST /flow/execute` directly from the browser (the "app-native" pattern). Browser single-page +> applications are **not supported** for direct sign-in initiation and must sign in using the +> redirect-based OAuth2 `authorization_code` + PKCE flow — see the +> [`react-sdk-sample`](../react-sdk-sample) for the recommended approach. This sample is kept only +> as a reference for the low-level flow API used by server-side clients and the hosted sign-in pages. + ## Prerequisites - Node.js 20+