Merge pull request #278 from Seluj78/273-hook-login-frontend-to-backend

273 hook login frontend to backend

Author: supalarry

.env.enc

@@ -17,6 +17,7 @@
     along with this program.  If not, see <https://www.gnu.org/licenses/>.
 """
 from argon2 import PasswordHasher
+from argon2.exceptions import VerificationError
 
 ph = PasswordHasher()
 
@@ -26,4 +27,9 @@ def hash_password(password: str) -> str:
 
 
 def check_password(hash: str, password: str) -> bool:
-    return ph.verify(hash, password)
+    try:
+        ph.verify(hash, password)
+    except VerificationError:
+        return False
+    else:
+        return True

backend/PyMatcha/utils/password.py

@@ -85,7 +85,6 @@ services:
       dockerfile: frontend.Dockerfile
     volumes:
       - './frontend:/frontend'
-      - '/frontend/node_modules'
     ports:
       - '4242:8080'
     networks:

docker-compose.yml

@@ -13,11 +13,14 @@
     "@sentry/tracing": "^5.24.2",
     "axios": "^0.20.0",
     "core-js": "^3.6.5",
+    "jwt-decode": "^3.0.0-beta.2",
+    "secure-ls": "^1.2.6",
     "tailwindcss": "^1.8.10",
     "vee-validate": "^3.3.11",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
-    "vuex": "^3.4.0"
+    "vuex": "^3.4.0",
+    "vuex-persistedstate": "^3.1.0"
   },
   "devDependencies": {
     "@fullhuman/postcss-purgecss": "^2.3.0",

frontend/package.json

@@ -0,0 +1,13 @@
+/* eslint-disable import/prefer-default-export */
+import Axios from 'axios';
+
+export const logOut = async () => {
+  await Axios.delete('/auth/access_revoke');
+  await Axios.delete('/auth/refresh_revoke');
+  localStorage.removeItem(process.env.VUE_APP_ACCESS_TOKEN);
+  localStorage.removeItem(process.env.VUE_APP_REFRESH_TOKEN);
+  localStorage.removeItem(process.env.VUE_APP_VUEX_PERSISTED_STATE);
+  localStorage.removeItem(process.env.VUE_APP_SECURE_LS_METADATA);
+  await this.$store.dispatch('logout');
+  await this.$router.push('/accounts/signin');
+};

frontend/src/auth/logOut.js

@@ -0,0 +1,37 @@
+/* eslint-disable max-len */
+import jwtDecode from 'jwt-decode';
+import Axios from 'axios';
+import { logOut } from './logOut';
+
+export const setAccessToken = (token) => (localStorage.setItem(process.env.VUE_APP_ACCESS_TOKEN, token));
+export const setRefreshToken = (token) => (localStorage.setItem(process.env.VUE_APP_REFRESH_TOKEN, token));
+
+export const getAccessToken = () => (localStorage.getItem(process.env.VUE_APP_ACCESS_TOKEN));
+export const getRefreshToken = () => (localStorage.getItem(process.env.VUE_APP_REFRESH_TOKEN));
+
+export const tokenIsValid = (token) => {
+  try {
+    const { exp } = jwtDecode(token);
+    return (Date.now() < exp * 1000);
+  } catch (error) {
+    return false;
+  }
+};
+
+export const renewAccessToken = async () => {
+  if (getRefreshToken()) {
+    try {
+      const response = await Axios.post('/auth/refresh', {});
+      localStorage.setItem('matchaAccessToken', response.data.access_token);
+    } catch (error) {
+      await logOut();
+    }
+  }
+};
+
+export const handleAccessTokenExpiration = async () => {
+  const accessToken = getAccessToken();
+  if (accessToken && !tokenIsValid(accessToken)) {
+    await renewAccessToken();
+  }
+};

frontend/src/auth/tokens.js

@@ -1,20 +1,33 @@
+/* eslint-disable prefer-arrow-callback */
+/* eslint-disable func-names */
+/* eslint-disable no-param-reassign */
+
 import Axios from 'axios';
 import Vue from 'vue';
+import { getAccessToken, getRefreshToken, handleAccessTokenExpiration } from '../auth/tokens';
 
-function createAxiosInstance(baseURL) {
-  return Axios.create({
-    baseURL,
-    headers: {
-      'Content-Type': 'application/json',
-      Authorization: `Bearer ${localStorage.token}`,
-    },
-  });
-}
+Axios.defaults.baseURL = process.env.VUE_APP_BACKEND_BASE_URL;
 
-const axiosInstance = createAxiosInstance(process.env.VUE_APP_BACKEND_BASE_URL);
+Axios.interceptors.request.use(async function (config) {
+  if (config.url === '/auth/refresh' || config.url === '/auth/refresh_revoke') {
+    config.headers.Authorization = `Bearer ${getRefreshToken()}`;
+  } else if (config.url === '/auth/access_revoke') {
+    config.headers.Authorization = `Bearer ${getAccessToken()}`;
+  } else if (getAccessToken()) {
+    await handleAccessTokenExpiration();
+    if (getAccessToken()) {
+      config.headers.Authorization = `Bearer ${getAccessToken()}`;
+    } else {
+      return { headers: {}, method: config.method, url: '' };
+    }
+  }
+  return config;
+}, function (error) {
+  return Promise.reject(error);
+});
 
 export default {
   install() {
-    Vue.prototype.$http = axiosInstance;
+    Vue.prototype.$http = Axios;
   },
 };

frontend/src/plugins/http.js

@@ -8,9 +8,27 @@ import AccountVerified from '../views/auth/AccountVerified.vue';
 import AccountVerifiedError from '../views/auth/AccountVerifiedError.vue';
 import ResetPassword from '../views/auth/ResetPassword.vue';
 import ResetPasswordError from '../views/auth/ResetPasswordError.vue';
+import Onboarding from '../views/app/Onboarding.vue';
+import store from '../store/index';
 
 Vue.use(VueRouter);
 
+function loggedInRedirectBrowse(to, from, next) {
+  if (store.getters.getLoggedInUser) {
+    next('/browse');
+  } else {
+    next();
+  }
+}
+
+function notLoggedInRedirectLogin(to, from, next) {
+  if (store.getters.getLoggedInUser) {
+    next();
+  } else {
+    next('/accounts/signin');
+  }
+}
+
 const routes = [
   {
     path: '/',
@@ -21,36 +39,49 @@ const routes = [
     path: '/accounts/signup',
     name: 'SignUp',
     component: SignUp,
+    beforeEnter: loggedInRedirectBrowse,
   },
   {
     path: '/accounts/signin',
     name: 'SignIn',
     component: SignIn,
+    beforeEnter: loggedInRedirectBrowse,
   },
   {
     path: '/accounts/password/forgot',
     name: 'ForgotPassword',
     component: ForgotPassword,
+    beforeEnter: loggedInRedirectBrowse,
   },
   {
     path: '/accounts/password/reset',
     name: 'ResetPassword',
     component: ResetPassword,
+    beforeEnter: loggedInRedirectBrowse,
   },
   {
     path: '/accounts/password/reseterror',
     name: 'ResetPasswordError',
     component: ResetPasswordError,
+    beforeEnter: loggedInRedirectBrowse,
   },
   {
     path: '/accounts/verify',
     name: 'AccountVerified',
     component: AccountVerified,
+    beforeEnter: loggedInRedirectBrowse,
   },
   {
     path: '/accounts/verify/error',
     name: 'AccountVerifiedError',
     component: AccountVerifiedError,
+    beforeEnter: loggedInRedirectBrowse,
+  },
+  {
+    path: '/onboarding',
+    name: 'Onboarding',
+    component: Onboarding,
+    beforeEnter: notLoggedInRedirectLogin,
   },
 ];
 

frontend/src/router/index.js

@@ -1,15 +1,32 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
+import createPersistedState from 'vuex-persistedstate';
+import SecureLS from 'secure-ls';
+import user from './modules/user';
+
+const ls = new SecureLS({ isCompression: false });
 
 Vue.use(Vuex);
 
 export default new Vuex.Store({
+  strict: true,
   state: {
   },
   mutations: {
   },
   actions: {
   },
   modules: {
+    user,
   },
+  plugins: [
+    createPersistedState({
+      paths: ['user'],
+      storage: {
+        getItem: (key) => ls.get(key),
+        setItem: (key, value) => ls.set(key, value),
+        removeItem: (key) => ls.remove(key),
+      },
+    }),
+  ],
 });

frontend/src/store/index.js

@@ -0,0 +1,36 @@
+/* eslint-disable no-shadow */
+
+const state = {
+  user: null,
+};
+
+const getters = {
+  getLoggedInUser(state) {
+    return state.user;
+  },
+};
+
+const mutations = {
+  login(state, user) {
+    state.user = user;
+  },
+  logout(state) {
+    state.user = null;
+  },
+};
+
+const actions = {
+  login(state, user) {
+    state.commit('login', user);
+  },
+  logout(state) {
+    state.commit('logout');
+  },
+};
+
+export default {
+  state,
+  getters,
+  mutations,
+  actions,
+};