サインインとサインアウトの処理

ユーザーにサインインしてもらうには、少なくとも1つの認証方法を設定する必要があります。その後、Auth.jsフレームワークパッケージからサインイン関数を呼び出すボタンを作成する必要があります。

./components/auth/signin-button.tsx

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

./components/auth/signin-button.tsx

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

Qwikでは、フォームアクションによるサーバーサイドサインイン、または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 (
    <>
      {/* server-side login with Form action */}
      <Form action={signInSig}>
        <input type="hidden" name="providerId" value="${providerId}" />
        <input
          type="hidden"
          name="options.redirectTo"
          value="/"
        />
        <button>Sign In</button>
      </Form>
 
      {/* submit method */}
      <Link
        onClick$={() => signInSig.submit({ redirectTo: "/" })}
      >
        SignIn
      </Link>
    </>
  )
})

SvelteKitクライアントは、フォームアクションを使用するサーバーサイドと、リクエストとリダイレクトを使用するクライアントサイドの2つのサインインとサインアウト方法をサポートしています。

フォームアクション（サーバーサイド）

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">Sign In with 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 { signIn } from "@auth/sveltekit/client"
</script>
 
<div>
  <nav>
    <img src="/img/logo.svg" alt="Company Logo" />
    <button on:click={signIn}>Signin</button>
  </nav>
</div>

他のフレームワークと同様に、signIn関数にプロバイダを渡して、そのプロバイダで直接ログインを試行することもできます。

Expressパッケージはサーバーサイドで実行されるため、「サインインボタンコンポーネント」を作成する意味がありません。ただし、Expressでサインインまたはサインアウトするには、クライアント（つまり、/auth/signin、/auth/signoutなど）から適切なREST APIエンドポイントにリクエストを送信します。

signIn関数にプロバイダを渡して、そのプロバイダで直接ログインを試行することもできます。それ以外の場合は、アプリケーションでこのボタンをクリックすると、ユーザーは設定されたサインインページにリダイレクトされます。カスタムサインインページを設定していない場合、ユーザーは/[basePath]/signinのデフォルトのサインインページにリダイレクトされます。

認証されると、ユーザーはサインインを開始したページにリダイレクトされます。サインイン後にユーザーを別の場所にリダイレクトする（例：/dashboard）場合は、サインインオプションでターゲットURLをredirectToとして渡すことができます。

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>

サインアウト

サインアウトは、サインインと同様に実行できます。ほとんどのフレームワークは、サインアウトにもクライアントサイドとサーバーサイドの両方の方法を提供しています。

フォームアクションを使用してユーザーをサインアウトするには、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">Sign Out</button>
    </form>
  )
}

src/components/signout-button.tsx

"use client"
import { signOut } from "next-auth/react"
 
export function SignOut() {
  return <button onClick={() => signOut()}>Sign Out</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 (
    <>
      {/* server-side with Form action */}
      <Form action={signOutSig}>
        <input type="hidden" name="redirectTo" value="/signedout" />
        <button>Sign Out</button>
      </Form>
 
      {/* submit method */}
      <Link onClick$={() => signOutSig.submit({ redirectTo: "/" })}>
        SignIn
      </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}>Signout</button>
  </nav>
</div>

💡

Auth.jsアプリケーションでGitHubなどのOAuthプロバイダからサインアウトする場合、GitHubの他の場所からはサインアウトされません。

データベースセッション取得

サインインとサインアウトの処理

フォームアクション（サーバーサイド）

クライアントサイド

サインアウト

サーバーサイド

クライアントサイド

Auth.jsについて

ダウンロード

謝辞