$ amplify status

Current Environment: prod

| Category | Resource name | Operation | Provider plugin |
| -------- | ------------- | --------- | --------------- |

% amplify -v
4.21.3

amplify add auth

 Do you want to use the default authentication and security configuration?
  Default configuration
❯ Default configuration with Social Provider (Federation)
  Manual configuration
  I want to learn more.

 How do you want users to be able to sign in? (Use arrow keys)
❯ Username
  Email
  Phone Number
  Email or Phone Number
  I want to learn more.

 Do you want to configure advanced settings? (Use arrow keys)
❯ No, I am done.
  Yes, I want to make some additional changes.

 What domain name prefix do you want to use? (amplifysnsfedarationYYYYY-XXXXX)

Enter your redirect signin URI: http://localhost:8080/

Do you want to add another redirect signin URI (y/N) N

Enter your redirect signout URI: http://localhost:8080/

? Do you want to add another redirect signout URI (y/N) N

 Select the social providers you want to configure for your user pool:
 ◯ Facebook
❯◉ Google
 ◯ Login With Amazon

 Enter your Google Web Client ID for your OAuth flow: xxxxxxxxx

 Enter your Google Web Client Secret for your OAuth flow: yyyyyyyyyy

amplify push

$ amplify status

Current Environment: prod

| Category | Resource name                | Operation | Provider plugin   |
| -------- | ---------------------------- | --------- | ----------------- |
| Auth     | amplifysnsfedarationXXXXXXXX | No Change | awscloudformation |

% amplify add auth
Using service: Cognito, provided by: awscloudformation

 The current configured provider is Amazon Cognito.

 Do you want to use the default authentication and security configuration? Default configuration with Social Provider (Federation)
 Warning: you will not be able to edit these selections.
 How do you want users to be able to sign in? Username
 Do you want to configure advanced settings? No, I am done.
 What domain name prefix do you want to use?
 Enter your redirect signin URI: http://localhost:8080/
? Do you want to add another redirect signin URI No
 Enter your redirect signout URI: http://localhost:8080/
? Do you want to add another redirect signout URI No
 Select the social providers you want to configure for your user pool: Google

 You've opted to allow users to authenticate via Google.  If you haven't already, you'll need to go to https://developers.google.com/identity and create an App ID.

 Enter your Google Web Client ID for your OAuth flow:  xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
 Enter your Google Web Client Secret for your OAuth flow:  yyyyyyyyyyyyyyyyyyyyyyyyyyy
Successfully added resource amplifysnsfedarationc74d4543 locally

Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

% cat src/aws-exports.js | grep domain
        "domain": "amplifysnsfedarationyyyyyyy-xxxxxxx-prod.auth.ap-northeast-1.amazoncognito.com",

<a href="#" @click="signIn('Google')">Googleでログイン</a>

      <!-- サインイン状態はstoreかdataに設定する -->
      <template v-if="signedIn">
        <h1>Logged in</h1>
        <a href="#" @click="signOut"><font color="gray">Sign Out</font></a>
      </template>
      <template v-else>
        <amplify-authenticator v-bind:authConfig="authConfig" />
        <ul>
          <li><a href="#" @click="signIn('Google')">Googleでログイン</a></li>
        </ul>
      </template>

import { Auth, Hub } from "aws-amplify";
//（...中略...）

  methods: {
    async signIn(provider) {
      this.$store.dispatch("loading", true); //処理中表示（処理開始）
      const res = await Auth.federatedSignIn({ provider });
      console.log(res);
    },

import { Auth, Hub } from "aws-amplify";
//（...中略...）

  async beforeCreate() {
    //サインインイベントフックを追加
    Hub.listen("auth", async (data) => {
      switch (data.payload.event) {
        case "signIn": { // サインインイベントをフック
          const cognitoUser = await Auth.currentAuthenticatedUser();
          console.log(`signed in ... ${cognitoUser.username}`);
          this.$store.dispatch("signedIn", true);
          this.$store.dispatch("loading", false); //処理中表示（処理終了）
          Swal.fire({ // ダイアログ表示
            position: "top-end",
            icon: "success",
            title: "ログインしました",
            showConfirmButton: false,
            timer: 1500,
          });
          break;
        }
        default:
          break;
      }
    });
  },

yarn serve