NextAuth.js

NextAuth.js 是一個完整的身份驗證解決方案，以下是基本的使用步驟：

1. 安裝 NextAuth.js:

   npm install next-auth

2. 建立 API 路由:

   • 在 pages/api/auth/[...nextauth].js 建立 NextAuth.js API 路由。
   • 在這個檔案中，設定 providers (例如 Google, Apple)，以及其他設定。

   // pages/api/auth/[...nextauth].js
   import NextAuth from "next-auth"
   import GoogleProvider from "next-auth/providers/google"
   import AppleProvider from "next-auth/providers/apple"
   
   export default NextAuth({
     providers: [
       GoogleProvider({
         clientId: process.env.GOOGLE_CLIENT_ID,
         clientSecret: process.env.GOOGLE_CLIENT_SECRET
       }),
       AppleProvider({
         clientId: process.env.APPLE_CLIENT_ID,
         clientSecret: process.env.APPLE_CLIENT_SECRET
       })
     ],
     secret: process.env.NEXTAUTH_SECRET
   })

3. 設定環境變數:

*   在 `.env.local` 檔案中，設定 Google 和 Apple 的 Client ID 和 Client Secret，以及 NextAuth 的 Secret。
*   從 Google Cloud Console 和 Apple Developer 取得 Client ID 和 Client Secret。

1. 在 React Component 中使用:

*   使用 `useSession` hook 取得 session 資訊。
*   使用 `signIn` 和 `signOut` 函數處理登入和登出。

```jsx
import { useSession, signIn, signOut } from "next-auth/react"

export default function Component() {
  const { data: session } = useSession()
  if (session) {
    return (
      <>
        Signed in as {session.user.email} <br/>
        <button onClick={() => signOut()}>Sign out</button>
      </>
    )
  }
  return (
    <>
      Not signed in <br/>
      <button onClick={() => signIn()}>Sign in</button>
    </>
  )
}
```

請注意，這只是一個基本的使用範例。NextAuth.js 還有許多進階功能，例如自定義頁面、資料庫整合等。