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

@@ -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>

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 {

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,
+  },
 }

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",

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": {

pages/index.vue

@@ -2,31 +2,43 @@
   <div class="container">
     <div>
       <Logo />
-      <h1 class="title">comedy-video</h1>
+      <h1 class="title">Comedy Video</h1>
-      <div class="links">
+      <label
-        <a
+        for="email"
-          href="https://nuxtjs.org/"
+        class="block text-sm font-medium leading-5 text-gray-700"
-          target="_blank"
+        >Email</label
-          rel="noopener noreferrer"
-          class="button--green"
       >
-          Documentation
+      <div class="mt-1 relative rounded-md shadow-sm">
-        </a>
+        <input
-        <a
+          id="email"
-          href="https://github.com/nuxt/nuxt.js"
+          v-model="email"
-          target="_blank"
+          class="form-input block w-full sm:text-sm sm:leading-5"
-          rel="noopener noreferrer"
+          placeholder="you@example.com"
-          class="button--grey"
+        />
-        >
-          GitHub
-        </a>
       </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>

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)
+}

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
+  },
+}