From de3d4d03c37a4fd64960ced2927858cf99a56fb3 Mon Sep 17 00:00:00 2001
From: Kevin ANATOLE <kevanatole@gmail.com>
Date: Sat, 7 Nov 2020 20:56:38 +0000
Subject: [PATCH] Authentication

- Installed magic-sdk
- Created a login button with email
- Store the token and user login state in the vuex store
- Created a logout method that resets the store
---
 components/Navbar.vue | 19 ++++++++++++
 layouts/default.vue   | 11 +++++++
 nuxt.config.js        |  5 ++-
 package-lock.json     | 71 +++++++++++++++++++++++++++++++++++++++++++
 package.json          |  6 +---
 pages/index.vue       | 50 ++++++++++++++++++------------
 plugins/magic.js      |  7 +++++
 store/auth.js         | 13 ++++++++
 8 files changed, 157 insertions(+), 25 deletions(-)
 create mode 100644 components/Navbar.vue
 create mode 100644 plugins/magic.js
 create mode 100644 store/auth.js

diff --git a/components/Navbar.vue b/components/Navbar.vue
new file mode 100644
index 0000000..c673387
--- /dev/null
+++ b/components/Navbar.vue
@@ -0,0 +1,19 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+  name: 'Navbar',
+  data() {},
+  methods: {
+    async logout() {
+      await this.$magic.user.logout()
+      this.$store.commit('auth/setToken', null)
+      this.$store.commit('auth/setLoggedIn', false)
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+</style>
diff --git a/layouts/default.vue b/layouts/default.vue
index 2170b7d..a480f5a 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -3,6 +3,17 @@
     <Nuxt />
   </div>
 </template>
+<script>
+export default {
+  name: 'Defaultlayout',
+  async mounted() {
+    const loggedIn = await this.$magic.user.isLoggedIn()
+    const token = await this.$magic.user.getIdToken()
+    this.$store.commit('auth/setToken', token)
+    this.$store.commit('auth/setLoggedIn', loggedIn)
+  },
+}
+</script>
 
 <style>
 html {
diff --git a/nuxt.config.js b/nuxt.config.js
index 203397b..b911566 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -14,7 +14,7 @@ export default {
   css: [],
 
   // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
-  plugins: [],
+  plugins: [{ src: '~/plugins/magic.js', mode: 'client' }],
 
   // Auto import components (https://go.nuxtjs.dev/config-components)
   components: true,
@@ -40,4 +40,7 @@ export default {
 
   // Build Configuration (https://go.nuxtjs.dev/config-build)
   build: {},
+  env: {
+    magicPublicKey: process.env.NUXT_ENV_PUBLIC_MAGIC_KEY,
+  },
 }
diff --git a/package-lock.json b/package-lock.json
index fa3f5cb..94d663c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1140,6 +1140,21 @@
         }
       }
     },
+    "@magic-sdk/provider": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@magic-sdk/provider/-/provider-3.0.1.tgz",
+      "integrity": "sha512-7/1SKmKJLWGO9T3oUtmxrfmfC6QW3xzjIQ7j1VTUwQb1vBdpwOIlrLPJqEKK1nUv+X8uiaSP4taYf/+0VQGGpA==",
+      "requires": {
+        "@magic-sdk/types": "^2.0.1",
+        "eventemitter3": "^4.0.4",
+        "semver": "^7.3.2"
+      }
+    },
+    "@magic-sdk/types": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@magic-sdk/types/-/types-2.0.1.tgz",
+      "integrity": "sha512-VB7h0i7et7fu5WViZZQz+b/CHUcTuLxC64Wbd+d1f6+dJyPFpUeWRkt5X9LP48pIVmZpz57NQB48/y7YKy91uw=="
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz",
@@ -6874,6 +6889,11 @@
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
       "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw=="
     },
+    "immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha1-nbHb0Pr43m++D13V5Wu2BigN5ps="
+    },
     "import-cwd": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
@@ -7485,6 +7505,14 @@
         "type-check": "~0.4.0"
       }
     },
+    "lie": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz",
+      "integrity": "sha1-mkNrLMd0bKWd56QfpGmz77dr2H4=",
+      "requires": {
+        "immediate": "~3.0.5"
+      }
+    },
     "lines-and-columns": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
@@ -7762,6 +7790,28 @@
       "resolved": "https://registry.npmjs.org/loadjs/-/loadjs-4.2.0.tgz",
       "integrity": "sha512-AgQGZisAlTPbTEzrHPb6q+NYBMD+DP9uvGSIjSUM5uG+0jG15cb8axWpxuOIqrmQjn6scaaH8JwloiP27b2KXA=="
     },
+    "localforage": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.9.0.tgz",
+      "integrity": "sha512-rR1oyNrKulpe+VM9cYmcFn6tsHuokyVHFaCM3+osEmxaHTbEk8oQu6eGDfS6DQLWi/N67XRmB8ECG37OES368g==",
+      "requires": {
+        "lie": "3.1.1"
+      }
+    },
+    "localforage-driver-commons": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/localforage-driver-commons/-/localforage-driver-commons-1.0.3.tgz",
+      "integrity": "sha512-K9PiNNXcyX98lQVyCADjv+QKxFD71y0DtVUhqMjwCkFY/d/g7GdJLPN9U92M7RUvfkL8mzPhC+mWEKo9tur5oQ=="
+    },
+    "localforage-driver-memory": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/localforage-driver-memory/-/localforage-driver-memory-1.0.5.tgz",
+      "integrity": "sha512-m4v478ixdT3hA7gKv+pAxDIWgMKiUV2GuYem5jnpOBQFVJbrHU7jmNlrj8a0MfD9qff3i48E3Yfip5Eu1AN6Qg==",
+      "requires": {
+        "localforage-driver-commons": "^1.0.1",
+        "tslib": "^1.6.0"
+      }
+    },
     "locate-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
@@ -7975,6 +8025,27 @@
         }
       }
     },
+    "magic-sdk": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/magic-sdk/-/magic-sdk-3.0.1.tgz",
+      "integrity": "sha512-Zu00miw1i1nYQWjHnDvBoGExqx18jaE4FZNum3EtElCvc3dSt8vO0+9yEsZh1/wF6Dfkeb1mRJnBewKsgAJ2dQ==",
+      "requires": {
+        "@babel/core": "^7.9.6",
+        "@babel/runtime": "^7.9.6",
+        "@magic-sdk/provider": "^3.0.1",
+        "@magic-sdk/types": "^2.0.1",
+        "localforage": "^1.7.4",
+        "localforage-driver-memory": "^1.0.5",
+        "regenerator-runtime": "0.13.5"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.13.5",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz",
+          "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA=="
+        }
+      }
+    },
     "make-dir": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
diff --git a/package.json b/package.json
index eccfd28..e9fad91 100644
--- a/package.json
+++ b/package.json
@@ -13,15 +13,11 @@
   "lint-staged": {
     "*.{js,vue}": "eslint"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
   "dependencies": {
     "@nuxtjs/axios": "^5.12.2",
     "@nuxtjs/pwa": "^3.0.2",
     "core-js": "^3.6.5",
+    "magic-sdk": "^3.0.1",
     "nuxt": "^2.14.6"
   },
   "devDependencies": {
diff --git a/pages/index.vue b/pages/index.vue
index 2fb8cc2..1eef776 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -2,31 +2,43 @@
   <div class="container">
     <div>
       <Logo />
-      <h1 class="title">comedy-video</h1>
-      <div class="links">
-        <a
-          href="https://nuxtjs.org/"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="button--green"
-        >
-          Documentation
-        </a>
-        <a
-          href="https://github.com/nuxt/nuxt.js"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="button--grey"
-        >
-          GitHub
-        </a>
+      <h1 class="title">Comedy Video</h1>
+      <label
+        for="email"
+        class="block text-sm font-medium leading-5 text-gray-700"
+        >Email</label
+      >
+      <div class="mt-1 relative rounded-md shadow-sm">
+        <input
+          id="email"
+          v-model="email"
+          class="form-input block w-full sm:text-sm sm:leading-5"
+          placeholder="you@example.com"
+        />
       </div>
+      <button @click="login">Login</button>
     </div>
   </div>
 </template>
 
 <script>
-export default {}
+export default {
+  name: 'Index',
+  data() {
+    return {
+      email: '',
+      loading: false,
+    }
+  },
+  methods: {
+    async login() {
+      const token = await this.$magic.auth.loginWithMagicLink({
+        email: this.email,
+      })
+      this.$store.commit('auth/setToken', token)
+    },
+  },
+}
 </script>
 
 <style>
diff --git a/plugins/magic.js b/plugins/magic.js
new file mode 100644
index 0000000..0c30f52
--- /dev/null
+++ b/plugins/magic.js
@@ -0,0 +1,7 @@
+import { Magic } from 'magic-sdk'
+
+export default ({ app }, inject) => {
+  const m = new Magic(process.env.magicPublicKey)
+  m.preload()
+  inject('magic', m)
+}
diff --git a/store/auth.js b/store/auth.js
new file mode 100644
index 0000000..f37ac83
--- /dev/null
+++ b/store/auth.js
@@ -0,0 +1,13 @@
+export const state = () => ({
+  token: null,
+  loggedIn: false,
+})
+
+export const mutations = {
+  setToken(state, token) {
+    state.token = token
+  },
+  setLoggedIn(state, loggedIn) {
+    state.loggedIn = loggedIn
+  },
+}