Nuxt Hanko

Hanko と Nuxt の連携

✨ Hanko との簡単な連携
🧱 Hanko Web コンポーネントの型安全性と自動登録
💪 フルスタック認証のためのサーバーユーティリティ

インストール

@nuxtjs/hanko をインストールし、nuxt.config に追加します。

npx nuxi@latest module add hanko

export default defineNuxtConfig({
  modules: ['@nuxtjs/hanko'],
  hanko: {
    // You can also configure this by setting NUXT_PUBLIC_HANKO_API_URL at runtime
    apiURL: '<YOUR_API_URL>',
    // You can also customise these if required
    // cookieName: 'hanko'
    // redirects: {
    //   login: '/login',
    //   success: '/',
    //   home: '/',
    //   followRedirect: true
    // },
    // registerComponents: true,
    // augmentContext: true,
  },
})

使用方法

コンポーネント

Hanko コンポーネントは、アプリ内のどこでも使用できます。<hanko-auth>、<hanko-events>、<hanko-profile>。これらはクライアントサイドのみでレンダリングされるWebコンポーネントです。プロパティは型付けされています。

(サーバーサイドのみ、またはプログラムでHankoを使用する場合)コンポーネントの自動登録を無効にするには、registerComponents: false を使用します。

詳細については、Hanko ドキュメントをご覧ください。

<template>
  <hanko-auth />
</template>

ミドルウェア

デフォルトで、Nuxtアプリに2つの新しいルートミドルウェア hanko-logged-in と hanko-logged-out が用意されています。

hanko-logged-in は、ログインしていない場合、ページへのアクセスを拒否します。(代わりに redirects.login にリダイレクトし、ログイン後にこのページに戻ります。 redirects.followRedirect を false に設定することで、この動作を無効にできます。)
hanko-logged-out は、ログアウトしていない場合、ページへのアクセスを拒否します。(ログインすると redirects.success に、そうでなければ redirects.home にリダイレクトします。)

完全な制御のために、独自のミドルウェアを作成することもできます。

自動インポート

useHanko はアプリのVue部分で公開されており、Hanko APIに直接アクセスできます。現在のユーザーなど、多くの情報にアクセスできます。**注:** サーバー上ではnullを返します。

サーバーユーティリティ

デフォルトでは、event.context.hanko で検証済みのJWTコンテキストにアクセスできます。(ユーザーがログインしていない場合は未定義です。)augmentContext: false を設定して、自分で処理することもできます。

event.context.hanko の作成に使用される基盤となるユーティリティは、アプリのNitro部分で verifyHankoEvent として公開されており、手動で処理したい場合に使用できます。

💻 開発

このリポジトリをクローンします。
corepack enable を使用して Corepack を有効にします。
pnpm install を使用して依存関係をインストールします。
pnpm dev:prepare を使用してモジュールをスタブ化します。
pnpm dev を実行して、開発モードで playground を開始します。

クレジット

このモジュール作成への後押しをしてくださった @McPizza0 に感謝します！

ライセンス

❤️ を込めて作成

MITライセンスで公開されています。