はじめに
実務でフロント実装に AWS amplify を利用しているのですが、以下認証エラーに遭遇しました。
Error: Amplify has not been configured correctly.
丸一日費やしましたが、解消するまでの過程を記します！
同じ問題に直面している方のお役に立てれば幸いです。
目次
🧷 遭遇した事象
調査のために amplify で実装されたフロントの画面を npm run dev でローカルで開いた際、以下の認証エラーになった。
AuthError -
Error: Amplify has not been configured correctly.
The configuration object is missing required auth properties.
This error is typically caused by one of the following scenarios:
1. Did you run `amplify push` after adding auth via `amplify add auth`?
See https://aws-amplify.github.io/docs/js/authentication#amplify-project-setup for more information
2. This could also be caused by multiple conflicting versions of amplify packages, see (https://docs.amplify.aws/lib/troubleshooting/upgrading/q/platform/js) for help upgrading Amplify packages.
🧷 調査・試したこと
ローカルで画面を開いたのは今回が初でした。まずはエラー文をネット検索して有力と思えた以下記事を参考に調査を進めることに..
-
packageの依存関係に問題がないか
そもそも aws-amplify のバージョンをあげていないのでおそらく無関係、aws-amplifyに関連する他パッケージバージョンも特に気になる点はなし ⇨ 次へ -
package.json と package-lock.jsonの不整合がないか
記事にある通り、一度node_modulesとpackage-lock.jsonを削除 ⇨npm iで再インストールしてみたが、まだ認証エラーが出る ⇨ 次へ -
aws-amplifyのpackageバージョンが低いことで起こっている可能性
Vue を使っていたことから、@aws-amplify/ui-componentsが@aws-amplifyのバージョンと依存関係にあり、-
@aws-amplify：4.3.11 -
@aws-amplify/ui-components：1.9.2
-
@aws-amplify/ui-componentsに対応する@aws-amplifyバージョンは3.x.x || 4.x.xという所で既に4.3.11だったため特に変更は行わず、、試しに@aws-amplify/ui-componentsの方を最新の1.9.40へ上げたが、もちろん継続して認証エラーのまま..
上記３件いずれも特に関連なさそう...謎すぎる¿
🧷 原因・解消
原因は、ローカル環境に .envファイルが作成されていなかった ことでした...
諦めて先輩に聞いてみた際のAnswer🌤🌤🌤
環境変数 ENVより Amplify.configureが設定されてるので、ENVがないことが原因だと思いますね。
ちなみに、 .env.template から .envファイルは作成しましたか？
amplifyプロジェクトへ接続する際のAmplify.configureの設定をenvで行なっているとのこと。envを介して接続する際にファイルがないことでエラーになっていた模様..
(仕組みはまだよくわかってないので後日深めていこうー)
丸一日費やした割にはとんでもなくしょーもなさすぎて流石に叫びましたwww
🎉 まとめ
Amplify.configureの設定を.envで行なっている場合、.envファイルがないとAuthErrorになる！