chore: update SDK to V1 (ory#56)

* chore: update SDK to V1

* chore: update client

* chore: fix examples

Makefile

@@ -30,3 +30,17 @@ licenses: .bin/licenses node_modules  # checks open-source licenses
 node_modules: package-lock.json
 	npm ci
 	touch node_modules
+
+build-sdk:
+	(cd $$KRATOS_DIR; make sdk)
+	cp $$KRATOS_DIR/spec/api.json ./contrib/sdk/api.json
+	npx @openapitools/openapi-generator-cli generate -i "./contrib/sdk/api.json" \
+		-g typescript-axios \
+		-o "./contrib/sdk/generated" \
+		--git-user-id ory \
+		--git-repo-id sdk \
+		--git-host github.com \
+		-c ./contrib/sdk/typescript.yml
+	(cd ./contrib/sdk/generated; npm i; npm run build)
+	rm -rf node_modules/@ory/kratos-client/*
+	cp -r ./contrib/sdk/generated/* node_modules/@ory/client

README.md

@@ -166,13 +166,24 @@ var dividerStyle = createRuntimeFn({
 })
 ```
 
-And the gO .\_3ldkmt0 { display: block; text-align: center; overflow: hidden;
-box-sizing: border-box; border: 0; border-top: 0.25rem solid; border-color:
-var(--ory-theme-border-def); width: 4rem; }
+And the CSS.
 
-.\_3ldkmt1 { width: 100%; }
+```css
+gO .\_3ldkmt0 {
+  display: block;
+  text-align: center;
+  overflow: hidden;
+  box-sizing: border-box;
+  border: 0;
+  border-top: 0.25rem solid;
+  border-color: var(--ory-theme-border-def);
+  width: 4rem;
+}
 
-````
+.\_3ldkmt1 {
+  width: 100%;
+}
+```
 
 ### Overriding Styles
 
@@ -210,7 +221,7 @@ This means we can overwrite them inside the project consuming the library!
   --ory-theme-input-placeholder: #9e9e9e;
   --ory-theme-input-text: #424242;
 }
-````
+```
 
 Inside our components we provide the `<ThemeProvider />` which exposes the
 `themeOverrides` property so that you can implement your own theme.
@@ -357,3 +368,55 @@ and are sometimes required by a component. An example is the
 Ory Elements uses a fully automatic release publishing pipeline. All that is
 necessary is to create a new release on GitHub after which the workflow runs all
 the necessary steps to release the modules to the NPM registry.
+
+## Using local Ory SDKs
+
+Most of the time, new features to this repository need some work in the
+corresponding Ory products to work. To make the development cycle more
+productive, it's possible to generate the SDK from a local OpenAPI/Swagger spec
+file.
+
+```bash
+export KRATOS_DIR=/path/to/kratos # point this variable to the root of your local Kratos clone
+
+make build-sdk
+```
+
+This copies the current OpenAPI spec from the local Kratos repository to the
+current Elements directory (`./contrib/sdk/api.json`).
+
+After that it generates the Typescript SDK according to the spec and copies it
+to the `node_modules` directory. This overrides the currently installed module!
+
+Now you can use the updated SDK without publishing to NPM first.
+
+## Testing `@ory/elements` changes locally
+
+To test local changes in `@ory/elements` in a local Ory examples repository you
+can point NPM to use a local directory instead of a remote package from the
+registry.
+
+This requires to first build `@ory/elements`:
+
+```bash
+# In your cloned elements directory
+npm run build # or more specialized `npm run build:react, etc.`
+```
+
+Make sure, that the build passed without errors!
+
+After that, you can set the path to elements in the `package.json` of your
+project:
+
+```shell
+npm i /path/to/elements/packages/markup
+
+# or for preact
+# npm i /path/to/elements/packages/preact
+
+# or for react
+# npm i /path/to/elements/packages/react
+```
+
+Make sure to not commit these changes, as they will break on CI or on other
+machines that have a different setup.

contrib/sdk/.gitignore

@@ -0,0 +1,2 @@
+generated/
+api.json

contrib/sdk/typescript.yml

@@ -0,0 +1,7 @@
+npmName: "@ory/client"
+npmVersion: v0.0.1
+supportsES6: true
+ensureUniqueParams: true
+modelPropertyNaming: original
+disallowAdditionalPropertiesIfNotPresent: false
+withInterfaces: true

examples/preact-spa/src/app.tsx

@@ -28,7 +28,7 @@ export const Dashboard = () => {
 
   useEffect(() => {
     sdk
-      .createSelfServiceLogoutFlowUrlForBrowsers(undefined, {
+      .createBrowserLogoutFlow(undefined, {
         params: {
           return_url: "/",
         },

examples/preact-spa/src/login.tsx

@@ -1,24 +1,18 @@
-import {
-  SelfServiceLoginFlow,
-  SubmitSelfServiceLoginFlowBody,
-} from "@ory/client"
+import { LoginFlow, UpdateLoginFlowBody } from "@ory/client"
 import { UserAuthCard } from "@ory/elements-preact"
 import { useCallback, useEffect, useState } from "preact/hooks"
 import sdk from "./sdk"
 import { useLocation } from "wouter"
 
 export const Login = () => {
-  const [flow, setFlow] = useState<SelfServiceLoginFlow | null>(null)
+  const [flow, setFlow] = useState<LoginFlow | null>(null)
 
   const [location, setLocation] = useLocation()
 
   const handleFlow = useCallback(
     ({ refresh, mfa }: { refresh: boolean; mfa: boolean }) => {
       return sdk
-        .initializeSelfServiceLoginFlowForBrowsers(
-          refresh,
-          mfa ? "aal2" : "aal1",
-        )
+        .createBrowserLoginFlow({ refresh, aal: mfa ? "aal2" : "aal1" })
         .then(({ data: flow }) => flow)
     },
     [],
@@ -56,10 +50,10 @@ export const Login = () => {
       includeScripts={true}
       onSubmit={({ body }) => {
         sdk
-          .submitSelfServiceLoginFlow(
-            flow.id,
-            body as SubmitSelfServiceLoginFlowBody,
-          )
+          .updateLoginFlow({
+            flow: flow.id,
+            updateLoginFlowBody: body as UpdateLoginFlowBody,
+          })
           .then(() => {
             // we successfully submitted the login flow, so lets redirect to the dashboard
             setLocation("/", { replace: true })

examples/preact-spa/src/recovery.tsx

@@ -1,20 +1,17 @@
-import {
-  SelfServiceRecoveryFlow,
-  SubmitSelfServiceRecoveryFlowBody,
-} from "@ory/client"
+import { RecoveryFlow, UpdateRecoveryFlowBody } from "@ory/client"
 import { UserAuthCard } from "@ory/elements-preact"
 import { useEffect, useState } from "preact/hooks"
 import { useLocation } from "wouter"
 import sdk from "./sdk"
 
 export const Recovery = () => {
-  const [flow, setFlow] = useState<SelfServiceRecoveryFlow | null>(null)
+  const [flow, setFlow] = useState<RecoveryFlow | null>(null)
 
   const [location, setLocation] = useLocation()
 
   useEffect(() => {
     sdk
-      .initializeSelfServiceRecoveryFlowForBrowsers()
+      .createBrowserRecoveryFlow()
       .then(({ data: flow }) => {
         setFlow(flow)
       })
@@ -31,10 +28,10 @@ export const Recovery = () => {
       additionalProps={{ loginURL: "/login" }}
       onSubmit={({ body }) => {
         sdk
-          .submitSelfServiceRecoveryFlow(
-            flow.id,
-            body as SubmitSelfServiceRecoveryFlowBody,
-          )
+          .updateRecoveryFlow({
+            flow: flow.id,
+            updateRecoveryFlowBody: body as UpdateRecoveryFlowBody,
+          })
           .then(() => {
             // we successfully submitted the login flow, so lets redirect to the dashboard
             setLocation("/", { replace: true })

examples/preact-spa/src/register.tsx

@@ -1,20 +1,17 @@
-import {
-  SelfServiceRegistrationFlow,
-  SubmitSelfServiceRegistrationFlowBody,
-} from "@ory/client"
+import { RegistrationFlow, UpdateRegistrationFlowBody } from "@ory/client"
 import { UserAuthCard } from "@ory/elements-preact"
 import { useEffect, useState } from "preact/hooks"
 import sdk from "./sdk"
 import { useLocation } from "wouter"
 
 export const Register = () => {
-  const [flow, setFlow] = useState<SelfServiceRegistrationFlow | null>(null)
+  const [flow, setFlow] = useState<RegistrationFlow | null>(null)
 
   const [location, setLocation] = useLocation()
 
   useEffect(() => {
     sdk
-      .initializeSelfServiceRegistrationFlowForBrowsers()
+      .createBrowserRegistrationFlow()
       .then(({ data: flow }) => {
         setFlow(flow)
       })
@@ -32,10 +29,10 @@ export const Register = () => {
       includeScripts={true}
       onSubmit={({ body }) => {
         sdk
-          .submitSelfServiceRegistrationFlow(
-            flow.id,
-            body as SubmitSelfServiceRegistrationFlowBody,
-          )
+          .updateRegistrationFlow({
+            flow: flow.id,
+            updateRegistrationFlowBody: body as UpdateRegistrationFlowBody,
+          })
           .then(() => {
             // we successfully submitted the login flow, so lets redirect to the dashboard
             setLocation("/", { replace: true })

examples/preact-spa/src/sdk.ts

@@ -1,9 +1,9 @@
 // Copyright © 2022 Ory Corp
 // SPDX-License-Identifier: Apache-2.0
 
-import { V0alpha2Api, Configuration } from "@ory/client"
+import { FrontendApi, Configuration } from "@ory/client"
 
-export default new V0alpha2Api(
+export default new FrontendApi(
   new Configuration({
     //https://vitejs.dev/guide/env-and-mode.html#env-files
     basePath: import.meta.env.VITE_ORY_SDK_URL,

examples/preact-spa/src/settings.tsx

@@ -6,29 +6,20 @@ import {
 import { useCallback, useEffect, useState } from "preact/hooks"
 import sdk from "./sdk"
 import { useLocation } from "wouter"
-import {
-  SelfServiceSettingsFlow,
-  SubmitSelfServiceSettingsFlowBody,
-} from "@ory/client"
+import { SettingsFlow, UpdateSettingsFlowBody } from "@ory/client"
 
 export const Settings = () => {
-  const [flow, setFlow] = useState<SelfServiceSettingsFlow | null>(null)
+  const [flow, setFlow] = useState<SettingsFlow | null>(null)
 
   const [location, setLocation] = useLocation()
 
   const onSubmit = useCallback(
-    ({
-      flow,
-      body,
-    }: {
-      flow: SelfServiceSettingsFlow
-      body: SubmitSelfServiceSettingsFlowBody
-    }) =>
+    ({ flow, body }: { flow: SettingsFlow; body: UpdateSettingsFlowBody }) =>
       sdk
-        .submitSelfServiceSettingsFlow(
-          flow.id,
-          body as SubmitSelfServiceSettingsFlowBody,
-        )
+        .updateSettingsFlow({
+          flow: flow.id,
+          updateSettingsFlowBody: body as UpdateSettingsFlowBody,
+        })
         .then(({ data: flow }) => {
           setFlow(flow)
         })
@@ -42,11 +33,9 @@ export const Settings = () => {
   )
 
   useEffect(() => {
-    sdk
-      .initializeSelfServiceSettingsFlowForBrowsers()
-      .then(({ data: flow }) => {
-        setFlow(flow)
-      })
+    sdk.createBrowserSettingsFlow().then(({ data: flow }) => {
+      setFlow(flow)
+    })
   }, [])
 
   return flow ? (

examples/preact-spa/src/verification.tsx

@@ -1,14 +1,14 @@
-import { SelfServiceVerificationFlow } from "@ory/client"
+import { VerificationFlow } from "@ory/client"
 import { UserAuthCard } from "@ory/elements-preact"
 import { useEffect, useState } from "preact/hooks"
 import sdk from "./sdk"
 
 export const Verification = () => {
-  const [flow, setFlow] = useState<SelfServiceVerificationFlow | null>(null)
+  const [flow, setFlow] = useState<VerificationFlow | null>(null)
 
   useEffect(() => {
     sdk
-      .initializeSelfServiceVerificationFlowForBrowsers()
+      .createBrowserVerificationFlow()
       .then(({ data: flow }) => {
         setFlow(flow)
       })

examples/react-spa/src/Dashboard.tsx

@@ -35,7 +35,7 @@ export const Dashboard = () => {
   useEffect(() => {
     // here we create a new logout URL which we can use to log the user out
     sdk
-      .createSelfServiceLogoutFlowUrlForBrowsers(undefined, {
+      .createBrowserLogoutFlow(undefined, {
         params: {
           return_url: "/",
         },