firebase init

npm i apollo-boost graphql graphql-tag node-fetch @types/node-fetch

firebase functions:config:set hasura.url="herokuのHasuraエンドポイントURL" hasura.admin_secret="HerokuのConfig varsで指定したHASURA_GRAPHQL_ADMIN_SECRETの値"

import * as functions from "firebase-functions";
import * as admin from "firebase-admin";
import ApolloClient from "apollo-boost";
import fetch from "node-fetch";
import gql from "graphql-tag";

admin.initializeApp();

const client = new ApolloClient({
  uri: functions.config().hasura.url,
  fetch: fetch as any,
  request: (operation): void => {
    operation.setContext({
      headers: {
        "x-hasura-admin-secret": functions.config().hasura.admin_secret
      }
    });
  }
});

export const setCustomClaims = functions.auth.user().onCreate(async user => {
　// Hasuraの検証用のカスタムクレーム（属性情報）
  const customClaims = {
    "https://hasura.io/jwt/claims": {
      "x-hasura-default-role": "user",
      "x-hasura-allowed-roles": ["user"],
      "x-hasura-user-id": user.uid
    }
  };

  try {
    // カスタムクレームの設定
    await admin.auth().setCustomUserClaims(user.uid, customClaims);

    // Hasuraサーバーへのユーザーデータの作成リクエスト
    await client.mutate({
      variables: { id: user.uid, name: user.displayName || "unknown" },
      mutation: gql`
        mutation InsertUsers($id: String, $name: String) {
          insert_users(objects: { id: $id, name: $name }) {
            returning {
              id
              name
              created_at
            }
          }
        }
      `
    });

    // 初回ログインの際にユーザー作成と、カスタムクレームの設定には遅延があるため、
    // tokenリフレッシュのフック用にFirestoreへのmetaデータ追加を行う
    await admin
      .firestore()
      .collection("user_meta")
      .doc(user.uid)
      .create({
        refreshTime: admin.firestore.FieldValue.serverTimestamp()
      });
  } catch (e) {
    console.log(e);
  }
});

npm run deploy

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import vuetify from "./plugins/vuetify";
import { apolloProvider, onLogin, onLogout } from "@/plugins/apollo";
import VueApollo from "vue-apollo";
import { auth, db } from "@/plugins/firebase";

const HASURA_TOKEN_KEY = "https://hasura.io/jwt/claims";

Vue.use(VueApollo);

Vue.config.productionTip = false;

let vue: Vue;
// firebaseの初期化が終わったあとにVueを初期化するようにする
auth.onAuthStateChanged(async user => {
  if (!vue) {
    new Vue({
      vuetify,
      apolloProvider,
      router,
      render: h => h(App)
    }).$mount("#app");
  }
  if (user) {
    const token = await user.getIdToken(true);
    const idTokenResult = await user.getIdTokenResult();
    const hasuraClaims = idTokenResult.claims[HASURA_TOKEN_KEY];

    if (hasuraClaims) {
      await onLogin(token);
    } else {
      // Tokenのリフレッシュを検知するためにコールバックを設定する
      const userRef = db.collection("user_meta").doc(user.uid);
      userRef.onSnapshot(async () => {
        const token = await user.getIdToken(true);
        await onLogin(token);
      });
    }
  } else {
    await onLogout();
  }
});

import ApolloClient from "apollo-boost";
import VueApollo from "vue-apollo";

const AUTH_TOKEN = "hasura-auth-token";

const client = new ApolloClient({
  uri: process.env.VUE_APP_GRPHQL_HTTP,
  request: operation => {
    operation.setContext({
      headers: {
        Authorization: `Bearer ${localStorage.getItem(AUTH_TOKEN)}`
      }
    });
  }
});

// ログイン処理
export async function onLogin(token: string) {
  if (localStorage.getItem(AUTH_TOKEN) !== token) {
    localStorage.setItem(AUTH_TOKEN, token);
  }
  try {
    await client.resetStore();
  } catch (e) {
    // eslint-disable-next-line
    console.error(`Login Failed. ${e}`);
  }
}

// ログアウト処理
export async function onLogout() {
  if (typeof localStorage !== "undefined") {
    localStorage.removeItem(AUTH_TOKEN);
  }
  try {
    await client.resetStore();
  } catch (e) {
    // eslint-disable-next-line
    console.error(`Logout Failed. ${e}`);
  }
}

export const apolloProvider = new VueApollo({
  defaultClient: client
});

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "@/views/Home.vue";
import Login from "@/views/Login.vue";
import { auth } from "@/plugins/firebase";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "home",
    component: Home,
    meta: { requireAuth: true }
  },
  {
    path: "/login",
    name: "login",
    component: Login
  }
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

router.beforeEach((to, _from, next) => {
  const requireAuth = to.matched.some(record => record.meta.requireAuth);
  const currentUser = auth.currentUser;

  if (!requireAuth || currentUser) {
    next();
    return;
  }

  next({
    path: "/login",
    query: { redirect: to.fullPath }
  });
});

export default router;

<template>
  <div class="about">
    <h2 class="text-center">Please login.</h2>
    <div id="firebaseui-auth-container"></div>
  </div>
</template>

<script>
import { auth } from "@/plugins/firebase";
import firebase from "firebase";
import * as firebaseui from "firebaseui";
import "firebaseui/dist/firebaseui.css";

export default {
  name: "login",
  beforeRouteEnter(to, from, next) {
    next(() => {
      const uiConfig = {
        signInSuccessUrl: "/",
        signInFlow: "popup",
        signInOptions: [
          firebase.auth.GoogleAuthProvider.PROVIDER_ID,
          firebase.auth.EmailAuthProvider.PROVIDER_ID
        ]
      };
      const ui =
        firebaseui.auth.AuthUI.getInstance() ||
        new firebaseui.auth.AuthUI(auth);
      ui.start("#firebaseui-auth-container", uiConfig);
    });
  }
};
</script>

<template>
  <div class="home">
    <v-card class="mb-5">
      <v-card-text>
        <v-textarea outlined label="Memo" single-line v-model="content" />
        <v-btn block @click="addMemo" color="primary">add Memo</v-btn>
      </v-card-text>
    </v-card>
    <template v-if="memos && memos.length > 0">
      <v-card v-for="memo in memos" :key="memo.id" class="mb-1">
        <v-card-text>
          {{ memo.content }}
        </v-card-text>
        <v-card-actions>
          <v-spacer/>
          <v-icon @click="deleteMemo(memo.id)">mdi-delete</v-icon>
        </v-card-actions>
      </v-card>
    </template>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import { FETCH_MEMOS } from "@/graphql/queries";
import { ADD_MEMO, DELETE_MEMO } from "@/graphql/mutations";
import { auth } from "@/plugins/firebase";

type Memo = {
  id: number;
  content: string;
  created_at: string;
};

type Data = {
  content: string;
  memos: Memo[];
};

export default Vue.extend({
  name: "home",
  data(): Data {
    return {
      content: "",
      memos: []
    };
  },
  methods: {
    async addMemo() {
      const res = await this.$apollo.mutate({
        mutation: ADD_MEMO,
        variables: {
          content: this.content,
          userId: (auth.currentUser as firebase.User).uid
        }
      });

      const insertResult = res.data.insert_memos.returning[0];
      this.memos.push({
        id: insertResult.id,
        content: insertResult.content,
        created_at: insertResult.created_at
      });

      this.clearField();
    },
    async deleteMemo(id: Number) {
      await this.$apollo.mutate({
        mutation: DELETE_MEMO,
        variables: {
          id
        }
      });

      this.memos = this.memos.filter(memo => memo.id !== id);
    },
    clearField() {
      this.content = "";
    }
  },
  apollo: {
    memos: {
      query: FETCH_MEMOS
    }
  }
});
</script>