diff --git a/links.md b/links.md index 2bea4ef..1b7abff 100644 --- a/links.md +++ b/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 -- Creating composite functions + +- Document steps of creating js files for aws diff --git a/src/router/index.js b/src/router/index.js index ac15bef..5b6177f 100644 --- a/src/router/index.js +++ b/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: "/", - // name: "Home", - // component: Home - // }, + { + path: "/", + name: "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; diff --git a/src/store/index.js b/src/store/index.js index 332b916..a14b161 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1,15 +1,39 @@ -import Vue from 'vue' -import Vuex from 'vuex' +import Vue from "vue"; +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; + } } -}) +}); diff --git a/src/utils/auth.js b/src/utils/auth.js index 87b5534..23a608d 100644 --- a/src/utils/auth.js +++ b/src/utils/auth.js @@ -1,10 +1,12 @@ import { Auth } from "aws-amplify"; import { AmplifyEventBus } from "aws-amplify-vue"; -function getUser() { - return Auth.currentAuthenticatedUser() +async function getUser() { + 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) { - return Auth.signUp({ +async function signUp(username, password) { + return await Auth.signUp({ username, password, attributes: { @@ -36,8 +38,8 @@ function signUp(username, password) { }); } -function confirmSignUp(username, code) { - return Auth.confirmSignIn(username, code) +async function confirmSignUp(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 }; diff --git a/src/views/SignIn.vue b/src/views/SignIn.vue index 66da6f3..2afbf51 100644 --- a/src/views/SignIn.vue +++ b/src/views/SignIn.vue @@ -1,28 +1,34 @@ - - Sign In - - - - Submit - - + + + + + Sign In + + + + Submit + + + + +