@ory/elements-react 1.0.0-next.2 → 1.0.0-next.21

package/.vscode/i18n-ally-reviews.yml

@@ -0,0 +1,3 @@
+# Review comments generated by i18n-ally. Please commit this file.
+
+{}

package/.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "i18n-ally.localesPaths": ["src/locales", "src/util/i18n"],
+  "i18n-ally.keystyle": "flat"
+}

package/CHANGELOG.md

@@ -0,0 +1,303 @@
+## 1.0.0-next.21 (2025-01-18)
+
+This was a version bump only for @ory/elements-react to align it with other projects, there were no code changes.
+
+## 1.0.0-next.20 (2025-01-16)
+
+### 🚀 Features
+
+- handle state transition edge cases ([f2e4023](https://github.com/ory/elements/commit/f2e4023))
+- user experience improvements and e2e test coverage ([f68744c](https://github.com/ory/elements/commit/f68744c))
+- do not show two-step selector if only one method exists ([6453673](https://github.com/ory/elements/commit/6453673))
+
+### 🩹 Fixes
+
+- better validation for code method ([b0d8e2c](https://github.com/ory/elements/commit/b0d8e2c))
+
+### ❤️  Thank You
+
+- aeneasr @aeneasr
+
+## 1.0.0-next.19 (2024-12-31)
+
+### 🩹 Fixes
+
+- properly handle form submits in settings flow ([#322](https://github.com/ory/elements/pull/322))
+
+### ❤️  Thank You
+
+- Jonas Hungershausen
+
+## 1.0.0-next.18 (2024-12-30)
+
+### 🚀 Features
+
+- add page and app router examples ([#307](https://github.com/ory/elements/pull/307))
+- ⚠️  add getServerSession and SessionProvider ([#309](https://github.com/ory/elements/pull/309))
+- add @ory/nextjs package ([#303](https://github.com/ory/elements/pull/303))
+
+### 🩹 Fixes
+
+- align font sizes to design & use updated variable names ([#318](https://github.com/ory/elements/pull/318))
+- properly set default value for checkboxes ([#314](https://github.com/ory/elements/pull/314))
+- passkey and webauthn in settings flow ([#317](https://github.com/ory/elements/pull/317))
+
+### ⚠️  Breaking Changes
+
+- ⚠️  add getServerSession and SessionProvider ([#309](https://github.com/ory/elements/pull/309))
+
+### ❤️  Thank You
+
+- hackerman @aeneasr
+- Jonas Hungershausen
+
+## 1.0.0-next.17 (2024-11-27)
+
+
+### 🚀 Features
+
+- allow overriding OIDC logos
+
+- enable proper account linking flows
+
+- **core:** add react-hook form resolver
+
+
+### 🩹 Fixes
+
+- handle recovery brute force protection
+
+
+### ❤️  Thank You
+
+- Jonas Hungershausen
+
+## 1.0.0-next.16 (2024-11-26)
+
+
+### 🚀 Features
+
+- allow overriding of field messages
+
+- add test ids to components
+
+
+### 🩹 Fixes
+
+- use --font-sans CSS variable for font
+
+- registration & login flow form states
+
+- missing resend button on login & registration
+
+- password validation error form state
+
+- current identifier button overflowing on long values
+
+
+### ❤️  Thank You
+
+- Jonas Hungershausen
+
+## 1.0.0-next.15 (2024-11-18)
+
+
+### 🩹 Fixes
+
+- use --font-sans CSS variable for font
+
+- registration & login flow form states
+
+
+### ❤️  Thank You
+
+- Jonas Hungershausen
+
+## 1.0.0-next.14 (2024-11-08)
+
+
+### 🚀 Features
+
+- force OIDC account selection on settings
+
+
+### 🩹 Fixes
+
+- redirect to login if session expired during settings
+
+
+### ❤️  Thank You
+
+- Jonas Hungershausen
+
+## 1.0.0-next.13 (2024-11-05)
+
+
+### 🩹 Fixes
+
+- ⚠️  move useSession hook to /client entry point
+
+- oidc linking & unlinking form properties
+
+- hide two step registration message
+
+- implement component merging instead of usign lodash
+
+- replace translation merge with custom function
+
+
+#### ⚠️  Breaking Changes
+
+- ⚠️  move useSession hook to /client entry point
+
+### ❤️  Thank You
+
+- Jonas Hungershausen
+
+## 1.0.0-next.12 (2024-10-29)
+
+
+### 🚀 Features
+
+- add elements v1 packages
+
+- add useSession hook
+
+- add page header component with user menu
+
+- support links in checkbox/boolean nodes
+
+- add settings flow components
+
+
+### 🩹 Fixes
+
+- use correct node to detect two step registration
+
+- use translations in more missing places
+
+- short-circuit code login on two step card
+
+- duplicate resend button on recovery & verification
+
+
+### ❤️  Thank You
+
+- Jonas Hungershausen
+- Miłosz
+
+## 1.0.0-next.11 (2024-10-22)
+
+Breaking Changes: This update includes breaking changes to the naming of some variables and functions. Please refer to [Advisory: ory elements‐react upgrade guide to v1.0.0‐next.11](https://github.com/ory/elements/wiki/Advisory:-ory-elements%E2%80%90react-upgrade-guide-to-v1.0.0%E2%80%90next.11) for more information.
+
+
+### 🚀 Features
+
+- add elements v1 packages
+
+- add useSession hook
+
+### ❤️  Thank You
+
+- Jonas Hungershausen
+
+## 1.0.0-next.10 (2024-10-14)
+
+
+### 🩹 Fixes
+
+- add missing translations in all places
+
+
+### ❤️  Thank You
+
+- Jonas Hungershausen
+
+## 1.0.0-next.9 (2024-10-10)
+
+
+### 🩹 Fixes
+
+- add missing swedish translations
+
+
+### ❤️  Thank You
+
+- Jonas Hungershausen
+
+## 1.0.0-next.8 (2024-10-07)
+
+
+### 🩹 Fixes
+
+- ⚠️  remove ory-default-theme class
+
+- remove capitalize class from messages
+
+
+#### ⚠️  Breaking Changes
+
+- ⚠️  remove ory-default-theme class
+
+### ❤️  Thank You
+
+- Jonas Hungershausen
+
+## 1.0.0-next.7 (2024-09-27)
+
+### 🚀 Features
+
+- add two-step login card
+
+### 🩹 Fixes
+
+- registration text in swedish translation
+
+- show identifier_first node in card header
+
+### ❤️ Thank You
+
+- Jonas Hungershausen
+
+## 1.0.0-next.6 (2024-09-18)
+
+### 🩹 Fixes
+
+- **intl:** export locales object from package root
+
+### ❤️ Thank You
+
+- Jonas Hungershausen
+
+## 1.0.0-next.5 (2024-09-17)
+
+### 🚀 Features
+
+- @testing-library/react based tests
+
+- **theme:** show resend code button on top of code input
+
+### 🩹 Fixes
+
+- **core:** use SDK instead of HTML form submissions
+
+- **core:** use empty strings instead of undefined default values
+
+- **core:** code form submission precendence
+
+- ⚠️ **theme:** scope css classes with .ory-default-theme
+
+- **theme:** social sign in button styling
+
+- **intl:** use correct abbreveation for swedish locale
+
+- **core:** passkey script discovery
+
+#### ⚠️ Breaking Changes
+
+- ⚠️ **theme:** scope css classes with .ory-default-theme
+
+### ❤️ Thank You
+
+- Jonas Hungershausen
+- Miłosz

package/README.md

@@ -6,18 +6,190 @@
 
 # @ory/elements-react
 
----
+<p align="center">
+<a aria-label="NPM Version" href="https://www.npmjs.com/package/@ory/elements-react">
+<img src="https://img.shields.io/npm/v/@ory/elements-react.svg?style=flat-square">
+</a>
+<a aria-label="License" href="https://github.com/ory/elements/blob/main/LICENSE">
+<img src="https://img.shields.io/github/license/ory/elements?style=flat-square">
+</a>
+<a aria-label="Join Ory Slack community!" href="https://slack.ory.sh/">
+<img src="https://img.shields.io/badge/Slack-Join%20the%20community!-4f46e5?style=flat-square&logo=slack&logoColor=eef2ff">
+</a>
+</p>
 
-Ory Elements is a collection of components and functions that help you get an
-authentication solution up, running and integrated into your application in no
-time.
+Ory Elements is a set of components and functions tailored for easy integration
+of Ory into your React application. It simplifies the process of adding
+authentication and other identity features to your application using the Ory
+Network.
 
-- Documentation: https://ory.sh/docs
+## Documentation
 
-## Usage
+Visit https://ory.sh/docs to see the full Ory documentation.
+
+## Getting started
 
-Install the package:
+**Requirements**
+
+- React `>= 18`
+- Node.js `>= 18`
+- **`@ory/client-fetch`** - fetch based version of ory client
+
+**Installation**
 
 ```sh
 npm install @ory/elements-react
 ```
+
+## Usage
+
+Ory Elements provides components that can aggregate flow objects and display
+user authentication flows based on the data.
+
+To feed Ory Elements with flow data you need to use Ory client.
+
+```ts
+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)
+}
+```
+
+### Ory Network project setup
+
+The Ory Identities APIs come with the ability to specify custom UI URLs. To make
+sure, Ory knows about your custom UI, specify the URLs of your application on
+https://console.ory.sh/projects/current/ui.
+
+### Initializing a new flow
+
+Initializing a new flow is done by navigating the user's page to the initialize
+flow URL. After creating a new flow object, Ory will return a redirect to the
+flow UI URL and, in some cases, return anti-CSRF cookies.
+
+```ts
+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,
+  )
+}
+```
+
+**FlowType** can be: `login`, `registration`, `recovery`, `verification`,
+`settings` or `error`
+
+To access & render the flow, on your flow page, you can use the `flow` query
+parameter, that is included in the redirect. Use it to call the
+[`getLoginFlow()`](https://www.ory.sh/docs/reference/api#tag/frontend/operation/getLoginFlow)
+API.
+
+**Full Example**:
+
+````ts
+export async function getOrCreateRegistrationFlow(
+  params: QueryParams
+): Promise<RegistrationFlow> {
+  const onRestartFlow = () => init(params, FlowType.Registration);
+
+  // If flow ID doesn't exist in params simply trigget the init function.
+  if (!params.flow) {
+    return onRestartFlow();
+  }
+
+  return await serverClientFrontend()
+    // Passing the flow ID
+    .getRegistrationFlowRaw({ id: flow })
+    .then(res => res.value())
+    .catch(
+      // Ory Elements predefines the handleFlowError function to simplify error handling.
+      // You can define what should happen in each of these callbacks
+      handleFlowError({
+        onValidationError,
+        onRestartFlow,
+        onRedirect,
+      })
+    );
+    ```
+````
+
+As soon as we have our flow data we can render the `<Registration/>` component
+from `@ory/elements-react` package.
+
+```tsx
+export default async function RegistrationPage({ searchParams }: PageProps) {
+  const flow = await getOrCreateRegistrationFlow(searchParams)
+
+  if (!flow) {
+    return <div>Flow not found</div>
+  }
+
+  return (
+    <Registration
+      flow={flow}
+      config={oryConfiguration}
+      components={ComponentOverrides}
+    />
+  )
+}
+```
+
+### Styling
+
+To include the default styles, add the following import to your app. Make sure
+it's included on all pages, that use Ory Elements.
+
+```ts
+import "@ory/elements-react/theme/styles.css"
+```
+
+### Theming
+
+Most styling can be overwritten, by providing your own custom CSS variables:
+
+```css
+:root {
+  /* To override the text color of the primary buttons */
+  --button-primary-fg-default: #fffeee;
+}
+```
+
+## Package development
+
+To develop and use the package `npm link` is recommended. To run the package in
+watch mode use
+
+```
+npx nx run @ory/elements-react:dev
+```
+
+### Testing
+
+To run the tests use
+
+```
+nx lint @ory/elements-react
+nx test @ory/elements-react
+```
+
+#### Test selectors
+
+To select elements use a `data-testid` selector. Nomenclature mandates `/` as
+separators and a prefix of `ory/`:
+
+- `ory/form/` is the prefix for form elements;
+- `ory/screen/` is the prefix for elements on specific screens;
+- `ory/screen/` is the prefix for translatable messages (e.g. validation
+  errors).