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
2026-01-11 19:04:27 +00:00 · 2020-11-07 20:56:38 +00:00
parent 01cc192ea8
commit de3d4d03c3
8 changed files with 157 additions and 25 deletions
--- a/components/Navbar.vue
+++ 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>
--- 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 {
--- 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,
+  },
 }
--- 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",
--- 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": {
--- 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>
--- a/plugins/magic.js
+++ 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)
+}
--- a/store/auth.js
+++ 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
+  },
+}