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*asfunctionsfrom"firebase-functions";import*asadminfrom"firebase-admin";importApolloClientfrom"apollo-boost";importfetchfrom"node-fetch";importgqlfrom"graphql-tag";admin.initializeApp();constclient=newApolloClient({uri:functions.config().hasura.url,fetch:fetchasany,request:(operation):void=>{operation.setContext({headers:{"x-hasura-admin-secret":functions.config().hasura.admin_secret}});}});exportconstsetCustomClaims=functions.auth.user().onCreate(asyncuser=>{　// Hasuraの検証用のカスタムクレーム（属性情報）constcustomClaims={"https://hasura.io/jwt/claims":{"x-hasura-default-role":"user","x-hasura-allowed-roles":["user"],"x-hasura-user-id":user.uid}};try{// カスタムクレームの設定awaitadmin.auth().setCustomUserClaims(user.uid,customClaims);// Hasuraサーバーへのユーザーデータの作成リクエストawaitclient.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データ追加を行うawaitadmin.firestore().collection("user_meta").doc(user.uid).create({refreshTime:admin.firestore.FieldValue.serverTimestamp()});}catch(e){console.log(e);}});

npm run deploy

importVuefrom"vue";importAppfrom"./App.vue";importrouterfrom"./router";importvuetifyfrom"./plugins/vuetify";import{apolloProvider,onLogin,onLogout}from"@/plugins/apollo";importVueApollofrom"vue-apollo";import{auth,db}from"@/plugins/firebase";constHASURA_TOKEN_KEY="https://hasura.io/jwt/claims";Vue.use(VueApollo);Vue.config.productionTip=false;letvue:Vue;// firebaseの初期化が終わったあとにVueを初期化するようにするauth.onAuthStateChanged(asyncuser=>{if(!vue){newVue({vuetify,apolloProvider,router,render:h=>h(App)}).$mount("#app");}if(user){consttoken=awaituser.getIdToken(true);constidTokenResult=awaituser.getIdTokenResult();consthasuraClaims=idTokenResult.claims[HASURA_TOKEN_KEY];if(hasuraClaims){awaitonLogin(token);}else{// Tokenのリフレッシュを検知するためにコールバックを設定するconstuserRef=db.collection("user_meta").doc(user.uid);userRef.onSnapshot(async()=>{consttoken=awaituser.getIdToken(true);awaitonLogin(token);});}}else{awaitonLogout();}});

importApolloClientfrom"apollo-boost";importVueApollofrom"vue-apollo";constAUTH_TOKEN="hasura-auth-token";constclient=newApolloClient({uri:process.env.VUE_APP_GRPHQL_HTTP,request:operation=>{operation.setContext({headers:{Authorization:`Bearer${localStorage.getItem(AUTH_TOKEN)}`}});}});// ログイン処理exportasyncfunctiononLogin(token:string){if(localStorage.getItem(AUTH_TOKEN)!==token){localStorage.setItem(AUTH_TOKEN,token);}try{awaitclient.resetStore();}catch(e){// eslint-disable-next-lineconsole.error(`Login Failed.${e}`);}}// ログアウト処理exportasyncfunctiononLogout(){if(typeoflocalStorage!=="undefined"){localStorage.removeItem(AUTH_TOKEN);}try{awaitclient.resetStore();}catch(e){// eslint-disable-next-lineconsole.error(`Logout Failed.${e}`);}}exportconstapolloProvider=newVueApollo({defaultClient:client});

importVuefrom"vue";importVueRouterfrom"vue-router";importHomefrom"@/views/Home.vue";importLoginfrom"@/views/Login.vue";import{auth}from"@/plugins/firebase";Vue.use(VueRouter);constroutes=[{path:"/",name:"home",component:Home,meta:{requireAuth:true}},{path:"/login",name:"login",component:Login}];constrouter=newVueRouter({mode:"history",base:process.env.BASE_URL,routes});router.beforeEach((to,_from,next)=>{constrequireAuth=to.matched.some(record=>record.meta.requireAuth);constcurrentUser=auth.currentUser;if(!requireAuth||currentUser){next();return;}next({path:"/login",query:{redirect:to.fullPath}});});exportdefaultrouter;

<template><divclass="about"><h2class="text-center">Please login.</h2><divid="firebaseui-auth-container"></div></div></template><script>import{auth}from"@/plugins/firebase";importfirebasefrom"firebase";import*asfirebaseuifrom"firebaseui";import"firebaseui/dist/firebaseui.css";exportdefault{name:"login",beforeRouteEnter(to,from,next){next(()=>{constuiConfig={signInSuccessUrl:"/",signInFlow:"popup",signInOptions:[firebase.auth.GoogleAuthProvider.PROVIDER_ID,firebase.auth.EmailAuthProvider.PROVIDER_ID]};constui=firebaseui.auth.AuthUI.getInstance()||newfirebaseui.auth.AuthUI(auth);ui.start("#firebaseui-auth-container",uiConfig);});}};</script>

<template><divclass="home"><v-cardclass="mb-5"><v-card-text><v-textareaoutlinedlabel="Memo"single-linev-model="content"/><v-btnblock@click="addMemo"color="primary">add Memo</v-btn></v-card-text></v-card><templatev-if="memos && memos.length > 0"><v-cardv-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><scriptlang="ts">importVuefrom"vue";import{FETCH_MEMOS}from"@/graphql/queries";import{ADD_MEMO,DELETE_MEMO}from"@/graphql/mutations";import{auth}from"@/plugins/firebase";typeMemo={id:number;content:string;created_at:string;};typeData={content:string;memos:Memo[];};exportdefaultVue.extend({name:"home",data():Data{return{content:"",memos:[]};},methods:{asyncaddMemo(){constres=awaitthis.$apollo.mutate({mutation:ADD_MEMO,variables:{content:this.content,userId:(auth.currentUserasfirebase.User).uid}});constinsertResult=res.data.insert_memos.returning[0];this.memos.push({id:insertResult.id,content:insertResult.content,created_at:insertResult.created_at});this.clearField();},asyncdeleteMemo(id:Number){awaitthis.$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>