adding latest

links.md

@@ -26,6 +26,5 @@ Libraries that work with Vue:
 
 JS library to simplify working with arrays, numbers, objects, strings, etc.
 
-- Iterating arrays, objects, & strings
+
-- Manipulating & testing values
+- Document steps of creating js files for aws
-- Creating composite functions

src/router/index.js

@@ -1,15 +1,18 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
-// import Home from "../views/Home.vue";
+import Home from "../views/Home.vue";
+import { AmplifyEventBus } from "aws-amplify-vue";
+import { getUser } from "@/utils/auth.js";
 
 Vue.use(VueRouter);
 
 const routes = [
-  // {
+  {
-  //   path: "/",
+    path: "/",
-  //   name: "Home",
+    name: "Home",
-  //   component: Home
+    component: Home,
-  // },
+    meta: { requiresAuth: true }
+  },
   {
     path: "/about",
     name: "About",
@@ -23,19 +26,22 @@ const routes = [
     path: "/signUp",
     name: "signUp",
     component: () =>
-      import(/* webpackChunkName: "signup" */ "../views/SignUp.vue")
+      import(/* webpackChunkName: "signup" */ "../views/SignUp.vue"),
+    meta: { requiresAuth: false }
   },
   {
     path: "/signUpConfirm",
     name: "signUpConfirm",
     component: () =>
-      import(/* webpackChunkName: "confirm" */ "../views/SignUpConfirm.vue")
+      import(/* webpackChunkName: "confirm" */ "../views/SignUpConfirm.vue"),
+    meta: { requiresAuth: false }
   },
   {
     path: "/signIn",
     name: "signIn",
     component: () =>
-      import(/* webpackChunkName: "signin" */ "../views/SignIn.vue")
+      import(/* webpackChunkName: "signin" */ "../views/SignIn.vue"),
+    meta: { requiresAuth: false }
   }
 ];
 
@@ -45,4 +51,59 @@ const router = new VueRouter({
   routes
 });
 
+getUser().then(user => {
+  console.log("router getting user.")
+  if (user) {
+    router.push({ path: "/" });
+  }
+});
+
+AmplifyEventBus.$on("authState", async state => {
+  const pushPathes = {
+    signedOut: () => {
+      router.push({ path: "/signIn" });
+    },
+    signUp: () => {
+      router.push({ path: "/signUp" });
+    },
+    confirmSignUp: () => {
+      router.push({ path: "/signUpConfirm" });
+    },
+    signIn: () => {
+      router.push({ path: "/signIn" });
+    },
+    signedIn: () => {
+      router.push({ path: "/" });
+    }
+  };
+  if (typeof pushPathes[state] === "function") {
+    pushPathes[state]();
+  }
+});
+
+router.beforeResolve(async (to, from, next) => {
+  console.log("router before resolve getting current user.")
+  const user = await getUser();
+  if (!user) {
+    if (to.matched.some(record => record.meta.requiresAuth)) {
+      return next({
+        path: "/signIn"
+      });
+    }
+  } else {
+    if (
+      to.matched.some(
+        record =>
+          typeof record.meta.requiresAuth === "boolean" &&
+          !record.meta.requiresAuth
+      )
+    ) {
+      return next({
+        path: "/"
+      });
+    }
+  }
+  return next();
+});
+
 export default router;

src/store/index.js

@@ -1,15 +1,39 @@
-import Vue from 'vue'
+import Vue from "vue";
-import Vuex from 'vuex'
+import Vuex from "vuex";
+import { Auth } from "aws-amplify";
 
-Vue.use(Vuex)
+Vue.use(Vuex);
 
 export default new Vuex.Store({
   state: {
+    authorized: false,
+    user: null
   },
   mutations: {
+    user(state, user) {
+      state.authorized =
+        !!user && user.attributes && user.attributes.email_verified;
+      state.user = user;
+    }
   },
   actions: {
+    async fetchUser({ commit }) {
+      try {
+        const user = await Auth.currentAuthenticatedUser()
+        const expires =
+          user.getSignInUserSession().getIdToken().payload.exp -
+          Math.floor(new Date().getTime() / 1000);
+        console.log(`Token expires in ${expires} seconds.`);
+        commit("user", user);
+      } catch (err) {
+        commit("user", null);
+      }
+    }
   },
-  modules: {
+  modules: {},
+  getters: {
+    userEmail: state => {
+      return state.user.attributes.email;
+    }
   }
-})
+});

src/utils/auth.js

@@ -1,10 +1,12 @@
 import { Auth } from "aws-amplify";
 import { AmplifyEventBus } from "aws-amplify-vue";
 
-function getUser() {
+async function getUser() {
-  return Auth.currentAuthenticatedUser()
+  console.log("getting current user")
+  return await Auth.currentAuthenticatedUser()
     .then(user => {
       if (user && user.signInUserSession) {
+        console.log("returning current signed in user")
         return user;
       } else {
         return null;
@@ -15,8 +17,8 @@ function getUser() {
     });
 }
 
-function signUp(username, password) {
+async function signUp(username, password) {
-  return Auth.signUp({
+  return await Auth.signUp({
     username,
     password,
     attributes: {
@@ -36,8 +38,8 @@ function signUp(username, password) {
     });
 }
 
-function confirmSignUp(username, code) {
+async function confirmSignUp(username, code) {
-  return Auth.confirmSignIn(username, code)
+  const user = await Auth.confirmSignUp(username, code)
     .then(data => {
       AmplifyEventBus.$emit("authState", "signIn");
       return data; // successful sign up
@@ -46,6 +48,7 @@ function confirmSignUp(username, code) {
       console.log(err);
       throw err;
     });
+  console.log(user);
 }
 
 function resendSignUp(username) {
@@ -61,7 +64,11 @@ function resendSignUp(username) {
 
 async function signIn(username, password) {
   try {
+    console.log("Attempting sign in");
     const user = await Auth.signIn(username, password);
+    AmplifyEventBus.$emit("authState", "signedIn");
+    console.log("Signed in in fn");
+    console.log(user);
     if (user) {
       AmplifyEventBus.$emit("authState", "signedIn");
     }
@@ -94,4 +101,4 @@ function signOut() {
     });
 }
 
-export {getUser, signUp, confirmSignUp, resendSignUp, signIn, signOut}
+export { getUser, signUp, confirmSignUp, resendSignUp, signIn, signOut };

src/views/SignIn.vue

@@ -1,28 +1,34 @@
 <template>
-  <div class="sign-in">
+  <v-container class="grey lighten-5">
-    <h1>Sign In</h1>
+    <v-row class="mb-6" justify="center" no-gutters>
-    <v-form v-model="valid" ref="form" lazy-validation>
+      <v-col lg="2">
-      <v-text-field
+        <div class="sign-in">
-        v-model="username"
+          <h1>Sign In</h1>
-        :rules="emailRules"
+          <v-form v-model="valid" ref="form" lazy-validation>
-        label="Email Address"
+            <v-text-field
-        required
+              v-model="username"
-      ></v-text-field>
+              :rules="emailRules"
-      <v-text-field
+              label="Email Address"
-        v-model="password"
+              required
-        :append-icon="passwordVisible ? 'mdi-eye' : 'mdi-eye-off'"
+            ></v-text-field>
-        :rules="[passwordRules.required, passwordRules.min]"
+            <v-text-field
-        :type="passwordVisible ? 'text' : 'password'"
+              v-model="password"
-        name="password"
+              :append-icon="passwordVisible ? 'mdi-eye' : 'mdi-eye-off'"
-        label="Password"
+              :rules="[passwordRules.required, passwordRules.min]"
-        hint="At least 8 characters"
+              :type="passwordVisible ? 'text' : 'password'"
-        counter
+              name="password"
-        @click:append="passwordVisible = !passwordVisible"
+              label="Password"
-        required
+              hint="At least 8 characters"
-      ></v-text-field>
+              counter
-      <v-btn :disabled="!valid" @click="submit">Submit</v-btn>
+              @click:append="passwordVisible = !passwordVisible"
-    </v-form>
+              required
-  </div>
+            ></v-text-field>
+            <v-btn :disabled="!valid" @click="submit">Submit</v-btn>
+          </v-form>
+        </div>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <script>
@@ -53,12 +59,13 @@ export default {
     }
   },
   methods: {
-    submit() {
+    async submit() {
       if (this.$refs.form.validate()) {
         console.log(
           `SIGN IN username: ${this.username}, password: ${this.password}`
         );
-        signIn(this.username, this.password);
+        await signIn(this.username, this.password);
+        console.log("Signed in");
       }
     }
   }

src/views/SignUp.vue

@@ -22,7 +22,7 @@
         required
       >
       </v-text-field>
-      <v-btn :disabled="!valid" @click="submit"></v-btn>
+      <v-btn :disabled="!valid" @click="submit">Submit</v-btn>
     </v-form>
   </div>
 </template>
@@ -61,6 +61,7 @@ export default {
           `SIGN UP username: ${this.username}, password: ${this.password}, email: ${this.username}`
         );
         signUp(this.username, this.password);
+        console.log("finished");
       }
     }
   }

src/views/SignUpConfirm.vue

@@ -46,15 +46,15 @@ export default {
     }
   },
   methods: {
-    submit() {
+    async submit() {
       if (this.$refs.form.validate()) {
         console.log(`CONFIRM username: ${this.username}, code: ${this.code}`);
-        confirmSignUp(this.username, this.code)
+        await confirmSignUp(this.username, this.code);
       }
     },
     resend() {
       console.log(`RESEND username: ${this.username}`);
-      resendSignUp(this.username)
+      resendSignUp(this.username);
     }
   }
 };