Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,14 @@ import ConfigApiResources from './api-resources/_config-api-resources.mdx';
import FetchAccessTokenForApiResources from './api-resources/_fetch-access-token-for-api-resources.mdx';
import FetchOrganizationTokenForUser from './api-resources/_fetch-organization-token-for-user.mdx';

# Authentifizierung zu deiner Next.js (App Router)-Anwendung hinzufügen
# Authentifizierung zu deiner Next.js (App Router)-Anwendung hinzufügen (Add authentication to your Next.js (App Router) application)

<GuideTip />

## Voraussetzungen \{#prerequisites}

- Ein [Logto Cloud](https://cloud.logto.io)-Konto oder ein [selbst gehostetes Logto](/introduction/set-up-logto-oss).
- Eine Logto traditionelle Anwendung erstellt.
- Ein [Logto Cloud](https://cloud.logto.io)-Konto oder eine [selbst gehostete Logto](/introduction/set-up-logto-oss).
- Eine erstellte traditionelle Logto-Anwendung.

## Installation \{#installation}

Expand All @@ -52,7 +52,7 @@ import FetchOrganizationTokenForUser from './api-resources/_fetch-organization-t

<FetchAccessTokenForApiResources />

Wenn du ein Zugangstoken in der Serverkomponente abrufen musst, kannst du die Funktion `getAccessTokenRSC` verwenden:
Wenn du ein Zugangstoken im Server-Component abrufen musst, kannst du die Funktion `getAccessTokenRSC` verwenden:

```tsx title="app/page.tsx"
import { getAccessTokenRSC } from '@logto/next/server-actions';
Expand All @@ -71,15 +71,15 @@ export default async function Home() {

:::tip

HTTP erlaubt es nicht, Cookies nach Beginn des Streamings zu setzen, `getAccessTokenRSC` kann den Cookie-Wert nicht aktualisieren, sodass, wenn das Zugangstoken aktualisiert wird, es nicht in der Sitzung gespeichert wird. Es wird empfohlen, die Funktion `getAccessToken` auf der Client-Seite oder in Routen-Handlern zu verwenden.
HTTP erlaubt das Setzen von Cookies nach Beginn des Streamings nicht, daher kann `getAccessTokenRSC` den Cookie-Wert nicht aktualisieren. Wenn das Zugangstoken also aktualisiert wird, bleibt es nicht in der Sitzung erhalten. Es wird empfohlen, die Funktion `getAccessToken` auf der Client-Seite oder in Route-Handlern zu verwenden.

:::

### Organisationstokens abrufen \{#fetch-organization-tokens}

<FetchOrganizationTokenForUser />

Wenn du ein Organisationstoken in der Serverkomponente abrufen musst, kannst du die Funktion `getOrganizationTokenRSC` verwenden:
Wenn du ein Organisationstoken im Server-Component abrufen musst, kannst du die Funktion `getOrganizationTokenRSC` verwenden:

```tsx title="app/page.tsx"
import { getOrganizationTokenRSC } from '@logto/next/server-actions';
Expand All @@ -98,14 +98,45 @@ export default async function Home() {

:::tip

HTTP erlaubt es nicht, Cookies nach Beginn des Streamings zu setzen, `getOrganizationTokenRSC` kann den Cookie-Wert nicht aktualisieren, sodass, wenn das Zugangstoken aktualisiert wird, es nicht in der Sitzung gespeichert wird. Es wird empfohlen, die Funktion `getOrganizationToken` auf der Client-Seite oder in Routen-Handlern zu verwenden.
HTTP erlaubt das Setzen von Cookies nach Beginn des Streamings nicht, daher kann `getOrganizationTokenRSC` den Cookie-Wert nicht aktualisieren. Wenn das Zugangstoken also aktualisiert wird, bleibt es nicht in der Sitzung erhalten. Es wird empfohlen, die Funktion `getOrganizationToken` auf der Client-Seite oder in Route-Handlern zu verwenden.

:::

## Externen Sitzungspeicher verwenden \{#use-external-session-storage}

<ExternalStorage />

## Weiterführende Lektüre \{#further-readings}
## Automatische Weiterleitung zur Anmeldung bei fehlender Berechtigung \{#automatic-sign-in-redirect\}

:::tip
Der `signIn`-Helper ändert Cookies, um die Anmeldesitzung zu erstellen, daher kann er nicht direkt in einer React Server Component (RSC) aufgerufen werden. Um die Anmeldung automatisch auszulösen, wenn eine RSC einen nicht autorisierten Benutzer erkennt, rufe `signIn` in einem dedizierten Route-Handler auf und leite zu dieser Route weiter.
:::

```ts title="app/sign-in/route.ts"
import { signIn } from '@logto/next/server-actions';
import { logtoConfig } from '../../logto';

export async function GET() {
await signIn(logtoConfig);
}
```

```tsx title="app/protected/page.tsx"
import { getLogtoContext } from '@logto/next/server-actions';
import { redirect } from 'next/navigation';
import { logtoConfig } from '../logto';

export default async function ProtectedPage() {
const { isAuthenticated } = await getLogtoContext(logtoConfig);

if (!isAuthenticated) {
redirect('/sign-in');
}

return <div>Geschützter Inhalt</div>;
}
```

## Weiterführende Literatur \{#further-readings}

<FurtherReadings />
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ import FetchOrganizationTokenForUser from './api-resources/_fetch-organization-t

<ApiResourcesDescription />

### Configurar cliente Logto \{#configure-logto-client}
### Configurar el cliente de Logto \{#configure-logto-client}

<ConfigApiResources />

Expand All @@ -71,7 +71,7 @@ export default async function Home() {

:::tip

HTTP no permite establecer cookies después de que comienza la transmisión, `getAccessTokenRSC` no puede actualizar el valor de la cookie, por lo que si el token de acceso se actualiza, no se persistirá en la sesión. Se recomienda usar la función `getAccessToken` en el lado del cliente o en los manejadores de rutas.
HTTP no permite establecer cookies después de que comienza el streaming, `getAccessTokenRSC` no puede actualizar el valor de la cookie, por lo que si el token de acceso se actualiza, no se persistirá en la sesión. Se recomienda usar la función `getAccessToken` en el lado del cliente o en los manejadores de rutas.

:::

Expand All @@ -98,14 +98,45 @@ export default async function Home() {

:::tip

HTTP no permite establecer cookies después de que comienza la transmisión, `getOrganizationTokenRSC` no puede actualizar el valor de la cookie, por lo que si el token de acceso se actualiza, no se persistirá en la sesión. Se recomienda usar la función `getOrganizationToken` en el lado del cliente o en los manejadores de rutas.
HTTP no permite establecer cookies después de que comienza el streaming, `getOrganizationTokenRSC` no puede actualizar el valor de la cookie, por lo que si el token de acceso se actualiza, no se persistirá en la sesión. Se recomienda usar la función `getOrganizationToken` en el lado del cliente o en los manejadores de rutas.

:::

## Usar almacenamiento de sesión externo \{#use-external-session-storage}

<ExternalStorage />

## Redirección automática al inicio de sesión en caso de no autorizado \{#automatic-sign-in-redirect\}

:::tip
El helper `signIn` modifica las cookies para establecer la sesión de inicio de sesión, por lo que no puede ser invocado directamente en un React Server Component (RSC). Para activar el inicio de sesión automáticamente cuando un RSC detecta un usuario no autorizado, llama a `signIn` en un manejador de ruta dedicado y redirige a esa ruta.
:::

```ts title="app/sign-in/route.ts"
import { signIn } from '@logto/next/server-actions';
import { logtoConfig } from '../../logto';

export async function GET() {
await signIn(logtoConfig);
}
```

```tsx title="app/protected/page.tsx"
import { getLogtoContext } from '@logto/next/server-actions';
import { redirect } from 'next/navigation';
import { logtoConfig } from '../logto';

export default async function ProtectedPage() {
const { isAuthenticated } = await getLogtoContext(logtoConfig);

if (!isAuthenticated) {
redirect('/sign-in');
}

return <div>Contenido protegido</div>;
}
```

## Lecturas adicionales \{#further-readings}

<FurtherReadings />
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ import FetchOrganizationTokenForUser from './api-resources/_fetch-organization-t

<Integration />

## Récupérer les informations de l'utilisateur \{#fetch-user-information}
## Récupérer les informations utilisateur \{#fetch-user-information}

<GetUserInformation />

Expand All @@ -55,6 +55,7 @@ import FetchOrganizationTokenForUser from './api-resources/_fetch-organization-t
Si vous avez besoin de récupérer un jeton d’accès dans le composant serveur, vous pouvez utiliser la fonction `getAccessTokenRSC` :

```tsx title="app/page.tsx"
// Importations et configuration identiques à l'exemple original
import { getAccessTokenRSC } from '@logto/next/server-actions';
import { logtoConfig } from './logto';

Expand All @@ -71,7 +72,7 @@ export default async function Home() {

:::tip

HTTP ne permet pas de définir des cookies après le début du streaming, `getAccessTokenRSC` ne peut pas mettre à jour la valeur du cookie, donc si le jeton d’accès est rafraîchi, il ne sera pas conservé dans la session. Il est recommandé d'utiliser la fonction `getAccessToken` côté client ou dans les gestionnaires de route.
HTTP n’autorise pas la définition de cookies après le début du streaming, `getAccessTokenRSC` ne peut donc pas mettre à jour la valeur du cookie. Ainsi, si le jeton d’accès est rafraîchi, il ne sera pas conservé dans la session. Il est recommandé d’utiliser la fonction `getAccessToken` côté client ou dans les gestionnaires de routes.

:::

Expand All @@ -82,6 +83,7 @@ HTTP ne permet pas de définir des cookies après le début du streaming, `getAc
Si vous avez besoin de récupérer un jeton d’organisation dans le composant serveur, vous pouvez utiliser la fonction `getOrganizationTokenRSC` :

```tsx title="app/page.tsx"
// Importations et configuration identiques à l'exemple original
import { getOrganizationTokenRSC } from '@logto/next/server-actions';
import { logtoConfig } from './logto';

Expand All @@ -98,14 +100,47 @@ export default async function Home() {

:::tip

HTTP ne permet pas de définir des cookies après le début du streaming, `getOrganizationTokenRSC` ne peut pas mettre à jour la valeur du cookie, donc si le jeton d’accès est rafraîchi, il ne sera pas conservé dans la session. Il est recommandé d'utiliser la fonction `getOrganizationToken` côté client ou dans les gestionnaires de route.
HTTP n’autorise pas la définition de cookies après le début du streaming, `getOrganizationTokenRSC` ne peut donc pas mettre à jour la valeur du cookie. Ainsi, si le jeton d’accès est rafraîchi, il ne sera pas conservé dans la session. Il est recommandé d’utiliser la fonction `getOrganizationToken` côté client ou dans les gestionnaires de routes.

:::

## Utiliser un stockage de session externe \{#use-external-session-storage}

<ExternalStorage />

## Lectures complémentaires \{#further-readings}
## Redirection automatique vers la connexion en cas d’accès non autorisé \{#automatic-sign-in-redirect\}

:::tip
Le helper `signIn` modifie les cookies pour établir la session de connexion, il ne peut donc pas être invoqué directement dans un React Server Component (RSC). Pour déclencher automatiquement la connexion lorsqu’un RSC détecte un utilisateur non autorisé, appelez `signIn` dans un gestionnaire de route dédié et redirigez vers cette route.
:::

```ts title="app/sign-in/route.ts"
// Importations et configuration identiques à l'exemple original
import { signIn } from '@logto/next/server-actions';
import { logtoConfig } from '../../logto';

export async function GET() {
await signIn(logtoConfig);
}
```

```tsx title="app/protected/page.tsx"
// Importations et configuration identiques à l'exemple original
import { getLogtoContext } from '@logto/next/server-actions';
import { redirect } from 'next/navigation';
import { logtoConfig } from '../logto';

export default async function ProtectedPage() {
const { isAuthenticated } = await getLogtoContext(logtoConfig);

if (!isAuthenticated) {
redirect('/sign-in');
}

return <div>Contenu protégé</div>;
}
```

## Pour aller plus loin \{#further-readings}

<FurtherReadings />
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ sidebar_label: Next.js (App Router)
sidebar_custom_props:
logoFilename: 'next.svg'
darkLogoFilename: 'next-dark.svg'
description: Next.js App Router は、React の最新機能を使用してアプリケーションを構築するための新しいパラダイムです。
description: Next.js App Router は、React の最新機能を活用したアプリケーション構築の新しいパラダイムです。
---

import ApiResourcesDescription from '../../fragments/_api-resources-description.md';
Expand All @@ -25,8 +25,8 @@ import FetchOrganizationTokenForUser from './api-resources/_fetch-organization-t

## 前提条件 \{#prerequisites}

- [Logto Cloud](https://cloud.logto.io) アカウントまたは [セルフホスト Logto](/introduction/set-up-logto-oss)。
- Logto の従来のアプリケーションが作成されていること。
- [Logto Cloud](https://cloud.logto.io) アカウント、または [セルフホスト Logto](/introduction/set-up-logto-oss)。
- Logto のトラディショナルアプリケーションが作成済みであること。

## インストール \{#installation}

Expand All @@ -48,11 +48,11 @@ import FetchOrganizationTokenForUser from './api-resources/_fetch-organization-t

<ConfigApiResources />

### API リソースのアクセス トークンの取得 \{#fetch-access-token-for-the-api-resource}
### API リソース用のアクセス トークンの取得 \{#fetch-access-token-for-the-api-resource}

<FetchAccessTokenForApiResources />

サーバーコンポーネントでアクセス トークンを取得する必要がある場合は、`getAccessTokenRSC` 関数を使用できます:
サーバーコンポーネントでアクセス トークンを取得する必要がある場合は、`getAccessTokenRSC` 関数を利用できます:

```tsx title="app/page.tsx"
import { getAccessTokenRSC } from '@logto/next/server-actions';
Expand All @@ -71,15 +71,15 @@ export default async function Home() {

:::tip

HTTP はストリーミングが開始された後にクッキーを設定することを許可していないため、`getAccessTokenRSC` はクッキーの値を更新できません。そのため、アクセス トークンが更新されてもセッションに保持されません。クライアント側またはルートハンドラーで `getAccessToken` 関数を使用することをお勧めします。
HTTP ではストリーミング開始後に Cookie を設定できないため、`getAccessTokenRSC` は Cookie の値を更新できません。そのため、アクセス トークンがリフレッシュされた場合、セッションに永続化されません。クライアントサイドやルートハンドラーでは `getAccessToken` 関数の利用を推奨します。

:::

### 組織トークンの取得 \{#fetch-organization-tokens}

<FetchOrganizationTokenForUser />

サーバーコンポーネントで組織トークンを取得する必要がある場合は、`getOrganizationTokenRSC` 関数を使用できます:
サーバーコンポーネントで組織トークンを取得する必要がある場合は、`getOrganizationTokenRSC` 関数を利用できます:

```tsx title="app/page.tsx"
import { getOrganizationTokenRSC } from '@logto/next/server-actions';
Expand All @@ -98,14 +98,45 @@ export default async function Home() {

:::tip

HTTP はストリーミングが開始された後にクッキーを設定することを許可していないため、`getOrganizationTokenRSC` はクッキーの値を更新できません。そのため、アクセス トークンが更新されてもセッションに保持されません。クライアント側またはルートハンドラーで `getOrganizationToken` 関数を使用することをお勧めします。
HTTP ではストリーミング開始後に Cookie を設定できないため、`getOrganizationTokenRSC` は Cookie の値を更新できません。そのため、アクセス トークンがリフレッシュされた場合、セッションに永続化されません。クライアントサイドやルートハンドラーでは `getOrganizationToken` 関数の利用を推奨します。

:::

## 外部セッションストレージの使用 \{#use-external-session-storage}
## 外部セッションストレージの利用 \{#use-external-session-storage}

<ExternalStorage />

## さらなる読み物 \{#further-readings}
## 未認可時の自動サインインリダイレクト \{#automatic-sign-in-redirect\}

:::tip
`signIn` ヘルパーはサインインセッションを確立するために Cookie を変更します。そのため、React Server Component (RSC) で直接呼び出すことはできません。RSC で未認可ユーザーを検出した際に自動的にサインインをトリガーするには、専用のルートハンドラーで `signIn` を呼び出し、そのルートへリダイレクトしてください。
:::

```ts title="app/sign-in/route.ts"
import { signIn } from '@logto/next/server-actions';
import { logtoConfig } from '../../logto';

export async function GET() {
await signIn(logtoConfig);
}
```

```tsx title="app/protected/page.tsx"
import { getLogtoContext } from '@logto/next/server-actions';
import { redirect } from 'next/navigation';
import { logtoConfig } from '../logto';

export default async function ProtectedPage() {
const { isAuthenticated } = await getLogtoContext(logtoConfig);

if (!isAuthenticated) {
redirect('/sign-in');
}

return <div>Protected content</div>;
}
```

## さらに読む \{#further-readings}

<FurtherReadings />
Loading
Loading