Amplify has not been configured correctly. にハマりまくった話🤯

## はじめに
実務でフロント実装に AWS amplify を利用しているのですが、以下認証エラーに遭遇しました。

```bash
Error: Amplify has not been configured correctly. 
```

丸一日費やしましたが、解消するまでの過程を記します！
同じ問題に直面している方のお役に立てれば幸いです。
## 目次

1. [遭遇した事象](#-遭遇した事象)
2. [調査・試したこと](#-調査・試したこと)
3. [原因・解消](#-原因・解消)
4. [まとめ](#-まとめ)
5. [参考文献](#-参考文献)

## 🧷 遭遇した事象
調査のために amplify で実装されたフロントの画面を `npm run dev` でローカルで開いた際、以下の認証エラーになった。

```bash
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の依存関係](https://qiita.com/tenshin_han/items/f744b81de3476b296e7f#)に問題がないか
そもそも aws-amplify のバージョンをあげていないのでおそらく無関係、aws-amplifyに関連する他パッケージバージョンも特に気になる点はなし ⇨ 次へ
* [package.json と package-lock.jsonの不整合がないか](https://blog.usize-tech.com/upgrade-amplify-on-react18/#toc3:~:text=%E4%B8%80%E5%BA%A6%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%97%E3%81%9F%E5%85%A8%E3%81%A6%E3%81%AE%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E3%82%92%E5%85%A8%E3%81%A6%E5%89%8A%E9%99%A4%E3%81%97%E3%81%A6%E3%80%81%E3%82%BC%E3%83%AD%E3%81%8B%E3%82%89%E7%B6%BA%E9%BA%97%E3%81%AB%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%97%E7%9B%B4%E3%81%97%E3%81%9F%E3%81%A8%E3%81%93%E3%82%8D%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E5%BE%8C%E3%82%82%E5%8B%95%E4%BD%9C%E3%81%99%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82)
記事にある通り、一度`node_modules`と`package-lock.json`を削除 ⇨ `npm i`で再インストールしてみたが、まだ認証エラーが出る ⇨ 次へ
* [aws-amplifyのpackageバージョンが低いことで起こっている可能性](https://kazu22002.hatenablog.com/entry/2020/10/28/080000#)
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になる！**

## 💫 参考文献
* [AWS Amplify(Cognito)でAuthエラーが出た(AuthError - Error: Amplify has not been configured correctly. )](https://qiita.com/tenshin_han/items/f744b81de3476b296e7f#)
* [aws amplifyの「AuthError」がエラーが出た時の対処](https://kazu22002.hatenablog.com/entry/2020/10/28/080000#)
* [React 18 で aws-amplify v5 と AWS Amplify UI v4 にアップグレードしてみた](https://blog.usize-tech.com/upgrade-amplify-on-react18/#toc3:~:text=%E4%B8%80%E5%BA%A6%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%97%E3%81%9F%E5%85%A8%E3%81%A6%E3%81%AE%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E3%82%92%E5%85%A8%E3%81%A6%E5%89%8A%E9%99%A4%E3%81%97%E3%81%A6%E3%80%81%E3%82%BC%E3%83%AD%E3%81%8B%E3%82%89%E7%B6%BA%E9%BA%97%E3%81%AB%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%97%E7%9B%B4%E3%81%97%E3%81%9F%E3%81%A8%E3%81%93%E3%82%8D%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E5%BE%8C%E3%82%82%E5%8B%95%E4%BD%9C%E3%81%99%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82)