커스텀 로그아웃 페이지

import { signOut } from "@/auth"
 
export default function SignOutPage() {
  return (
    <div>
      <h5>정말 로그아웃하시겠습니까?</h5>
      <form
        action={async (formData) => {
          "use server"
          await signOut()
        }}
      >
        <button type="submit">로그아웃</button>
      </form>
    </div>
  )
}

import { component$ } from "@builder.io/qwik"
import { Form, Link } from "@builder.io/qwik-city"
import { useSignOut } from "./plugin@auth"
 
export default component$(() => {
  const signOutSig = useSignOut()
 
  return (
    <>
      {/* 서버 측 폼 액션 */}
      <Form action={signOutSig}>
        <input type="hidden" name="redirectTo" value="/signedout" />
        <button>로그아웃</button>
      </Form>
 
      {/* submit 메서드 */}
      <Link onClick$={() => signOutSig.submit({ redirectTo: "/" })}>
        로그인
      </Link>
    </>
  )
})

<script lang="ts">
  import { SignOut } from "@auth/sveltekit/components"
</script>
 
<div class="relative flex h-full w-full overflow-hidden">
  <div
    class="z-20 flex h-dvh w-full items-center justify-center md:ml-[15%] md:w-[22rem]"
  >
    <div class="flex w-80 flex-col items-center justify-center text-xl">
      <h2
        class="mb-4 flex items-center space-x-2 text-3xl font-light text-slate-600"
      >
        <img src="/img/logo.png" alt="회사 로고" class="size-5" />
        <span class="text-4xl font-medium text-white">회사</span>
      </h2>
      <div
        class="m-8 flex w-full flex-col gap-2 rounded bg-white p-6 shadow-lg"
      >
        <SignOut signOutPage="signout" className="w-full">
          <div
            slot="submitButton"
            class="mt-2 flex h-12 w-full items-center space-x-2 rounded px-4 text-base font-light transition focus:outline-none focus:ring-2 focus:ring-slate-800 focus:ring-offset-2"
          >
            <span class="flex w-full justify-center"> 로그아웃 </span>
          </div>
        </SignOut>
      </div>
    </div>
  </div>
</div>

import { signOut } from "../../auth"
import type { Actions } from "./$types"
 
export const actions = { default: signOut } satisfies Actions