delete account api

2025-12-12 01:02:17 +00:00 · 2023-06-06 17:11:49 +02:00
parent f6364ef89a
commit 51a408611b
6 changed files with 182 additions and 55 deletions
--- a/apps/login/app/(login)/accounts/page.tsx
+++ b/apps/login/app/(login)/accounts/page.tsx
@@ -1,11 +1,10 @@
-import { Session } from "#/../../packages/zitadel-server/dist";
+import { Session } from "@zitadel/server";
 import { listSessions, server } from "#/lib/zitadel";
 import Alert from "#/ui/Alert";
-import { Avatar } from "#/ui/Avatar";
 import { getAllSessionIds } from "#/utils/cookies";
-import { UserPlusIcon, XCircleIcon } from "@heroicons/react/24/outline";
-import moment from "moment";
+import { UserPlusIcon } from "@heroicons/react/24/outline";
 import Link from "next/link";
+import SessionItem from "#/ui/SessionItem";

 async function loadSessions(): Promise<Session[]> {
  const ids = await getAllSessionIds();
@@ -23,7 +22,7 @@ async function loadSessions(): Promise<Session[]> {
 }

 export default async function Page() {
-  const sessions = await loadSessions();
+  let sessions = await loadSessions();

  return (
    <div className="flex flex-col items-center space-y-4">
@@ -35,56 +34,15 @@ export default async function Page() {
          sessions
            .filter((session) => session?.factors?.user?.loginName)
            .map((session, index) => {
-              const validPassword = session?.factors?.password?.verifiedAt;
              return (
-                <Link
+                <SessionItem
+                  session={session}
+                  reload={async () => {
+                    "use server";
+                    sessions = sessions.filter((s) => s.id !== session.id);
+                  }}
                  key={"session-" + index}
-                  href={
-                    validPassword
-                      ? `/signedin?` +
-                        new URLSearchParams({
-                          loginName: session.factors?.user?.loginName as string,
-                        })
-                      : `/password?` +
-                        new URLSearchParams({
-                          loginName: session.factors?.user?.loginName as string,
-                        })
-                  }
-                  className="group flex flex-row items-center bg-background-light-400 dark:bg-background-dark-400  border border-divider-light hover:shadow-lg dark:hover:bg-white/10 py-2 px-4 rounded-md transition-all"
-                >
-                  <div className="pr-4">
-                    <Avatar
-                      size="small"
-                      loginName={session.factors?.user?.loginName as string}
-                      name={session.factors?.user?.displayName ?? ""}
-                    />
-                  </div>
-
-                  <div className="flex flex-col">
-                    <span className="">
-                      {session.factors?.user?.displayName}
-                    </span>
-                    <span className="text-xs opacity-80">
-                      {session.factors?.user?.loginName}
-                    </span>
-                    {validPassword && (
-                      <span className="text-xs opacity-80">
-                        {moment(new Date(validPassword)).fromNow()}
-                      </span>
-                    )}
-                  </div>
-
-                  <span className="flex-grow"></span>
-                  <div className="relative flex flex-row items-center">
-                    {validPassword ? (
-                      <div className="absolute h-2 w-2 bg-green-500 rounded-full mx-2 transform right-0 group-hover:right-6 transition-all"></div>
-                    ) : (
-                      <div className="absolute h-2 w-2 bg-red-500 rounded-full mx-2 transform right-0 group-hover:right-6 transition-all"></div>
-                    )}
-
-                    <XCircleIcon className="hidden group-hover:block h-5 w-5 transition-all opacity-50 hover:opacity-100" />
-                  </div>
-                </Link>
+                />
              );
            })
        ) : (
--- a/apps/login/app/session/route.ts
+++ b/apps/login/app/session/route.ts
@@ -1,8 +1,16 @@
-import { createSession, getSession, server, setSession } from "#/lib/zitadel";
+import {
+  createSession,
+  getSession,
+  server,
+  setSession,
+  deleteSession,
+} from "#/lib/zitadel";
 import {
  SessionCookie,
  addSessionToCookie,
  getMostRecentSessionCookie,
+  getSessionCookieById,
+  removeSessionFromCookie,
  updateSessionCookie,
 } from "#/utils/cookies";
 import { NextRequest, NextResponse } from "next/server";
@@ -115,10 +123,43 @@ export async function PUT(request: NextRequest) {
        }
      })
      .catch((error) => {
-        console.error("erasd", error);
        return NextResponse.json(error, { status: 500 });
      });
  } else {
    return NextResponse.error();
  }
 }
+
+/**
+ *
+ * @param request id of the session to be deleted
+ */
+export async function DELETE(request: NextRequest) {
+  const { searchParams } = new URL(request.url);
+  const id = searchParams.get("id");
+  if (id) {
+    const session = await getSessionCookieById(id);
+
+    return deleteSession(server, session.id, session.token)
+      .then(() => {
+        return removeSessionFromCookie(session)
+          .then(() => {
+            return NextResponse.json({ factors: session.factors });
+          })
+          .catch((error) => {
+            return NextResponse.json(
+              { details: "could not set cookie" },
+              { status: 500 }
+            );
+          });
+      })
+      .catch((error) => {
+        return NextResponse.json(
+          { details: "could not delete session" },
+          { status: 500 }
+        );
+      });
+  } else {
+    return NextResponse.error();
+  }
+}
--- a/apps/login/lib/zitadel.ts
+++ b/apps/login/lib/zitadel.ts
@@ -19,6 +19,7 @@ import {
  GetSessionResponse,
  VerifyEmailResponse,
  SetSessionResponse,
+  DeleteSessionResponse,
 } from "@zitadel/server";

 export const zitadelConfig: ZitadelServerOptions = {
@@ -103,6 +104,15 @@ export function getSession(
  return sessionService.getSession({ sessionId, sessionToken }, {});
 }

+export function deleteSession(
+  server: ZitadelServer,
+  sessionId: string,
+  sessionToken: string
+): Promise<DeleteSessionResponse | undefined> {
+  const sessionService = session.getSession(server);
+  return sessionService.deleteSession({ sessionId, sessionToken }, {});
+}
+
 export function listSessions(
  server: ZitadelServer,
  ids: string[]
--- a/apps/login/ui/SessionItem.tsx
+++ b/apps/login/ui/SessionItem.tsx
@@ -0,0 +1,99 @@
+"use client";
+import { Session } from "@zitadel/server";
+import Link from "next/link";
+import { useState } from "react";
+import { Avatar } from "./Avatar";
+import moment from "moment";
+import { XCircleIcon } from "@heroicons/react/24/outline";
+
+export default function SessionItem({
+  session,
+  reload,
+}: {
+  session: Session;
+  reload: () => void;
+}) {
+  const [loading, setLoading] = useState<boolean>(false);
+
+  async function clearSession(id: string) {
+    setLoading(true);
+    const res = await fetch("/session?" + new URLSearchParams({ id }), {
+      method: "DELETE",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        id: id,
+      }),
+    });
+
+    const response = await res.json();
+
+    if (!res.ok) {
+      setLoading(false);
+      //   setError(response.details);
+      return Promise.reject(response);
+    } else {
+      setLoading(false);
+      return response;
+    }
+  }
+
+  const validPassword = session?.factors?.password?.verifiedAt;
+
+  return (
+    <Link
+      href={
+        validPassword
+          ? `/signedin?` +
+            new URLSearchParams({
+              loginName: session.factors?.user?.loginName as string,
+            })
+          : `/password?` +
+            new URLSearchParams({
+              loginName: session.factors?.user?.loginName as string,
+            })
+      }
+      className="group flex flex-row items-center bg-background-light-400 dark:bg-background-dark-400  border border-divider-light hover:shadow-lg dark:hover:bg-white/10 py-2 px-4 rounded-md transition-all"
+    >
+      <div className="pr-4">
+        <Avatar
+          size="small"
+          loginName={session.factors?.user?.loginName as string}
+          name={session.factors?.user?.displayName ?? ""}
+        />
+      </div>
+
+      <div className="flex flex-col">
+        <span className="">{session.factors?.user?.displayName}</span>
+        <span className="text-xs opacity-80">
+          {session.factors?.user?.loginName}
+        </span>
+        {validPassword && (
+          <span className="text-xs opacity-80">
+            {moment(new Date(validPassword)).fromNow()}
+          </span>
+        )}
+      </div>
+
+      <span className="flex-grow"></span>
+      <div className="relative flex flex-row items-center">
+        {validPassword ? (
+          <div className="absolute h-2 w-2 bg-green-500 rounded-full mx-2 transform right-0 group-hover:right-6 transition-all"></div>
+        ) : (
+          <div className="absolute h-2 w-2 bg-red-500 rounded-full mx-2 transform right-0 group-hover:right-6 transition-all"></div>
+        )}
+
+        <XCircleIcon
+          className="hidden group-hover:block h-5 w-5 transition-all opacity-50 hover:opacity-100"
+          onClick={(event) => {
+            event.preventDefault();
+            clearSession(session.id).then(() => {
+              reload();
+            });
+          }}
+        />
+      </div>
+    </Link>
+  );
+}
--- a/apps/login/utils/cookies.ts
+++ b/apps/login/utils/cookies.ts
@@ -92,6 +92,24 @@ export async function getMostRecentSessionCookie(): Promise<any> {
  }
 }

+export async function getSessionCookieById(id: string): Promise<any> {
+  const cookiesList = cookies();
+  const stringifiedCookie = cookiesList.get("sessions");
+
+  if (stringifiedCookie?.value) {
+    const sessions: SessionCookie[] = JSON.parse(stringifiedCookie?.value);
+
+    const found = sessions.find((s) => s.id === id);
+    if (found) {
+      return found;
+    } else {
+      return Promise.reject();
+    }
+  } else {
+    return Promise.reject();
+  }
+}
+
 export async function getAllSessionIds(): Promise<any> {
  const cookiesList = cookies();
  const stringifiedCookie = cookiesList.get("sessions");
--- a/packages/zitadel-server/src/index.ts
+++ b/packages/zitadel-server/src/index.ts
@@ -17,6 +17,7 @@ export {
  GetSessionResponse,
  CreateSessionResponse,
  SetSessionResponse,
+  DeleteSessionResponse,
 } from "./proto/server/zitadel/session/v2alpha/session_service";
 export {
  GetPasswordComplexitySettingsResponse,