Skip to content

[Docs] Block direct sign-in flow initiation from browser SPAs #3455

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

Open
Malith-19 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[Docs] Block direct sign-in flow initiation from browser SPAs #3455

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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: 9 additions & 0 deletions docs/content/sdks/browser/overview.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,15 @@ Install the <ProductName /> 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** and throws at runtime. See
[Register an application](/docs/next/guides/getting-started/register-an-application).
:::

## Quick Example

```js
Expand Down
13 changes: 12 additions & 1 deletion docs/content/sdks/javascript/overview.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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** — it throws at runtime in a browser.

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`
Expand Down
10 changes: 10 additions & 0 deletions docs/content/sdks/react/overview.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,16 @@ Install the <ProductName /> 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 [`<SignInButton />`](/docs/next/sdks/react/apis/components/sign-in-button) component.

**Initiating a sign-in flow directly in the browser** — the embedded `<SignIn />` component or
`useThunderID().signIn({ applicationId })` used standalone — is **not supported** and throws at
runtime. See
[Register an application](/docs/next/guides/getting-started/register-an-application).
:::

## Features

### Contexts
Expand Down
10 changes: 10 additions & 0 deletions docs/content/sdks/vue/overview.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,16 @@ Install the <ProductName /> 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 [`<SignInButton />`](/docs/next/sdks/vue/apis/components/sign-in-button) component.

**Initiating a sign-in flow directly in the browser** — the embedded `<SignIn />` component or
`useThunderID().signIn({ applicationId })` used standalone — is **not supported** and throws at
runtime. See
[Register an application](/docs/next/guides/getting-started/register-an-application).
:::

## Features

### Providers
Expand Down
8 changes: 8 additions & 0 deletions samples/apps/react-vanilla-sample/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

@ThaminduDilshan ThaminduDilshan Jun 23, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not related to this PR, but related to your effort... IMO we shouldn't provide a sample for a non recommended implementation. Instead we should give a nextJS sample maybe.

@darshanasbg @jeradrutnam @brionmario WDYT?

> as a reference for the low-level flow API used by server-side clients and the hosted sign-in pages.

## Prerequisites

- Node.js 20+
Expand Down
Loading