From 5a2abe0c2f3fe73f9853100629b33f571bc0dce7 Mon Sep 17 00:00:00 2001
From: miran248 <miran@248.sh>
Date: Wed, 30 Aug 2023 20:41:55 +0200
Subject: [PATCH] feat: extract kratos api into services folder

---
 src/website/app/forms/SubmitButton.tsx        |   2 +-
 src/website/app/layout/FieldError.tsx         |   2 +-
 src/website/app/layout/FormField.tsx          |   2 +-
 src/website/app/layout/ServerMessage.tsx      |  24 +-
 src/website/app/openapi/kratos.ts             |   3 +-
 src/website/app/ory.server.tsx                |  87 ---
 src/website/app/routes/_index.tsx             | 100 +--
 src/website/app/routes/api.webhooks.oidc.$.ts |   4 -
 src/website/app/routes/change-password.tsx    | 277 +++----
 .../app/routes/index/CurrentSession.tsx       |   2 +-
 .../app/routes/index/OtherSessions.tsx        |   2 +-
 src/website/app/routes/login.tsx              | 711 +++--------------
 .../app/routes/login/PasswordLogin.tsx        |  16 -
 src/website/app/routes/login/SocialLogin.tsx  |  16 -
 src/website/app/routes/logout.tsx             |  18 +-
 src/website/app/routes/register.tsx           | 719 +++---------------
 .../app/routes/register/PasswordRegister.tsx  |  16 -
 .../app/routes/register/SocialRegister.tsx    |  16 -
 .../app/routes/social/SocialButtons.tsx       |  16 +-
 src/website/app/services/kratos/client.ts     |   6 +
 .../services/kratos/createNativeLoginFlow.ts  |  54 ++
 .../kratos/createNativeRecoveryFlow.ts        |  45 ++
 .../kratos/createNativeRegistrationFlow.ts    |  54 ++
 .../app/services/kratos/disableMySession.ts   |  43 ++
 .../app/services/kratos/disableSession.ts     |  39 +
 .../services/kratos/exchangeSessionToken.ts   |  50 ++
 .../app/services/kratos/getIdentity.ts        |  29 +
 .../app/services/kratos/getLoginFlow.ts       |  34 +
 .../app/services/kratos/getRecoveryFlow.ts    |  42 +
 .../services/kratos/getRegistrationFlow.ts    |  44 ++
 .../app/services/kratos/listIdentities.ts     |  33 +
 .../services/kratos/listIdentitySessions.ts   |  39 +
 .../app/services/kratos/listMySessions.ts     |  33 +
 .../services/kratos/performNativeLogout.ts    |  44 ++
 src/website/app/services/kratos/toSession.ts  |  32 +
 .../app/services/kratos/updateLoginFlow.ts    | 117 +++
 .../app/services/kratos/updateRecoveryFlow.ts |  98 +++
 .../services/kratos/updateRegistrationFlow.ts | 117 +++
 src/website/app/session.server.ts             |   2 +-
 .../app/unused-routes/admin.$userId.tsx       |  65 +-
 .../app/unused-routes/admin._index.tsx        |  11 +-
 src/website/app/utils.ts                      |  58 +-
 src/website/package-lock.json                 |  32 +-
 src/website/package.json                      |   4 +-
 src/website/tsconfig.json                     |  20 +-
 45 files changed, 1405 insertions(+), 1773 deletions(-)
 delete mode 100644 src/website/app/ory.server.tsx
 create mode 100644 src/website/app/services/kratos/client.ts
 create mode 100644 src/website/app/services/kratos/createNativeLoginFlow.ts
 create mode 100644 src/website/app/services/kratos/createNativeRecoveryFlow.ts
 create mode 100644 src/website/app/services/kratos/createNativeRegistrationFlow.ts
 create mode 100644 src/website/app/services/kratos/disableMySession.ts
 create mode 100644 src/website/app/services/kratos/disableSession.ts
 create mode 100644 src/website/app/services/kratos/exchangeSessionToken.ts
 create mode 100644 src/website/app/services/kratos/getIdentity.ts
 create mode 100644 src/website/app/services/kratos/getLoginFlow.ts
 create mode 100644 src/website/app/services/kratos/getRecoveryFlow.ts
 create mode 100644 src/website/app/services/kratos/getRegistrationFlow.ts
 create mode 100644 src/website/app/services/kratos/listIdentities.ts
 create mode 100644 src/website/app/services/kratos/listIdentitySessions.ts
 create mode 100644 src/website/app/services/kratos/listMySessions.ts
 create mode 100644 src/website/app/services/kratos/performNativeLogout.ts
 create mode 100644 src/website/app/services/kratos/toSession.ts
 create mode 100644 src/website/app/services/kratos/updateLoginFlow.ts
 create mode 100644 src/website/app/services/kratos/updateRecoveryFlow.ts
 create mode 100644 src/website/app/services/kratos/updateRegistrationFlow.ts

diff --git a/src/website/app/forms/SubmitButton.tsx b/src/website/app/forms/SubmitButton.tsx
index 32e9829..8a01ac3 100644
--- a/src/website/app/forms/SubmitButton.tsx
+++ b/src/website/app/forms/SubmitButton.tsx
@@ -11,7 +11,7 @@ export const SubmitButton: FC<
     disabled={disabled}
     className={join(
       "flex w-full justify-center rounded-md bg-slate-500 hover:bg-slate-900 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-600 transition",
-      disabled ? "opacity-50" : ""
+      disabled ? "pointer-events-none opacity-50" : ""
     )}
   >
     {children}
diff --git a/src/website/app/layout/FieldError.tsx b/src/website/app/layout/FieldError.tsx
index 84476f4..784cd3b 100644
--- a/src/website/app/layout/FieldError.tsx
+++ b/src/website/app/layout/FieldError.tsx
@@ -7,7 +7,7 @@ export const FieldError: FC<{ name: string }> = ({ name }) => {
 
   if (
     data === undefined ||
-    data.state !== "not-valid" ||
+    data.type !== "not-valid" ||
     name in data.messages === false
   ) {
     return null;
diff --git a/src/website/app/layout/FormField.tsx b/src/website/app/layout/FormField.tsx
index 58850f1..8f00fa1 100644
--- a/src/website/app/layout/FormField.tsx
+++ b/src/website/app/layout/FormField.tsx
@@ -25,7 +25,7 @@ export const FormField: FC<{
       disabled={disabled}
       className={join(
         "sm:col-span-2 sm:h-10 sm:mt-0 sm:text-sm focus:ring-slate-500 focus:border-slate-500 bg-white border-2 border-slate-300 col-span-3 mt-1 px-2 rounded-md",
-        disabled ? "opacity-50" : ""
+        disabled ? "pointer-events-none opacity-50" : ""
       )}
     />
   </div>
diff --git a/src/website/app/layout/ServerMessage.tsx b/src/website/app/layout/ServerMessage.tsx
index 2dbae09..b801478 100644
--- a/src/website/app/layout/ServerMessage.tsx
+++ b/src/website/app/layout/ServerMessage.tsx
@@ -1,4 +1,8 @@
-import { CheckCircleIcon, XCircleIcon } from "@heroicons/react/20/solid";
+import {
+  CheckCircleIcon,
+  InformationCircleIcon,
+  XCircleIcon,
+} from "@heroicons/react/20/solid";
 import { FC } from "react";
 import { useFetcherData } from "~/hooks/useFetcherContext";
 
@@ -11,7 +15,7 @@ export const ServerMessage: FC = () => {
 
   console.log("ServerMessage data", data);
 
-  if (data.state === "success") {
+  if (data.type === "success") {
     return (
       <div className="flex rounded-md bg-green-50 p-4 space-x-3">
         <CheckCircleIcon
@@ -25,7 +29,21 @@ export const ServerMessage: FC = () => {
       </div>
     );
   }
-  if (data.state === "failure") {
+  if (data.type === "info") {
+    return (
+      <div className="flex rounded-md bg-yellow-50 p-4 space-x-3">
+        <InformationCircleIcon
+          className="h-5 w-5 text-yellow-400"
+          aria-hidden="true"
+        />
+        <div className="space-y-2">
+          <h3 className="text-sm font-medium text-yellow-800">Info</h3>
+          <div className="text-sm text-yellow-700">{data.message}</div>
+        </div>
+      </div>
+    );
+  }
+  if (data.type === "failure") {
     return (
       <div className="flex rounded-md bg-red-50 p-4 space-x-3">
         <XCircleIcon className="h-5 w-5 text-red-400" aria-hidden="true" />
diff --git a/src/website/app/openapi/kratos.ts b/src/website/app/openapi/kratos.ts
index d014a5d..023bc9c 100644
--- a/src/website/app/openapi/kratos.ts
+++ b/src/website/app/openapi/kratos.ts
@@ -1,4 +1,4 @@
-import { NormalizeOAS, OASComponentSchema, OASModel } from "fets";
+import { NormalizeOAS, OASModel } from "fets";
 
 const schema = {
   components: {
@@ -6887,5 +6887,6 @@ export default schema;
 
 export type Kratos = NormalizeOAS<typeof schema>;
 
+// TODO: remove me!
 export type KratosIdentity = OASModel<Kratos, "identity">;
 export type KratosSession = OASModel<Kratos, "session">;
diff --git a/src/website/app/ory.server.tsx b/src/website/app/ory.server.tsx
deleted file mode 100644
index 74633a7..0000000
--- a/src/website/app/ory.server.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { createClient } from "fets";
-import { serverError } from "remix-utils";
-import { Kratos } from "~/openapi/kratos";
-
-// export const keto = new RelationshipApi(
-//   undefined,
-//   process.env.KETO_READ_ENDPOINT
-// );
-// export const identity = new IdentityApi(
-//   undefined,
-//   process.env.KRATOS_ADMIN_ENDPOINT
-// );
-// export const frontend = new FrontendApi(
-//   undefined,
-//   process.env.KRATOS_PUBLIC_ENDPOINT
-// );
-// export const oathkeeper = new ApiApi(undefined, "http://localhost:4456");
-
-export const kratos = createClient<Kratos>({
-  endpoint: process.env.KRATOS_ADMIN_ENDPOINT,
-});
-
-// admin
-export const listIdentities = async (page: number) => {
-  const response = await kratos["/admin/identities"].get({
-    headers: { Authorization: "" },
-    query: { per_page: 100, page },
-  });
-  if (response.ok === false) {
-    const body = await response.json();
-    throw serverError(body.error.message);
-  }
-  const body = await response.json();
-  return body;
-};
-export const getIdentity = async (id: string) => {
-  const response = await kratos["/admin/identities/{id}"].get({
-    headers: { Authorization: "" },
-    params: { id },
-  });
-  if (response.ok === false) {
-    const body = await response.json();
-    throw serverError(body.error.message);
-  }
-  const body = await response.json();
-  return body;
-};
-export const listIdentitySessions = async (id: string) => {
-  const response = await kratos["/admin/identities/{id}/sessions"].get({
-    headers: { Authorization: "" },
-    params: { id },
-  });
-  if (response.ok === false) {
-    const body = await response.json();
-    throw serverError(body.error.message);
-  }
-  const body = await response.json();
-  return body;
-};
-
-// public
-// export const toSession = async (sessionToken: string | undefined) => {
-//   const response = await kratos["/sessions/whoami"].get({
-//     headers: { "X-Session-Token": sessionToken },
-//   });
-//   if (response.ok === false) {
-//     const body = await response.json();
-//     throw serverError(body.error.message);
-//   }
-//   const body = await response.json();
-//   return body;
-// };
-export const listMySessions = async (
-  sessionToken: string | undefined,
-  page: number
-) => {
-  const response = await kratos["/sessions"].get({
-    headers: { "X-Session-Token": sessionToken },
-    query: { per_page: 100, page },
-  });
-  if (response.ok === false) {
-    const body = await response.json();
-    throw serverError(body.error.message);
-  }
-  const body = await response.json();
-  return body;
-};
diff --git a/src/website/app/routes/_index.tsx b/src/website/app/routes/_index.tsx
index c25b41e..c1ef754 100644
--- a/src/website/app/routes/_index.tsx
+++ b/src/website/app/routes/_index.tsx
@@ -15,7 +15,9 @@ import { Section } from "~/layout/Section";
 import { SectionHeader } from "~/layout/SectionHeader";
 import { SectionItem } from "~/layout/SectionItem";
 import { KratosIdentity, KratosSession } from "~/openapi/kratos";
-import { kratos, listMySessions } from "~/ory.server";
+import { disableMySession } from "~/services/kratos/disableMySession";
+import { exchangeSessionToken } from "~/services/kratos/exchangeSessionToken";
+import { listMySessions } from "~/services/kratos/listMySessions";
 import { sessionStorage } from "~/session.server";
 import {
   ActionData,
@@ -23,6 +25,7 @@ import {
   join,
   LoaderData,
   loaderGuard,
+  redirectToHome,
   redirectToLogin,
 } from "~/utils";
 import { CurrentSession } from "./index/CurrentSession";
@@ -48,8 +51,6 @@ export const loader = async ({
 > => {
   const guard = await loaderGuard(request);
 
-  console.log("_index url", guard.url);
-
   const { url, session } = guard;
 
   const code = url.searchParams.get("code");
@@ -59,53 +60,35 @@ export const loader = async ({
   );
 
   if (code && session_token_exchange_code) {
-    const response = await kratos["/sessions/token-exchange"].get({
+    const response = await exchangeSessionToken({
       query: {
         init_code: session_token_exchange_code,
         return_to_code: code,
       },
     });
 
-    if (response.ok === false) {
-      const body = await response.json();
-
-      console.log(
-        "_index loader",
-        response.status,
-        JSON.stringify(body, null, 2)
-      );
+    switch (response.type) {
+      case "failure":
+        throw serverError(response.message);
+      case "success":
+        session.unset("session_token_exchange_code");
+        session.set("session_token", response.session_token);
 
-      throw serverError(body.error.message);
+        return redirectToHome(guard);
     }
-
-    const body = await response.json();
-
-    console.log(
-      "_index loader",
-      response.status,
-      JSON.stringify(body, null, 2)
-    );
-
-    session.unset("session_token_exchange_code");
-
-    session.set("session_token", body.session_token);
-
-    return redirect(url.searchParams.get("from") || "/", {
-      status: 303,
-      headers: {
-        "set-cookie": await sessionStorage.commitSession(session),
-      },
-    });
   }
 
-  if (guard.state === "without-identity") {
+  if (guard.type === "without-identity") {
     return redirectToLogin(guard);
   }
 
   const { identity: me, csrf } = guard;
 
   const [sessions, tuples] = await Promise.all([
-    listMySessions(session.get("session_token"), 1),
+    listMySessions({
+      headers: { "X-Session-Token": session.get("session_token") },
+      query: { per_page: 100, page: 1 },
+    }),
     // keto.getRelationships({ subjectId: userId }),
     null,
   ]);
@@ -167,9 +150,9 @@ export const action = async ({
 }: ActionArgs): Promise<TypedJsonResponse<ActionData>> => {
   const guard = await actionGuard(request, actionSchema);
 
-  if (guard.state === "not-valid") {
-    return json<ActionData>({
-      state: "not-valid",
+  if (guard.type === "not-valid") {
+    return json({
+      type: "not-valid",
       messages: guard.messages,
 
       defaultValues: guard.defaultValues,
@@ -186,39 +169,32 @@ export const action = async ({
       });
     }
     case "remove-session": {
-      const response = await kratos["/sessions/{id}"].delete({
+      const response = await disableMySession({
         headers: { "X-Session-Token": session.get("session_token") },
         params: { id: data.sessionId },
       });
 
-      if (response.ok === false) {
-        const body = await response.json();
-
-        console.log(
-          "_index remove-session",
-          response.status,
-          JSON.stringify(body, null, 2)
-        );
-
-        return json<ActionData>({
-          state: "failure",
-          message: body.error.message,
-
-          defaultValues: guard.defaultValues,
-        });
+      switch (response.type) {
+        case "failure":
+          return json({
+            type: "failure",
+            message: response.message,
+
+            defaultValues: guard.defaultValues,
+          });
+        case "success":
+          return json({
+            type: "success",
+            message: response.message,
+
+            defaultValues: guard.defaultValues,
+          });
       }
-
-      return json<ActionData>({
-        state: "success",
-        message: `Revoked session ${data.sessionId}`,
-
-        defaultValues: guard.defaultValues,
-      });
     }
   }
 
-  return json<ActionData>({
-    state: "failure",
+  return json({
+    type: "failure",
     message: "Unsupported operation",
 
     defaultValues: guard.defaultValues,
diff --git a/src/website/app/routes/api.webhooks.oidc.$.ts b/src/website/app/routes/api.webhooks.oidc.$.ts
index 88bc5d6..ec8b167 100644
--- a/src/website/app/routes/api.webhooks.oidc.$.ts
+++ b/src/website/app/routes/api.webhooks.oidc.$.ts
@@ -8,12 +8,8 @@ const kratosUrl = process.env.KRATOS_PUBLIC_ENDPOINT;
 export const loader = async ({ params, request }: LoaderArgs) => {
   const guard = await loaderGuard(request);
 
-  console.log("api/webhooks/oidc loader params", params);
-
   const { url, session } = guard;
 
-  console.log("session", session.data);
-
   return redirect(`${kratosUrl}/${params["*"]}?${url.searchParams}`, {
     status: 303,
     headers: {
diff --git a/src/website/app/routes/change-password.tsx b/src/website/app/routes/change-password.tsx
index 111690f..faa1082 100644
--- a/src/website/app/routes/change-password.tsx
+++ b/src/website/app/routes/change-password.tsx
@@ -8,7 +8,9 @@ import { serverError } from "remix-utils";
 import { z } from "zod";
 import { Footer } from "~/layout/Footer";
 import { Page } from "~/layout/Page";
-import { kratos } from "~/ory.server";
+import { createNativeRecoveryFlow } from "~/services/kratos/createNativeRecoveryFlow";
+import { getRecoveryFlow } from "~/services/kratos/getRecoveryFlow";
+import { updateRecoveryFlow } from "~/services/kratos/updateRecoveryFlow";
 import { sessionStorage } from "~/session.server";
 import {
   ActionData,
@@ -27,7 +29,7 @@ export const loader = async ({
 }: LoaderArgs): Promise<TypedJsonResponse<LoaderData>> => {
   const guard = await loaderGuard(request);
 
-  if (guard.state === "with-identity") {
+  if (guard.type === "with-identity") {
     return redirectToHome(guard);
   }
 
@@ -36,52 +38,45 @@ export const loader = async ({
   const flow = url.searchParams.get("flow");
 
   if (flow === null) {
-    const response = await kratos["/self-service/recovery/api"].get();
-
-    if (response.ok === false) {
-      const body = await response.json();
-
-      console.log(
-        "change-password loader",
-        response.status,
-        JSON.stringify(body, null, 2)
-      );
-
-      throw serverError(body.error.message);
+    const response = await createNativeRecoveryFlow({});
+
+    switch (response.type) {
+      case "failure":
+        throw serverError(response.message);
+      case "success":
+        url.searchParams.set("flow", response.flow);
+
+        return redirect(url.toString(), {
+          status: 303,
+          headers: {
+            "set-cookie": await sessionStorage.commitSession(session),
+          },
+        });
     }
-
-    const body = await response.json();
-
-    console.log(
-      "change-password loader",
-      response.status,
-      JSON.stringify(body, null, 2)
-    );
-
-    url.searchParams.set("flow", body.id);
-
-    return redirect(url.toString(), {
-      status: 303,
-      headers: { "set-cookie": await sessionStorage.commitSession(session) },
-    });
   }
 
-  const response = await kratos["/self-service/recovery/flows"].get({
+  const response = await getRecoveryFlow({
     query: { id: flow },
   });
 
-  if (response.ok === false) {
-    url.searchParams.delete("flow");
+  switch (response.type) {
+    case "failure":
+      url.searchParams.delete("flow");
 
-    return redirect(url.toString(), {
-      status: 303,
-      headers: { "set-cookie": await sessionStorage.commitSession(session) },
-    });
+      return redirect(url.toString(), {
+        status: 303,
+        headers: { "set-cookie": await sessionStorage.commitSession(session) },
+      });
+    case "success":
+      return json(
+        { csrf },
+        {
+          headers: {
+            "set-cookie": await sessionStorage.commitSession(session),
+          },
+        }
+      );
   }
-  return json(
-    { csrf },
-    { headers: { "set-cookie": await sessionStorage.commitSession(session) } }
-  );
 };
 
 export type LoaderResponse = typeof loader;
@@ -116,9 +111,9 @@ export const action = async ({
 }: ActionArgs): Promise<TypedJsonResponse<ActionData>> => {
   const guard = await actionGuard(request, actionSchema);
 
-  if (guard.state === "not-valid") {
-    return json<ActionData>({
-      state: "not-valid",
+  if (guard.type === "not-valid") {
+    return json({
+      type: "not-valid",
       messages: guard.messages,
 
       defaultValues: guard.defaultValues,
@@ -130,8 +125,8 @@ export const action = async ({
   const flow = url.searchParams.get("flow");
 
   if (flow === null) {
-    return json<ActionData>({
-      state: "failure",
+    return json({
+      type: "failure",
       message: "Missing required parameter",
 
       defaultValues: guard.defaultValues,
@@ -140,7 +135,7 @@ export const action = async ({
 
   switch (data.type) {
     case "request-change-password": {
-      const response = await kratos["/self-service/recovery"].post({
+      const response = await updateRecoveryFlow({
         query: { flow },
         json: {
           method: "code",
@@ -148,85 +143,41 @@ export const action = async ({
         },
       });
 
-      switch (response.status) {
-        case 200:
-        case 400: {
-          const body = await response.json();
-
-          console.log(
-            "request-change-password",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          const { messages = [] } = body.ui;
-
-          if (messages.length > 0) {
-            switch (messages[0].type) {
-              case "error": {
-                return json<ActionData>({
-                  state: "failure",
-                  message: messages[0].text,
-
-                  defaultValues: guard.defaultValues,
-                });
-              }
-              case "info":
-              case "success": {
-                return json<ActionData>({
-                  state: "success",
-                  message: messages[0].text,
-
-                  defaultValues: guard.defaultValues,
-                });
-              }
-            }
-          }
-
-          break;
-        }
-        case 422: {
-          const body = await response.json();
-
-          console.log(
-            "request-change-password",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          // return json<ActionData>({
-          //   state: "failure",
-          //   message: body.error.message,
-
-          //   defaultValues: guard.defaultValues,
-          // });
-
-          break;
-        }
-        case 410:
-        // 403?
-        default: {
-          const body = await response.json();
+      switch (response.type) {
+        case "failure":
+          return json({
+            type: "failure",
+            message: response.message,
 
-          console.log(
-            "request-change-password",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
+            defaultValues: guard.defaultValues,
+          });
+        case "info":
+          return json({
+            type: "info",
+            message: response.message,
 
-          return json<ActionData>({
-            state: "failure",
-            message: body.error.message,
+            defaultValues: guard.defaultValues,
+          });
+        case "success":
+          return json({
+            type: "success",
+            message: response.message,
 
             defaultValues: guard.defaultValues,
           });
-        }
+        case "redirect":
+          return redirect(response.redirect_browser_to, {
+            status: 303,
+            headers: {
+              "set-cookie": await sessionStorage.commitSession(session),
+            },
+          });
       }
 
       break;
     }
     case "change-password": {
-      const response = await kratos["/self-service/recovery"].post({
+      const response = await updateRecoveryFlow({
         query: { flow },
         json: {
           method: "code",
@@ -234,87 +185,43 @@ export const action = async ({
         },
       });
 
-      switch (response.status) {
-        case 200:
-        case 400: {
-          const body = await response.json();
-
-          console.log(
-            "change-password",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          const { messages = [] } = body.ui;
-
-          if (messages.length > 0) {
-            switch (messages[0].type) {
-              case "error": {
-                return json<ActionData>({
-                  state: "failure",
-                  message: messages[0].text,
-
-                  defaultValues: guard.defaultValues,
-                });
-              }
-              case "info":
-              case "success": {
-                return json<ActionData>({
-                  state: "success",
-                  message: messages[0].text,
-
-                  defaultValues: guard.defaultValues,
-                });
-              }
-            }
-          }
-
-          break;
-        }
-        case 422: {
-          const body = await response.json();
-
-          console.log(
-            "change-password",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          // return json<ActionData>({
-          //   state: "failure",
-          //   message: body.error.message,
+      switch (response.type) {
+        case "failure":
+          return json({
+            type: "failure",
+            message: response.message,
 
-          //   defaultValues: guard.defaultValues,
-          // });
-
-          break;
-        }
-        case 410:
-        // 403?
-        default: {
-          const body = await response.json();
-
-          console.log(
-            "change-password",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
+            defaultValues: guard.defaultValues,
+          });
+        case "info":
+          return json({
+            type: "info",
+            message: response.message,
 
-          return json<ActionData>({
-            state: "failure",
-            message: body.error.message,
+            defaultValues: guard.defaultValues,
+          });
+        case "success":
+          return json({
+            type: "success",
+            message: response.message,
 
             defaultValues: guard.defaultValues,
           });
-        }
+        case "redirect":
+          return redirect(response.redirect_browser_to, {
+            status: 303,
+            headers: {
+              "set-cookie": await sessionStorage.commitSession(session),
+            },
+          });
       }
 
       break;
     }
   }
 
-  return json<ActionData>({
-    state: "failure",
+  return json({
+    type: "failure",
     message: "Unsupported operation",
 
     defaultValues: guard.defaultValues,
diff --git a/src/website/app/routes/index/CurrentSession.tsx b/src/website/app/routes/index/CurrentSession.tsx
index c3d41b2..fe19e3e 100644
--- a/src/website/app/routes/index/CurrentSession.tsx
+++ b/src/website/app/routes/index/CurrentSession.tsx
@@ -83,7 +83,7 @@ const SessionItem: FC<{ session: KratosSession }> = ({ session }) => {
               disabled={submitting}
               className={join(
                 "relative -ml-px inline-flex items-center rounded-sm border border-slate-300 bg-orange-50 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-orange-100 focus:z-10 focus:border-orange-500 focus:outline-none focus:ring-1 focus:ring-orange-500",
-                submitting ? "opacity-50" : ""
+                submitting ? "pointer-events-none opacity-50" : ""
               )}
             >
               {submitting ? "Signing out.." : "Sign out"}
diff --git a/src/website/app/routes/index/OtherSessions.tsx b/src/website/app/routes/index/OtherSessions.tsx
index 563545b..db4ba0a 100644
--- a/src/website/app/routes/index/OtherSessions.tsx
+++ b/src/website/app/routes/index/OtherSessions.tsx
@@ -98,7 +98,7 @@ const SessionItem: FC<{ session: KratosSession }> = ({ session }) => {
               disabled={submitting}
               className={join(
                 "relative -ml-px inline-flex items-center rounded-sm border border-slate-300 bg-orange-50 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-orange-100 focus:z-10 focus:border-orange-500 focus:outline-none focus:ring-1 focus:ring-orange-500",
-                submitting ? "opacity-50" : ""
+                submitting ? "pointer-events-none opacity-50" : ""
               )}
             >
               {submitting ? "Signing out.." : "Sign out"}
diff --git a/src/website/app/routes/login.tsx b/src/website/app/routes/login.tsx
index 0c2bfaf..92952d9 100644
--- a/src/website/app/routes/login.tsx
+++ b/src/website/app/routes/login.tsx
@@ -8,7 +8,9 @@ import { serverError } from "remix-utils";
 import { z } from "zod";
 import { Footer } from "~/layout/Footer";
 import { Page } from "~/layout/Page";
-import { kratos } from "~/ory.server";
+import { createNativeLoginFlow } from "~/services/kratos/createNativeLoginFlow";
+import { getLoginFlow } from "~/services/kratos/getLoginFlow";
+import { updateLoginFlow } from "~/services/kratos/updateLoginFlow";
 import { sessionStorage } from "~/session.server";
 import {
   ActionData,
@@ -29,83 +31,61 @@ export const loader = async ({
 }: LoaderArgs): Promise<TypedJsonResponse<LoaderData>> => {
   const guard = await loaderGuard(request);
 
-  console.log("login url", guard.url);
-
-  if (guard.state === "with-identity") {
+  if (guard.type === "with-identity") {
     return redirectToHome(guard);
   }
 
   const { url, session, csrf } = guard;
 
-  console.log("session", session.data);
-
   const flow = url.searchParams.get("flow");
 
   if (flow === null) {
-    const response = await kratos["/self-service/login/api"].get({
+    const response = await createNativeLoginFlow({
       query: { aal: "aal1", return_session_token_exchange_code: true },
     });
 
-    if (response.ok === false) {
-      const body = await response.json();
-
-      console.log(
-        "login loader",
-        response.status,
-        JSON.stringify(body, null, 2)
-      );
-
-      throw serverError(body.error.message);
+    switch (response.type) {
+      case "failure":
+        throw serverError(response.message);
+      case "success":
+        session.set(
+          "session_token_exchange_code",
+          response.session_token_exchange_code
+        );
+
+        url.searchParams.set("flow", response.flow);
+
+        return redirect(url.toString(), {
+          status: 303,
+          headers: {
+            "set-cookie": await sessionStorage.commitSession(session),
+          },
+        });
     }
-
-    const body = await response.json();
-
-    console.log("login loader", response.status, JSON.stringify(body, null, 2));
-
-    session.set(
-      "session_token_exchange_code",
-      body.session_token_exchange_code
-    );
-
-    url.searchParams.set("flow", body.id);
-
-    return redirect(url.toString(), {
-      status: 303,
-      headers: { "set-cookie": await sessionStorage.commitSession(session) },
-    });
   }
 
-  const response = await kratos["/self-service/login/flows"].get({
+  const response = await getLoginFlow({
     query: { id: flow },
   });
 
-  if (response.ok === false) {
-    url.searchParams.delete("flow");
+  switch (response.type) {
+    case "failure":
+      url.searchParams.delete("flow");
 
-    return redirect(url.toString(), {
-      status: 303,
-      headers: { "set-cookie": await sessionStorage.commitSession(session) },
-    });
-  }
-
-  const body = await response.json();
-
-  console.log("login loader", response.status, JSON.stringify(body, null, 2));
-
-  const { messages = [] } = body.ui;
-
-  if (messages.length > 0) {
-    switch (messages[0].type) {
-      case "error": {
-        throw serverError(messages[0].text);
-      }
-    }
+      return redirect(url.toString(), {
+        status: 303,
+        headers: { "set-cookie": await sessionStorage.commitSession(session) },
+      });
+    case "success":
+      return json(
+        { csrf },
+        {
+          headers: {
+            "set-cookie": await sessionStorage.commitSession(session),
+          },
+        }
+      );
   }
-
-  return json(
-    { csrf },
-    { headers: { "set-cookie": await sessionStorage.commitSession(session) } }
-  );
 };
 
 export type LoaderResponse = typeof loader;
@@ -140,9 +120,9 @@ export const action = async ({
 }: ActionArgs): Promise<TypedJsonResponse<ActionData>> => {
   const guard = await actionGuard(request, actionSchema);
 
-  if (guard.state === "not-valid") {
-    return json<ActionData>({
-      state: "not-valid",
+  if (guard.type === "not-valid") {
+    return json({
+      type: "not-valid",
       messages: guard.messages,
 
       defaultValues: guard.defaultValues,
@@ -154,17 +134,19 @@ export const action = async ({
   const flow = url.searchParams.get("flow");
 
   if (flow === null) {
-    return json<ActionData>({
-      state: "failure",
+    return json({
+      type: "failure",
       message: "Missing required parameter",
 
       defaultValues: guard.defaultValues,
     });
   }
 
+  let response;
+
   switch (data.type) {
-    case "login": {
-      const response = await kratos["/self-service/login"].post({
+    case "login":
+      response = await updateLoginFlow({
         query: { flow },
         json: {
           method: "password",
@@ -173,583 +155,62 @@ export const action = async ({
         },
       });
 
-      switch (response.status) {
-        case 200: {
-          const body = await response.json();
-
-          console.log(
-            "login password",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          session.set("session_token", body.session_token);
-
-          return redirect(url.searchParams.get("from") || "/", {
-            status: 303,
-            headers: {
-              "set-cookie": await sessionStorage.commitSession(session),
-            },
-          });
-        }
-        case 400: {
-          const body = await response.json();
-
-          console.log(
-            "login password",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          const { messages = [] } = body.ui;
-
-          if (messages.length > 0) {
-            switch (messages[0].type) {
-              case "error": {
-                return json<ActionData>({
-                  state: "failure",
-                  message: messages[0].text,
-
-                  defaultValues: guard.defaultValues,
-                });
-              }
-              case "info":
-              case "success": {
-                return json<ActionData>({
-                  state: "success",
-                  message: messages[0].text,
-
-                  defaultValues: guard.defaultValues,
-                });
-              }
-            }
-          }
-
-          break;
-        }
-        case 422: {
-          const body = await response.json();
-
-          console.log(
-            "login password",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          if (body.redirect_browser_to !== undefined) {
-            return redirect(body.redirect_browser_to, {
-              status: 303,
-              headers: {
-                "set-cookie": await sessionStorage.commitSession(session),
-              },
-            });
-          }
-
-          if (body.error !== undefined) {
-            return json<ActionData>({
-              state: "failure",
-              // TODO: figure out why openapi + fets produce the incorrect type
-              // @ts-ignore
-              message: body.error.message,
-
-              defaultValues: guard.defaultValues,
-            });
-          }
-
-          break;
-        }
-        case 410:
-        // 403?
-        default: {
-          const body = await response.json();
-
-          console.log(
-            "login password",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          return json<ActionData>({
-            state: "failure",
-            message: body.error.message,
-
-            defaultValues: guard.defaultValues,
-          });
-        }
-      }
-
       break;
-    }
-    case "google": {
-      const response = await kratos["/self-service/login"].post({
+    case "google":
+      response = await updateLoginFlow({
         query: { flow },
-        json: {
-          method: "oidc",
-          provider: "google",
-        },
+        json: { method: "oidc", provider: "google" },
       });
 
-      switch (response.status) {
-        case 200: {
-          const body = await response.json();
-
-          console.log(
-            "login google",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          session.set("session_token", body.session_token);
-
-          return redirect(url.searchParams.get("from") || "/", {
-            status: 303,
-            headers: {
-              "set-cookie": await sessionStorage.commitSession(session),
-            },
-          });
-        }
-        case 400: {
-          const body = await response.json();
-
-          console.log(
-            "login google",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          const { messages = [] } = body.ui;
-
-          if (messages.length > 0) {
-            switch (messages[0].type) {
-              case "error": {
-                return json<ActionData>({
-                  state: "failure",
-                  message: messages[0].text,
-
-                  defaultValues: guard.defaultValues,
-                });
-              }
-              case "info":
-              case "success": {
-                return json<ActionData>({
-                  state: "success",
-                  message: messages[0].text,
-
-                  defaultValues: guard.defaultValues,
-                });
-              }
-            }
-          }
-
-          break;
-        }
-        case 422: {
-          const body = await response.json();
-
-          console.log(
-            "login google",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          if (body.redirect_browser_to !== undefined) {
-            return redirect(body.redirect_browser_to, {
-              status: 303,
-              headers: {
-                "set-cookie": await sessionStorage.commitSession(session),
-              },
-            });
-          }
-
-          if (body.error !== undefined) {
-            return json<ActionData>({
-              state: "failure",
-              // TODO: figure out why openapi + fets produce the incorrect type
-              // @ts-ignore
-              message: body.error.message,
-
-              defaultValues: guard.defaultValues,
-            });
-          }
-
-          break;
-        }
-        case 410:
-        // 403?
-        default: {
-          const body = await response.json();
-
-          console.log(
-            "login google",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          return json<ActionData>({
-            state: "failure",
-            message: body.error.message,
-
-            defaultValues: guard.defaultValues,
-          });
-        }
-      }
-
       break;
-    }
-    case "github": {
-      const response = await kratos["/self-service/login"].post({
+    case "github":
+      response = await updateLoginFlow({
         query: { flow },
-        json: {
-          method: "oidc",
-          provider: "github",
-        },
+        json: { method: "oidc", provider: "github" },
       });
 
-      switch (response.status) {
-        case 200: {
-          const body = await response.json();
-
-          console.log(
-            "login github",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          session.set("session_token", body.session_token);
-
-          return redirect(url.searchParams.get("from") || "/", {
-            status: 303,
-            headers: {
-              "set-cookie": await sessionStorage.commitSession(session),
-            },
-          });
-        }
-        case 400: {
-          const body = await response.json();
-
-          console.log(
-            "login github",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          const { messages = [] } = body.ui;
-
-          if (messages.length > 0) {
-            switch (messages[0].type) {
-              case "error": {
-                return json<ActionData>({
-                  state: "failure",
-                  message: messages[0].text,
-
-                  defaultValues: guard.defaultValues,
-                });
-              }
-              case "info":
-              case "success": {
-                return json<ActionData>({
-                  state: "success",
-                  message: messages[0].text,
-
-                  defaultValues: guard.defaultValues,
-                });
-              }
-            }
-          }
-
-          break;
-        }
-        case 422: {
-          const body = await response.json();
-
-          console.log(
-            "login github",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          if (body.redirect_browser_to !== undefined) {
-            return redirect(body.redirect_browser_to, {
-              status: 303,
-              headers: {
-                "set-cookie": await sessionStorage.commitSession(session),
-              },
-            });
-          }
-
-          if (body.error !== undefined) {
-            return json<ActionData>({
-              state: "failure",
-              // TODO: figure out why openapi + fets produce the incorrect type
-              // @ts-ignore
-              message: body.error.message,
-
-              defaultValues: guard.defaultValues,
-            });
-          }
-
-          break;
-        }
-        case 410:
-        // 403?
-        default: {
-          const body = await response.json();
-
-          console.log(
-            "login github",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          return json<ActionData>({
-            state: "failure",
-            message: body.error.message,
-
-            defaultValues: guard.defaultValues,
-          });
-        }
-      }
-
       break;
-    }
-    case "facebook": {
-      const response = await kratos["/self-service/login"].post({
+    case "facebook":
+      response = await updateLoginFlow({
         query: { flow },
-        json: {
-          method: "oidc",
-          provider: "facebook",
-        },
+        json: { method: "oidc", provider: "facebook" },
       });
 
-      switch (response.status) {
-        case 200: {
-          const body = await response.json();
-
-          console.log(
-            "facebook",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          session.set("session_token", body.session_token);
-
-          return redirect(url.searchParams.get("from") || "/", {
-            status: 303,
-            headers: {
-              "set-cookie": await sessionStorage.commitSession(session),
-            },
-          });
-        }
-        case 400: {
-          const body = await response.json();
-
-          console.log(
-            "facebook",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          const { messages = [] } = body.ui;
-
-          if (messages.length > 0) {
-            switch (messages[0].type) {
-              case "error": {
-                return json<ActionData>({
-                  state: "failure",
-                  message: messages[0].text,
-
-                  defaultValues: guard.defaultValues,
-                });
-              }
-              case "info":
-              case "success": {
-                return json<ActionData>({
-                  state: "success",
-                  message: messages[0].text,
-
-                  defaultValues: guard.defaultValues,
-                });
-              }
-            }
-          }
-
-          break;
-        }
-        case 422: {
-          const body = await response.json();
-
-          console.log(
-            "facebook",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          if (body.redirect_browser_to !== undefined) {
-            return redirect(body.redirect_browser_to, {
-              status: 303,
-              headers: {
-                "set-cookie": await sessionStorage.commitSession(session),
-              },
-            });
-          }
-
-          if (body.error !== undefined) {
-            return json<ActionData>({
-              state: "failure",
-              // TODO: figure out why openapi + fets produce the incorrect type
-              // @ts-ignore
-              message: body.error.message,
-
-              defaultValues: guard.defaultValues,
-            });
-          }
-
-          break;
-        }
-        case 410:
-        // 403?
-        default: {
-          const body = await response.json();
-
-          console.log(
-            "facebook",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          return json<ActionData>({
-            state: "failure",
-            message: body.error.message,
-
-            defaultValues: guard.defaultValues,
-          });
-        }
-      }
-
       break;
-    }
-    case "apple": {
-      const response = await kratos["/self-service/login"].post({
+    case "apple":
+      response = await updateLoginFlow({
         query: { flow },
-        json: {
-          method: "oidc",
-          provider: "apple",
-        },
+        json: { method: "oidc", provider: "apple" },
       });
 
-      switch (response.status) {
-        case 200: {
-          const body = await response.json();
-
-          console.log(
-            "login apple",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          session.set("session_token", body.session_token);
-
-          return redirect(url.searchParams.get("from") || "/", {
-            status: 303,
-            headers: {
-              "set-cookie": await sessionStorage.commitSession(session),
-            },
-          });
-        }
-        case 400: {
-          const body = await response.json();
-
-          console.log(
-            "login apple",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          const { messages = [] } = body.ui;
-
-          if (messages.length > 0) {
-            switch (messages[0].type) {
-              case "error": {
-                return json<ActionData>({
-                  state: "failure",
-                  message: messages[0].text,
-
-                  defaultValues: guard.defaultValues,
-                });
-              }
-              case "info":
-              case "success": {
-                return json<ActionData>({
-                  state: "success",
-                  message: messages[0].text,
-
-                  defaultValues: guard.defaultValues,
-                });
-              }
-            }
-          }
-
-          break;
-        }
-        case 422: {
-          const body = await response.json();
-
-          console.log(
-            "login apple",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          if (body.redirect_browser_to !== undefined) {
-            return redirect(body.redirect_browser_to, {
-              status: 303,
-              headers: {
-                "set-cookie": await sessionStorage.commitSession(session),
-              },
-            });
-          }
-
-          if (body.error !== undefined) {
-            return json<ActionData>({
-              state: "failure",
-              // TODO: figure out why openapi + fets produce the incorrect type
-              // @ts-ignore
-              message: body.error.message,
-
-              defaultValues: guard.defaultValues,
-            });
-          }
-
-          break;
-        }
-        case 410:
-        // 403?
-        default: {
-          const body = await response.json();
-
-          console.log(
-            "login apple",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          return json<ActionData>({
-            state: "failure",
-            message: body.error.message,
-
-            defaultValues: guard.defaultValues,
-          });
-        }
-      }
-
       break;
-    }
   }
 
-  return json<ActionData>({
-    state: "failure",
-    message: "Unsupported operation",
+  switch (response.type) {
+    case "failure":
+      return json({
+        type: "failure",
+        message: response.message,
 
-    defaultValues: guard.defaultValues,
-  });
+        defaultValues: guard.defaultValues,
+      });
+    case "info":
+      return json({
+        type: "info",
+        message: response.message,
+
+        defaultValues: guard.defaultValues,
+      });
+    case "success":
+      session.set("session_token", response.session_token);
+
+      return redirectToHome(guard);
+    case "redirect":
+      return redirect(response.redirect_browser_to, {
+        status: 303,
+        headers: {
+          "set-cookie": await sessionStorage.commitSession(session),
+        },
+      });
+  }
 };
diff --git a/src/website/app/routes/login/PasswordLogin.tsx b/src/website/app/routes/login/PasswordLogin.tsx
index 3ed17a1..685971c 100644
--- a/src/website/app/routes/login/PasswordLogin.tsx
+++ b/src/website/app/routes/login/PasswordLogin.tsx
@@ -14,22 +14,6 @@ import { TextLink } from "~/layout/TextLink";
 import { LoginPasswordInput } from "~/routes/login/LoginPasswordInput";
 import { ActionData, LoaderData } from "~/utils";
 
-// const initialState = {
-//   passwordVisible: false,
-// };
-// const reducer = produce((draft, { type, payload }) => {
-//   console.log("reducer type", type, payload);
-
-//   switch (type) {
-//     case "show-password":
-//       draft.passwordVisible = true;
-//       break;
-//     case "hide-password":
-//       draft.passwordVisible = false;
-//       break;
-//   }
-// });
-
 export const PasswordLogin: FC = () => {
   const { csrf } = useLoaderData<LoaderData>();
   const fetcher = useFetcher<ActionData>();
diff --git a/src/website/app/routes/login/SocialLogin.tsx b/src/website/app/routes/login/SocialLogin.tsx
index 655ac35..9112dd2 100644
--- a/src/website/app/routes/login/SocialLogin.tsx
+++ b/src/website/app/routes/login/SocialLogin.tsx
@@ -11,22 +11,6 @@ import { ServerMessage } from "~/layout/ServerMessage";
 import { ActionData, LoaderData } from "~/utils";
 import { SocialButtons } from "../social/SocialButtons";
 
-// const initialState = {
-//   passwordVisible: false,
-// };
-// const reducer = produce((draft, { type, payload }) => {
-//   console.log("reducer type", type, payload);
-
-//   switch (type) {
-//     case "show-password":
-//       draft.passwordVisible = true;
-//       break;
-//     case "hide-password":
-//       draft.passwordVisible = false;
-//       break;
-//   }
-// });
-
 export const SocialLogin: FC = () => {
   const { csrf } = useLoaderData<LoaderData>();
   const fetcher = useFetcher<ActionData>();
diff --git a/src/website/app/routes/logout.tsx b/src/website/app/routes/logout.tsx
index ee6b957..20cfc6c 100644
--- a/src/website/app/routes/logout.tsx
+++ b/src/website/app/routes/logout.tsx
@@ -1,10 +1,9 @@
 import { LoaderArgs } from "@remix-run/node";
 import { Oval } from "react-loader-spinner";
-import { redirect, TypedJsonResponse } from "remix-typedjson";
+import { TypedJsonResponse } from "remix-typedjson";
 import { Around } from "~/layout/Around";
-import { kratos } from "~/ory.server";
-import { sessionStorage } from "~/session.server";
-import { loaderGuard } from "~/utils";
+import { performNativeLogout } from "~/services/kratos/performNativeLogout";
+import { loaderGuard, redirectToHome } from "~/utils";
 
 export { ErrorBoundary } from "~/ErrorBoundary";
 
@@ -13,16 +12,13 @@ export const loader = async ({
   params,
   request,
 }: LoaderArgs): Promise<TypedJsonResponse<never>> => {
-  const { url, session } = await loaderGuard(request);
+  const guard = await loaderGuard(request);
 
-  await kratos["/self-service/logout/api"].delete({
-    json: { session_token: session.get("session_token") },
+  await performNativeLogout({
+    json: { session_token: guard.session.get("session_token") },
   });
 
-  return redirect(url.searchParams.get("from") || "/", {
-    status: 303,
-    headers: { "set-cookie": await sessionStorage.destroySession(session) },
-  });
+  return redirectToHome(guard);
 };
 
 export type LoaderResponse = typeof loader;
diff --git a/src/website/app/routes/register.tsx b/src/website/app/routes/register.tsx
index bdb1b6f..34de3f1 100644
--- a/src/website/app/routes/register.tsx
+++ b/src/website/app/routes/register.tsx
@@ -8,7 +8,9 @@ import { serverError } from "remix-utils";
 import { z } from "zod";
 import { Footer } from "~/layout/Footer";
 import { Page } from "~/layout/Page";
-import { kratos } from "~/ory.server";
+import { createNativeRegistrationFlow } from "~/services/kratos/createNativeRegistrationFlow";
+import { getRegistrationFlow } from "~/services/kratos/getRegistrationFlow";
+import { updateRegistrationFlow } from "~/services/kratos/updateRegistrationFlow";
 import { sessionStorage } from "~/session.server";
 import {
   ActionData,
@@ -29,91 +31,61 @@ export const loader = async ({
 }: LoaderArgs): Promise<TypedJsonResponse<LoaderData>> => {
   const guard = await loaderGuard(request);
 
-  console.log("register url", guard.url);
-
-  if (guard.state === "with-identity") {
+  if (guard.type === "with-identity") {
     return redirectToHome(guard);
   }
 
   const { url, session, csrf } = guard;
 
-  console.log("session", session.data);
-
   const flow = url.searchParams.get("flow");
 
   if (flow === null) {
-    const response = await kratos["/self-service/registration/api"].get({
+    const response = await createNativeRegistrationFlow({
       query: { return_session_token_exchange_code: true },
     });
 
-    if (response.ok === false) {
-      const body = await response.json();
-
-      console.log(
-        "register loader",
-        response.status,
-        JSON.stringify(body, null, 2)
-      );
-
-      throw serverError(body.error.message);
+    switch (response.type) {
+      case "failure":
+        throw serverError(response.message);
+      case "success":
+        session.set(
+          "session_token_exchange_code",
+          response.session_token_exchange_code
+        );
+
+        url.searchParams.set("flow", response.flow);
+
+        return redirect(url.toString(), {
+          status: 303,
+          headers: {
+            "set-cookie": await sessionStorage.commitSession(session),
+          },
+        });
     }
-
-    const body = await response.json();
-
-    console.log(
-      "register loader",
-      response.status,
-      JSON.stringify(body, null, 2)
-    );
-
-    session.set(
-      "session_token_exchange_code",
-      body.session_token_exchange_code
-    );
-
-    url.searchParams.set("flow", body.id);
-
-    return redirect(url.toString(), {
-      status: 303,
-      headers: { "set-cookie": await sessionStorage.commitSession(session) },
-    });
   }
 
-  const response = await kratos["/self-service/registration/flows"].get({
+  const response = await getRegistrationFlow({
     query: { id: flow },
   });
 
-  if (response.ok === false) {
-    url.searchParams.delete("flow");
+  switch (response.type) {
+    case "failure":
+      url.searchParams.delete("flow");
 
-    return redirect(url.toString(), {
-      status: 303,
-      headers: { "set-cookie": await sessionStorage.commitSession(session) },
-    });
-  }
-
-  const body = await response.json();
-
-  console.log(
-    "register loader",
-    response.status,
-    JSON.stringify(body, null, 2)
-  );
-
-  const { messages = [] } = body.ui;
-
-  if (messages.length > 0) {
-    switch (messages[0].type) {
-      case "error": {
-        throw serverError(messages[0].text);
-      }
-    }
+      return redirect(url.toString(), {
+        status: 303,
+        headers: { "set-cookie": await sessionStorage.commitSession(session) },
+      });
+    case "success":
+      return json(
+        { csrf },
+        {
+          headers: {
+            "set-cookie": await sessionStorage.commitSession(session),
+          },
+        }
+      );
   }
-
-  return json(
-    { csrf },
-    { headers: { "set-cookie": await sessionStorage.commitSession(session) } }
-  );
 };
 
 export type LoaderResponse = typeof loader;
@@ -148,9 +120,9 @@ export const action = async ({
 }: ActionArgs): Promise<TypedJsonResponse<ActionData>> => {
   const guard = await actionGuard(request, actionSchema);
 
-  if (guard.state === "not-valid") {
-    return json<ActionData>({
-      state: "not-valid",
+  if (guard.type === "not-valid") {
+    return json({
+      type: "not-valid",
       messages: guard.messages,
 
       defaultValues: guard.defaultValues,
@@ -162,17 +134,19 @@ export const action = async ({
   const flow = url.searchParams.get("flow");
 
   if (flow === null) {
-    return json<ActionData>({
-      state: "failure",
+    return json({
+      type: "failure",
       message: "Missing required parameter",
 
       defaultValues: guard.defaultValues,
     });
   }
 
+  let response;
+
   switch (data.type) {
-    case "register": {
-      const response = await kratos["/self-service/registration"].post({
+    case "register":
+      response = await updateRegistrationFlow({
         query: { flow },
         json: {
           method: "password",
@@ -181,583 +155,62 @@ export const action = async ({
         },
       });
 
-      switch (response.status) {
-        case 200: {
-          const body = await response.json();
-
-          console.log(
-            "register password",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          session.set("session_token", body.session_token);
-
-          return redirect(url.searchParams.get("from") || "/", {
-            status: 303,
-            headers: {
-              "set-cookie": await sessionStorage.commitSession(session),
-            },
-          });
-        }
-        case 400: {
-          const body = await response.json();
-
-          console.log(
-            "register password",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          const { messages = [] } = body.ui;
-
-          if (messages.length > 0) {
-            switch (messages[0].type) {
-              case "error": {
-                return json<ActionData>({
-                  state: "failure",
-                  message: messages[0].text,
-
-                  defaultValues: guard.defaultValues,
-                });
-              }
-              case "info":
-              case "success": {
-                return json<ActionData>({
-                  state: "success",
-                  message: messages[0].text,
-
-                  defaultValues: guard.defaultValues,
-                });
-              }
-            }
-          }
-
-          break;
-        }
-        case 422: {
-          const body = await response.json();
-
-          console.log(
-            "register password",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          if (body.redirect_browser_to !== undefined) {
-            return redirect(body.redirect_browser_to, {
-              status: 303,
-              headers: {
-                "set-cookie": await sessionStorage.commitSession(session),
-              },
-            });
-          }
-
-          if (body.error !== undefined) {
-            return json<ActionData>({
-              state: "failure",
-              // TODO: figure out why openapi + fets produce the incorrect type
-              // @ts-ignore
-              message: body.error.message,
-
-              defaultValues: guard.defaultValues,
-            });
-          }
-
-          break;
-        }
-        case 410:
-        // 403?
-        default: {
-          const body = await response.json();
-
-          console.log(
-            "register password",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          return json<ActionData>({
-            state: "failure",
-            message: body.error.message,
-
-            defaultValues: guard.defaultValues,
-          });
-        }
-      }
-
       break;
-    }
-    case "google": {
-      const response = await kratos["/self-service/registration"].post({
+    case "google":
+      response = await updateRegistrationFlow({
         query: { flow },
-        json: {
-          method: "oidc",
-          provider: "google",
-        },
+        json: { method: "oidc", provider: "google" },
       });
 
-      switch (response.status) {
-        case 200: {
-          const body = await response.json();
-
-          console.log(
-            "register google",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          session.set("session_token", body.session_token);
-
-          return redirect(url.searchParams.get("from") || "/", {
-            status: 303,
-            headers: {
-              "set-cookie": await sessionStorage.commitSession(session),
-            },
-          });
-        }
-        case 400: {
-          const body = await response.json();
-
-          console.log(
-            "register google",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          const { messages = [] } = body.ui;
-
-          if (messages.length > 0) {
-            switch (messages[0].type) {
-              case "error": {
-                return json<ActionData>({
-                  state: "failure",
-                  message: messages[0].text,
-
-                  defaultValues: guard.defaultValues,
-                });
-              }
-              case "info":
-              case "success": {
-                return json<ActionData>({
-                  state: "success",
-                  message: messages[0].text,
-
-                  defaultValues: guard.defaultValues,
-                });
-              }
-            }
-          }
-
-          break;
-        }
-        case 422: {
-          const body = await response.json();
-
-          console.log(
-            "register google",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          if (body.redirect_browser_to !== undefined) {
-            return redirect(body.redirect_browser_to, {
-              status: 303,
-              headers: {
-                "set-cookie": await sessionStorage.commitSession(session),
-              },
-            });
-          }
-
-          if (body.error !== undefined) {
-            return json<ActionData>({
-              state: "failure",
-              // TODO: figure out why openapi + fets produce the incorrect type
-              // @ts-ignore
-              message: body.error.message,
-
-              defaultValues: guard.defaultValues,
-            });
-          }
-
-          break;
-        }
-        case 410:
-        // 403?
-        default: {
-          const body = await response.json();
-
-          console.log(
-            "register google",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          return json<ActionData>({
-            state: "failure",
-            message: body.error.message,
-
-            defaultValues: guard.defaultValues,
-          });
-        }
-      }
-
       break;
-    }
-    case "github": {
-      const response = await kratos["/self-service/registration"].post({
+    case "github":
+      response = await updateRegistrationFlow({
         query: { flow },
-        json: {
-          method: "oidc",
-          provider: "github",
-        },
+        json: { method: "oidc", provider: "github" },
       });
 
-      switch (response.status) {
-        case 200: {
-          const body = await response.json();
-
-          console.log(
-            "register github",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          session.set("session_token", body.session_token);
-
-          return redirect(url.searchParams.get("from") || "/", {
-            status: 303,
-            headers: {
-              "set-cookie": await sessionStorage.commitSession(session),
-            },
-          });
-        }
-        case 400: {
-          const body = await response.json();
-
-          console.log(
-            "register github",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          const { messages = [] } = body.ui;
-
-          if (messages.length > 0) {
-            switch (messages[0].type) {
-              case "error": {
-                return json<ActionData>({
-                  state: "failure",
-                  message: messages[0].text,
-
-                  defaultValues: guard.defaultValues,
-                });
-              }
-              case "info":
-              case "success": {
-                return json<ActionData>({
-                  state: "success",
-                  message: messages[0].text,
-
-                  defaultValues: guard.defaultValues,
-                });
-              }
-            }
-          }
-
-          break;
-        }
-        case 422: {
-          const body = await response.json();
-
-          console.log(
-            "register github",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          if (body.redirect_browser_to !== undefined) {
-            return redirect(body.redirect_browser_to, {
-              status: 303,
-              headers: {
-                "set-cookie": await sessionStorage.commitSession(session),
-              },
-            });
-          }
-
-          if (body.error !== undefined) {
-            return json<ActionData>({
-              state: "failure",
-              // TODO: figure out why openapi + fets produce the incorrect type
-              // @ts-ignore
-              message: body.error.message,
-
-              defaultValues: guard.defaultValues,
-            });
-          }
-
-          break;
-        }
-        case 410:
-        // 403?
-        default: {
-          const body = await response.json();
-
-          console.log(
-            "register github",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          return json<ActionData>({
-            state: "failure",
-            message: body.error.message,
-
-            defaultValues: guard.defaultValues,
-          });
-        }
-      }
-
       break;
-    }
-    case "facebook": {
-      const response = await kratos["/self-service/registration"].post({
+    case "facebook":
+      response = await updateRegistrationFlow({
         query: { flow },
-        json: {
-          method: "oidc",
-          provider: "facebook",
-        },
+        json: { method: "oidc", provider: "facebook" },
       });
 
-      switch (response.status) {
-        case 200: {
-          const body = await response.json();
-
-          console.log(
-            "facebook",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          session.set("session_token", body.session_token);
-
-          return redirect(url.searchParams.get("from") || "/", {
-            status: 303,
-            headers: {
-              "set-cookie": await sessionStorage.commitSession(session),
-            },
-          });
-        }
-        case 400: {
-          const body = await response.json();
-
-          console.log(
-            "facebook",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          const { messages = [] } = body.ui;
-
-          if (messages.length > 0) {
-            switch (messages[0].type) {
-              case "error": {
-                return json<ActionData>({
-                  state: "failure",
-                  message: messages[0].text,
-
-                  defaultValues: guard.defaultValues,
-                });
-              }
-              case "info":
-              case "success": {
-                return json<ActionData>({
-                  state: "success",
-                  message: messages[0].text,
-
-                  defaultValues: guard.defaultValues,
-                });
-              }
-            }
-          }
-
-          break;
-        }
-        case 422: {
-          const body = await response.json();
-
-          console.log(
-            "facebook",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          if (body.redirect_browser_to !== undefined) {
-            return redirect(body.redirect_browser_to, {
-              status: 303,
-              headers: {
-                "set-cookie": await sessionStorage.commitSession(session),
-              },
-            });
-          }
-
-          if (body.error !== undefined) {
-            return json<ActionData>({
-              state: "failure",
-              // TODO: figure out why openapi + fets produce the incorrect type
-              // @ts-ignore
-              message: body.error.message,
-
-              defaultValues: guard.defaultValues,
-            });
-          }
-
-          break;
-        }
-        case 410:
-        // 403?
-        default: {
-          const body = await response.json();
-
-          console.log(
-            "facebook",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          return json<ActionData>({
-            state: "failure",
-            message: body.error.message,
-
-            defaultValues: guard.defaultValues,
-          });
-        }
-      }
-
       break;
-    }
-    case "apple": {
-      const response = await kratos["/self-service/registration"].post({
+    case "apple":
+      response = await updateRegistrationFlow({
         query: { flow },
-        json: {
-          method: "oidc",
-          provider: "apple",
-        },
+        json: { method: "oidc", provider: "apple" },
       });
 
-      switch (response.status) {
-        case 200: {
-          const body = await response.json();
-
-          console.log(
-            "register apple",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          session.set("session_token", body.session_token);
-
-          return redirect(url.searchParams.get("from") || "/", {
-            status: 303,
-            headers: {
-              "set-cookie": await sessionStorage.commitSession(session),
-            },
-          });
-        }
-        case 400: {
-          const body = await response.json();
-
-          console.log(
-            "register apple",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          const { messages = [] } = body.ui;
-
-          if (messages.length > 0) {
-            switch (messages[0].type) {
-              case "error": {
-                return json<ActionData>({
-                  state: "failure",
-                  message: messages[0].text,
-
-                  defaultValues: guard.defaultValues,
-                });
-              }
-              case "info":
-              case "success": {
-                return json<ActionData>({
-                  state: "success",
-                  message: messages[0].text,
-
-                  defaultValues: guard.defaultValues,
-                });
-              }
-            }
-          }
-
-          break;
-        }
-        case 422: {
-          const body = await response.json();
-
-          console.log(
-            "register apple",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          if (body.redirect_browser_to !== undefined) {
-            return redirect(body.redirect_browser_to, {
-              status: 303,
-              headers: {
-                "set-cookie": await sessionStorage.commitSession(session),
-              },
-            });
-          }
-
-          if (body.error !== undefined) {
-            return json<ActionData>({
-              state: "failure",
-              // TODO: figure out why openapi + fets produce the incorrect type
-              // @ts-ignore
-              message: body.error.message,
-
-              defaultValues: guard.defaultValues,
-            });
-          }
-
-          break;
-        }
-        case 410:
-        // 403?
-        default: {
-          const body = await response.json();
-
-          console.log(
-            "register apple",
-            response.status,
-            JSON.stringify(body, null, 2)
-          );
-
-          return json<ActionData>({
-            state: "failure",
-            message: body.error.message,
-
-            defaultValues: guard.defaultValues,
-          });
-        }
-      }
-
       break;
-    }
   }
 
-  return json<ActionData>({
-    state: "failure",
-    message: "Unsupported operation",
+  switch (response.type) {
+    case "failure":
+      return json({
+        type: "failure",
+        message: response.message,
 
-    defaultValues: guard.defaultValues,
-  });
+        defaultValues: guard.defaultValues,
+      });
+    case "info":
+      return json({
+        type: "info",
+        message: response.message,
+
+        defaultValues: guard.defaultValues,
+      });
+    case "success":
+      session.set("session_token", response.session_token);
+
+      return redirectToHome(guard);
+    case "redirect":
+      return redirect(response.redirect_browser_to, {
+        status: 303,
+        headers: {
+          "set-cookie": await sessionStorage.commitSession(session),
+        },
+      });
+  }
 };
diff --git a/src/website/app/routes/register/PasswordRegister.tsx b/src/website/app/routes/register/PasswordRegister.tsx
index 13dc43f..b09f1a3 100644
--- a/src/website/app/routes/register/PasswordRegister.tsx
+++ b/src/website/app/routes/register/PasswordRegister.tsx
@@ -14,22 +14,6 @@ import { TextLink } from "~/layout/TextLink";
 import { RegisterPasswordInput } from "~/routes/register/RegisterPasswordInput";
 import { ActionData, LoaderData } from "~/utils";
 
-// const initialState = {
-//   passwordVisible: false,
-// };
-// const reducer = produce((draft, { type, payload }) => {
-//   console.log("reducer type", type, payload);
-
-//   switch (type) {
-//     case "show-password":
-//       draft.passwordVisible = true;
-//       break;
-//     case "hide-password":
-//       draft.passwordVisible = false;
-//       break;
-//   }
-// });
-
 export const PasswordRegister: FC = () => {
   const { csrf } = useLoaderData<LoaderData>();
   const fetcher = useFetcher<ActionData>();
diff --git a/src/website/app/routes/register/SocialRegister.tsx b/src/website/app/routes/register/SocialRegister.tsx
index c52d5c1..f16ce39 100644
--- a/src/website/app/routes/register/SocialRegister.tsx
+++ b/src/website/app/routes/register/SocialRegister.tsx
@@ -11,22 +11,6 @@ import { ServerMessage } from "~/layout/ServerMessage";
 import { ActionData, LoaderData } from "~/utils";
 import { SocialButtons } from "../social/SocialButtons";
 
-// const initialState = {
-//   passwordVisible: false,
-// };
-// const reducer = produce((draft, { type, payload }) => {
-//   console.log("reducer type", type, payload);
-
-//   switch (type) {
-//     case "show-password":
-//       draft.passwordVisible = true;
-//       break;
-//     case "hide-password":
-//       draft.passwordVisible = false;
-//       break;
-//   }
-// });
-
 export const SocialRegister: FC = () => {
   const { csrf } = useLoaderData<LoaderData>();
   const fetcher = useFetcher<ActionData>();
diff --git a/src/website/app/routes/social/SocialButtons.tsx b/src/website/app/routes/social/SocialButtons.tsx
index 5167fc3..b3225ec 100644
--- a/src/website/app/routes/social/SocialButtons.tsx
+++ b/src/website/app/routes/social/SocialButtons.tsx
@@ -17,32 +17,40 @@ export const SocialButtons = () => (
     </SocialButton>
     <SocialButton
       type="github"
+      disabled
       className="text-slate-500 hover:text-github-900"
     >
       <SiGithub className="w-8 h-8" />
     </SocialButton>
     <SocialButton
       type="facebook"
+      disabled
       className="text-slate-500 hover:text-facebook-900"
     >
       <SiFacebook className="w-8 h-8" />
     </SocialButton>
-    <SocialButton type="apple" className="text-slate-500 hover:text-apple-900">
+    <SocialButton
+      type="apple"
+      disabled
+      className="text-slate-500 hover:text-apple-900"
+    >
       <SiApple className="w-8 h-8" />
     </SocialButton>
   </div>
 );
 
 const SocialButton: FC<
-  PropsWithChildren & { type: string; className?: string }
-> = ({ type, className, children }) => (
+  PropsWithChildren & { type: string; disabled?: boolean; className?: string }
+> = ({ type, disabled = false, className, children }) => (
   <button
     type="submit"
     name="type"
     value={type}
+    disabled={disabled}
     className={join(
       "shadow shadow-slate-200 border border-slate-200 rounded-sm p-6 bg-white hover:bg-slate-100 transition",
-      className
+      className,
+      disabled ? "pointer-events-none opacity-50" : ""
     )}
   >
     {children}
diff --git a/src/website/app/services/kratos/client.ts b/src/website/app/services/kratos/client.ts
new file mode 100644
index 0000000..2fed607
--- /dev/null
+++ b/src/website/app/services/kratos/client.ts
@@ -0,0 +1,6 @@
+import { createClient } from "fets";
+import { Kratos } from "~/openapi/kratos";
+
+export const kratos = createClient<Kratos>({
+  endpoint: process.env.KRATOS_ADMIN_ENDPOINT,
+});
\ No newline at end of file
diff --git a/src/website/app/services/kratos/createNativeLoginFlow.ts b/src/website/app/services/kratos/createNativeLoginFlow.ts
new file mode 100644
index 0000000..54614c3
--- /dev/null
+++ b/src/website/app/services/kratos/createNativeLoginFlow.ts
@@ -0,0 +1,54 @@
+import { OASRequestParams, Simplify } from "fets";
+import { Kratos } from "~/openapi/kratos";
+import { kratos } from "~/services/kratos/client";
+
+type Success = {
+  type: "success";
+  flow: string;
+  session_token_exchange_code: string;
+};
+type Failure = { type: "failure"; message: string };
+
+export const createNativeLoginFlow = async (
+  request: Simplify<
+    OASRequestParams<Kratos, "/self-service/login/api", "get">
+  >
+): Promise<Success | Failure> => {
+  const response = await kratos["/self-service/login/api"].get(request);
+
+  if (response.ok === false) {
+    const body = await response.json();
+
+    console.log(
+      "createNativeLoginFlow",
+      response.status,
+      JSON.stringify(body, null, 2)
+    );
+
+    return {
+      type: "failure",
+      message: body.error.message,
+    };
+  }
+
+  const body = await response.json();
+
+  console.log(
+    "createNativeLoginFlow",
+    response.status,
+    JSON.stringify(body, null, 2)
+  );
+
+  if (body.session_token_exchange_code === undefined) {
+    return {
+      type: "failure",
+      message: "Something went wrong",
+    };
+  }
+
+  return {
+    type: "success",
+    flow: body.id,
+    session_token_exchange_code: body.session_token_exchange_code,
+  };
+};
diff --git a/src/website/app/services/kratos/createNativeRecoveryFlow.ts b/src/website/app/services/kratos/createNativeRecoveryFlow.ts
new file mode 100644
index 0000000..9e405ea
--- /dev/null
+++ b/src/website/app/services/kratos/createNativeRecoveryFlow.ts
@@ -0,0 +1,45 @@
+import { OASRequestParams, Simplify } from "fets";
+import { Kratos } from "~/openapi/kratos";
+import { kratos } from "~/services/kratos/client";
+
+type Success = {
+  type: "success";
+  flow: string;
+};
+type Failure = { type: "failure"; message: string };
+
+export const createNativeRecoveryFlow = async (
+  request: Simplify<
+    OASRequestParams<Kratos, "/self-service/recovery/api", "get">
+  >
+): Promise<Success | Failure> => {
+  const response = await kratos["/self-service/recovery/api"].get(request);
+
+  if (response.ok === false) {
+    const body = await response.json();
+
+    console.log(
+      "createNativeRecoveryFlow",
+      response.status,
+      JSON.stringify(body, null, 2)
+    );
+
+    return {
+      type: "failure",
+      message: body.error.message,
+    };
+  }
+
+  const body = await response.json();
+
+  console.log(
+    "createNativeRecoveryFlow",
+    response.status,
+    JSON.stringify(body, null, 2)
+  );
+
+  return {
+    type: "success",
+    flow: body.id,
+  };
+};
diff --git a/src/website/app/services/kratos/createNativeRegistrationFlow.ts b/src/website/app/services/kratos/createNativeRegistrationFlow.ts
new file mode 100644
index 0000000..7b8ca42
--- /dev/null
+++ b/src/website/app/services/kratos/createNativeRegistrationFlow.ts
@@ -0,0 +1,54 @@
+import { OASRequestParams, Simplify } from "fets";
+import { Kratos } from "~/openapi/kratos";
+import { kratos } from "~/services/kratos/client";
+
+type Success = {
+  type: "success";
+  flow: string;
+  session_token_exchange_code: string;
+};
+type Failure = { type: "failure"; message: string };
+
+export const createNativeRegistrationFlow = async (
+  request: Simplify<
+    OASRequestParams<Kratos, "/self-service/registration/api", "get">
+  >
+): Promise<Success | Failure> => {
+  const response = await kratos["/self-service/registration/api"].get(request);
+
+  if (response.ok === false) {
+    const body = await response.json();
+
+    console.log(
+      "createNativeRegistrationFlow",
+      response.status,
+      JSON.stringify(body, null, 2)
+    );
+
+    return {
+      type: "failure",
+      message: body.error.message,
+    };
+  }
+
+  const body = await response.json();
+
+  console.log(
+    "createNativeRegistrationFlow",
+    response.status,
+    JSON.stringify(body, null, 2)
+  );
+
+  if (body.session_token_exchange_code === undefined) {
+    return {
+      type: "failure",
+      message: "Something went wrong",
+    };
+  }
+
+  return {
+    type: "success",
+    flow: body.id,
+    session_token_exchange_code: body.session_token_exchange_code,
+  };
+};
diff --git a/src/website/app/services/kratos/disableMySession.ts b/src/website/app/services/kratos/disableMySession.ts
new file mode 100644
index 0000000..a3e1344
--- /dev/null
+++ b/src/website/app/services/kratos/disableMySession.ts
@@ -0,0 +1,43 @@
+import { OASRequestParams, Simplify } from "fets";
+import { Kratos } from "~/openapi/kratos";
+import { kratos } from "~/services/kratos/client";
+
+type Success = {
+  type: "success";
+  message: string;
+};
+type Failure = { type: "failure"; message: string };
+
+export const disableMySession = async (
+  request: Simplify<OASRequestParams<Kratos, "/sessions/{id}", "delete">>
+): Promise<Success | Failure> => {
+  const response = await kratos["/sessions/{id}"].delete(request);
+
+  if (response.ok === false) {
+    const body = await response.json();
+
+    console.log(
+      "disableMySession",
+      response.status,
+      JSON.stringify(body, null, 2)
+    );
+
+    return {
+      type: "failure",
+      message: body.error.message,
+    };
+  }
+
+  const body = await response.json();
+
+  console.log(
+    "disableMySession",
+    response.status,
+    JSON.stringify(body, null, 2)
+  );
+
+  return {
+    type: "success",
+    message: "Session revoked",
+  };
+};
diff --git a/src/website/app/services/kratos/disableSession.ts b/src/website/app/services/kratos/disableSession.ts
new file mode 100644
index 0000000..7a4099c
--- /dev/null
+++ b/src/website/app/services/kratos/disableSession.ts
@@ -0,0 +1,39 @@
+import { OASRequestParams, Simplify } from "fets";
+import { Kratos } from "~/openapi/kratos";
+import { kratos } from "~/services/kratos/client";
+
+type Success = {
+  type: "success";
+  message: string;
+};
+type Failure = { type: "failure"; message: string };
+
+export const disableSession = async (
+  request: Simplify<OASRequestParams<Kratos, "/admin/sessions/{id}", "delete">>
+): Promise<Success | Failure> => {
+  const response = await kratos["/admin/sessions/{id}"].delete(request);
+
+  if (response.ok === false) {
+    const body = await response.json();
+
+    console.log(
+      "disableSession",
+      response.status,
+      JSON.stringify(body, null, 2)
+    );
+
+    return {
+      type: "failure",
+      message: body.error.message,
+    };
+  }
+
+  const body = await response.json();
+
+  console.log("disableSession", response.status, JSON.stringify(body, null, 2));
+
+  return {
+    type: "success",
+    message: "Session revoked",
+  };
+};
diff --git a/src/website/app/services/kratos/exchangeSessionToken.ts b/src/website/app/services/kratos/exchangeSessionToken.ts
new file mode 100644
index 0000000..8be49f2
--- /dev/null
+++ b/src/website/app/services/kratos/exchangeSessionToken.ts
@@ -0,0 +1,50 @@
+import { OASRequestParams, Simplify } from "fets";
+import { Kratos } from "~/openapi/kratos";
+import { kratos } from "~/services/kratos/client";
+
+type Success = {
+  type: "success";
+  session_token: string;
+};
+type Failure = { type: "failure"; message: string };
+
+export const exchangeSessionToken = async (
+  request: Simplify<OASRequestParams<Kratos, "/sessions/token-exchange", "get">>
+): Promise<Success | Failure> => {
+  const response = await kratos["/sessions/token-exchange"].get(request);
+
+  if (response.ok === false) {
+    const body = await response.json();
+
+    console.log(
+      "exchangeSessionToken",
+      response.status,
+      JSON.stringify(body, null, 2)
+    );
+
+    return {
+      type: "failure",
+      message: body.error.message,
+    };
+  }
+
+  const body = await response.json();
+
+  console.log(
+    "exchangeSessionToken",
+    response.status,
+    JSON.stringify(body, null, 2)
+  );
+
+  if (body.session_token === undefined) {
+    return {
+      type: "failure",
+      message: "Something went wrong",
+    };
+  }
+
+  return {
+    type: "success",
+    session_token: body.session_token,
+  };
+};
diff --git a/src/website/app/services/kratos/getIdentity.ts b/src/website/app/services/kratos/getIdentity.ts
new file mode 100644
index 0000000..c3ce5b6
--- /dev/null
+++ b/src/website/app/services/kratos/getIdentity.ts
@@ -0,0 +1,29 @@
+import { OASRequestParams, Simplify } from "fets";
+import { Kratos, KratosIdentity } from "~/openapi/kratos";
+import { kratos } from "~/services/kratos/client";
+
+type Success = {
+  type: "success";
+  identity: KratosIdentity;
+};
+type Failure = { type: "failure"; message: string };
+
+export const getIdentity = async (
+  request: Simplify<OASRequestParams<Kratos, "/admin/identities/{id}", "get">>
+): Promise<Success | Failure> => {
+  const response = await kratos["/admin/identities/{id}"].get(request);
+
+  if (response.ok === false) {
+    const body = await response.json();
+
+    console.log("getIdentity", response.status, JSON.stringify(body, null, 2));
+
+    return { type: "failure", message: body.error.message };
+  }
+
+  const body = await response.json();
+
+  console.log("getIdentity", response.status, JSON.stringify(body, null, 2));
+
+  return { type: "success", identity: body };
+};
diff --git a/src/website/app/services/kratos/getLoginFlow.ts b/src/website/app/services/kratos/getLoginFlow.ts
new file mode 100644
index 0000000..ef3bcc2
--- /dev/null
+++ b/src/website/app/services/kratos/getLoginFlow.ts
@@ -0,0 +1,34 @@
+import { OASRequestParams, Simplify } from "fets";
+import { Kratos } from "~/openapi/kratos";
+import { kratos } from "~/services/kratos/client";
+
+type Success = {
+  type: "success";
+};
+type Failure = { type: "failure" };
+
+export const getLoginFlow = async (
+  request: Simplify<
+    OASRequestParams<Kratos, "/self-service/login/flows", "get">
+  >
+): Promise<Success | Failure> => {
+  const response = await kratos["/self-service/login/flows"].get(request);
+
+  if (response.ok === false) {
+    const body = await response.json();
+
+    console.log("getLoginFlow", response.status, JSON.stringify(body, null, 2));
+
+    return {
+      type: "failure",
+    };
+  }
+
+  const body = await response.json();
+
+  console.log("getLoginFlow", response.status, JSON.stringify(body, null, 2));
+
+  return {
+    type: "success",
+  };
+};
diff --git a/src/website/app/services/kratos/getRecoveryFlow.ts b/src/website/app/services/kratos/getRecoveryFlow.ts
new file mode 100644
index 0000000..36556cd
--- /dev/null
+++ b/src/website/app/services/kratos/getRecoveryFlow.ts
@@ -0,0 +1,42 @@
+import { OASRequestParams, Simplify } from "fets";
+import { Kratos } from "~/openapi/kratos";
+import { kratos } from "~/services/kratos/client";
+
+type Success = {
+  type: "success";
+};
+type Failure = { type: "failure" };
+
+export const getRecoveryFlow = async (
+  request: Simplify<
+    OASRequestParams<Kratos, "/self-service/recovery/flows", "get">
+  >
+): Promise<Success | Failure> => {
+  const response = await kratos["/self-service/recovery/flows"].get(request);
+
+  if (response.ok === false) {
+    const body = await response.json();
+
+    console.log(
+      "getRecoveryFlow",
+      response.status,
+      JSON.stringify(body, null, 2)
+    );
+
+    return {
+      type: "failure",
+    };
+  }
+
+  const body = await response.json();
+
+  console.log(
+    "getRecoveryFlow",
+    response.status,
+    JSON.stringify(body, null, 2)
+  );
+
+  return {
+    type: "success",
+  };
+};
diff --git a/src/website/app/services/kratos/getRegistrationFlow.ts b/src/website/app/services/kratos/getRegistrationFlow.ts
new file mode 100644
index 0000000..d82f4e7
--- /dev/null
+++ b/src/website/app/services/kratos/getRegistrationFlow.ts
@@ -0,0 +1,44 @@
+import { OASRequestParams, Simplify } from "fets";
+import { Kratos } from "~/openapi/kratos";
+import { kratos } from "~/services/kratos/client";
+
+type Success = {
+  type: "success";
+};
+type Failure = { type: "failure" };
+
+export const getRegistrationFlow = async (
+  request: Simplify<
+    OASRequestParams<Kratos, "/self-service/registration/flows", "get">
+  >
+): Promise<Success | Failure> => {
+  const response = await kratos["/self-service/registration/flows"].get(
+    request
+  );
+
+  if (response.ok === false) {
+    const body = await response.json();
+
+    console.log(
+      "getRegistrationFlow",
+      response.status,
+      JSON.stringify(body, null, 2)
+    );
+
+    return {
+      type: "failure",
+    };
+  }
+
+  const body = await response.json();
+
+  console.log(
+    "getRegistrationFlow",
+    response.status,
+    JSON.stringify(body, null, 2)
+  );
+
+  return {
+    type: "success",
+  };
+};
diff --git a/src/website/app/services/kratos/listIdentities.ts b/src/website/app/services/kratos/listIdentities.ts
new file mode 100644
index 0000000..5c9b5a7
--- /dev/null
+++ b/src/website/app/services/kratos/listIdentities.ts
@@ -0,0 +1,33 @@
+import { OASRequestParams, Simplify } from "fets";
+import { Kratos, KratosIdentity } from "~/openapi/kratos";
+import { kratos } from "~/services/kratos/client";
+
+type Success = {
+  type: "success";
+  identities: KratosIdentity[];
+};
+type Failure = { type: "failure"; message: string };
+
+export const listIdentities = async (
+  request: Simplify<OASRequestParams<Kratos, "/admin/identities", "get">>
+): Promise<Success | Failure> => {
+  const response = await kratos["/admin/identities"].get(request);
+
+  if (response.ok === false) {
+    const body = await response.json();
+
+    console.log(
+      "listIdentities",
+      response.status,
+      JSON.stringify(body, null, 2)
+    );
+
+    return { type: "failure", message: body.error.message };
+  }
+
+  const body = await response.json();
+
+  console.log("listIdentities", response.status, JSON.stringify(body, null, 2));
+
+  return { type: "success", identities: body };
+};
diff --git a/src/website/app/services/kratos/listIdentitySessions.ts b/src/website/app/services/kratos/listIdentitySessions.ts
new file mode 100644
index 0000000..f6570f9
--- /dev/null
+++ b/src/website/app/services/kratos/listIdentitySessions.ts
@@ -0,0 +1,39 @@
+import { OASRequestParams, Simplify } from "fets";
+import { Kratos, KratosSession } from "~/openapi/kratos";
+import { kratos } from "~/services/kratos/client";
+
+type Success = {
+  type: "success";
+  identities: KratosSession[];
+};
+type Failure = { type: "failure"; message: string };
+
+export const listIdentitySessions = async (
+  request: Simplify<
+    OASRequestParams<Kratos, "/admin/identities/{id}/sessions", "get">
+  >
+): Promise<Success | Failure> => {
+  const response = await kratos["/admin/identities/{id}/sessions"].get(request);
+
+  if (response.ok === false) {
+    const body = await response.json();
+
+    console.log(
+      "listIdentitySessions",
+      response.status,
+      JSON.stringify(body, null, 2)
+    );
+
+    return { type: "failure", message: body.error.message };
+  }
+
+  const body = await response.json();
+
+  console.log(
+    "listIdentitySessions",
+    response.status,
+    JSON.stringify(body, null, 2)
+  );
+
+  return { type: "success", identities: body };
+};
diff --git a/src/website/app/services/kratos/listMySessions.ts b/src/website/app/services/kratos/listMySessions.ts
new file mode 100644
index 0000000..f73a16d
--- /dev/null
+++ b/src/website/app/services/kratos/listMySessions.ts
@@ -0,0 +1,33 @@
+import { OASRequestParams, Simplify } from "fets";
+import { Kratos, KratosSession } from "~/openapi/kratos";
+import { kratos } from "~/services/kratos/client";
+
+type Success = {
+  type: "success";
+  identities: KratosSession[];
+};
+type Failure = { type: "failure"; message: string };
+
+export const listMySessions = async (
+  request: Simplify<OASRequestParams<Kratos, "/sessions", "get">>
+): Promise<Success | Failure> => {
+  const response = await kratos["/sessions"].get(request);
+
+  if (response.ok === false) {
+    const body = await response.json();
+
+    console.log(
+      "listMySessions",
+      response.status,
+      JSON.stringify(body, null, 2)
+    );
+
+    return { type: "failure", message: body.error.message };
+  }
+
+  const body = await response.json();
+
+  console.log("listMySessions", response.status, JSON.stringify(body, null, 2));
+
+  return { type: "success", identities: body };
+};
diff --git a/src/website/app/services/kratos/performNativeLogout.ts b/src/website/app/services/kratos/performNativeLogout.ts
new file mode 100644
index 0000000..cbac4be
--- /dev/null
+++ b/src/website/app/services/kratos/performNativeLogout.ts
@@ -0,0 +1,44 @@
+import { OASRequestParams, Simplify } from "fets";
+import { Kratos } from "~/openapi/kratos";
+import { kratos } from "~/services/kratos/client";
+
+type Success = {
+  type: "success";
+  message: string;
+};
+type Failure = { type: "failure" };
+
+export const performNativeLogout = async (
+  request: Simplify<
+    OASRequestParams<Kratos, "/self-service/logout/api", "delete">
+  >
+): Promise<Success | Failure> => {
+  const response = await kratos["/self-service/logout/api"].delete(request);
+
+  if (response.ok === false) {
+    const body = await response.json();
+
+    console.log(
+      "performNativeLogout",
+      response.status,
+      JSON.stringify(body, null, 2)
+    );
+
+    return {
+      type: "failure",
+    };
+  }
+
+  const body = await response.json();
+
+  console.log(
+    "performNativeLogout",
+    response.status,
+    JSON.stringify(body, null, 2)
+  );
+
+  return {
+    type: "success",
+    message: "Logged out",
+  };
+};
diff --git a/src/website/app/services/kratos/toSession.ts b/src/website/app/services/kratos/toSession.ts
new file mode 100644
index 0000000..7bf7a00
--- /dev/null
+++ b/src/website/app/services/kratos/toSession.ts
@@ -0,0 +1,32 @@
+import { OASRequestParams, Simplify } from "fets";
+import { Kratos, KratosSession } from "~/openapi/kratos";
+import { kratos } from "~/services/kratos/client";
+
+export type WithoutIdentity = {
+  type: "without-identity";
+  message: string;
+};
+export type WithIdentity = {
+  type: "with-identity";
+  identity: KratosSession;
+};
+
+export const toSession = async (
+  request: Simplify<OASRequestParams<Kratos, "/sessions/whoami", "get">>
+): Promise<WithoutIdentity | WithIdentity> => {
+  const response = await kratos["/sessions/whoami"].get(request);
+
+  if (response.ok === false) {
+    const body = await response.json();
+
+    console.log("toSession", response.status, JSON.stringify(body, null, 2));
+
+    return { type: "without-identity", message: body.error.message };
+  }
+
+  const body = await response.json();
+
+  console.log("toSession", response.status, JSON.stringify(body, null, 2));
+
+  return { type: "with-identity", identity: body };
+};
diff --git a/src/website/app/services/kratos/updateLoginFlow.ts b/src/website/app/services/kratos/updateLoginFlow.ts
new file mode 100644
index 0000000..2cc128b
--- /dev/null
+++ b/src/website/app/services/kratos/updateLoginFlow.ts
@@ -0,0 +1,117 @@
+import { OASRequestParams, Simplify } from "fets";
+import { Kratos } from "~/openapi/kratos";
+import { kratos } from "~/services/kratos/client";
+
+type Success = { type: "success"; session_token: string };
+type Failure = { type: "failure"; message: string };
+type Info = { type: "info"; message: string };
+type Redirect = { type: "redirect"; redirect_browser_to: string };
+
+export const updateLoginFlow = async (
+  request: Simplify<OASRequestParams<Kratos, "/self-service/login", "post">>
+): Promise<Success | Failure | Info | Redirect> => {
+  const response = await kratos["/self-service/login"].post(request);
+
+  switch (response.status) {
+    case 200: {
+      const body = await response.json();
+
+      console.log(
+        "updateLoginFlow password",
+        response.status,
+        JSON.stringify(body, null, 2)
+      );
+
+      if (body.session_token === undefined) {
+        return {
+          type: "failure",
+          message: "Something went wrong",
+        };
+      }
+
+      return {
+        type: "success",
+        session_token: body.session_token,
+      };
+    }
+    case 400: {
+      const body = await response.json();
+
+      console.log(
+        "updateLoginFlow password",
+        response.status,
+        JSON.stringify(body, null, 2)
+      );
+
+      const { messages = [] } = body.ui;
+
+      if (messages.length > 0) {
+        switch (messages[0].type) {
+          case "error": {
+            return {
+              type: "failure",
+              message: messages[0].text,
+            };
+          }
+          case "info":
+          case "success": {
+            return {
+              type: "info",
+              message: messages[0].text,
+            };
+          }
+        }
+      }
+
+      break;
+    }
+    case 422: {
+      const body = await response.json();
+
+      console.log(
+        "updateLoginFlow password",
+        response.status,
+        JSON.stringify(body, null, 2)
+      );
+
+      if (body.redirect_browser_to !== undefined) {
+        return {
+          type: "redirect",
+          redirect_browser_to: body.redirect_browser_to,
+        };
+      }
+
+      if (body.error !== undefined) {
+        return {
+          type: "failure",
+          // TODO: figure out why openapi + fets produce the incorrect type
+          // @ts-ignore
+          message: body.error.message,
+        };
+      }
+
+      break;
+    }
+    case 410:
+    // 403?
+    default: {
+      const body = await response.json();
+
+      console.log(
+        "updateLoginFlow password",
+        response.status,
+        JSON.stringify(body, null, 2)
+      );
+
+      return {
+        type: "failure",
+        message: body.error.message,
+      };
+    }
+  }
+
+  return {
+    type: "failure",
+    message: "Unsupported operation",
+  };
+};
diff --git a/src/website/app/services/kratos/updateRecoveryFlow.ts b/src/website/app/services/kratos/updateRecoveryFlow.ts
new file mode 100644
index 0000000..df8b39f
--- /dev/null
+++ b/src/website/app/services/kratos/updateRecoveryFlow.ts
@@ -0,0 +1,98 @@
+import { OASRequestParams, Simplify } from "fets";
+import { Kratos } from "~/openapi/kratos";
+import { kratos } from "~/services/kratos/client";
+
+type Success = { type: "success"; message: string };
+type Failure = { type: "failure"; message: string };
+type Info = { type: "info"; message: string };
+type Redirect = { type: "redirect"; redirect_browser_to: string };
+
+export const updateRecoveryFlow = async (
+  request: Simplify<OASRequestParams<Kratos, "/self-service/recovery", "post">>
+): Promise<Success | Failure | Info | Redirect> => {
+  const response = await kratos["/self-service/recovery"].post(request);
+
+  switch (response.status) {
+    case 200:
+    case 400: {
+      const body = await response.json();
+
+      console.log(
+        "updateRecoveryFlow",
+        response.status,
+        JSON.stringify(body, null, 2)
+      );
+
+      const { messages = [] } = body.ui;
+
+      if (messages.length > 0) {
+        switch (messages[0].type) {
+          case "error":
+            return {
+              type: "failure",
+              message: messages[0].text,
+            };
+          case "info":
+          case "success":
+            return {
+              type: "success",
+              message: messages[0].text,
+            };
+        }
+      }
+
+      return {
+        type: "success",
+        message: "Account recovered",
+      };
+    }
+    case 422: {
+      const body = await response.json();
+
+      console.log(
+        "updateRecoveryFlow",
+        response.status,
+        JSON.stringify(body, null, 2)
+      );
+
+      if (body.redirect_browser_to !== undefined) {
+        return {
+          type: "redirect",
+          redirect_browser_to: body.redirect_browser_to,
+        };
+      }
+
+      if (body.error !== undefined) {
+        return {
+          type: "failure",
+          // TODO: figure out why openapi + fets produce the incorrect type
+          // @ts-ignore
+          message: body.error.message,
+        };
+      }
+
+      break;
+    }
+    case 410:
+    // 403?
+    default: {
+      const body = await response.json();
+
+      console.log(
+        "updateRecoveryFlow",
+        response.status,
+        JSON.stringify(body, null, 2)
+      );
+
+      return {
+        type: "failure",
+        message: body.error.message,
+      };
+    }
+  }
+
+  return {
+    type: "failure",
+    message: "Unsupported operation",
+  };
+};
diff --git a/src/website/app/services/kratos/updateRegistrationFlow.ts b/src/website/app/services/kratos/updateRegistrationFlow.ts
new file mode 100644
index 0000000..e35dde0
--- /dev/null
+++ b/src/website/app/services/kratos/updateRegistrationFlow.ts
@@ -0,0 +1,117 @@
+import { OASRequestParams, Simplify } from "fets";
+import { Kratos } from "~/openapi/kratos";
+import { kratos } from "~/services/kratos/client";
+
+type Success = { type: "success"; session_token: string };
+type Failure = { type: "failure"; message: string };
+type Info = { type: "info"; message: string };
+type Redirect = { type: "redirect"; redirect_browser_to: string };
+
+export const updateRegistrationFlow = async (
+  request: Simplify<OASRequestParams<Kratos, "/self-service/registration", "post">>
+): Promise<Success | Failure | Info | Redirect> => {
+  const response = await kratos["/self-service/registration"].post(request);
+
+  switch (response.status) {
+    case 200: {
+      const body = await response.json();
+
+      console.log(
+        "updateRegistrationFlow password",
+        response.status,
+        JSON.stringify(body, null, 2)
+      );
+
+      if (body.session_token === undefined) {
+        return {
+          type: "failure",
+          message: "Something went wrong",
+        };
+      }
+
+      return {
+        type: "success",
+        session_token: body.session_token,
+      };
+    }
+    case 400: {
+      const body = await response.json();
+
+      console.log(
+        "updateRegistrationFlow password",
+        response.status,
+        JSON.stringify(body, null, 2)
+      );
+
+      const { messages = [] } = body.ui;
+
+      if (messages.length > 0) {
+        switch (messages[0].type) {
+          case "error": {
+            return {
+              type: "failure",
+              message: messages[0].text,
+            };
+          }
+          case "info":
+          case "success": {
+            return {
+              type: "info",
+              message: messages[0].text,
+            };
+          }
+        }
+      }
+
+      break;
+    }
+    case 422: {
+      const body = await response.json();
+
+      console.log(
+        "updateRegistrationFlow password",
+        response.status,
+        JSON.stringify(body, null, 2)
+      );
+
+      if (body.redirect_browser_to !== undefined) {
+        return {
+          type: "redirect",
+          redirect_browser_to: body.redirect_browser_to,
+        };
+      }
+
+      if (body.error !== undefined) {
+        return {
+          type: "failure",
+          // TODO: figure out why openapi + fets produce the incorrect type
+          // @ts-ignore
+          message: body.error.message,
+        };
+      }
+
+      break;
+    }
+    case 410:
+    // 403?
+    default: {
+      const body = await response.json();
+
+      console.log(
+        "updateRegistrationFlow password",
+        response.status,
+        JSON.stringify(body, null, 2)
+      );
+
+      return {
+        type: "failure",
+        message: body.error.message,
+      };
+    }
+  }
+
+  return {
+    type: "failure",
+    message: "Unsupported operation",
+  };
+};
diff --git a/src/website/app/session.server.ts b/src/website/app/session.server.ts
index 5244394..e6a0d1f 100644
--- a/src/website/app/session.server.ts
+++ b/src/website/app/session.server.ts
@@ -5,7 +5,7 @@ const cookie = createCookie("session", {
   maxAge: 24 * 60 * 60, // 1 day
   path: "/",
   sameSite: "lax",
-  secrets: ["test"],
+  secrets: [process.env.COOKIE_SECRET!],
 });
 
 export const sessionStorage = createCookieSessionStorage({ cookie });
diff --git a/src/website/app/unused-routes/admin.$userId.tsx b/src/website/app/unused-routes/admin.$userId.tsx
index 0e97e2a..d2ca95e 100644
--- a/src/website/app/unused-routes/admin.$userId.tsx
+++ b/src/website/app/unused-routes/admin.$userId.tsx
@@ -3,7 +3,7 @@ import { Switch } from "@headlessui/react";
 import { CalendarIcon } from "@heroicons/react/20/solid";
 import { ActionArgs, LoaderArgs } from "@remix-run/node";
 import { Link } from "@remix-run/react";
-import { format, formatDistance, isAfter, parseISO } from "date-fns";
+import { formatDistance, isAfter, parseISO } from "date-fns";
 import { FC, useState } from "react";
 import {
   typedjson as json,
@@ -20,7 +20,9 @@ import { SectionHeader } from "~/layout/SectionHeader";
 import { SectionItem } from "~/layout/SectionItem";
 import { ServerMessage } from "~/layout/ServerMessage";
 import { KratosIdentity, KratosSession } from "~/openapi/kratos";
-import { getIdentity, kratos, listIdentitySessions } from "~/ory.server";
+import { disableSession } from "~/services/kratos/disableSession";
+import { getIdentity } from "~/services/kratos/getIdentity";
+import { listIdentitySessions } from "~/services/kratos/listIdentitySessions";
 import {
   ActionData,
   actionGuard,
@@ -46,7 +48,7 @@ export const loader = async ({
 > => {
   const guard = await loaderGuard(request);
 
-  if (guard.state === "without-identity") {
+  if (guard.type === "without-identity") {
     return redirectToLogin(guard);
   }
 
@@ -55,8 +57,14 @@ export const loader = async ({
   // TODO: check session and permissions
 
   const [user, sessions, tuples] = await Promise.all([
-    getIdentity(userId!),
-    listIdentitySessions(userId!),
+    getIdentity({
+      headers: { Authorization: "" },
+      params: { id: userId },
+    }),
+    listIdentitySessions({
+      headers: { Authorization: "" },
+      params: { id: userId },
+    }),
     // keto.getRelationships({ subjectId: userId }),
     null,
   ]);
@@ -107,46 +115,45 @@ export const action = async ({
 }: ActionArgs): Promise<TypedJsonResponse<ActionData>> => {
   const guard = await actionGuard(request, actionSchema);
 
-  if (guard.state === "not-valid") {
-    return json<ActionData>({
-      state: "not-valid",
+  if (guard.type === "not-valid") {
+    return json({
+      type: "not-valid",
       messages: guard.messages,
 
       defaultValues: guard.defaultValues,
     });
   }
 
-  const { url, session, data } = guard;
+  const { data } = guard;
 
   switch (data.type) {
     case "remove-session": {
-      const response = await kratos["/admin/sessions/{id}"].delete({
+      const response = await disableSession({
         headers: { Authorization: "" },
         params: { id: data.sessionId },
       });
 
-      if (response.ok === false) {
-        const body = await response.json();
-
-        return json<ActionData>({
-          state: "failure",
-          message: body.error.message,
-
-          defaultValues: guard.defaultValues,
-        });
+      switch (response.type) {
+        case "failure":
+          return json({
+            type: "failure",
+            message: response.message,
+
+            defaultValues: guard.defaultValues,
+          });
+        case "success":
+          return json({
+            type: "success",
+            message: response.message,
+
+            defaultValues: guard.defaultValues,
+          });
       }
-
-      return json<ActionData>({
-        state: "success",
-        message: `Revoked session ${data.sessionId}`,
-
-        defaultValues: guard.defaultValues,
-      });
     }
   }
 
-  return json<ActionData>({
-    state: "failure",
+  return json({
+    type: "failure",
     message: "Unsupported operation",
 
     defaultValues: guard.defaultValues,
@@ -238,7 +245,7 @@ const SessionItem: FC<{ session: KratosSession }> = ({ session }) => {
               disabled={submitting}
               className={join(
                 "relative -ml-px inline-flex items-center rounded-r-md border border-slate-300 bg-orange-50 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-orange-100 focus:z-10 focus:border-orange-500 focus:outline-none focus:ring-1 focus:ring-orange-500",
-                submitting ? "opacity-50" : ""
+                submitting ? "pointer-events-none opacity-50" : ""
               )}
             >
               {submitting ? "Removing" : "Remove"}
diff --git a/src/website/app/unused-routes/admin._index.tsx b/src/website/app/unused-routes/admin._index.tsx
index 0cd95b0..3b376e5 100644
--- a/src/website/app/unused-routes/admin._index.tsx
+++ b/src/website/app/unused-routes/admin._index.tsx
@@ -19,7 +19,7 @@ import { Section } from "~/layout/Section";
 import { SectionHeader } from "~/layout/SectionHeader";
 import { SectionItem } from "~/layout/SectionItem";
 import { KratosIdentity } from "~/openapi/kratos";
-import { listIdentities } from "~/ory.server";
+import { listIdentities } from "~/services/kratos/listIdentities";
 import { LoaderData, loaderGuard, redirectToLogin } from "~/utils";
 
 export { ErrorBoundary } from "~/ErrorBoundary";
@@ -37,7 +37,7 @@ export const loader = async ({
 > => {
   const guard = await loaderGuard(request);
 
-  if (guard.state === "without-identity") {
+  if (guard.type === "without-identity") {
     return redirectToLogin(guard);
   }
 
@@ -45,7 +45,12 @@ export const loader = async ({
 
   // TODO: check session and permissions
 
-  const [users] = await Promise.all([listIdentities(1)]);
+  const [users] = await Promise.all([
+    listIdentities({
+      headers: { Authorization: "" },
+      query: { per_page: 100, page: 1 },
+    }),
+  ]);
 
   return json({ csrf, users } as const);
 };
diff --git a/src/website/app/utils.ts b/src/website/app/utils.ts
index ba4ab12..0bb2782 100644
--- a/src/website/app/utils.ts
+++ b/src/website/app/utils.ts
@@ -2,22 +2,16 @@ import { Session } from "@remix-run/node";
 import { redirect } from "remix-typedjson";
 import { createAuthenticityToken, verifyAuthenticityToken } from "remix-utils";
 import { z } from "zod";
-import { KratosSession } from "./openapi/kratos";
-import { kratos } from "./ory.server";
+import {
+  toSession,
+  WithIdentity,
+  WithoutIdentity,
+} from "./services/kratos/toSession";
 import { sessionStorage } from "./session.server";
 
 export const join = (...parts: (string | undefined)[]) =>
   parts.filter(Boolean).join(" ");
 
-type WithoutIdentity = {
-  state: "without-identity";
-  message: string;
-};
-type WithIdentity = {
-  state: "with-identity";
-  identity: KratosSession;
-};
-
 export type LoaderData = {
   csrf: string;
 };
@@ -33,47 +27,39 @@ export const loaderGuard = async (request: Request): Promise<LoaderGuard> => {
 
   const url = new URL(request.url);
 
-  const me = await kratos["/sessions/whoami"].get({
+  const me = await toSession({
     headers: { "X-Session-Token": session.get("session_token") },
   });
 
-  let guard: WithoutIdentity | WithIdentity;
-
-  if (me.ok === false) {
-    const body = await me.json();
-
-    guard = { state: "without-identity", message: body.error.message };
-  } else {
-    const body = await me.json();
-
-    guard = { state: "with-identity", identity: body };
-  }
-
   const csrf = createAuthenticityToken(session, "csrf");
 
-  return { url, session, csrf, ...guard };
+  return { url, session, csrf, ...me };
 };
 
 type Input = Record<string, string | undefined>;
 
 type Success = {
-  state: "success";
+  type: "success";
   message: string;
 };
 type Failure = {
-  state: "failure";
+  type: "failure";
+  message: string;
+};
+type Info = {
+  type: "info";
   message: string;
 };
 type NotValid = {
-  state: "not-valid";
+  type: "not-valid";
   messages: Record<string, string>;
 };
 type Valid<T extends z.ZodType<any, any, any>> = {
-  state: "valid";
+  type: "valid";
   data: z.infer<T>;
 };
 
-export type ActionData = (Success | Failure | NotValid) & {
+export type ActionData = (Success | Failure | Info | NotValid) & {
   defaultValues: Input;
 };
 
@@ -85,7 +71,7 @@ const schemaGuard = <S extends z.ZodType<any, any, any>>(
 
   if (parsed.success === false) {
     return {
-      state: "not-valid",
+      type: "not-valid",
       messages: parsed.error.issues.reduce((memo, issue) => {
         memo[issue.path.join(".")] = issue.message;
         return memo;
@@ -93,7 +79,7 @@ const schemaGuard = <S extends z.ZodType<any, any, any>>(
     };
   }
 
-  return { state: "valid", data: parsed.data };
+  return { type: "valid", data: parsed.data };
 };
 
 export type ActionGuard<S extends z.ZodType<any, any, any>> = (
@@ -132,7 +118,13 @@ export const redirectToLogin = async ({ url, session }: LoaderGuard) => {
     headers: { "set-cookie": await sessionStorage.commitSession(session) },
   });
 };
-export const redirectToHome = async ({ url, session }: LoaderGuard) => {
+export const redirectToHome = async ({
+  url,
+  session,
+}: {
+  url: URL;
+  session: Session;
+}) => {
   const from = url.searchParams.get("from") || "/";
 
   return redirect(from, {
diff --git a/src/website/package-lock.json b/src/website/package-lock.json
index b0f9d0f..ba4245a 100644
--- a/src/website/package-lock.json
+++ b/src/website/package-lock.json
@@ -11,7 +11,7 @@
         "@remix-run/node": "^1.19.3",
         "@remix-run/react": "^1.19.3",
         "@remix-run/serve": "^1.19.3",
-        "@tailwindcss/forms": "^0.5.5",
+        "@tailwindcss/forms": "^0.5.6",
         "date-fns": "^2.30.0",
         "fets": "^0.4.12",
         "immer": "^10.0.2",
@@ -25,7 +25,7 @@
         "zod": "^3.22.2"
       },
       "devDependencies": {
-        "@csstools/postcss-oklab-function": "^3.0.1",
+        "@csstools/postcss-oklab-function": "^3.0.2",
         "@remix-run/dev": "^1.19.3",
         "@remix-run/eslint-config": "^1.19.3",
         "@types/react": "^18.2.21",
@@ -2003,9 +2003,9 @@
       }
     },
     "node_modules/@csstools/color-helpers": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-3.0.0.tgz",
-      "integrity": "sha512-rBODd1rY01QcenD34QxbQxLc1g+Uh7z1X/uzTHNQzJUnFCT9/EZYI7KWq+j0YfWMXJsRJ8lVkqBcB0R/qLr+yg==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-3.0.1.tgz",
+      "integrity": "sha512-Tsp6FcSPaPN/+4T7iBPxBVopJUs7bimnNx4yuWeGXkH084Vro/y8fmrGg1LGSWH8SU6YuH20fP5Rtqtb979jyw==",
       "dev": true,
       "funding": [
         {
@@ -2045,9 +2045,9 @@
       }
     },
     "node_modules/@csstools/css-color-parser": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-1.2.3.tgz",
-      "integrity": "sha512-YaEnCoPTdhE4lPQFH3dU4IEk8S+yCnxS88wMv45JzlnMfZp57hpqA6qf2gX8uv7IJTJ/43u6pTQmhy7hCjlz7g==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-1.3.0.tgz",
+      "integrity": "sha512-jgudbE+TXZLssSTGFRCkJF9gAM8ABZ2c9/gbLupwA8Y1SpcddxK2z74/MOSdWuboUHbshei8uSQNbp9Wu1Bx+Q==",
       "dev": true,
       "funding": [
         {
@@ -2060,7 +2060,7 @@
         }
       ],
       "dependencies": {
-        "@csstools/color-helpers": "^3.0.0",
+        "@csstools/color-helpers": "^3.0.1",
         "@csstools/css-calc": "^1.1.3"
       },
       "engines": {
@@ -2113,9 +2113,9 @@
       }
     },
     "node_modules/@csstools/postcss-oklab-function": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-oklab-function/-/postcss-oklab-function-3.0.1.tgz",
-      "integrity": "sha512-3TIz+dCPlQPzz4yAEYXchUpfuU2gRYK4u1J+1xatNX85Isg4V+IbLyppblWLV4Vb6npFF8qsHN17rNuxOIy/6w==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-oklab-function/-/postcss-oklab-function-3.0.2.tgz",
+      "integrity": "sha512-tr7HjHDaDvRcnzK559l3VcpfhiAd0ga1jhThGR/tONfVzOVssG9x0QLg0LpLrlx7+niGgHL1SdfgHmFiTJjGIw==",
       "dev": true,
       "funding": [
         {
@@ -2128,7 +2128,7 @@
         }
       ],
       "dependencies": {
-        "@csstools/css-color-parser": "^1.2.2",
+        "@csstools/css-color-parser": "^1.3.0",
         "@csstools/css-parser-algorithms": "^2.3.1",
         "@csstools/css-tokenizer": "^2.2.0",
         "@csstools/postcss-progressive-custom-properties": "^3.0.0"
@@ -3232,9 +3232,9 @@
       }
     },
     "node_modules/@tailwindcss/forms": {
-      "version": "0.5.5",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.5.tgz",
-      "integrity": "sha512-03sXK1DcPt44GZ0Yg6AcAfQln89IKdbE79g2OwoKqBm1ukaadLO2AH3EiB3mXHeQnxa3tzm7eE0x7INXSjbuug==",
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.6.tgz",
+      "integrity": "sha512-Fw+2BJ0tmAwK/w01tEFL5TiaJBX1NLT1/YbWgvm7ws3Qcn11kiXxzNTEQDMs5V3mQemhB56l3u0i9dwdzSQldA==",
       "dependencies": {
         "mini-svg-data-uri": "^1.2.3"
       },
diff --git a/src/website/package.json b/src/website/package.json
index fa078ce..85f6322 100644
--- a/src/website/package.json
+++ b/src/website/package.json
@@ -14,7 +14,7 @@
     "@remix-run/node": "^1.19.3",
     "@remix-run/react": "^1.19.3",
     "@remix-run/serve": "^1.19.3",
-    "@tailwindcss/forms": "^0.5.5",
+    "@tailwindcss/forms": "^0.5.6",
     "date-fns": "^2.30.0",
     "fets": "^0.4.12",
     "immer": "^10.0.2",
@@ -28,7 +28,7 @@
     "zod": "^3.22.2"
   },
   "devDependencies": {
-    "@csstools/postcss-oklab-function": "^3.0.1",
+    "@csstools/postcss-oklab-function": "^3.0.2",
     "@remix-run/dev": "^1.19.3",
     "@remix-run/eslint-config": "^1.19.3",
     "@types/react": "^18.2.21",
diff --git a/src/website/tsconfig.json b/src/website/tsconfig.json
index 20f8a38..ac81b47 100644
--- a/src/website/tsconfig.json
+++ b/src/website/tsconfig.json
@@ -1,7 +1,15 @@
 {
-  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": [
+    "remix.env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
   "compilerOptions": {
-    "lib": ["DOM", "DOM.Iterable", "ES2019"],
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ES2019"
+    ],
     "isolatedModules": true,
     "esModuleInterop": true,
     "jsx": "react-jsx",
@@ -13,10 +21,12 @@
     "forceConsistentCasingInFileNames": true,
     "baseUrl": ".",
     "paths": {
-      "~/*": ["./app/*"]
+      "~/*": [
+        "./app/*"
+      ]
     },
-
+    "skipLibCheck": true,
     // Remix takes care of building everything in `remix build`.
     "noEmit": true
   }
-}
+}
\ No newline at end of file