今回はソーシャルログインに便利なIDaaSである「Auth0」の罠について解説したいと思います。この罠はセキュリティにおいて重大な問題を引き起こす可能性がありますのでAuth0を利用する方は必読だと考えます。

Auth0を知らないという方は以前投稿した記事を参考にしてみて下さい。

"罠"から逃れるために上記のAuth0に関する投稿をした時には理解していなかったログイン/ログアウトの根本的な知識が必要になりました。本記事を書くまでこの問題解決に多くの時間を費やしました。しかしながらAuth0に関する記事を２本も書いてしまった手前、罠を克服する責任が多分にあると思い頑張りました。僕のような日本人が今後現れないように備忘録として残しておきます。

APIコネクターを使ったソーシャルログインの仕組み

まずは"罠"がどうして生じるのかを理解するためにソーシャルログインの仕組みについて見ていきます。

下の画像はAuth0を使ったログアウトの仕組み図示（引用元）したものですが、大方ログインと同じ構図になっています。

この図を参考にしながらソーシャルログインの流れを書いてみます

1.ユーザーがAPIコネクターを使ってソーシャルログインをしようとする
2.ユーザーがログインしようとしていることをAuth0に伝える
3.Auth0がソーシャルログインの許可を得る
4.Auth0内にユーザー(Auth0)を生成する
5.Auth0がbubbleにユーザー(Auth0)の情報を伝える
6.bubble内にユーザー(bubble)を生成する

Auth0でソーシャルログインをする場合このような流れが一般的かと思われます。ちなみに上記のやり取りは全て「Oauth2.0」と呼ばれる世界標準の形式で行われているようです。

本記事において"罠"と呼んでいるものは4番と6番です。ユーザーが2つ生成されていますね。これによって生じる不具合を具体的に説明します。

罠にハマっている状態でのソーシャルログイン/ログアウト

何かしらボタンを押した時に「Signup/login with a social network」を行うワークフローを設定したとします。

特に問題なくソーシャルログインに成功しました。この時Bubble内とAuth0内の両方にユーザーが生成されています。1人に対して2つアカウントがある状態です。

次にログアウトしてみます

何かしらボタンを押した時に「Log the user out」を行うワークフローを設定したとします。この場合もボタンを押した時にログアウトに成功します。

ん？問題なくない？？

いえ、これ実は問題大アリなのです。先ほどソーシャルログインした際に2つアカウントが生成されました。今の「Log the user out」でログアウトされたのはbubble内のアカウントのみです。Auth0内のアカウントはログアウトされていません。bubbleのアプリをログアウトしてもAuth0においてはずっとログイン状態なのです。この状態からbubbleアプリで再度ログインをすると初回に出てきたAuth0のログインフォームは表示されずにそのままログインされます。

ん？問題なくない？？

いえ、問題大アリなのです！！

ユーザーが自分しか触らないデバイスでのみログインするなら問題ないかもしれませんが、ユーザーは様々な状況でサイトにアクセスします。例えば共有のPCでサイトにアクセスした場合、ログアウトをしたとしても再度ログインすればユーザー以外の人が何の認証もなくログイン可能になります。また複数人が同じデバイスから同じサイトにアクセスする場合、ログインしようとしても自動で1人のアカウントに飛ばされてしまいます。

以上の理由から「bubbleからログアウトする際にはAuth0からのログアウト処理も同時に行わなければならない」ことが分かります。またこれは単純なログアウト処理で行うことができない点を押さえておいてください。

Auth0からのログアウト方法

ここまでAuth0を使ったソーシャルログインの仕組み/二重のログアウト処理の必要性について書いてきました。では実際にAuth0からログアウトするにはどうすれば良いのか解説していきます。

1.有料プラグインを利用する

ソーシャルログインに関してはAPIコネクターを続投させますが、ログアウト処理だけこのプラグインを利用します。

ログアウトボタンを押した時のワークフローに「Auth0 -single logout」を挟むことで完了です。簡単！！50$なり〜〜

2.直接ログアウトURLに接続する（追記）

NoCodeCampにて質問をしたところかの有名なNoCodeLabさんから返信があり有料プラグインなしでログアウトする方法を教えて下さりました。本当に感謝しております。
※ステマでも何でもないのですがNoCodeCampって最the高なのでぜひ入ってみて下さい

具体的な方法は下図になります。ログアウトのワークフローに「open an external website」を挟むだけです。

https://{Auth0のテナントドメイン}/v2/logout?client_id={Auth0のクライアントID}&returnTo={ログアウトした後に戻ってくるURL}

開くURLは上記になります。bubbleでアプリを作成している方は{ログアウトした後に戻ってくるURL}をhttps://~~bubbleapps.io/version-testに設定してAuth0側のAllowed Logout URLsに同じURLを追加すれば良いと思います。

終わりに

ユーザーを2つ生成することはデータ保持の側面からメリットが大きいためデータロスではないと考えます。

しかしこの罠に気づかずにサービスをローンチしていたらと思うと恐怖で夜しか寝れません。気づいてよかったです。参考になった方はいいねとフォローよろしくです。

Twitterもやっていますのでフォローよろしくお願いします
▶︎ https://twitter.com/NoCoderT