LoginSignup
1
0

More than 3 years have passed since last update.

Check! auth0-js の WebAuth.checkSession() でエラーが出てしまう場合の対処

Last updated at Posted at 2019-07-27

こんにちは、 @dz_ こと大平かづみです。

Prologue

最近、 Auth0 をつかって認証機構を作ろうと試作しています。そこで躓いた点を共有します。

環境

フロントエンド(Vue.js)で Auth0 を使って認証をしようと試みています。基本的にはこのチュートリアル Auth0 Vue SDK Quickstarts: Login を参考にしています。

Vue.js に限らず、フロントエンドで Auth0 を使う場合は auth0-js を使うことが多いようです。

今回は、この auth0-js を利用している際にみつけた事象について記載します。

即タイムアウト?

タイムアウトするようなタイミングでもないのに下記のようなエラーが出た場合は、 Auth0 の管理画面から ApplicationsAllowed Web Origins の設定を確認してみてください。こちらのドキュメント Error response - Silent Authentication | Auth0 にも記載があるように、 Allowed Web Origins を正しく設定するとエラーが解消するかと思います。

Timeout during executing web_message communication

常に Login required エラー

上記エラーをクリアしたのに、今度は常に Login required

調査してみたところ、 auth0.js/README.md at master · auth0/auth0.jscheckSession() の説明を見ると、ソーシャルアカウントでログインしていて、開発環境(インターネット上でアクセス可能なドメインでない)場合は常に Login required になるようです。 :eyes:

Important: If you're not using the hosted login page to do social logins, you have to use your own social connection keys. If you use Auth0's dev keys, you'll always get login_required as an error when calling checkSession.

ですので、ソーシャルアカウントではなくメールアドレスとパスワードでログインするようにすれば、このエラーは解消できることを確認できました。 :raised_hands:

なお、インターネットからアクセスできるドメインで運用すればこのエラーは解消されると見受けられますが、まだ試しておりませんのでご了承くださいませ。

Epilogue

これで常にタイムアウトする事象は避けられました!(笑)
どんどん開発するぞ~!(๑•̀ㅂ•́)و✧

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0