### Run Next.js App with Local Ory Network

Source: https://github.com/ory/elements/blob/main/examples/nextjs-pages-router/README.md

This command allows you to run the Next.js development server while disabling TLS certificate verification for a local Ory Network instance. It's specifically for Ory engineers testing local setups.

```bash
NODE_TLS_REJECT_UNAUTHORIZED=0 npm run dev
```

--------------------------------

### Start Hot Reloading Development Mode

Source: https://github.com/ory/elements/blob/main/packages/elements-react/DEVELOPMENT.md

Starts a hot-reloading development server for @ory/elements-react using nx.

```bash
npx nx dev @ory/elements-react
```

--------------------------------

### Install Ory Elements Next.js

Source: https://github.com/ory/elements/blob/main/README.md

Installs the Ory Elements Next.js package, enabling seamless integration of Ory authentication flows into Next.js applications.

```shell
npm install @ory/nextjs
```

--------------------------------

### Install @ory/elements-react

Source: https://github.com/ory/elements/blob/main/packages/elements-react/README.md

Installs the @ory/elements-react package using npm. This package is required for integrating Ory Elements into your React application.

```bash
npm install @ory/elements-react
```

--------------------------------

### Develop `@ory/nextjs` Library

Source: https://github.com/ory/elements/blob/main/packages/nextjs/README.md

Starts the development server for the `@ory/nextjs` library using Nx. This command watches for changes and continuously rebuilds the library.

```bash
nx dev @ory/nextjs
```

--------------------------------

### Install `@ory/nextjs`

Source: https://github.com/ory/elements/blob/main/packages/nextjs/README.md

Installs the `@ory/nextjs` package using either npm or yarn. This package is a dependency for integrating Ory's SDK into a Next.js application.

```bash
npm install @ory/nextjs
```

```bash
yarn add @ory/nextjs
```

--------------------------------

### Install Ory Elements React

Source: https://github.com/ory/elements/blob/main/README.md

Installs the Ory Elements React package along with React and ReactDOM, essential for using the component library in a React application.

```shell
npm install @ory/elements-react react react-dom
```

--------------------------------

### Run Storybook Development Environment

Source: https://github.com/ory/elements/blob/main/packages/elements-react/DEVELOPMENT.md

Starts the Storybook development environment for @ory/elements-react, allowing for interactive exploration of components.

```bash
npx nx storybook @ory/elements-react
```

--------------------------------

### OryConfigurationProvider Setup

Source: https://github.com/ory/elements/blob/main/packages/elements-react/api-report/elements-react.api.md

Provides the OryConfigurationProvider component for setting up the Ory SDK configuration. It accepts children and an SDK configuration object, allowing for the initialization of the Ory client with project details and optional SDK settings.

```TypeScript
export interface OryClientConfiguration {
    intl?: IntlConfig;
    project: AccountExperienceConfiguration;
    sdk?: {
        url?: string;
        options?: Partial<ConfigurationParameters>;
    };
}
export function OryConfigurationProvider({ children, sdk: initialConfig, project, }: OryConfigurationProviderProps): react_jsx_runtime.JSX.Element;
```

--------------------------------

### Internationalization Updates for Ory Elements

Source: https://github.com/ory/elements/wiki/Advisory:-ory-elements‐react-upgrade-guide-to-v1.0.0‐next.11

This guide explains the updated approach to internationalization (i18n) in Ory Elements. The requirement to wrap components with an IntlProvider has been removed, simplifying custom translation management.

```TypeScript
// Instead of wrapping Ory Components with an IntlProvider,
// provide your custom translations and i18n settings via the new 'intl' object
// in the OryClientConfiguration passed to each flow component.
```

--------------------------------

### Run Next.js App with Local Ory Network Instance

Source: https://github.com/ory/elements/blob/main/examples/nextjs-app-router/README.md

This command is used to run the Next.js development server while disabling TLS certificate verification, which is necessary when connecting to a local Ory Network instance. It sets the NODE_TLS_REJECT_UNAUTHORIZED environment variable to 0.

```bash
NODE_TLS_REJECT_UNAUTHORIZED=0 npm run dev
```

--------------------------------

### Type Adjustments for Flow Containers

Source: https://github.com/ory/elements/wiki/Advisory:-ory-elements‐react-upgrade-guide-to-v1.0.0‐next.11

This guide outlines the necessary type adjustments for flow containers. Users should replace generic FlowContainer references with specific flow container types and update references to removed types.

```TypeScript
// Replace any usage of FlowContainer with specific flow container types like LoginFlowContainer, RegistrationFlowContainer, etc.
// Update any references to removed types such as CustomLanguageFormats, CustomTranslations, LanguageCodes, and TranslationFile.
```

--------------------------------

### Removed Functions and Types

Source: https://github.com/ory/elements/wiki/Advisory:-ory-elements‐react-upgrade-guide-to-v1.0.0‐next.11

This section lists functions and types that have been removed in the latest version. Users should update their code to remove any references to these deprecated items.

```TypeScript
// Removed Functions:
// onSubmitLogin
// onSubmitRegistration
// onSubmitRecovery
// onSubmitSettings
// onSubmitVerification
// formatMessage
// formElementId
// formLabelId
// isCustomTranslations

// Removed Types:
// FlowContainer
// IntlProvider
// IntlProviderProps
// CustomLanguageFormats
// CustomTranslations
// LanguageCodes
// TranslationFile
// ProviderProps
// OryComponentProvider
// OryFlowProvider
// OryFlowProviderProps
// OryFormComponents
// OryCardComponents
```

--------------------------------

### Get ORY Settings Flow

Source: https://github.com/ory/elements/blob/main/packages/nextjs/api-report/nextjs.api.md

Retrieves the ORY settings flow. Requires project configuration with the settings UI URL and query parameters. Returns the SettingsFlow object or null.

```TypeScript
import { SettingsFlow } from '@ory/client-fetch';

export type QueryParams = object;

export function getSettingsFlow(config: { project: { settings_ui_url: string } }, params: QueryParams | Promise<QueryParams>): Promise<SettingsFlow | null | void>;

```

--------------------------------

### Adjusting Component Provider Usage

Source: https://github.com/ory/elements/wiki/Advisory:-ory-elements‐react-upgrade-guide-to-v1.0.0‐next.11

This section details the removal of specific component providers like OryComponentProvider, OryFlowProvider, and OryFlowProviderProps. Their functionalities are now integrated elsewhere or are no longer required.

```TypeScript
// Remove OryComponentProvider, OryFlowProvider, and OryFlowProviderProps from your code.
// Their functionalities are now integrated into other components or no longer necessary.
```

--------------------------------

### Ory Elements Toggle CSS Variables

Source: https://github.com/ory/elements/wiki/Guide:-Migrate-to-new-variable-scheme

Provides CSS variables for toggle switches, covering background and border colors for checked and default states, along with foreground colors. These variables are mapped from specific form toggle variables.

```css
/* toggle */
  --toggle-background-checked: var(--forms-toggle-toggle-bg-checked);
  --toggle-background-default: var(--forms-toggle-toggle-bg-default);
  --toggle-border-checked: var(--forms-toggle-toggle-border-checked);
  --toggle-border-default: var(--forms-toggle-toggle-border-default);
  --toggle-foreground-checked: var(--forms-toggle-toggle-fg-checked);
  --toggle-foreground-default: var(--forms-toggle-toggle-fg-default);
```

--------------------------------

### Ory Branding CSS Variables

Source: https://github.com/ory/elements/wiki/Guide:-Migrate-to-new-variable-scheme

Defines core branding CSS variables for background, border, and foreground colors, which are used as defaults for the Ory theme. These variables are referenced by other component-specific variables.

```css
/* ory */
  --ory-background-default: var(--branding-bg-default);
  --ory-border-default: var(--branding-border-default);
  --ory-foreground-default: var(--branding-fg-default);
}
```

--------------------------------

### Get ORY Registration Flow

Source: https://github.com/ory/elements/blob/main/packages/nextjs/api-report/nextjs.api.md

Retrieves the ORY registration flow. Requires project configuration with the registration UI URL and query parameters. Returns the RegistrationFlow object or null.

```TypeScript
import { RegistrationFlow } from '@ory/client-fetch';

export type QueryParams = object;

export function getRegistrationFlow(config: { project: { registration_ui_url: string } }, params: QueryParams | Promise<QueryParams>): Promise<RegistrationFlow | null | void>;

```

--------------------------------

### Get Server Session

Source: https://github.com/ory/elements/blob/main/packages/nextjs/api-report/nextjs.api.md

Retrieves the current user session from the server. Returns the Session object or null if no session is found.

```TypeScript
import { Session } from '@ory/client-fetch';

export function getServerSession(): Promise<Session | null>;

```

--------------------------------

### Get ORY Verification Flow

Source: https://github.com/ory/elements/blob/main/packages/nextjs/api-report/nextjs.api.md

Retrieves the ORY verification flow. Requires project configuration with the verification UI URL and query parameters. Returns the VerificationFlow object or null.

```TypeScript
import { VerificationFlow } from '@ory/client-fetch';

export type QueryParams = object;

export function getVerificationFlow(config: { project: { verification_ui_url: string } }, params: QueryParams | Promise<QueryParams>): Promise<VerificationFlow | null | void>;

```

--------------------------------

### Migrate Ory Elements CSS Variables

Source: https://github.com/ory/elements/wiki/Guide:-Migrate-to-new-variable-scheme

This CSS snippet helps convert deprecated color variables to the new naming convention in Ory Elements. It covers foreground, background, and border variables for various states and components like buttons.

```css
:root {
  /* light */
  /* color */
  /* foreground */
  --interface-foreground-brand-on-primary: var(--ui-white, #ffffff);
  --interface-foreground-brand-on-secondary: var(--brand-950, #172554);
  --interface-foreground-brand-primary: var(--brand-500, #3b82f6);
  --interface-foreground-brand-secondary: var(--brand-50, #eff6ff);
  --interface-foreground-default-inverted: var(--ui-white, #ffffff);
  --interface-foreground-default-primary: var(--dialog-fg-default);
  --interface-foreground-default-secondary: var(--dialog-fg-subtle);
  --interface-foreground-default-tertiary: var(--dialog-fg-mute);
  --interface-foreground-disabled-disabled: var(--ui-300, #cbd5e1);
  --interface-foreground-disabled-on-disabled: var(--ui-400, #94a3b8);
  --interface-foreground-validation-danger: var(--forms-fg-error);
  --interface-foreground-validation-success: var(--forms-fg-success);
  --interface-foreground-validation-warning: var(--forms-fg-warn);
  /* background */
  --interface-background-brand-primary: var(--brand-500, #3b82f6);
  --interface-background-brand-primary-hover: var(--ui-900, #0f172a);
  --interface-background-brand-secondary: var(--bg-default);
  --interface-background-brand-secondary-hover: var(--brand-100, #dbeafe);
  --interface-background-default-inverted: var(--ui-900, #0f172a);
  --interface-background-default-inverted-hover: var(--ui-800, #1e293b);
  --interface-background-default-none: var(--ui-transparent, #ffffff00);
  --interface-background-default-primary: var(--dialog-bg-default);
  --interface-background-default-primary-hover: var(--forms-bg-hover);
  --interface-background-default-secondary: var(--dialog-bg-subtle, #f8fafc);
  --interface-background-default-secondary-hover: var(--ui-200, #e2e8f0);
  --interface-background-default-tertiary: var(--ui-200, #e2e8f0);
  --interface-background-default-tertiary-hover: var(--ui-300, #cbd5e1);
  --interface-background-disabled-disabled: var(--ui-200, #e2e8f0);
  --interface-background-validation-danger: var(--ui-danger, #ef4444);
  --interface-background-validation-success: var(--ui-success, #22c55e);
  --interface-background-validation-warning: var(--ui-warning, #eab308);
  /* border */
  --interface-border-brand-brand: var(--brand-500, #3b82f6);
  --interface-border-default-inverted: var(--ui-700, #334155);
  --interface-border-default-none: var(--ui-transparent, #ffffff00);
  --interface-border-default-primary: var(--dialog-border-default);
  --interface-border-disabled-disabled: var(--forms-fg-disabled);
  --interface-border-validation-danger: var(--forms-border-error);
  --interface-border-validation-success: var(--forms-border-success);
  --interface-border-validation-warning: var(--forms-border-warn);
  /* buttons */
  /* identifier */
  --button-identifier-background-default: var(--button-identifier-bg-default);
  --button-identifier-background-hover: var(--button-identifier-bg-hover);
  --button-identifier-border-border-default: var(
    --button-identifier-border-default
  );
  --button-identifier-border-border-hover: var(
    --button-identifier-border-hover
  );
  --button-identifier-foreground-default: var(--button-identifier-fg-default);
  --button-identifier-foreground-hover: var(--button-identifier-fg-subtle);
  /* links */
  --button-link-disabled: var(--links-link-disabled);
  --button-link-brand-brand: var(--links-link-default);
  --button-link-brand-brand-hover: var(--links-link-hover);
  --button-link-default-primary: var(--links-link-inverted-default);
  --button-link-default-primary-hover: var(--links-link-inverted-hover);
  --button-link-default-secondary: var(--links-link-mute-default);
  --button-link-default-secondary-hover: var(--links-link-mute-hover);
  /* primary */
  --button-primary-background-default: var(--button-primary-bg-default);
  --button-primary-background-disabled: var(--button-primary-bg-disabled);
  --button-primary-background-hover: var(--button-primary-bg-hover);
  --button-primary-border-default: var(--button-primary-border-default);
  --button-primary-border-disabled: var(--button-primary-border-disabled);
  --button-primary-border-hover: var(--button-primary-border-hover);
  --button-primary-foreground-default: var(--button-primary-fg-default);
  --button-primary-foreground-disabled: var(--button-primary-fg-disabled);
  --button-primary-foreground-hover: var(--button-primary-fg-hover);
  /* secondary */

```

--------------------------------

### Get ORY Logout Flow

Source: https://github.com/ory/elements/blob/main/packages/nextjs/api-report/nextjs.api.md

Initiates the ORY logout flow. Optionally accepts a returnTo URL to redirect after logout. Returns a LogoutFlow object.

```TypeScript
import { LogoutFlow } from '@ory/client-fetch';

export function getLogoutFlow({ returnTo, }?: { returnTo?: string }): Promise<LogoutFlow>;

```

--------------------------------

### Renaming Headless Types to Ory Types

Source: https://github.com/ory/elements/wiki/Advisory:-ory-elements‐react-upgrade-guide-to-v1.0.0‐next.11

This section lists the type renamings from 'Headless*' to 'Ory*' equivalents to align with new naming conventions. It covers various component props and types used within the Ory Elements library.

```TypeScript
type HeadlessButtonProps = OryNodeButtonProps;
type HeadlessInputProps = OryNodeInputProps;
type HeadlessImageProps = OryNodeImageProps;
type HeadlessLabelProps = OryNodeLabelProps;
type HeadlessTextProps = OryNodeTextProps;
type HeadlessLinkButtonProps = OryNodeAnchorProps;
type HeadlessMessageProps = OryMessageContentProps;
type HeadlessMessagesProps = OryMessageRootProps;
type HeadlessFormProps = OryFormRootProps;
type HeadlessGroupProps = OryFormGroupsProps;
type HeadlessGroupContainerProps = OryFormGroupProps;
type HeadlessCurrentIdentifierProps = OryCurrentIdentifierProps;
type HorizontalDividerProps = OryCardDividerProps;
type HeadlessAuthMethodListItemProps = OryCardAuthMethodListItemProps;
type HeadlessSocialButtonProps = OryNodeOidcButtonProps;
type HeadlessSocialButtonContainerProps = OryFormOidcRootProps;
type HeadlessSocialButtonsProps = OryFormOidcButtonsProps;
```

--------------------------------

### Get ORY Login Flow

Source: https://github.com/ory/elements/blob/main/packages/nextjs/api-report/nextjs.api.md

Retrieves the ORY login flow. Requires project configuration with the login UI URL and query parameters. Returns the LoginFlow object or null.

```TypeScript
import { LoginFlow } from '@ory/client-fetch';

export type QueryParams = object;

export function getLoginFlow(config: { project: { login_ui_url: string } }, params: QueryParams | Promise<QueryParams>): Promise<LoginFlow | null | void>;

```

--------------------------------

### Ory Elements Form and Input CSS Variables

Source: https://github.com/ory/elements/wiki/Guide:-Migrate-to-new-variable-scheme

Sets CSS variables for form and input elements, including background and border colors for default and focused states. Input variables also cover disabled and hover states, and define different foreground color variants (primary, secondary, tertiary).

```css
/* form */
  --form-background-default: var(--dialog-bg-default);
  --form-border-default: var(--dialog-border-default);
  /* input */
  --input-background-default: var(--forms-bg-default);
  --input-background-disabled: var(--forms-bg-disabled);
  --input-background-hover: var(--forms-bg-hover);
  --input-border-default: var(--forms-border-default);
  --input-border-disabled: var(--forms-border-disabled);
  --input-border-focus: var(--forms-border-focus);
  --input-border-hover: var(--forms-border-hover);
  --input-foreground-disabled: var(--forms-fg-disabled);
  --input-foreground-primary: var(--forms-fg-default);
  --input-foreground-secondary: var(--forms-fg-subtle);
  --input-foreground-tertiary: var(--forms-fg-mute);
```

--------------------------------

### Get ORY Recovery Flow

Source: https://github.com/ory/elements/blob/main/packages/nextjs/api-report/nextjs.api.md

Retrieves the ORY recovery flow. Requires project configuration with the recovery UI URL and query parameters. Returns the RecoveryFlow object or null.

```TypeScript
import { RecoveryFlow } from '@ory/client-fetch';

export type QueryParams = object;

export function getRecoveryFlow(config: { project: { recovery_ui_url: string } }, params: QueryParams | Promise<QueryParams>): Promise<RecoveryFlow | null | void>;

```

--------------------------------

### Ory Elements Button CSS Variables

Source: https://github.com/ory/elements/wiki/Guide:-Migrate-to-new-variable-scheme

Defines CSS variables for the background, border, and foreground colors of secondary and social buttons in their default, disabled, and hover states. It also includes fallbacks to secondary button styles for social buttons.

```css
--button-secondary-background-default: var(--button-secondary-bg-default);
  --button-secondary-background-disabled: var(--button-secondary-bg-disabled);
  --button-secondary-background-hover: var(--button-secondary-bg-hover);
  --button-secondary-border-default: var(--button-secondary-border-default);
  --button-secondary-border-disabled: var(--button-secondary-border-disabled);
  --button-secondary-border-hover: var(--button-secondary-border-hover);
  --button-secondary-foreground-default: var(--button-secondary-fg-default);
  --button-secondary-foreground-disabled: var(--button-secondary-fg-disabled);
  --button-secondary-foreground-hover: var(--button-secondary-fg-hover);
  /* social */
  --button-social-background-default: var(
    --button-social-bg-default,
    var(--button-secondary-bg-default)
  );
  --button-social-background-disabled: var(
    --button-social-bg-disabled,
    var(--button-secondary-bg-disabled)
  );
  --button-social-background-generic-provider: var(
    --button-social-bg-provider,
    var(--button-secondary-bg-provider)
  );
  --button-social-background-hover: var(
    --button-social-bg-hover,
    var(--button-secondary-bg-hover)
  );
  --button-social-border-default: var(
    --button-social-border-default,
    var(--button-secondary-border-default)
  );
  --button-social-border-disabled: var(
    --button-social-border-disabled,
    var(--button-secondary-border-disabled)
  );
  --button-social-border-generic-provider: var(
    --button-social-border-provider,
    var(--button-secondary-border-provider)
  );
  --button-social-border-hover: var(
    --button-social-border-hover,
    var(--button-secondary-border-hover)
  );
  --button-social-foreground-default: var(
    --button-social-fg-default,
    var(--button-secondary-fg-default)
  );
  --button-social-foreground-disabled: var(
    --button-social-fg-disabled,
    var(--button-secondary-fg-disabled)
  );
  --button-social-foreground-generic-provider: var(
    --button-social-fg-provider,
    var(--button-secondary-fg-provider)
  );
  --button-social-foreground-hover: var(
    --button-social-fg-hover,
    var(--button-secondary-fg-hover)
  );
```

--------------------------------

### Ory Elements Radio CSS Variables

Source: https://github.com/ory/elements/wiki/Guide:-Migrate-to-new-variable-scheme

Defines CSS variables for radio buttons, specifying background and border colors for both checked and default states, as well as foreground colors. These variables are linked to specific form radio variables.

```css
/* radio */
  --radio-background-checked: var(--forms-radio-radio-bg-checked);
  --radio-background-default: var(--forms-radio-radio-bg-default);
  --radio-border-checked: var(--forms-radio-radio-border-checked);
  --radio-border-default: var(--forms-radio-radio-border-default);
  --radio-foreground-checked: var(--forms-radio-radio-fg-checked);
  --radio-foreground-default: var(--forms-radio-radio-fg-default);
```

--------------------------------

### Ory Client and Flow Initialization (TypeScript)

Source: https://github.com/ory/elements/blob/main/packages/elements-react/README.md

Sets up the Ory Frontend API client with a specific configuration and provides a function to initialize registration flows. This includes handling potential errors during flow retrieval and managing validation, restart, and redirect scenarios.

```TypeScript
import {
  Configuration,
  FlowType,
  FrontendApi,
  handleFlowError,
  RegistrationFlow,
} from "@ory/client-fetch"
import { redirect, RedirectType } from "next/navigation"

type QueryParams = {
  flow?: string
}
export function serverClientFrontend() {
  // For testing purposes we're using Ory tunnel

  const config = new Configuration({
    headers: {
      Accept: "application/json",
    },
    basePath: "http://localhost:4000",
  })
  return new FrontendApi(config)
}

export function init(params: QueryParams, flowType: FlowType) {
  // Take advantage of the fact, that Ory handles the flow creation for us and redirects the user to the default return to automatically if they're logged in already.
  return redirect(
    "http://localhost:4000" +
      "/self-service/" +
      flowType.toString() +
      "/browser?" +
      new URLSearchParams(params).toString(),
    RedirectType.replace,
  )
}

export async function getOrCreateRegistrationFlow(params: {
  flow?: string
}): Promise<RegistrationFlow> {
  const onRestartFlow = () => init(params, FlowType.Registration)

  // If flow ID doesn't exist in params simply trigger the init function.
  if (!params.flow) {
    return onRestartFlow()
  }

  return await serverClientFrontend()
    // Pass in the flow ID
    .getRegistrationFlowRaw({ id: params.flow })
    .then((res) => res.value())
    .catch(
      // @ory/client-fetch predefines the handleFlowError function to simplify error handling.
      // You can define what should happen in each of these callbacks
      handleFlowError({
        // Validation errors happen if the user's provided input failed a validation rule (e.g. not an email, etc.)
        onValidationError,
        // Flows can sometimes encounter unrecoverable errors, in that case we need to start a new flow to protect the user.
        // In most cases, it is enough to initialize a new flow.
        onRestartFlow,
        // Sometimes a flow requires a redirect to a different URL/context. For example during OIDC flows.
        // In that case, you can handle the redirect here, for example using your framework's preferred method for redirects.
        onRedirect,
      }),
    )
}

function onValidationError(flow: RegistrationFlow) {
  // handle validation error
}

function onRedirect(url: string, external: boolean) {
  // handle the redirect
}
```

--------------------------------

### Initialize Ory Frontend API Client

Source: https://github.com/ory/elements/blob/main/packages/elements-react/README.md

Demonstrates how to initialize the Ory Frontend API client for use in a React application. It configures the client with necessary headers and a base path, typically for local testing with Ory tunnel.

```typescript
export function serverClientFrontend() {
  // For testing purposes we're using Ory tunnel

  const config = new Configuration({
    headers: {
      Accept: "application/json",
    },
    basePath: "http://localhost:4000",
  })
  return new FrontendApi(config)
}
```

--------------------------------

### Forking and Contributing Workflow (Bash/Git)

Source: https://github.com/ory/elements/blob/main/CONTRIBUTING.md

This snippet demonstrates the standard Git workflow for contributing to a project. It covers cloning the repository, setting up a remote fork, fetching updates, creating a feature branch, making and committing changes, and pushing to the fork.

```bash
git clone git@github.com:ory/ory/elements.git
git remote add fork git@github.com:<YOUR-GITHUB-USERNAME-HERE>/ory/elements.git
git fetch origin
git checkout master
git pull --rebase
git checkout my-feature-branch
git add -A
git commit -a -m "fix: this is the subject line" -m "This is the body line. Closes #123"
git push -u fork my-feature-branch
```

--------------------------------

### Build `@ory/nextjs` Library

Source: https://github.com/ory/elements/blob/main/packages/nextjs/README.md

Builds the `@ory/nextjs` library using Nx. This command compiles the source code into a distributable format.

```bash
nx build @ory/nextjs
```

--------------------------------

### Build Storybook

Source: https://github.com/ory/elements/blob/main/packages/elements-react/DEVELOPMENT.md

Builds the Storybook for @ory/elements-react.

```bash
npx nx build @ory/elements-react
```

--------------------------------

### Run Unit Tests for `@ory/nextjs`

Source: https://github.com/ory/elements/blob/main/packages/nextjs/README.md

Executes the unit tests for the `@ory/nextjs` library using Jest. This command verifies the functionality of the library's components and hooks.

```bash
nx test @ory/nextjs
```

--------------------------------

### Run Unit Tests

Source: https://github.com/ory/elements/blob/main/packages/elements-react/DEVELOPMENT.md

Builds and runs unit tests for @ory/elements-react using nx. Tests utilize Jest and react-testing-library.

```bash
npx nx build @ory/elements-react
```

--------------------------------

### Release @ory/elements-react Package

Source: https://github.com/ory/elements/blob/main/packages/elements-react/DEVELOPMENT.md

Prepares and performs a release for the @ory/elements-react package using nx. Includes a dry-run option.

```shell
npx nx build @ory/elements-react
npx nx release -g elements 1.0.1-rc.0 --dry-run
# if okay:
npx nx release -g elements 1.0.1-rc.0
```

--------------------------------

### Ory Page Header and Provider

Source: https://github.com/ory/elements/blob/main/packages/elements-react/api-report/elements-react.api.md

Provides the Ory page header component and the OryProvider for setting up the Ory context. The provider manages configuration and flow props for the application.

```TypeScript
export const OryPageHeader: () => react_jsx_runtime.JSX.Element;

export type OryPageHeaderProps = Record<never, never>;

export function OryProvider({ children, components: Components, config, ...oryFlowProps }: OryProviderProps): react_jsx_runtime.JSX.Element;

export type OryProviderProps = {
    components: OryFlowComponents;
    config: OryClientConfiguration;
} & OryFlowContainer & PropsWithChildren;
```

--------------------------------

### Release @ory/nextjs Package

Source: https://github.com/ory/elements/blob/main/packages/elements-react/DEVELOPMENT.md

Prepares and performs a release for the @ory/nextjs package using nx. Includes a dry-run option.

```shell
npx nx build @ory/nextjs
npx nx release -g nextjs 1.0.1-rc.0 --dry-run
# if okay:
npx nx release -g nextjs 1.0.1-rc.0
```

--------------------------------

### Initialize Ory Flow (TypeScript)

Source: https://github.com/ory/elements/blob/main/packages/elements-react/README.md

Initializes a new Ory flow by redirecting the user to the appropriate flow URL. This function leverages Ory's built-in flow creation and handles automatic redirection for logged-in users. It requires query parameters and a flow type.

```TypeScript
export function init(params: QueryParams, flowType: FlowType) {
  // Take advantage of the fact, that Ory handles the flow creation for us and redirects the user to the default return to automatically if they're logged in already.
  return redirect(
    "http://localhost:4000" +
      "/self-service/" +
      flowType.toString() +
      "/browser?" +
      new URLSearchParams(params).toString(),
    RedirectType.replace,
  )
}
```

--------------------------------

### Function to Get Ory Components

Source: https://github.com/ory/elements/blob/main/packages/elements-react/api-report/elements-react-theme.api.md

A utility function that returns Ory flow components, optionally accepting overrides for customization. This helps in managing and applying custom UI elements within Ory flows.

```TypeScript
// @public
export function getOryComponents(overrides?: OryFlowComponentOverrides): OryFlowComponents;

```

--------------------------------

### Get ORY Flow Factory

Source: https://github.com/ory/elements/blob/main/packages/nextjs/api-report/nextjs.api.md

A factory function to retrieve ORY flows, supporting various flow types. It requires query parameters, a fetch function for raw API responses, the flow type, base URL, and route.

```TypeScript
import { ApiResponse } from '@ory/client-fetch';
import { FlowType } from '@ory/client-fetch';

export type QueryParams = object;

export function getFlowFactory<T extends object>(params: QueryParams, fetchFlowRaw: () => Promise<ApiResponse<T>>, flowType: FlowType, baseUrl: string, route: string, options?: { disableRewrite?: boolean }): Promise<T | null | void>;

```

--------------------------------

### SessionProvider Component

Source: https://github.com/ory/elements/blob/main/packages/elements-react/api-report/elements-react-client.api.md

A React component that provides session information to its children. It accepts an initial session, children components, and an optional base URL.

```TypeScript
import * as react_jsx_runtime from 'react/jsx-runtime';
import { Session } from '@ory/client-fetch';

// @public
export function SessionProvider({ session: initialSession, children, baseUrl, }: SessionProviderProps): react_jsx_runtime.JSX.Element;

```

--------------------------------

### Use Ory Configuration Hook

Source: https://github.com/ory/elements/blob/main/packages/elements-react/api-report/elements-react.api.md

Retrieves the Ory Elements configuration. This hook is used to access global settings and configurations for Ory Elements.

```TypeScript
export function useOryConfiguration(): OryElementsConfiguration;
```

--------------------------------

### Ory Elements Checkbox CSS Variables

Source: https://github.com/ory/elements/wiki/Guide:-Migrate-to-new-variable-scheme

Defines CSS variables for the background and border colors of checkboxes in both checked and default states, as well as foreground colors for checked and default states. These variables reference specific form checkbox variables.

```css
--checkbox-background-checked: var(--forms-checkbox-checkbox-bg-checked);
  --checkbox-background-default: var(--forms-checkbox-checkbox-bg-default);
  --checkbox-border-checkbox-border-checked: var(
    --forms-checkbox-checkbox-border-checked
  );
  --checkbox-border-checkbox-border-default: var(
    --forms-checkbox-checkbox-border-default
  );
  --checkbox-foreground-checked: var(--forms-checkbox-checkbox-fg-checked);
  --checkbox-foreground-default: var(--forms-checkbox-checkbox-fg-default);
```

--------------------------------

### Ory Settings Components Props

Source: https://github.com/ory/elements/blob/main/packages/elements-react/api-report/elements-react.api.md

Defines the props for various Ory settings components, including passkey, recovery codes, SSO, TOTP, and WebAuthn. These types specify the data and callbacks required for each setting.

```TypeScript
export type OrySettingsPasskeyProps = {
    triggerButton: UiNode & {
        onClick: () => void;
    };
    removeButtons: (UiNode & {
        onClick: () => void;
    })[];
};

export type OrySettingsRecoveryCodesProps = {
    codes: string[];
    regnerateButton: UiNode | undefined;
    revealButton: UiNode | undefined;
    onRegenerate: () => void;
    onReveal: () => void;
};

export type OrySettingsSsoProps = {
    linkButtons: (UiNode & {
        onClick: () => void;
    })[];
    unlinkButtons: (UiNode & {
        onClick: () => void;
    })[];
};

export type OrySettingsTotpProps = {
    totpImage: UiNode | undefined;
    totpSecret: UiNode | undefined;
    totpInput: UiNode | undefined;
    totpUnlink: UiNode | undefined;
    onUnlink: () => void;
};

export type OrySettingsWebauthnProps = {
    nameInput: UiNode;
    triggerButton: UiNode & {
        onClick: () => void;
    };
    removeButtons: (UiNode & {
        onClick: () => void;
    })[];
};
```

--------------------------------

### Create ORY Middleware for Next.js

Source: https://github.com/ory/elements/blob/main/packages/nextjs/api-report/nextjs.api.md

Creates a middleware function for Next.js applications to handle ORY flows. It accepts options to configure header forwarding and cookie domains.

```TypeScript
import { AccountExperienceConfiguration } from '@ory/client-fetch';
import { NextRequest } from 'next/server';
import { NextResponse } from 'next/server';

export type OryMiddlewareOptions = {
    forwardAdditionalHeaders?: string[];
    forceCookieDomain?: string;
    project?: Partial<AccountExperienceConfiguration>;
};

export function createOryMiddleware(options: OryMiddlewareOptions): (r: NextRequest) => Promise<NextResponse<unknown>>;

```

--------------------------------

### OryCard Components

Source: https://github.com/ory/elements/blob/main/packages/elements-react/api-report/elements-react.api.md

Defines the structure and props for various OryCard components, including Root, Footer, Header, Content, Logo, Divider, AuthMethodListContainer, AuthMethodListItem, SettingsSection, SettingsSectionContent, and SettingsSectionFooter. These components are used to build card-like UI elements for displaying information and user interactions.

```TypeScript
export function OryCardFooter(): react_jsx_runtime.JSX.Element;
export type OryCardFooterProps = Record<string, never>;
export function OryCardHeader(): react_jsx_runtime.JSX.Element;
export type OryCardHeaderProps = Record<string, never>;
export type OryCardLogoProps = Record<string, never>;
export type OryCardProps = PropsWithChildren;
export interface OryCardSettingsSectionProps extends PropsWithChildren {
    action: string;
    method: string;
    onSubmit: FormEventHandler<HTMLFormElement>;
}
export function OryCardValidationMessages({ hiddenMessageIds, }: OryCardValidationMessagesProps): react_jsx_runtime.JSX.Element | null;
export interface OryCardValidationMessagesProps {
    hiddenMessageIds?: number[];
}
```

--------------------------------

### Format UI Text Utility

Source: https://github.com/ory/elements/blob/main/packages/elements-react/api-report/elements-react.api.md

A utility function to format UI text objects into human-readable strings using internationalization context. It takes a UiText object and an IntlShape to provide localized messages.

```TypeScript
export const uiTextToFormattedMessage: ({ id, context, text }: Omit<UiText, "type">, intl: IntlShape) => string;
```

--------------------------------

### Ory Elements Form and Input CSS Variables

Source: https://github.com/ory/elements/blob/main/packages/elements-react/README.md

Provides CSS variables for form and input elements, covering default and disabled states for background and border, as well as focus and hover states for borders. It also defines foreground colors for different input states.

```CSS
--form-background-default: var(--interface-background-default-primary);
  --form-border-default: var(--interface-border-default-primary);
  --input-background-default: var(--interface-background-default-primary);
  --input-background-disabled: var(--interface-background-disabled-disabled);
  --input-background-hover: var(--interface-background-default-primary-hover);
  --input-border-default: var(--interface-border-default-primary);
  --input-border-disabled: var(--interface-border-disabled-disabled);
  --input-border-focus: var(--interface-border-brand-brand);
  --input-border-hover: var(--interface-border-default-primary);
  --input-foreground-disabled: var(--interface-foreground-disabled-on-disabled);
  --input-foreground-primary: var(--interface-foreground-default-primary);
  --input-foreground-secondary: var(--interface-foreground-default-secondary);
  --input-foreground-tertiary: var(--interface-foreground-default-tertiary);
```

--------------------------------

### Settings Component and Props

Source: https://github.com/ory/elements/blob/main/packages/elements-react/api-report/elements-react-theme.api.md

Introduces the `Settings` component and its props type `SettingsFlowContextProps`. This component is designed for managing user settings, requiring flow information, configuration, and allowing for custom component overrides.

```TypeScript
export function Settings({ flow, config, children, components: flowOverrideComponents, }: SettingsFlowContextProps): react_jsx_runtime.JSX.Element;

export type SettingsFlowContextProps = {
    flow: SettingsFlow;
    components?: OryFlowComponentOverrides;
    config: OryClientConfiguration;
    children?: React.ReactNode;
};
```

--------------------------------

### Include Ory Elements Default Styles (TypeScript)

Source: https://github.com/ory/elements/blob/main/packages/elements-react/README.md

Imports the default CSS styles for Ory Elements, ensuring consistent styling across the application. This import should be included on all pages that utilize Ory Elements components.

```TypeScript
import "@ory/elements-react/theme/styles.css"
```

--------------------------------

### React Default Card Components for Ory

Source: https://github.com/ory/elements/blob/main/packages/elements-react/api-report/elements-react-theme.api.md

Provides default React components for rendering cards in Ory flows, including a root card, content, footer, header, and logo. These components structure the UI for various Ory screens.

```TypeScript
// @public
export function DefaultCard({ children }: OryCardRootProps): react_jsx_runtime.JSX.Element;

// @public
export function DefaultCardContent({ children }: OryCardContentProps): react.ReactNode;

// @public
export function DefaultCardFooter(): react_jsx_runtime.JSX.Element | null;

// @public
export function DefaultCardHeader(): react_jsx_runtime.JSX.Element;

// @public
export function DefaultCardLogo(): react_jsx_runtime.JSX.Element;

```

--------------------------------

### SessionContextData Type Definition

Source: https://github.com/ory/elements/blob/main/packages/elements-react/api-report/elements-react-client.api.md

Defines the structure of the session context data, including loading state, initialization status, session object, error, and a refetch function.

```TypeScript
import * as react_jsx_runtime from 'react/jsx-runtime';
import { Session } from '@ory/client-fetch';

// @public
export type SessionContextData = {
    isLoading: boolean;
    initialized: boolean;
    session: Session | null;
    error: Error | undefined;
    refetch: () => Promise<void>;
};

```

--------------------------------

### React Consent Component for Ory Flows

Source: https://github.com/ory/elements/blob/main/packages/elements-react/api-report/elements-react-theme.api.md

Provides the main React component for rendering the Ory Consent screen. It accepts consent challenge details, session information, configuration, and optional component overrides. Dependencies include React and Ory client fetch types.

```TypeScript
import { AccountExperienceConfiguration } from '@ory/client-fetch';
import { ComponentPropsWithoutRef } from 'react';
import { ComponentType } from 'react';
import { ConfigurationParameters } from '@ory/client-fetch';
import { ElementType } from 'react';
import { FlowError } from '@ory/client-fetch';
import { FormEventHandler } from 'react';
import { GenericError } from '@ory/client-fetch';
import { LoginFlow } from '@ory/client-fetch';
import { MouseEventHandler } from 'react';
import { OAuth2ConsentRequest } from '@ory/client-fetch';
import { PropsWithChildren } from 'react';
import * as react from 'react';
import * as react_jsx_runtime from 'react/jsx-runtime';
import { RecoveryFlow } from '@ory/client-fetch';
import { RegistrationFlow } from '@ory/client-fetch';
import { Session } from '@ory/client-fetch';
import { SettingsFlow } from '@ory/client-fetch';
import { UiNode } from '@ory/client-fetch';
import { UiNodeAnchorAttributes } from '@ory/client-fetch';
import { UiNodeImageAttributes } from '@ory/client-fetch';
import { UiNodeInputAttributes } from '@ory/client-fetch';
import { UiNodeTextAttributes } from '@ory/client-fetch';
import { UiText } from '@ory/client-fetch';
import { VariantProps } from 'class-variance-authority';
import { VerificationFlow } from '@ory/client-fetch';

// @public
export function Consent({ consentChallenge, session, config, components: Passed, children, csrfToken, formActionUrl, }: ConsentFlowProps): react_jsx_runtime.JSX.Element;

// @public
export type ConsentFlowProps = {
    consentChallenge: OAuth2ConsentRequest;
    session: Session;
    config: OryClientConfiguration;
    csrfToken: string;
    formActionUrl: string;
    components?: OryFlowComponentOverrides;
    children?: React.ReactNode;
};

```

--------------------------------

### Registration Component and Props

Source: https://github.com/ory/elements/blob/main/packages/elements-react/api-report/elements-react-theme.api.md

Defines the `Registration` component and its props type `RegistrationFlowContextProps`. This component facilitates user registration, taking flow details, configuration, and optional component overrides as input.

```TypeScript
export function Registration({ flow, children, components: flowOverrideComponents, config, }: RegistrationFlowContextProps): react_jsx_runtime.JSX.Element;
```