ADD: Auth

Author: NEKOYASAN

nuxt.config.js

@@ -8,6 +8,9 @@ module.exports = {
    ** Headers of the page
    */
   head: {
+    htmlAttrs: {
+      prefix: 'og: http://ogp.me/ns#',
+    },
     title: 'おうちで時間割',
     meta: [
       { charset: 'utf-8' },
@@ -23,6 +26,7 @@ module.exports = {
     link: [
       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
       { rel: 'apple-touch-icon', href: '/apple-touch-icon-precomposed.png' },
+      { hid: 'og:type', property: 'og:type', content: 'website' },
       {
         hid: 'og:image',
         property: 'og:image',
@@ -55,6 +59,10 @@ module.exports = {
     {
       src: '@/plugins/firebase',
     },
+    {
+      src: '@/plugins/persistedstate.js',
+      ssr: false,
+    },
   ],
   /*
    ** Nuxt.js dev-modules

package.json

@@ -41,7 +41,8 @@
     "nuxt": "^2.12.2",
     "nuxt-svg-loader": "^1.2.0",
     "nuxt-webfontloader": "^1.1.0",
-    "uuid": "^8.0.0"
+    "uuid": "^8.0.0",
+    "vuex-persistedstate": "^3.0.1"
   },
   "devDependencies": {
     "@nuxtjs/eslint-config": "^2.0.2",

src/middleware/authenticated.js

@@ -1,5 +1,16 @@
-export default function ({ store, redirect }) {
-  if (!store.getters['modules/user/isAuthenticated']) {
-    return redirect('/auth/signin')
-  }
+import firebase from '@/plugins/firebase'
+
+export default function ({ store, route, redirect }) {
+  firebase.auth().onAuthStateChanged((user) => {
+    if (!user) {
+      redirect('/account/login')
+    } else {
+      store.commit('user/setUser', {
+        uid: user.uid,
+        email: user.email,
+        username: user.displayName,
+        userImage: user.photoURL,
+      })
+    }
+  })
 }

src/middleware/handle-login-route.js

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <v-container fluid fill-height>
+      <v-layout align-center justify-center>
+        <v-flex xs12 sm8 md4>
+          <v-card>
+            <v-toolbar>
+              <v-toolbar-title>Login</v-toolbar-title>
+            </v-toolbar>
+            <v-card-text>
+              <v-form>
+                <v-text-field
+                  v-model="email"
+                  :counter="32"
+                  label="email"
+                  prepend-icon="mdi-email"
+                />
+                <v-text-field
+                  v-model="password"
+                  :append-icon="
+                    show_password ? 'mdi-visibility' : 'mdi-visibility_off'
+                  "
+                  :type="show_password ? 'text' : 'password'"
+                  :counter="32"
+                  label="password"
+                  prepend-icon="mdi-lock"
+                  @click:append="show_password = !show_password"
+                />
+              </v-form>
+            </v-card-text>
+            <v-card-actions>
+              <v-btn @click="gotoSignup">SIGNUP</v-btn>
+              <v-spacer />
+              <v-btn @click="doLogin">LOGIN</v-btn>
+            </v-card-actions>
+            <hr />
+            <v-spacer />
+            <v-btn @click="gotoResetPassword"
+              >パスワードを忘れたかたはこちら</v-btn
+            >
+          </v-card>
+        </v-flex>
+      </v-layout>
+    </v-container>
+  </div>
+</template>
+
+<script>
+import firebase from '@/plugins/firebase'
+export default {
+  data() {
+    return {
+      email: '',
+      password: '',
+      show_password: false,
+    }
+  },
+  methods: {
+    doLogin() {
+      firebase
+        .auth()
+        .signInWithEmailAndPassword(this.email, this.password)
+        .then((user) => {
+          this.$router.push('/edit')
+        })
+        .catch((error) => {
+          alert(error)
+        })
+    },
+    gotoSignup() {
+      this.$router.push('/signup')
+    },
+    gotoResetPassword() {
+      this.$router.push('/reset-password')
+    },
+  },
+}
+</script>

src/pages/account/login.vue

@@ -16,8 +16,4 @@ if (!firebase.apps.length) {
   firebase.initializeApp(firebaseConfig)
 }
 
-export default (context, inject) => {
-  inject('firebase', firebase)
-  inject('firestore', firebase.firestore())
-  inject('auth', firebase.auth())
-}
+export default firebase

src/pages/auth/signin.vue

@@ -0,0 +1,11 @@
+import createPersistedState from 'vuex-persistedstate'
+
+export default ({ store, isHMR }) => {
+  if (isHMR) return
+
+  if (process.client) {
+    window.onNuxtReady(() => {
+      createPersistedState({})(store) // vuex plugins can be connected to store, even after creation
+    })
+  }
+}

src/pages/auth/signup.vue

@@ -1,9 +1,10 @@
 import { getUserFromCookie } from '@/helpers'
-
+import firebase from '@/plugins/firebase'
 export const actions = {
   async nuxtServerInit({ dispatch, commit, state }, { req, res, error }) {
     const user = getUserFromCookie(req)
-    const classDataSnapshot = await this.$firestore
+    const classDataSnapshot = await firebase
+      .firestore()
       .collection('classData')
       .doc('あけしめたす')
       .get()