处理登录和注销

要登录用户，请确保您至少设置了一种身份验证方法。然后，您需要构建一个按钮，该按钮将调用您 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 登录或注销，请从您的客户端（例如/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 配置中导出的注销功能的按钮。

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

下载

致谢