處理登入和登出

要讓使用者登入，請確定您已設定至少一種驗證方法。然後您需要建立一個按鈕，從您的 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，我們可以透過表單動作進行伺服器端登入，或透過提交方法進行更簡單的用戶端登入。

./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 用戶端支援兩種登入和登出方法，一種是使用表單動作的伺服器端方法，另一種是使用請求和重新導向的用戶端方法。

表單動作 (伺服器端)

要使用 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 登入或登出，請從您的用戶端將請求傳送到適當的 REST API 端點（例如，/auth/signin、/auth/signout 等）。

您也可以將供應商傳遞給 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 設定匯出的登出函式。

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，我們可以透過表單動作進行伺服器端登出，或透過提交方法進行更簡單的用戶端登出。

./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

下載

致謝