Skip to content

Commit

Permalink
Update MD
Browse files Browse the repository at this point in the history
  • Loading branch information
Fun117 committed Nov 4, 2024
1 parent 5fc8722 commit 07cc3eb
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 2 deletions.
9 changes: 8 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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!
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)
53 changes: 52 additions & 1 deletion packages/nextjs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -72,6 +73,7 @@ By using Scratch Auth’s pre-built components, you can control the content disp
- `<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"
// /src/app/page.tsx
import React from "react";
import {
LogInButton,
Expand Down Expand Up @@ -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";
Expand Down Expand Up @@ -137,4 +140,52 @@ up and create the first user.

</Steps>

[@Looky1173](https://github.com/Looky1173) / [@Fun117](https://github.com/Fun117)
[@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 <ScratchAuthProvider>{children}</ScratchAuthProvider>;
}
```

ログインしているユーザーは認証プロバイダーで制限されている要素を表示することができます。

```tsx
// /src/app/dashboard/page.tsx
import React from 'react'

function page() {
return (
<div>page</div>
)
}

export default page
```
1 change: 1 addition & 0 deletions packages/react/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
# COMING SOON

0 comments on commit 07cc3eb

Please sign in to comment.