SPA用Auth0ライブラリ

https://github.com/auth0/auth0-spa-js

hidden iframe 方式

• hidden iframe で Auth0 と通信、セッションがあれば window.postMessage() で Access Token を伝える。
• CSPで https://*.auth0.com/ へのiframeの許可が必要。
• ログイン後、セッションが切れていなければ（＝ Access Token の期限内であれば）、LocalStorage等への保存なしに、ブラウザリロード時に hidden iframe を使って Access Token を取得することが出来、ログイン操作が不要。
• ログアウト操作は Auth0 とのセッションの破棄を意味する。 Access Token は失効しない。
• Access Token は、これを使って自前の API サーバを叩くものでもある。 Access Token の有効期間を伸ばすことで、もう一度ログイン操作が必要になるまでの期間を伸ばすことになるが、 Access Token 自体が漏洩した時のリスクがある。が、逆に有効期限を短くすると、頻繁にログイン操作が必要となりユーザ体験が悪い。

Refresh Token 方式

• ログイン後、 Access Token に加えて Refresh Token を取得する。
• BlobでWorkerが作成される。 CSP で worker-src blob:; が必要。
• Access Token が失効しても Refresh Token を使って新しい Access Token を取得でき、Refresh Token の期間内であればログイン操作が不要。
• ブラウザリロード時に Access Token が失効している場合、何らかの方法で Refresh Token を取り出さないと再ログイン操作が必要となる。つまり Refresh Token を LocalStorage 等に保存しなければならない。
• ログアウト操作は Auth0 とのセッション破棄に加えて Refresh Token の失効が行われる。 Access Token は失効しない。
• Refresh Token はログアウト操作等により任意のタイミングで失効させられるため、 Access Token の有効期限を短く、Refresh Token の有効期限を長くすることで、 トークン漏洩時のリスクを減らすことができる。