Setup Firebase Email Authentication (Web) with Whitelisted emails using Vue.js and Vue Router

npm install --save firebasenpm install --save firebaseui

import * as firebase from 'firebase/app'// import 'firebase/analytics';import 'firebase/auth'import * as firebaseui from 'firebaseui'import 'firebaseui/dist/firebaseui.css'const firebaseConfig = {  apiKey: "AIza...",  authDomain: "....firebaseapp.com",  databaseURL: "https://....firebaseio.com",  projectId: "...",  storageBucket: "....appspot.com",  messagingSenderId: "1020...",  appId: "1:1020..."};firebase.initializeApp(firebaseConfig)

const app = {  name: 'My App',  version: '1.0.1',  // isAuthenticated: firebase.auth().currentUser !== null  isAuthenticated: false}Vue.prototype.$app = applet initUi = falsefunction renderUi() {  if (!initUi) {    new Vue({      router,      render: h => h(App)    }).$mount('#app')    initUi = true  }}firebase.auth().onAuthStateChanged(user => {  // user is not enough, as we need custom claims as well  // app.isAuthenticated = user !== null  if (user) {    user.getIdTokenResult()      .then((idTokenResult) => {        app.isAuthenticated = idTokenResult.claims.authorized        renderUi()      })  }  else {    app.isAuthenticated = false    renderUi()  }  // onAuthStateChanged is slightly delayed,  // thus we wait for authentication before render to make sure router navigation guard works  // renderUi})

import Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'import Page from '../views/Page.vue'import SignIn from '../views/SignIn.vue'Vue.use(VueRouter)const routes = [  {    path: '/',    name: 'home',    component: Home  },  {    path: '/page/:id',    component: Page  },  {    path: '/about',    name: 'about',    // route level code-splitting    // this generates a separate chunk (about.[hash].js) for this route    // which is lazy-loaded when the route is visited.    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')  },  {    path: '/signin',    name: 'signin',    component: SignIn  },]const router = new VueRouter({  mode: 'history',  base: process.env.BASE_URL,  routes,  scrollBehavior (to, from, savedPosition) {    if (savedPosition) {      return savedPosition    } else {      return { x: 0, y: 0 }    }  }})import * as firebase from 'firebase/app'router.beforeEach((to, from, next) => {  if (to.fullPath === '/about') {    next()    return  }  const isAuthenticated = Vue.prototype.$app.isAuthenticated  if (!isAuthenticated && to.fullPath !== '/signin') next('/signin')  else next()})export default router

<template>  <div>    <div class="alert alert-danger" role="alert" v-if="error">      {{ error }} <button type="button" class="btn btn-primary" @click="signIn">Try again</button>    </div>    <div id="firebaseui-auth-container"></div>  </div></template><script>import * as firebase from 'firebase/app'import * as firebaseui from 'firebaseui'export default {  name: 'signin',  data() {    return {      error: null,      from: null,      uiConfig: {        callbacks: {          // @ts-ignore          signInSuccessWithAuthResult: (authResult, redirectUrl) => {            // this.$app.isAuthenticated = true            // this.$router.replace(this.from || '/')            const user = authResult.user            this.handleSignIn(user)            return false // redirect if true          },          uiShown() {             // login from is shown          }        },        // signInFlow: 'popup',        // signInSuccessUrl: '/',        signInOptions: [            {              provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,              requireDisplayName: false            }        ]      }    }  },  methods: {    signIn() {      this.$ui.start('#firebaseui-auth-container', this.uiConfig)    },    handleSignIn(user) {      user.getIdTokenResult(true)        .then((idTokenResult) => {          this.$app.isAuthenticated = idTokenResult.claims.authorized          if (!this.$app.isAuthenticated) { // custom claims not updated/received yet            // refresh again            console.log('refresh again')            this.handleSignIn(user)          }          else {            this.$router.replace(this.from || '/')          }        })        .catch((error) => {          if (error.code == 'auth/user-token-expired') {            this.error = `${user.email} is not authorized.`            this.$app.isAuthenticated = false            // this.signIn()          }        })    }  },  mounted() {    this.$ui = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth())    this.signIn()  },  beforeRouteEnter(to, from, next) {    next(vm => {      vm.from = from    })  }}</script>

const functions = require('firebase-functions')const admin = require('firebase-admin')admin.initializeApp()// TODO: retrieve authorizeEmails from firestore insteadconst authorizeEmails = [  '[email protected]',  '[email protected]'];exports.authorizeUserByEmail = functions.auth.user().onCreate(async (user) => {  const uid = user.uid  const email = user.email  if (authorizeEmails.includes(email)) {    await admin.auth().setCustomUserClaims(uid, {authorized: true})    console.log(`setCustomUserClaims: ${email}`)    return true  }  else {    await admin.auth().deleteUser(uid)    console.log(`Delete user: ${email}`);    return false  }});