사용자 로그인 및 로그아웃 처리

사용자를 로그인시키려면, 먼저 최소한 하나의 인증 방법을 설정해야 합니다. 그런 다음 Auth.js 프레임워크 패키지에서 제공하는 로그인 함수를 호출하는 버튼을 만들어야 합니다.

./components/auth/signin-button.tsx

import { signIn } from "@/auth"
 
export function SignIn() {
  return (
    <form
      action={async () => {
        "use server"
        await signIn()
      }}
    >
      <button type="submit">로그인</button>
    </form>
  )
}

./components/auth/signin-button.tsx

"use client"
import { signIn } from "next-auth/react"
 
export function SignIn() {
  return <button onClick={() => signIn()}>로그인</button>
}

Qwik에서는 Form 액션을 사용한 서버 사이드 로그인 또는 submit 메서드를 통한 간단한 클라이언트 사이드 로그인을 구현할 수 있습니다.

./components/sign-in.tsx

import { component$ } from "@builder.io/qwik"
import { Form } from "@builder.io/qwik-city"
import { useSignIn } from "./plugin@auth"
 
export default component$(() => {
  const signInSig = useSignIn()
 
  return (
    <>
      {/* Form 액션을 사용한 서버 사이드 로그인 */}
      <Form action={signInSig}>
        <input type="hidden" name="providerId" value="${providerId}" />
        <input
          type="hidden"
          name="options.redirectTo"
          value="/"
        />
        <button>로그인</button>
      </Form>
 
      {/* submit 메서드 */}
      <Link
        onClick$={() => signInSig.submit({ redirectTo: "/" })}
      >
        로그인
      </Link>
    </>
  )
})

SvelteKit 클라이언트는 Form Actions를 사용한 서버 사이드 방식과 요청 및 리다이렉트를 사용한 클라이언트 사이드 방식, 두 가지 로그인 및 로그아웃 방법을 지원합니다.

폼 액션 (서버 사이드)

SvelteKit 폼 액션을 사용해 사용자를 로그인시키려면, @auth/sveltekit/components에서 내보낸 SignIn 컴포넌트를 사용할 수 있습니다.

src/routes/+page.svelte

<script lang="ts">
  import { SignIn } from "@auth/sveltekit/components"
</script>
 
<header>
  <nav>
    <SignIn>
      <span slot="submitButton">GitHub로 로그인</span>
    </SignIn>
  </nav>
</header>

이를 위해서는 /signin 경로에 서버 액션이 필요합니다. 이 경로는 SignIn 컴포넌트의 signInPage 속성을 통해 커스터마이징할 수 있습니다.

src/routes/signin/+page.server.ts

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

클라이언트 사이드

클라이언트 사이드는 조금 더 간단합니다. @auth/sveltekit/client에서 버튼의 on:click 핸들러를 가져오기만 하면 됩니다.

src/routes/+page.svelte

<script lang="ts">
  import { signOut } from "@auth/sveltekit/client"
</script>
 
<div>
  <nav>
    <img src="/img/logo.svg" alt="회사 로고" />
    <button on:click={signOut}>로그아웃</button>
  </nav>
</div>

Express 패키지는 서버 사이드에서 실행되기 때문에 “로그인 버튼 컴포넌트”를 만드는 것은 의미가 없습니다. 하지만 Express로 로그인하거나 로그아웃하려면 클라이언트에서 적절한 REST API 엔드포인트로 요청을 보내야 합니다 (예: /auth/signin, /auth/signout 등).

Express로 사용자를 로그인시키려면 로그인 로직을 처리하는 라우트를 만들 수 있습니다. 예제는 다음과 같습니다:

src/routes/auth.ts

import express, { Request, Response } from "express"
import { signIn } from "../auth"
const router = express.Router()
 
router.post("/auth/signin", async (req: Request, res: Response) => {
  try {
    await signIn(req, res)
    res.redirect("/dashboard")
  } catch (error) {
    res.status(500).send("로그인 실패")
  }
})
 
export { router }

Express로 사용자를 로그아웃시키려면 로그아웃 로직을 처리하는 라우트를 만들 수 있습니다. 예제는 다음과 같습니다:

src/routes/auth.ts

import express, { Request, Response } from "express"
import { signOut } from "../auth"
const router = express.Router()
 
router.post("/auth/signout", async (req: Request, res: Response) => {
  try {
    await signOut(req, res)
    res.redirect("/")
  } catch (error) {
    res.status(500).send("로그아웃 실패")
  }
})
 
export { router }

signIn 함수에 프로바이더를 전달하면 해당 프로바이더로 직접 로그인을 시도합니다. 그렇지 않으면, 애플리케이션에서 이 버튼을 클릭할 때 사용자는 설정된 로그인 페이지로 리디렉션됩니다. 만약 커스텀 로그인 페이지를 설정하지 않았다면, 사용자는 기본 로그인 페이지인 /[basePath]/signin으로 리디렉션됩니다.

인증이 완료되면, 사용자는 로그인을 시작한 페이지로 다시 리디렉션됩니다. 만약 로그인 후 사용자를 다른 곳으로 리디렉션하고 싶다면 (예: /dashboard), signIn 옵션에서 redirectTo로 대상 URL을 전달하면 됩니다.

app/components/signin-button.tsx

import { signIn } from "@/auth.ts"
 
export function SignIn() {
  return (
    <form
      action={async () => {
        "use server"
        await signIn("github", { redirectTo: "/dashboard" })
      }}
    >
      <button type="submit">Sign in</button>
    </form>
  )
}

src/components/signin-button.tsx

"use client"
import { signIn } from "next-auth/react"
 
export function SignIn() {
  return (
    <button onClick={() => signIn("github", { redirectTo: "/dashboard" })}>
      Sign In
    </button>
  )
}

./components/sign-in.tsx

import { component$ } from "@builder.io/qwik"
import { useSignIn } from "./plugin@auth"
 
export default component$(() => {
  const signInSig = useSignIn()
 
  return (
    <>
      <Link
        onClick$={() => signInSig.submit({ redirectTo: "/dashboard" })}
      >
        SignIn
      </Link>
    </>
  )
})

src/routes/+page.svelte

<script lang="ts">
  import { page } from "$app/stores"
  import { SignIn } from "@auth/sveltekit/components"
</script>
 
<header>
  <nav>
    <SignIn
      options={{
        redirectTo: $page.data.redirectTo
          ? `/${decodeURIComponent($page.data.redirectTo).slice(1)}`
          : `/dashboard`,
      }}
      className="w-full"
    >
      <span slot="submitButton">Sign in</span>
    </SignIn>
  </nav>
</header>

src/routes/auth.ts

import express, { Request, Response } from "express";
import { signOut } from "../auth"; 
const router = express.Router()
 
router.post("/auth/signout", async (req: Request, res: Response) => {
try {
await signOut(req, res)
res.redirect("/")
} catch (error) {
res.status(500).send("Sign out failed")
}
})
 
export { router }

로그아웃

로그아웃은 로그인과 비슷한 방식으로 처리할 수 있습니다. 대부분의 프레임워크는 클라이언트 측과 서버 측 로그아웃 방법을 모두 제공합니다.

폼 액션을 사용해 사용자를 로그아웃시키려면, Auth.js 설정에서 내보낸 signOut 함수를 호출하는 버튼을 만들 수 있습니다.

app/components/signout-button.tsx

import { signOut } from "@/auth.ts"
 
export function SignOut() {
  return (
    <form
      action={async () => {
        "use server"
        await signOut()
      }}
    >
      <button type="submit">로그아웃</button>
    </form>
  )
}

src/components/signout-button.tsx

"use client"
import { signOut } from "next-auth/react"
 
export function SignOut() {
  return <button onClick={() => signOut()}>로그아웃</button>
}

Qwik에서는 폼 액션을 통해 서버 측 로그아웃을 처리하거나, 더 간단한 클라이언트 측 로그아웃을 submit 메서드로 처리할 수 있습니다.

./components/sign-out.tsx

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>
    </>
  )
})

SvelteKit도 서버와 클라이언트 측 로그아웃 방법을 모두 지원합니다.

서버 사이드

SvelteKit 폼 액션을 사용하여 로그아웃을 처리하려면 @auth/sveltekit/components에서 내보낸 SignOut 컴포넌트를 사용할 수 있습니다.

src/routes/+page.svelte

<script lang="ts">
  import { SignOut } from "@auth/sveltekit/components"
</script>
 
<header>
  <nav>
    <SignOut>
      <span slot="submitButton">Signout</span>
    </SignOut>
  </nav>
</header>

이를 위해서는 /signout 경로에 서버 액션이 필요합니다. 이 경로는 <SignOut> 컴포넌트의 signOutPage 속성을 통해 커스터마이징할 수 있습니다.

src/routes/signout/+page.server.ts

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

클라이언트 사이드

클라이언트 사이드는 조금 더 간단합니다. @auth/sveltekit/client에서 버튼의 on:click 핸들러를 가져오기만 하면 됩니다.

src/routes/+page.svelte

<script lang="ts">
  import { signOut } from "@auth/sveltekit/client"
</script>
 
<div>
  <nav>
    <img src="/img/logo.svg" alt="Company Logo" />
    <button on:click={signOut}>로그아웃</button>
  </nav>
</div>

Express 패키지는 서버 사이드에서 실행되기 때문에 “로그인 버튼 컴포넌트”를 만드는 것은 의미가 없습니다. 그러나 Express로 로그인하거나 로그아웃하려면 클라이언트에서 적절한 REST API 엔드포인트로 요청을 보내야 합니다 (예: /auth/signin, /auth/signout 등).

Express로 사용자를 로그인시키려면 로그인 로직을 처리하는 라우트를 만들 수 있습니다. 예제는 다음과 같습니다:

src/routes/auth.ts

import express, { Request, Response } from "express"
import { signIn } from "../auth"
const router = express.Router()
 
router.post("/auth/signin", async (req: Request, res: Response) => {
  try {
    await signIn(req, res)
    res.redirect("/dashboard")
  } catch (error) {
    res.status(500).send("로그인 실패")
  }
})
 
export { router }

Express로 사용자를 로그아웃시키려면 로그아웃 로직을 처리하는 라우트를 만들 수 있습니다. 예제는 다음과 같습니다:

src/routes/auth.ts

import express, { Request, Response } from "express"
import { signOut } from "../auth"
const router = express.Router()
 
router.post("/auth/signout", async (req: Request, res: Response) => {
  try {
    await signOut(req, res)
    res.redirect("/")
  } catch (error) {
    res.status(500).send("로그아웃 실패")
  }
})
 
export { router }

💡

Auth.js 애플리케이션에서 GitHub과 같은 OAuth 프로바이더로 로그아웃할 때, 사용자는 GitHub에서 다른 곳에서는 로그아웃되지 않습니다.

데이터베이스 세션 가져오기

사용자 로그인 및 로그아웃 처리

폼 액션 (서버 사이드)

클라이언트 사이드

로그아웃

서버 사이드

클라이언트 사이드

About Auth.js

Download

Acknowledgements