Netlify Identity でトークンをリフレッシュする

Netlify Identity を使うとページに簡単にユーザ認証を追加できて便利ですよね。でも、公式ウィジェットをそのまま使うと1時間でトークンが期限切れになってしまって、ちょっと使いづらいです。

調べてみたところ、必要最低限の実装としてとりあえずこんな感じの処理を書いておけば良さそうです。

function refreshToken () {
  if (netlifyIdentity.currentUser() !== null && netlifyIdentity.currentUser().token.expires_at < new Date().getTime()) {
    netlifyIdentity.refresh().then(token => location.reload());
  }
}
setInterval(refreshToken, 60000);

定期的(60秒ごと)にトークンが切れているかをチェックして、切れている場合はトークンをリフレッシュした後、ページをリロードします。

ちなみに、netlifyIdentity.currentUser() === null になってしまった場合は、再度モーダルを表示するようにするのも便利です。

function refreshToken () {
  if (netlifyIdentity.currentUser() === null) {
    netlifyIdentity.open('login');
  } else if (netlifyIdentity.currentUser().token.expires_at < new Date().getTime()) {
    netlifyIdentity.refresh().then(token => location.reload());
  }
}
setInterval(refreshToken, 60000);

参考サイト

https://answers.netlify.com/t/token-doesnt-work-after-netlifyidentity-refresh-until-page-reload/72320