@ory/elements-react 1.0.0-next.16 → 1.0.0-next.18

package/CHANGELOG.md

@@ -1,3 +1,47 @@
+## 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)
 
 

package/api-report/elements-react-client.api.json

@@ -173,53 +173,181 @@
       "preserveMemberOrder": false,
       "members": [
         {
-          "kind": "Function",
-          "canonicalReference": "@ory/elements-react!useSession:function(1)",
-          "docComment": "/**\n * A hook to get the current session from the Ory Network.\n *\n * Usage:\n * ```ts\n * const { session, error, isLoading } = useSession()\n * ```\n *\n * @returns The current session, error and loading state.\n */\n",
+          "kind": "TypeAlias",
+          "canonicalReference": "@ory/elements-react!SessionContextData:type",
+          "docComment": "",
           "excerptTokens": [
             {
               "kind": "Content",
-              "text": "useSession: (config?: "
+              "text": "type SessionContextData = "
             },
             {
               "kind": "Content",
-              "text": "{\n    sdk: {\n        url: string;\n    };\n}"
+              "text": "{\n    isLoading: boolean;\n    initialized: boolean;\n    session: "
+            },
+            {
+              "kind": "Reference",
+              "text": "Session",
+              "canonicalReference": "@ory/client-fetch!Session:interface"
             },
             {
               "kind": "Content",
-              "text": ") => "
+              "text": " | null;\n    error: "
+            },
+            {
+              "kind": "Reference",
+              "text": "Error",
+              "canonicalReference": "!Error:interface"
             },
             {
               "kind": "Content",
-              "text": "{\n    session: "
+              "text": " | undefined;\n    refetch: () => "
             },
             {
               "kind": "Reference",
-              "text": "Session",
-              "canonicalReference": "@ory/client-fetch!Session:interface"
+              "text": "Promise",
+              "canonicalReference": "!Promise:interface"
+            },
+            {
+              "kind": "Content",
+              "text": "<void>;\n}"
             },
             {
               "kind": "Content",
-              "text": " | undefined;\n    error: string | undefined;\n    isLoading: boolean;\n}"
+              "text": ";"
             }
           ],
-          "fileUrlPath": "dist/client/useSession.d.ts",
+          "fileUrlPath": "dist/client/session-provider.d.ts",
+          "releaseTag": "Public",
+          "name": "SessionContextData",
+          "typeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 8
+          }
+        },
+        {
+          "kind": "Function",
+          "canonicalReference": "@ory/elements-react!SessionProvider:function(1)",
+          "docComment": "/**\n * A provider that fetches the session from the Ory Network and provides it to the children.\n *\n * To use this provider, wrap your application in it:\n * ```tsx\n * import { SessionProvider } from \"@ory/elements-react\"\n *\n * export default function App() {\n *   return (\n *     <SessionProvider>\n *       <MyApp />\n *     </SessionProvider>\n *   )\n * }\n * ```\n *\n * If you have a session from the server, you can pass it to the provider:\n * ```tsx\n * <SessionProvider session={serverSession}>\n * ```\n *\n * @param props - The provider props\n *\n * @see\n *\n * {@link useSession}\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "declare function SessionProvider({ "
+            },
+            {
+              "kind": "Reference",
+              "text": "session",
+              "canonicalReference": "@ory/elements-react!~__type#session"
+            },
+            {
+              "kind": "Content",
+              "text": ": initialSession, children, baseUrl, }: "
+            },
+            {
+              "kind": "Reference",
+              "text": "SessionProviderProps",
+              "canonicalReference": "@ory/elements-react!SessionProviderProps:type"
+            },
+            {
+              "kind": "Content",
+              "text": "): "
+            },
+            {
+              "kind": "Reference",
+              "text": "react_jsx_runtime.JSX.Element",
+              "canonicalReference": "@types/react!JSX.Element:interface"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "fileUrlPath": "dist/client/session-provider.d.ts",
           "returnTypeTokenRange": {
-            "startIndex": 3,
+            "startIndex": 5,
             "endIndex": 6
           },
           "releaseTag": "Public",
           "overloadIndex": 1,
           "parameters": [
             {
-              "parameterName": "config",
+              "parameterName": "{ session: initialSession, children, baseUrl, }",
               "parameterTypeTokenRange": {
-                "startIndex": 1,
-                "endIndex": 2
+                "startIndex": 3,
+                "endIndex": 4
               },
-              "isOptional": true
+              "isOptional": false
+            }
+          ],
+          "name": "SessionProvider"
+        },
+        {
+          "kind": "TypeAlias",
+          "canonicalReference": "@ory/elements-react!SessionProviderProps:type",
+          "docComment": "",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "type SessionProviderProps = "
+            },
+            {
+              "kind": "Content",
+              "text": "{\n    session?: "
+            },
+            {
+              "kind": "Reference",
+              "text": "Session",
+              "canonicalReference": "@ory/client-fetch!Session:interface"
+            },
+            {
+              "kind": "Content",
+              "text": " | null;\n    baseUrl?: string;\n} & "
+            },
+            {
+              "kind": "Reference",
+              "text": "React.PropsWithChildren",
+              "canonicalReference": "@types/react!React.PropsWithChildren:type"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "fileUrlPath": "dist/client/session-provider.d.ts",
+          "releaseTag": "Public",
+          "name": "SessionProviderProps",
+          "typeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 5
+          }
+        },
+        {
+          "kind": "Function",
+          "canonicalReference": "@ory/elements-react!useSession:function(1)",
+          "docComment": "/**\n * A hook to get the current session from the Ory Network.\n *\n * Usage:\n * ```ts\n * const session = useSession()\n *\n * if (session.state == \"loading\") {\n *  return <div>Loading...</div>\n * }\n *\n * if (session.state == \"authenticated\") {\n *  return <div>Session: {session.session.id}</div>\n * }\n * ```\n *\n * :::note This is a client-side hook and must be used within a React component. On the server, you can use the getServerSession function from `@ory/nextjs` and hydrate SessionProvider with the session. :::\n *\n * @returns The current session, and error or loading state.\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "declare function useSession(): "
+            },
+            {
+              "kind": "Reference",
+              "text": "SessionContextData",
+              "canonicalReference": "@ory/elements-react!SessionContextData:type"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
             }
           ],
+          "fileUrlPath": "dist/client/useSession.d.ts",
+          "returnTypeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 2
+          },
+          "releaseTag": "Public",
+          "overloadIndex": 1,
+          "parameters": [],
           "name": "useSession"
         }
       ]

package/api-report/elements-react-client.api.md

@@ -4,19 +4,30 @@
 
 ```ts
 
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Session } from '@ory/client-fetch';
 
-// @public
-export const useSession: (config?: {
-    sdk: {
-        url: string;
-    };
-}) => {
-    session: Session | undefined;
-    error: string | undefined;
+// @public (undocumented)
+export type SessionContextData = {
     isLoading: boolean;
+    initialized: boolean;
+    session: Session | null;
+    error: Error | undefined;
+    refetch: () => Promise<void>;
 };
 
+// @public
+export function SessionProvider({ session: initialSession, children, baseUrl, }: SessionProviderProps): react_jsx_runtime.JSX.Element;
+
+// @public (undocumented)
+export type SessionProviderProps = {
+    session?: Session | null;
+    baseUrl?: string;
+} & React.PropsWithChildren;
+
+// @public
+export function useSession(): SessionContextData;
+
 // (No @packageDocumentation comment for this package)
 
 ```

package/api-report/elements-react-theme.api.json

@@ -172,6 +172,156 @@
       "name": "",
       "preserveMemberOrder": false,
       "members": [
+        {
+          "kind": "Function",
+          "canonicalReference": "@ory/elements-react!DefaultButtonSocial:function(1)",
+          "docComment": "",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "declare function DefaultButtonSocial({ attributes, node, onClick, "
+            },
+            {
+              "kind": "Reference",
+              "text": "showLabel",
+              "canonicalReference": "@ory/elements-react!~__type#showLabel"
+            },
+            {
+              "kind": "Content",
+              "text": ": _showLabel, "
+            },
+            {
+              "kind": "Reference",
+              "text": "logos",
+              "canonicalReference": "@ory/elements-react!~__type#logos"
+            },
+            {
+              "kind": "Content",
+              "text": ": providedLogos, }: "
+            },
+            {
+              "kind": "Reference",
+              "text": "DefaultSocialButtonProps",
+              "canonicalReference": "@ory/elements-react!~DefaultSocialButtonProps:type"
+            },
+            {
+              "kind": "Content",
+              "text": "): "
+            },
+            {
+              "kind": "Reference",
+              "text": "react_jsx_runtime.JSX.Element",
+              "canonicalReference": "@types/react!JSX.Element:interface"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "fileUrlPath": "dist/theme/default/index.d.ts",
+          "returnTypeTokenRange": {
+            "startIndex": 7,
+            "endIndex": 8
+          },
+          "releaseTag": "Public",
+          "overloadIndex": 1,
+          "parameters": [
+            {
+              "parameterName": "{ attributes, node, onClick, showLabel: _showLabel, logos: providedLogos, }",
+              "parameterTypeTokenRange": {
+                "startIndex": 5,
+                "endIndex": 6
+              },
+              "isOptional": false
+            }
+          ],
+          "name": "DefaultButtonSocial"
+        },
+        {
+          "kind": "Namespace",
+          "canonicalReference": "@ory/elements-react!DefaultButtonSocial:namespace",
+          "docComment": "",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "declare namespace DefaultButtonSocial "
+            }
+          ],
+          "fileUrlPath": "dist/theme/default/index.d.ts",
+          "releaseTag": "Public",
+          "name": "DefaultButtonSocial",
+          "preserveMemberOrder": false,
+          "members": [
+            {
+              "kind": "Function",
+              "canonicalReference": "@ory/elements-react!DefaultButtonSocial.WithLogos:function(1)",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "WithLogos: (logos: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "Record",
+                  "canonicalReference": "!Record:type"
+                },
+                {
+                  "kind": "Content",
+                  "text": "<string, "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "ElementType",
+                  "canonicalReference": "@types/react!React.ElementType:type"
+                },
+                {
+                  "kind": "Content",
+                  "text": ">"
+                },
+                {
+                  "kind": "Content",
+                  "text": ") => "
+                },
+                {
+                  "kind": "Content",
+                  "text": "(props: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "DefaultSocialButtonProps",
+                  "canonicalReference": "@ory/elements-react!~DefaultSocialButtonProps:type"
+                },
+                {
+                  "kind": "Content",
+                  "text": ") => "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "react_jsx_runtime.JSX.Element",
+                  "canonicalReference": "@types/react!JSX.Element:interface"
+                }
+              ],
+              "returnTypeTokenRange": {
+                "startIndex": 6,
+                "endIndex": 10
+              },
+              "releaseTag": "Public",
+              "overloadIndex": 1,
+              "parameters": [
+                {
+                  "parameterName": "logos",
+                  "parameterTypeTokenRange": {
+                    "startIndex": 1,
+                    "endIndex": 5
+                  },
+                  "isOptional": false
+                }
+              ],
+              "name": "WithLogos"
+            }
+          ]
+        },
         {
           "kind": "Function",
           "canonicalReference": "@ory/elements-react!DefaultCard:function(1)",
@@ -328,6 +478,53 @@
           "parameters": [],
           "name": "DefaultCardHeader"
         },
+        {
+          "kind": "Function",
+          "canonicalReference": "@ory/elements-react!DefaultCardLayout:function(1)",
+          "docComment": "",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "declare function DefaultCardLayout({ children }: "
+            },
+            {
+              "kind": "Reference",
+              "text": "PropsWithChildren",
+              "canonicalReference": "@types/react!React.PropsWithChildren:type"
+            },
+            {
+              "kind": "Content",
+              "text": "): "
+            },
+            {
+              "kind": "Reference",
+              "text": "react_jsx_runtime.JSX.Element",
+              "canonicalReference": "@types/react!JSX.Element:interface"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "fileUrlPath": "dist/theme/default/index.d.ts",
+          "returnTypeTokenRange": {
+            "startIndex": 3,
+            "endIndex": 4
+          },
+          "releaseTag": "Public",
+          "overloadIndex": 1,
+          "parameters": [
+            {
+              "parameterName": "{ children }",
+              "parameterTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "isOptional": false
+            }
+          ],
+          "name": "DefaultCardLayout"
+        },
         {
           "kind": "Function",
           "canonicalReference": "@ory/elements-react!DefaultCardLogo:function(1)",

package/api-report/elements-react-theme.api.md

@@ -8,6 +8,7 @@ import { ComponentPropsWithoutRef } from 'react';
 import { ComponentType } from 'react';
 import { ConfigurationParameters } from '@ory/client-fetch';
 import { DetailedHTMLProps } from 'react';
+import { ElementType } from 'react';
 import { FlowError } from '@ory/client-fetch';
 import { FormEventHandler } from 'react';
 import { HTMLAttributes } from 'react';
@@ -28,6 +29,17 @@ import { UiText } from '@ory/client-fetch';
 import { VariantProps } from 'class-variance-authority';
 import { VerificationFlow } from '@ory/client-fetch';
 
+// Warning: (ae-forgotten-export) The symbol "DefaultSocialButtonProps" needs to be exported by the entry point index.d.ts
+//
+// @public (undocumented)
+export function DefaultButtonSocial({ attributes, node, onClick, showLabel: _showLabel, logos: providedLogos, }: DefaultSocialButtonProps): react_jsx_runtime.JSX.Element;
+
+// @public (undocumented)
+export namespace DefaultButtonSocial {
+    var // (undocumented)
+    WithLogos: (logos: Record<string, ElementType>) => (props: DefaultSocialButtonProps) => react_jsx_runtime.JSX.Element;
+}
+
 // Warning: (ae-forgotten-export) The symbol "OryCardRootProps" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
@@ -44,6 +56,9 @@ export function DefaultCardFooter(): react_jsx_runtime.JSX.Element | null;
 // @public (undocumented)
 export function DefaultCardHeader(): react_jsx_runtime.JSX.Element;
 
+// @public (undocumented)
+export function DefaultCardLayout({ children }: PropsWithChildren): react_jsx_runtime.JSX.Element;
+
 // @public (undocumented)
 export function DefaultCardLogo(): react_jsx_runtime.JSX.Element;
 
@@ -126,8 +141,8 @@ export type VerificationFlowContextProps = {
 
 // Warnings were encountered during analysis:
 //
-// dist/theme/default/index.d.ts:27:5 - (ae-forgotten-export) The symbol "OryFlowComponentOverrides" needs to be exported by the entry point index.d.ts
-// dist/theme/default/index.d.ts:28:5 - (ae-forgotten-export) The symbol "OryClientConfiguration" needs to be exported by the entry point index.d.ts
+// dist/theme/default/index.d.ts:38:5 - (ae-forgotten-export) The symbol "OryFlowComponentOverrides" needs to be exported by the entry point index.d.ts
+// dist/theme/default/index.d.ts:39:5 - (ae-forgotten-export) The symbol "OryClientConfiguration" needs to be exported by the entry point index.d.ts
 
 // (No @packageDocumentation comment for this package)
 

package/api-report/elements-react.api.json

@@ -1535,8 +1535,8 @@
             },
             {
               "kind": "Reference",
-              "text": "OryFormSectionContentProps",
-              "canonicalReference": "@ory/elements-react!OryFormSectionContentProps:type"
+              "text": "OryFormSectionFooterProps",
+              "canonicalReference": "@ory/elements-react!OryFormSectionFooterProps:type"
             },
             {
               "kind": "Content",
@@ -2308,6 +2308,10 @@
               "text": "PropsWithChildren",
               "canonicalReference": "@types/react!React.PropsWithChildren:type"
             },
+            {
+              "kind": "Content",
+              "text": "<{\n    text?: string;\n}>"
+            },
             {
               "kind": "Content",
               "text": ";"
@@ -2318,7 +2322,7 @@
           "name": "OryFormSectionFooterProps",
           "typeTokenRange": {
             "startIndex": 1,
-            "endIndex": 2
+            "endIndex": 3
           }
         },
         {

package/api-report/elements-react.api.md

@@ -191,7 +191,7 @@ export type OryFlowComponents = {
         AuthMethodListItem: ComponentType<OryCardAuthMethodListItemProps>;
         SettingsSection: ComponentType<OryFormSectionProps>;
         SettingsSectionContent: ComponentType<OryFormSectionContentProps>;
-        SettingsSectionFooter: ComponentType<OryFormSectionContentProps>;
+        SettingsSectionFooter: ComponentType<OryFormSectionFooterProps>;
     };
     Form: {
         Root: ComponentType<OryFormRootProps>;
@@ -265,7 +265,9 @@ export type OryFormSectionContentProps = PropsWithChildren<{
 }>;
 
 // @public (undocumented)
-export type OryFormSectionFooterProps = PropsWithChildren;
+export type OryFormSectionFooterProps = PropsWithChildren<{
+    text?: string;
+}>;
 
 // @public (undocumented)
 export type OryFormSectionProps = PropsWithChildren<{

package/api-report/temp/elements-react-client.api.md

@@ -0,0 +1,33 @@
+## API Report File for "@ory/elements-react"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Session } from '@ory/client-fetch';
+
+// @public (undocumented)
+export type SessionContextData = {
+    isLoading: boolean;
+    initialized: boolean;
+    session: Session | null;
+    error: Error | undefined;
+    refetch: () => Promise<void>;
+};
+
+// @public
+export function SessionProvider({ session: initialSession, children, baseUrl, }: SessionProviderProps): react_jsx_runtime.JSX.Element;
+
+// @public (undocumented)
+export type SessionProviderProps = {
+    session?: Session | null;
+    baseUrl?: string;
+} & React.PropsWithChildren;
+
+// @public
+export function useSession(): SessionContextData;
+
+// (No @packageDocumentation comment for this package)
+
+```