shimotsu tech

Webフロントエンドエンジニア @ to-R inc.

NetlifyでデプロイしたサイトのAuth0のソーシャルログインが動かない

今月からアサインされるプロジェクトでAuth0を使った認証を使う感じになりそうだったので事前に試してみたのですが、ちょっとつまずいたところがあったのでメモ。

以下の記事を参照にNuxtのSPAでAuth0を導入してみました。

steady.daas.co.jp

▼ 動いてるやつ

f:id:zuboriradio:20191201125749g:plain

NuxtではAuth Moduleを使えばAuth0によるソーシャルログインが超あっさりと実装できるんですね。よく見るログイン画面が現れ、指示通りにログイン処理を行うと、用意しておいたプロフィールページで自分の情報が表示されたのでちょっと感動しました。

Netlifyにデプロイすると動かない

Auth0のデフォルトではGoogleアカウントによる認証が用意されているのですが、その他にもFacebookやLINEのアカウントによる認証を試してみたいと思い、ひとまずローカルではなくWebにアップしようと思い、いつもとおりNetlifyでデプロイしてみました。

すると、動かない……。うーん、なんでだろ。
本来、このcallbackがちらっと表示されて、その後スムースにプロフィールが表示されるページへ遷移するはずなのですが、callbackの時点で止まってしまう。

f:id:zuboriradio:20191201130312g:plain

開発者ツールを見てもJWTを付与したリクエストは問題なく行われてるっぽい。

f:id:zuboriradio:20191201130656j:plain

結論:NetlifyではJWTの利用は有料

原因が特定できず1時間くらい唸っていたのですが、結論をいうとNetlifyではJWTを使った認証は有料プランしか使えないとのこと。

Netlifyの管理画面 > Settings > Access control で確認できます。
f:id:zuboriradio:20191201131116j:plain

たぶんここでAuth0で入手できるClient Secretを入力すればいいんだと思います。

終了。おつかれさまでした。