nuxt-ts day12:画像アップローダーを作ろう 2
2020-12-11
# diaryFirestore + Auth で認証チェックまで
netlify で環境変数を設定
netlify の env 設定で割と詰まったのでメモ。
- netlifyで環境変数を設定(キーの値はローカルと同じでよい)
- nuxt config で設定
- 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
ドキュメントを参考にしながら書いていく
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参照の可能性があるということでコンパイルエラーが出る。
多分こう書いたほうが安全。だけどネストが深くなると可読性が下がりそうでもある。
const user = credential.user
if (user) {
state.displayName = user.displayName
state.loginStatus = true
isAuth(user.email)
}
doc.data()!
とかはこれでよさそうな気もする
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)
})
}