Merge pull request #6 from scratch-auth/security-update-1

Security update

Author: toakiryu

.gitignore

@@ -1,2 +1,3 @@
 /node_modules
-.next
+.next
+/test

README.md

@@ -1,4 +1,4 @@
-# Scratch Auth
+# [Scratch Auth](https://scratch-auth.netlify.app)
 
 ## Overview
 

package-lock.json

@@ -28,7 +28,8 @@
     "nextra": "^2.13.4",
     "nextra-theme-docs": "^2.13.4",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "tailwind-merge": "^2.5.3"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.20",

package.json

@@ -1,3 +1,2 @@
-node_modules
+/node_modules
 package-lock.json
-test

packages/nextjs/.gitignore

@@ -1,5 +1,4 @@
 .github
-node_modules
+/node_modules
 package-lock.json
 README.md
-test

packages/nextjs/.npmignore

@@ -1,3 +1,138 @@
-# Scratch Auth with Next.js
+# [Scratch Auth with Next.js](https://scratch-auth.netlify.app/en/docs/nextjs/quickstart)
 
-Scratch Auth is a simple OAuth service for Scratch. It provides developers with an easy-to-understand API and users with a smooth login experience. By using @scratch-auth/nextjs, you can easily implement OAuth functionality into your site.
+Scratch Auth is a simple OAuth service for Scratch. It provides developers with an easy-to-understand API and users with a smooth login experience. By using @scratch-auth/nextjs, you can easily implement OAuth functionality into your site.
+
+
+### [Install](https://scratch-auth.netlify.app/en/docs/nextjs/quickstart#install)
+
+Scratch Auth is composed of a set of NPM packages.
+
+```bash
+npm install @scratch-auth/nextjs
+```
+
+### [Set your environment variables](https://scratch-auth.netlify.app/en/docs/nextjs/quickstart#set-your-environment-variables)
+
+Add the following keys to your file. These keys can be generated at any time using `openssl rand -hex 32`.
+
+```bash
+openssl rand -hex 32
+```
+
+```env
+SCRATCH_AUTH_SECRET_KEY=***************************************
+```
+
+### [Adding a Session Verification Page](https://scratch-auth.netlify.app/en/docs/nextjs/quickstart#adding-a-session-verification-page)
+
+This page will decode the session and verify account information. You need to add this file to the path of the `redirect_url` that you set in `scratch-auth.config.ts`. During the redirect, the session will be set in the `privateCode` parameter.
+
+```tsx filename="app/api/auth/page.tsx"
+"use client";
+
+import React, { useEffect } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { setScratchAuthSession } from "@scratch-auth/nextjs";
+
+export default function AuthPage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const privateCode = searchParams.get("privateCode");
+
+  useEffect(() => {
+    async function auth() {
+      console.log(privateCode);
+      const check = await setScratchAuthSession(privateCode);
+      console.log("check", check);
+      if (check) {
+        console.log("Authentication successful");
+      } else {
+        console.error("Authentication failed");
+      }
+      router.push("/");
+    }
+    auth();
+  }, [privateCode]);
+
+  return (
+    <div className="flex justify-center items-center w-full h-full min-h-[calc(100dvh-64px)]">
+      Authenticating Scratch account...
+    </div>
+  );
+}
+```
+
+### [Adding an Authentication Button](https://scratch-auth.netlify.app/en/docs/nextjs/quickstart#adding-a-session-verification-page)
+
+By using Scratch Auth’s pre-built components, you can control the content displayed for logged-in and logged-out users. First, create a header for users to log in or out. To do this, use the following:
+
+- `<LogIned>`: The children of this component are displayed only when the user is logged in.
+- `<LogOuted>`: The children of this component are displayed only when the user is logged out.
+- `<UserButton />`: A pre-built component with styles ready to display the avatar of the logged-in user’s account.
+- `<LogInButton />`: An unstyled component that links to the login page. In this example, since no properties or environment variables are specified for the login URL, the component will link to the login page of the account portal.
+
+```tsx filename="app/page.tsx"
+import React from "react";
+import {
+  LogInButton,
+  LogIned,
+  LogOuted,
+  UserButton,
+} from "@scratch-auth/nextjs";
+
+export default function Page() {
+  return (
+    <div>
+      <LogOuted>
+        <LogInButton />
+      </LogOuted>
+      <LogIned>
+        <UserButton />
+      </LogIned>
+    </div>
+  );
+}
+```
+
+### [Adding the Package Configuration File](https://scratch-auth.netlify.app/en/docs/nextjs/quickstart#adding-the-package-configuration-file)
+
+| Item         | Description                                 |
+| ------------ | ------------------------------------------- |
+| COOKIE_NAME  | The name to be stored in the cookie         |
+| redirect_url | The URL for the session authentication page |
+| title        | Project title                               |
+| expiration   | Session expiration time                     |
+| cn           | CN function                                 |
+| debug        | Debug mode                                  |
+
+```tsx filename="scratch-auth.config.ts"
+import { ScratchAuthConfig } from "@scratch-auth/nextjs/src/types";
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+const config: ScratchAuthConfig = {
+  COOKIE_NAME: "scratch-auth-session",
+  redirect_url: `http://localhost:3000/api/auth`,
+  title: `Scratch Auth`,
+  expiration: 30,
+  cn: function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+  },
+  debug: true,
+};
+
+export default config;
+```
+
+### [Authenticating the Scratch Account](https://scratch-auth.netlify.app/en/docs/nextjs/quickstart#authenticating-the-scratch-account)
+
+Run your project with the following command:
+
+```bash
+npm run dev
+```
+
+Access the app’s homepage at [http://localhost:3000 ↗](http://localhost:3000). Sign
+up and create the first user.
+
+</Steps>

packages/nextjs/README.md

@@ -1,6 +1,6 @@
 {
   "name": "@scratch-auth/nextjs",
-  "version": "0.0.1-beta.8",
+  "version": "0.0.1-beta.9",
   "description": "Scratch Auth is a simple OAuth service for Scratch. It provides developers with an easy-to-understand API and users with a smooth login experience. By using @scratch-auth/nextjs, you can easily implement OAuth functionality into your site.",
   "main": "./src/index.d.ts",
   "scripts": {
@@ -21,6 +21,12 @@
   },
   "homepage": "https://scratch-auth.netlify.app",
   "license": "MIT",
+  "keywords": [
+    "scratch",
+    "oauth",
+    "authentication",
+    "nextjs"
+  ],
   "dependencies": {
     "@radix-ui/react-avatar": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.2",

packages/nextjs/package.json

@@ -2,8 +2,9 @@
 
 import crypto from "crypto";
 import { v4 as uuidv4 } from "uuid";
-import { deleteCookie, getCookie, setCookie } from "./cookie/cookie.server";
 import pkgConfig from "./pkgConfig";
+import { cookies } from "next/headers";
+import { deleteCookie } from "./cookie/cookie.server";
 
 const secretKey = process.env.SCRATCH_AUTH_SECRET_KEY!;
 if (!secretKey) {
@@ -20,30 +21,46 @@ export async function ScratchAuthCalculateHmac(text: string): Promise<string> {
   return crypto.createHmac("sha256", secretKey).update(text).digest("hex");
 }
 
-// AES暗号化を使って文字列を暗号化
+// AES-GCMを使って文字列を暗号化
 export async function ScratchAuthEncrypt(text: string): Promise<string> {
-  const iv = crypto.randomBytes(16); // 初期化ベクトル
+  const iv = crypto.randomBytes(12);
   const cipher = crypto.createCipheriv(
-    "aes-256-cbc",
+    "aes-256-gcm",
     Buffer.from(secretKey, "hex"),
     iv
   );
+
   let encrypted = cipher.update(text, "utf8", "hex");
   encrypted += cipher.final("hex");
-  return iv.toString("hex") + ":" + encrypted; // IVと暗号文を結合
+
+  const authTag = cipher.getAuthTag().toString("hex");
+
+  return `${iv.toString("hex")}:${encrypted}:${authTag}`;
 }
 
-// AES復号化を使って文字列を復号化
-export async function ScratchAuthDecrypt(text: string): Promise<string> {
-  const [iv, encrypted] = text.split(":");
-  const decipher = crypto.createDecipheriv(
-    "aes-256-cbc",
-    Buffer.from(secretKey, "hex"),
-    Buffer.from(iv, "hex")
-  );
-  let decrypted = decipher.update(encrypted, "hex", "utf8");
-  decrypted += decipher.final("utf8");
-  return decrypted;
+// AES-GCMを使って文字列を復号化
+export async function ScratchAuthDecrypt(text: string): Promise<string | null> {
+  try {
+    const [iv, encrypted, authTag] = text.split(":");
+    const decipher = crypto.createDecipheriv(
+      "aes-256-gcm",
+      Buffer.from(secretKey, "hex"),
+      Buffer.from(iv, "hex")
+    );
+
+    decipher.setAuthTag(Buffer.from(authTag, "hex"));
+
+    let decrypted = decipher.update(encrypted, "hex", "utf8");
+    decrypted += decipher.final("utf8");
+
+    return decrypted;
+  } catch (error) {
+    if (pkgConfig.debug) {
+      console.warn("Decryption failed:", error);
+    }
+    await deleteCookie(pkgConfig.COOKIE_NAME);
+    return null;
+  }
 }
 
 // トークンの検証
@@ -76,16 +93,16 @@ export async function setScratchAuthEncryptedData(
   value: string,
   days: number
 ): Promise<void> {
-  const hmac = await ScratchAuthCalculateHmac(value); // HMACを計算
-  const encryptedValue = await ScratchAuthEncrypt(value + "|" + hmac); // データとHMACを結合し、暗号化
+  const hmac = await ScratchAuthCalculateHmac(value);
+  const encryptedValue = await ScratchAuthEncrypt(value + "|" + hmac);
   const expires = new Date();
   if (days === -1) {
-    expires.setFullYear(expires.getFullYear() + 200); // 有効期限を200年後に設定
+    expires.setFullYear(expires.getFullYear() + 200);
   } else {
-    expires.setDate(expires.getDate() + days); // 指定日数後に期限切れに
+    expires.setDate(expires.getDate() + days);
   }
 
-  await setCookie({
+  cookies().set({
     name: content,
     value: encryptedValue,
     expires: expires,
@@ -97,40 +114,45 @@ export async function setScratchAuthEncryptedData(
 export async function getScratchAuthDecryptedSessionId(
   content: string
 ): Promise<string | null> {
-  const encryptedValue = await getCookie(content); // Cookieから値を取得
+  const encryptedValue = cookies().get(content);
   if (encryptedValue) {
-    try {
-      const decryptedValue = await ScratchAuthDecrypt(encryptedValue.value); // 復号化を試みる
-      const [sessionId, hmac] = decryptedValue.split("|"); // セッションIDとHMACに分割
-      const calculatedHmac = await ScratchAuthCalculateHmac(sessionId); // HMACを再計算
+    const decryptedValue = await ScratchAuthDecrypt(encryptedValue.value);
+    if (decryptedValue) {
+      const [sessionId, hmac] = decryptedValue.split("|");
+      const calculatedHmac = await ScratchAuthCalculateHmac(sessionId);
       if (calculatedHmac === hmac) {
-        return sessionId; // 検証が成功した場合はセッションIDを返す
+        return sessionId;
       } else {
-        console.warn("HMAC does not match. Deleting cookie.");
-        await deleteCookie(content); // HMACが一致しない場合、Cookieを削除
+        if (pkgConfig.debug) {
+          console.warn("HMAC does not match. Deleting cookie.");
+        }
+        await deleteCookie(content);
+      }
+    } else {
+      if (pkgConfig.debug) {
+        console.warn("Decryption failed. Deleting cookie.");
       }
-    } catch (error) {
-      console.error("Error during decryption:", error);
-      await deleteCookie(content); // 復号化に失敗した場合、Cookieを削除
     }
   }
   return null;
 }
 
-// ユーザー名とIVを取得する新しい関数を作成
+// ユーザー名とIVを取得する関数
 export async function getScratchAuthUserName(
   content: string
 ): Promise<string | null> {
-  const encryptedValue = await getCookie(content); // Cookieから値を取得
+  const encryptedValue = cookies().get(content);
   if (encryptedValue) {
-    try {
-      const decrypted = await ScratchAuthDecrypt(encryptedValue.value); // 復号化
-      const [username] = decrypted.split("|"); // ユーザー名を取得
-      return username; // ユーザー名を返す
-    } catch (error) {
-      console.error("Error during decryption:", error);
-      await deleteCookie(content); // 復号化に失敗した場合、Cookieを削除
+    const decrypted = await ScratchAuthDecrypt(encryptedValue.value);
+    if (decrypted) {
+      const [username] = decrypted.split("|");
+      return username;
+    } else {
+      if (pkgConfig.debug) {
+        console.warn("Decryption failed. Deleting cookie.");
+      }
     }
   }
+  await deleteCookie(content);
   return null;
 }