write: Nuxt Auth Utils でサーバーサイドの認証

[shinGangan]

概要

Nuxt Auth Utils でサーバーサイドの認証

詳細

@monsat さんが執筆中のもの。

備考欄

No response

[shinGangan]

@shinGangan の方でレビューする。コメント事項あればレビューコメントを返す。

https://zenn.dev/comm_vue_nuxt/articles/nuxt-auth-utils-module

[shinGangan]

@monsat

レビューコメントを下記に記載しました！お手隙の際に確認お願い致します🙏

Note

Qから始まるやつは疑問です。不要だったらスルーしてください。

Sから始まるやつは提案です。採用については一任です。

prefix無しのものはレビュー指摘です

Nuxt Auth Utilsについて

Q. Nuxt2時代から利用されているAuthモジュールとしてsidebase製のNuxt Authモジュールがあるかと思います。

https://github.com/sidebase/nuxt-auth

本記事ではこちらとの差別化については言及されない感じでしょうか。
私が読み手だった場合「従来のNuxt Authとどう違い、どっちを利用すればいいのだろうか？」となるなと思います。

(補足) 類似の疑問として「Nuxt RobotsとNuxt Simple Robotsのどちらを使えばいいのか？」という質問イシューが起票されていたことがあります。ほぼ同名のモジュールであるため記事内で比較に関する言及があるとユーザーライクかなと思っております。

Nuxt Auth Utilesのバージョンについて

Nuxt Auth Utilsは公式からPublic Previewの言及はありません。しかし、日々開発が進んでおりbreaking changeも時折発生しています(v0.3.0で一部あり)。
そのため、本記事で実験したバージョンについて明記いただけると嬉しいと感じました

S. インストール方法について

Nuxt公式ドキュメントはnpm / pnpm / yarn / bun によるインストール方法ではなくnuxi module addによるインストール方法に軒並み置き換えられています。
(Daniel によるPRでほぼ全てのモジュールのInstall sectionが変更されています。 @shinGangan も一部PR出しています)

日本ではNuxt CLIがあまり認知されていない印象もあるため、Nuxt CLIによるインストール方法も合わせてあると良いと思いました。
こちらはあくまで所感に基づくコメントのため採用はお任せいたします。

[monsat]

@shinGangan
ありがとうございますー

nuxt/auth は https://auth.nuxtjs.org/ ですかね
たしかにまったく言及してなかったですね…
（というか使ったことなかったかもです）

ざっと見直しましたが、下記が違いでしょうか？ :::message カードで補足したいと思います。

• Nuxt 2 向け
• サーバー側でセッションを使用した認証ではなくクライアント側に認証情報を保存
• Laravel JWT 等 OAuth 以外の認証に対応

加えて sidebase/auth についても触れておきたいと思います。

Nuxt Auth Utilesのバージョン

加えます 🙇

nuxi module add

加えます 🙇
（公式ドキュメントがそっちだったので完全に抜け落ちました）

[shinGangan]

@monsat

Nuxt2時代のモジュールはそちらですね！
Nuxt Auth Utilsが登場するまではSidebase Nuxt Authが最有力モジュールでした。

そのため、Sidebase Nuxt Authとの選定比較があると読み手としては嬉しいですね！

(補足)
本記事は比較記事ではなく実験・検証記事です。そのため、比較の言及はあまり多くなくて良いと私は考えています。
あくまで「こっちもあるけどこんな理由から本記事ではこっちを使ったよー」ということが読み手に伝わればオッケーという認識です

[monsat]

(補足) 本記事は比較記事ではなく実験・検証記事です。そのため、比較の言及はあまり多くなくて良いと私は考えています。 あくまで「こっちもあるけどこんな理由から本記事ではこっちを使ったよー」ということが読み手に伝わればオッケーという認識です

なるほど。趣旨理解しました！たしかに選定理由はあってよさそうですね。
そのあたり追加して、公開しますー
Thanks 🙇

[monsat]

修正版です。一両日中で公開予定です。
https://zenn.dev/comm_vue_nuxt/articles/nuxt-auth-utils-module

• Nuxt Auth モジュールと @sidebase/nuxt-auth について簡単に触れました
• 記事内で使用しているバージョンを記載しました
• インストールにおける nuxi 使用した場合も記載しました
• （追記）<AuthState> コンポーネントの使用例を追加しました
• その他、細々した表現の修正

[shinGangan]

@monsat

LGTMです🎉

[shinGangan]

@monsat

LGTMです。公開済みのため本イシューをクローズします。

https://zenn.dev/comm_vue_nuxt/articles/nuxt-auth-utils-module