title /api/login
skinparam monochrome true
skinparam ranksep 20
skinparam dpi 150
skinparam arrowThickness 0.7

actor client
entity "Next.js server" as next
entity "Nest.js server" as nest
client->next: "/api/login" with email, pass
next->nest: "/api/login" with email, pass
nest->next: Return "accessToken"
next->next: Set accessToken to cookies \n with httpOnly, secure
next->client: Return Response "201"

title TODO 一覧の表示
skinparam monochrome true
skinparam ranksep 20
skinparam dpi 150
skinparam arrowThickness 0.7

actor client
entity "Next.js server" as next
entity "Nest.js server" as nest
client->next : Request Todos page (auth-required)
next->next : Get "JWT" from "cookies"
next->nest : Request "/api/todos" with "JWT" 
note right: Check "JWT"
nest->next : Return "/api/todos" response
next->next: Build page html with response
next->client: Return Todos page

へぶん 2021/10/08に更新

上記の方法で実装して、Next.js サーバー側で cookies から JWT を取り出して Nest.js に API リクエストできた。

所感

方式に依存するのかも知れないけど、以下のどちらで行なっても手軽な印象
- SSR で API を叩く場合
- useSWR などでクライアントで API を叩く場合
ログイン処理は Client から直接行うのではなく、Next.js のサーバーで行うのが筋がいい感じがした
- httpOnly 属性つけれてセキュア
- Next.js 側で Cookie に token の設定する責務を負うことで、モバイルクライアントと API を共通にできるメリットがある気がする
あとは Cross-Origin 周りの考慮をする
- ECS に上げてみるか...

参考

以下の記事がとても参考になった 🙏

目的

実装したい内容

前提

手順

1. Nest.js の JWT 認証付きのサンプルをローカルで動くようにする

2. Next.js で認証用のページ・処理を実装

アクセス制御のやり方どうする?

そもそも JWT token どこに保存するのか問題

とりあえずの結論

Cookie を使う

Login 処理

TODO の取得

所感

参考