App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/signin">Sign in</router-link> |
      <router-link to="/signup">Sign up</router-link>
    </div>
    <router-view />
  </div>
</template>

<style lang="scss">
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  color: #2c3e50;
}
#nav {
  text-align: center;
  padding: 30px;
  a {
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

ConfirmSignup.vue

<template>
  <vs-row vs-justify="center">
    <vs-col type="flex" vs-lg="6" vs-xs="10">
      <vs-card fixedHeight>
        <div slot="header">
          <h3>
            Confirm Sign up
          </h3>
        </div>
        <div class="centerx">
          <vs-row>
            <vs-col vs-w="12">
              <vs-input
                type="text"
                label-placeholder="Verification Code"
                v-model="userInfo.verificationCode"
                class="input"
                size="large"
              />
            </vs-col>
          </vs-row>
          <vs-row>
            <vs-col vs-w="12">
              <vs-button class="signup" @click="signup">Verify</vs-button>
            </vs-col>
          </vs-row>
          <div slot="footer" class="error-message">
            {{ this.errorMessage }}
          </div>
        </div>
      </vs-card>
    </vs-col>
  </vs-row>
</template>
<script>
export default {
  name: "ConfirmSignup",
  data() {
    return {
      userInfo: {
        verificationCode: ""
      },
      errorMessage: ""
    };
  },
  methods: {
    async signup() {
      if (!this.validate()) {
        return;
      }

      try {
        await this.$Amplify.Auth.confirmSignUp(
          this.$route.params.email,
          this.userInfo.verificationCode
        );

        this.$router.push("/signin");
      } catch {
        this.errorMessage = "サインアップできませんでした";
      }
    },
    validate() {
      if (!this.userInfo.verificationCode) {
        this.errorMessage = "Verify Codeが入力されていません。";
        return;
      }
      this.errorMessage = "";
      return true;
    }
  }
};
</script>
<style lang="sass" scoped>
.centerx
  display: flex
  align-items: center
  justify-content: center
  flex-wrap: wrap

.input
  width:100%
  padding: 16px 64px

.signup
  width: calc(100% - 64px * 2)
  padding: 16px 0
  margin: 32px 64px 0

.error-message
  color: #FF0000
  margin: 32px 64px
</style>

router.js

import Vue from "vue";
import Router from "vue-router";
import { Auth } from "aws-amplify";
import Home from "./views/Home.vue";

Vue.use(Router);

async function requireAuth(to, from, next) {
  try {
    await Auth.currentAuthenticatedUser();
    next();
  } catch {
    next({
      name: "signin"
    });
  }
}

export default new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      name: "home",
      component: Home
    },
    {
      path: "/about",
      name: "about",
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () =>
        import(/* webpackChunkName: "about" */ "./views/About.vue"),
      beforeEnter: requireAuth
    },
    {
      path: "/signin",
      name: "signin",
      component: () => import("./views/Signin.vue")
    },
    {
      path: "/signup",
      name: "signup",
      component: () => import("./views/Signup.vue")
    },
    {
      path: "/confirm-signup",
      name: "confirm-signup",
      component: () => import("./views/ConfirmSignup.vue")
    },
    {
      path: "/signout",
      name: "signout",
      async beforeEnter(to, from, next) {
        await this.$Amplify.Auth.signOut();
        next("signin");
      }
    }
  ]
});

Signin.vue

<template>
  <vs-row vs-justify="center">
    <vs-col type="flex" vs-lg="6" vs-xs="10">
      <vs-card fixedHeight>
        <div slot="header">
          <h3>
            Sign in
          </h3>
        </div>
        <div class="centerx">
          <vs-row>
            <vs-col vs-w="12">
              <vs-input
                type="email"
                label-placeholder="email"
                v-model="userInfo.email"
                class="input"
                size="large"
              />
            </vs-col>
          </vs-row>
          <vs-row>
            <vs-col vs-w="12">
              <vs-input
                type="password"
                label-placeholder="Password"
                v-model="userInfo.password"
                class="input"
                size="large"
              />
            </vs-col>
          </vs-row>
          <vs-row>
            <vs-col vs-w="12">
              <vs-button class="signin" @click="signIn">Sign in</vs-button>
            </vs-col>
          </vs-row>
          <div slot="footer" class="error-message">
            {{ this.errorMessage }}
          </div>
        </div>
      </vs-card>
    </vs-col>
  </vs-row>
</template>
<script>
export default {
  name: "Signin",
  data() {
    return {
      userInfo: {
        email: "",
        password: ""
      },
      errorMessage: ""
    };
  },
  methods: {
    async signIn() {
      try {
        await this.$Amplify.Auth.signIn(
          this.userInfo.email,
          this.userInfo.password
        );
        this.$router.push("/about");
      } catch {
        this.errorMessage = "ログインできませんでした";
      }
    }
  }
};
</script>
<style lang="sass" scoped>
.centerx
  display: flex
  align-items: center
  justify-content: center
  flex-wrap: wrap

.input
  width:100%
  padding: 16px 64px

.signin
  width: calc(100% - 64px * 2)
  padding: 16px 0
  margin: 32px 64px 0

.error-message
  color: #FF0000
  margin: 32px 64px
</style>

Signup.vue

<template>
  <vs-row vs-justify="center">
    <vs-col type="flex" vs-lg="6" vs-xs="10">
      <vs-card fixedHeight>
        <div slot="header">
          <h3>
            Sign up
          </h3>
        </div>
        <div class="centerx">
          <vs-row>
            <vs-col vs-w="12">
              <vs-input
                type="email"
                label-placeholder="email"
                v-model="userInfo.email"
                class="input"
                size="large"
              />
            </vs-col>
          </vs-row>
          <vs-row>
            <vs-col vs-w="12">
              <vs-input
                type="password"
                label-placeholder="Password"
                v-model="userInfo.password"
                class="input"
                size="large"
              />
            </vs-col>
          </vs-row>
          <vs-row>
            <vs-col vs-w="12">
              <vs-input
                type="password"
                label-placeholder="Confirm Password"
                v-model="userInfo.confirmPassword"
                class="input"
                size="large"
              />
            </vs-col>
          </vs-row>
          <vs-row>
            <vs-col vs-w="12">
              <vs-button class="signup" @click="signup">Sign up</vs-button>
            </vs-col>
          </vs-row>
          <div slot="footer" class="error-message">
            {{ this.errorMessage }}
          </div>
        </div>
      </vs-card>
    </vs-col>
  </vs-row>
</template>
<script>
export default {
  name: "Signup",
  data() {
    return {
      userInfo: {
        email: "",
        password: "",
        confirmPassword: ""
      },
      errorMessage: ""
    };
  },
  methods: {
    async signup() {
      if (!this.validate()) {
        return;
      }
      try {
        await this.$Amplify.Auth.signUp(
          this.userInfo.email,
          this.userInfo.password
        );

        this.$router.push({
          name: "confirm-signup",
          params: { email: this.userInfo.email }
        });
      } catch {
        this.errorMessage = "サインアップできませんでした";
      }
    },
    validate() {
      if (!this.userInfo.email) {
        this.errorMessage = "emailが入力されていません。";
        return;
      }
      if (!this.userInfo.password) {
        this.errorMessage = "passwordを入力してください。";
        return;
      }
      if (this.userInfo.password !== this.userInfo.confirmPassword) {
        this.errorMessage = "パスワードが一致しません。";
        return false;
      }
      this.errorMessage = "";
      return true;
    }
  }
};
</script>
<style lang="sass" scoped>
.centerx
  display: flex
  align-items: center
  justify-content: center
  flex-wrap: wrap

.input
  width:100%
  padding: 16px 64px

.signup
  width: calc(100% - 64px * 2)
  padding: 16px 0
  margin: 32px 64px 0

.error-message
  color: #FF0000
  margin: 32px 64px
</style>