hukurouo.com 🦉

2020-12-11 :

nuxt-ts day12：画像アップローダーを作ろう 2


Firestore + Auth で認証チェックまで

netlify で環境変数を設定

netlify の env 設定で割と詰まったのでメモ。

  1. netlifyで環境変数を設定（キーの値はローカルと同じでよい）
  2. nuxt config で設定
  3. netlifyでデプロイしたサイトURLを firebase Auth で承認済みドメインに追加する

config はこのように記述。ローカルの環境変数を上書きするイメージ。

nuxt.config.ts
  env: {
    API_KEY: process.env.API_KEY,
    AUTH_DOMAIN: process.env.AUTH_DOMAIN,
    DATABASE_URL: process.env.DATABASE_URL,
    PROJECT_ID: process.env.PROJECT_ID,
    STORAGE_BUCKET: process.env.STORAGE_BUCKET,
    MESSAGE_SENDER_ID: process.env.MESSAGE_SENDER_ID,
    MEASUREMENR_ID: process.env.MEASUREMENR_ID
  },

Auth + Firestore

ドキュメントを参考にしながら書いていく

pages\uploader.vue
  const signIn = async (): Promise<void> => {
    const provider = new firebase.auth.GoogleAuthProvider()
    const credential = await firebase.auth().signInWithPopup(provider)
    const user = credential.user!
    state.displayName = user.displayName
    state.loginStatus = true
    isAuth(user.email)
  }

credential.user! のビックリマークはこの変数が null ではないということを宣言している。これがないと、以下の user.displayName で null参照の可能性があるということでコンパイルエラーが出る。

多分こう書いたほうが安全。だけどネストが深くなると可読性が下がりそうでもある。

pages\uploader.vue
    const user = credential.user
    if (user) {
      state.displayName = user.displayName
      state.loginStatus = true
      isAuth(user.email)
    }

doc.data()!とかはこれでよさそうな気もする

pages\uploader.vue
    const isAuth = (email: string | null) => {
      docRef.get().then(function (doc) {
        if (doc.exists) {
          if (email === doc.data()!.email) {
            state.authStatus = true
          }
        } else {
        // doc.data() will be undefined in this case
          console.log('No such document!')
        }
      }).catch(function (error) {
        console.log('Error getting document:', error)
      })
    }