From 5fc8722c24023f80cc44678d369b0225d6b4a579 Mon Sep 17 00:00:00 2001 From: Fun117 Date: Mon, 4 Nov 2024 14:10:13 +0900 Subject: [PATCH 1/2] =?UTF-8?q?=E8=AA=8D=E8=A8=BC=E3=83=97=E3=83=AD?= =?UTF-8?q?=E3=83=90=E3=82=A4=E3=83=80=E3=83=BC=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/nextjs/package.json | 2 +- packages/nextjs/src/components/provider.tsx | 61 +++++++++++++++++++++ packages/nextjs/src/index.d.ts | 2 + packages/nextjs/src/server.ts | 2 +- pages/docs/nextjs/quickstart.ja.mdx | 2 +- test/nextjs/src/app/dashboard/layout.tsx | 9 +++ test/nextjs/src/app/dashboard/page.tsx | 9 +++ 7 files changed, 84 insertions(+), 3 deletions(-) create mode 100644 packages/nextjs/src/components/provider.tsx create mode 100644 test/nextjs/src/app/dashboard/layout.tsx create mode 100644 test/nextjs/src/app/dashboard/page.tsx diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json index f3d4cf6..4703287 100644 --- a/packages/nextjs/package.json +++ b/packages/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@scratch-auth/nextjs", - "version": "0.0.1", + "version": "0.0.2-beta-1410m-20241104", "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": { diff --git a/packages/nextjs/src/components/provider.tsx b/packages/nextjs/src/components/provider.tsx new file mode 100644 index 0000000..bf08a62 --- /dev/null +++ b/packages/nextjs/src/components/provider.tsx @@ -0,0 +1,61 @@ +"use client"; + +import React from "react"; +import { useUser } from "../hooks/useUser"; + +type ConfigProps = { + noLogin: { + redirect?: string; + function?: () => void; + children?: React.ReactNode; + }; +}; + +export interface ScratchAuthProviderProps { + children: React.ReactNode; + config?: ConfigProps; +} + +const ScratchAuthProvider = ({ + children, + config = { + noLogin: { + redirect: "/", + }, + }, +}: ScratchAuthProviderProps) => { + const { user, loading, refreshUser } = useUser(); + + React.useEffect(() => { + const handleCookieChange = () => { + refreshUser(); // クッキーが変化した際にユーザー情報を更新 + }; + + if (typeof window !== undefined) { + window.addEventListener("sah-sessionchange", handleCookieChange); // クッキーの変化を監視 + + return () => { + window.removeEventListener("sah-sessionchange", handleCookieChange); // クリーンアップ + }; + } + }, [refreshUser]); + + if (loading) { + return <>{config?.noLogin.children} || null; + } + + if (!user) { + if (config?.noLogin.redirect && typeof window !== undefined) { + window.location.href = config?.noLogin.redirect; + return null; + } + if (config?.noLogin.function) { + config?.noLogin.function(); + } + return <>{config?.noLogin.children} || null; + } + return <>{children}; +}; +ScratchAuthProvider.displayName = "ScratchAuthProvider"; + +export default ScratchAuthProvider; diff --git a/packages/nextjs/src/index.d.ts b/packages/nextjs/src/index.d.ts index 23404bb..720ed92 100644 --- a/packages/nextjs/src/index.d.ts +++ b/packages/nextjs/src/index.d.ts @@ -7,3 +7,5 @@ export * from "./hooks/useUser.ts"; export * from "./elements/Logined.tsx"; export * from "./elements/UserButton.tsx"; export * from "./elements/account.tsx"; + +export * from "./components/provider.tsx"; diff --git a/packages/nextjs/src/server.ts b/packages/nextjs/src/server.ts index ffbd165..3d0d0eb 100644 --- a/packages/nextjs/src/server.ts +++ b/packages/nextjs/src/server.ts @@ -128,4 +128,4 @@ export async function isLoggedIn(): Promise { export async function checkRedirectState(): Promise { const session = await checkSession(); return !!session; // ログイン済みかどうか -} +} \ No newline at end of file diff --git a/pages/docs/nextjs/quickstart.ja.mdx b/pages/docs/nextjs/quickstart.ja.mdx index 445c571..c06a903 100644 --- a/pages/docs/nextjs/quickstart.ja.mdx +++ b/pages/docs/nextjs/quickstart.ja.mdx @@ -163,4 +163,4 @@ pnpm dev [http://localhost:3000 ↗](http://localhost:3000) にあるアプリのホームページにアクセスします。サインアップして最初のユーザーを作成します。 - + \ No newline at end of file diff --git a/test/nextjs/src/app/dashboard/layout.tsx b/test/nextjs/src/app/dashboard/layout.tsx new file mode 100644 index 0000000..cc6c4f6 --- /dev/null +++ b/test/nextjs/src/app/dashboard/layout.tsx @@ -0,0 +1,9 @@ +import ScratchAuthProvider from "@scratch-auth/nextjs/src/components/provider"; + +export default function DashboardLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return {children}; +} diff --git a/test/nextjs/src/app/dashboard/page.tsx b/test/nextjs/src/app/dashboard/page.tsx new file mode 100644 index 0000000..3652ef0 --- /dev/null +++ b/test/nextjs/src/app/dashboard/page.tsx @@ -0,0 +1,9 @@ +import React from 'react' + +function page() { + return ( +
page
+ ) +} + +export default page \ No newline at end of file From 07cc3eb74bafc4ac658336d99cc149118c1514ed Mon Sep 17 00:00:00 2001 From: Fun117 Date: Mon, 4 Nov 2024 14:24:40 +0900 Subject: [PATCH 2/2] Update MD --- README.md | 9 ++++++- packages/nextjs/README.md | 53 ++++++++++++++++++++++++++++++++++++++- packages/react/README.md | 1 + 3 files changed, 61 insertions(+), 2 deletions(-) create mode 100644 packages/react/README.md diff --git a/README.md b/README.md index f20ed9e..90acfcc 100644 --- a/README.md +++ b/README.md @@ -35,4 +35,11 @@ Scratch Auth is licensed under the MIT License. For more details, please refer t If you have any questions or feedback, feel free to reach out via [GitHub Discussions](https://github.com/scratch-auth/pkg/discussions). -Thank you for using Scratch Auth! \ No newline at end of file +Thank you for using Scratch Auth! + +--- + +# Document + +- [Next.js](https://github.com/scratch-auth/pkg/blob/main/packages/nextjs/README.md) +- [React](https://github.com/scratch-auth/pkg/blob/main/packages/react/README.md) \ No newline at end of file diff --git a/packages/nextjs/README.md b/packages/nextjs/README.md index 818d4d2..12d6257 100644 --- a/packages/nextjs/README.md +++ b/packages/nextjs/README.md @@ -28,6 +28,7 @@ SCRATCH_AUTH_SECRET_KEY=*************************************** 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" +// /src/app/api/auth/page.tsx "use client"; import React, { useEffect } from "react"; @@ -72,6 +73,7 @@ By using Scratch Auth’s pre-built components, you can control the content disp - ``: 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" +// /src/app/page.tsx import React from "react"; import { LogInButton, @@ -106,6 +108,7 @@ export default function Page() { | debug | Debug mode | ```tsx filename="scratch-auth.config.ts" +// /scratch-auth.config.ts import { ScratchAuthConfig } from "@scratch-auth/nextjs/src/types"; import { type ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge"; @@ -137,4 +140,52 @@ up and create the first user. -[@Looky1173](https://github.com/Looky1173) / [@Fun117](https://github.com/Fun117) \ No newline at end of file +[@Looky1173](https://github.com/Looky1173) / [@Fun117](https://github.com/Fun117) + +--- + +# プロバイダー + +バージョン `0.0.2` で実装される認証プロバイダー機能です。 + +プロバイダーの設定をすることで、ログインしていないユーザーに特定の制限を設定できます。 + +```ts +type ConfigProps = { + noLogin: { + redirect?: string; + function?: () => void; + children?: React.ReactNode; + }; +}; +``` + +制限したい要素の親要素に、`ScratchAuthProvider` を設置してください。 + +```tsx +// /src/app/dashboard/layout.tsx +import ScratchAuthProvider from "@scratch-auth/nextjs/src/components/provider"; + +export default function DashboardLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return {children}; +} +``` + +ログインしているユーザーは認証プロバイダーで制限されている要素を表示することができます。 + +```tsx +// /src/app/dashboard/page.tsx +import React from 'react' + +function page() { + return ( +
page
+ ) +} + +export default page +``` \ No newline at end of file diff --git a/packages/react/README.md b/packages/react/README.md new file mode 100644 index 0000000..463e41b --- /dev/null +++ b/packages/react/README.md @@ -0,0 +1 @@ +# COMING SOON \ No newline at end of file