NextAuth.jsには標準でもサインインページとサインアウトページは用意されているのだが、実務ではそのまま使いづらく、独自のサインインページを用意したいことが多いのではないかと思う。 本稿では、独自のサインインページを作成する場合の設定の概要と注…

一般的な話であるが、OAuth認証の基本的な仕組みを前提として確認する。OAuth認証を利用するWebアプリは、OIDCプロバイダから提供されたアクセストークンの正しさを、ユーザプロファイル情報の取得可否によって確認する。つまり、認証の過程においてWebアプ…

SVGを最近よく活用している。CanvasよりReactとの相性はよいし、ベクターなのも好み。 （Three.jsを使えると面白いけど、、その機会はなかなかない。） だいたいの場合は、HTMLに埋め込んで使えばいいので、特別なことをする必要はない。 ただ、たまに画像と…

Azure Static Web Appではstaticなファイルにはmiddlewareが機能しないっぽいので、 画像にも認証をかけたい場合はAPIで画像を返すようにする必要がある。 Static Web Appってそういうものだよなーと思っているので仕方ない気がするし、 そもそも認証が必要…

以前にAzure Web App Serviceへのデプロイについての記事を書きました。 ma38su.hatenablog.com 今回はこのデプロイをブラッシュアップして、Azure Pipelineからstatic web appへもデプロイできるようにしました。 2024/2/10 追記 Next.JSのmiddlewareうまく…

NextJsの認証を簡単に実現するモジュールのひとつであるNextAuth.jsについて、Autodeskアカウントを使ってみようということで、 今回はカスタムプロバイダーとしてAutodesk Platform ServicesのOAuthを試してみたので、その結果を残しておきます。 いまauth.…

追記：NextJS(AppRouter)でSuspenseを使うときはCSRにしようと書いたのだが、CSRだとNextJSのRouter Cacheと相性がわるそう。というか、最近NextJSはオーバースペックだなぁと感じている。 Viteで作っていたReactのプロトをNextjsに移植したところ、Suspense…

最近、新しいアプリを作ってみたらデプロイに苦労したのでメモを残しておく。 2023.9.13時点で、Next.JSのアプリは、VSCodeの拡張機能や、Web App Serviceから自動設定できるGitHub連携のデフォルトのGitHub Actionでは、Next.JSのデプロイに時間がかかりす…