本記事ではフロントエンドに Nuxt.js(Vue.js)、バックエンドに Ruby on Rails 、APIに GraphQL を採用したアプリケーションに、JWTトークンによる認証 を追加する方法についてまとめます。 題材 サンプルとして以下チュートリアルで作成したToDoリストを使用します。 Nuxt.js + GraphQL + Ruby on Railsで作るToDoアプリチュートリアル(前編) Nuxt.js + GraphQL + Ruby on Railsで作るToDoアプリチュートリアル(後編) JWTでの認証フロー 今回実装するJWTでの認証フローを図にまとめました。 トークンの発行・保存・付与・検証がめんどくさそうに見えるかもしれませんが、フロントエンド側はAuth Moduleが、バックエンド側はknockがトークンをいい感じに処理してくれるので、安心してください