Vue.js X Firebase로 구글로그인

Google Login

이번에 템플릿을 사용하면서 구글로그인 그리고 이메일 로그인을 해보게되었다.
하지만 템플릿에는 이미 구글로그인 그리고 이메일 로그인 관련된 로직들이 다 짜여져 있었다. 하지만 원리는 알고 싶어서 개인적 공부를 하면서 알게된점을 남겨보려 합니다.

step1

firebase를 전체적으로 선언해주고 필요할 때 마다 꺼내 쓰기위해 작업을해야한다.

//firebase.js
firebase.initializeApp(firebaseConfig);
firebase.auth().onAuthStateChanged((fireU) => store.commit("setFireUser",fireU))
Vue.prototype.$firebase = firebase

//store/index.js
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    editable:true,
    fireUser:null
  },
  mutations: {
    setEdit(state,edit){
      state.editable = edit
    },
    setFireUser(state,fireU){
      state.fireUser = fireU
    }
  },
  actions: {
  },
  modules: {
  }

step2

이제 로그인을 하는 페이지로가서 파이어베이스를 꺼내 사용하면된다.
코드를 바로 보도록 하자

methods:{
  async signWithGoogle() {
    const provider = new this.$firebase.auth.googleAuthProvider();
    this.$firebase.auth().languageCode = "korean";
    this.loading = true;
    try {
      const snapshot = await.this.$firebase.auth().signInWithPopup(provider);
      this.$store.commit("setFireUser", snapshot.user);
    } finally {
      this.loading = false;
    }
  },
    signOut() {
      this.$firebase.auth().signOut();
    },

catch error관련해서는 error.js라는 곳에 전체적으로 사용을 위해 선언해 놓았다.

//error.js
Vue.config.errorHandler = e => {
  console.error(e.message)
  console.log("ERROR!")
}

위의 코드처럼 간단하게 파이어베이스를 사용하여 간단하게 구글로그인을 할 수 있다.