Membuat Social Login di NuxtJS Menggunakan Firebase

April 2, 2021 5 min read
Cara membuat social login dengan akun social media mulai dari Facebook, Google, Twitter maupun GitHub, di NuxtJS menggunakan Firebase.

Social login akan memudahkan pengguna untuk membuat akun di project kita. Jadi pengguna tidak perlu mendaftar dan mengisi form seperti username, email, password, tanggal lahir, dan lain sebagainya.

Pengguna akan dengan mudah login atau daftar menggunakan akun social media mereka.

Kali ini kita menggunakan Firebase Authentication untuk membuat social login di NuxtJS.

Bagaimana cara membuat social login di NuxtJS? Mari kita lanjut ke tutorial.

Siapkan Project Firebase

Pertama, siapkan project Firebasemu, buka https://console.firebase.google.com/ dan buatlah sebuah project disana.

Setelah itu kamu akan mendapatkan firebaseConfig, berisi apiKey, authDomain, projectId, dan lainnya. Copy semua dan simpan di note sementara.

Selanjutnya buka menu Authentication > Sign-in Method, dan aktifkan social media mana yang ingin kamu aktifkan.

Firebase Dashboard

Case kali ini saya menggunakan Google* dan GitHub. Untuk akun social media selain Google pastikan kamu sudah menambahkan callback URL di dashboard developer masing-masing sosmed.

Install Firebase di NuxtJS

Selanjutnya, install firebase di project NuxtJS.

yarn add firebase

// atau menggunakan npm

npm install firebase

Kemudian install modul @nuxtjs/firebase.

yarn add @nuxtjs/firebase

// atau menggunakan npm

npm install @nuxtjs/firebase

Selanjutnya, tambahkan @nuxtjs/firebase di nuxt.config.js.

modules: [
    ...
    [
      '@nuxtjs/firebase',
      {
        config: {
          apiKey: '<apiKey>',
          authDomain: '<authDomain>',
          projectId: '<projectId>',
          storageBucket: '<storageBucket>',
          messagingSenderId: '<messagingSenderId>',
          appId: '<appId>',
          measurementId: '<measurementId>'
        },
        services: {
          auth: {
            initialize: {
              onAuthStateChangedAction: 'onAuthStateChanged',
            },
            ssr: true,
          }
        }
      }
    ]
    ...
  ],

Buat Halaman Login

Sebelum membuat halaman login, buat folder store. Kemudian buat file actions.js di dalamnya.

export default {
    async nuxtServerInit({ dispatch }, ctx) {
      if (this.$fire.auth === null) {
        throw 'nuxtServerInit Example not working - this.$fire.auth cannot be accessed.'
      }
  
      if (ctx.$fire.auth === null) {
        throw 'nuxtServerInit Example not working - ctx.$fire.auth cannot be accessed.'
      }
  
      if (ctx.app.$fire.auth === null) {
        throw 'nuxtServerInit Example not working - ctx.$fire.auth cannot be accessed.'
      }

      if (ctx.res && ctx.res.locals && ctx.res.locals.user) {
        const { allClaims: claims, ...authUser } = ctx.res.locals.user
  
        console.info(
          'Auth User verified on server-side. User: ',
          authUser,
          'Claims:',
          claims
        )
  
        await dispatch('onAuthStateChanged', {
          authUser,
          claims,
        })
      }
    },
  
    onAuthStateChanged({ commit }, { authUser, claims }) {
      if (!authUser) {
        commit('RESET_STORE')
        return
      }
      console.log('AuthStateChangedAction', authUser)
      commit('SET_AUTH_USER', authUser)
    },
  }

Masih di dalam folder store, buat file getters.js.

export default {
    isLoggedIn: (state) => {
      try {
        return state.authUser.id !== null
      } catch {
        return false
      }
    }
  }

Lalu buat file index.js di dalam folder store.

export default {
    onAuthStateChanged({ commit }, authUser ) {
      if (!authUser) {
        commit('RESET_STORE')
        return
      }
      commit('SET_AUTH_USER', authUser)
    },
  }

Lalu buat file mutations.js di folder store.

import initialState from './state'

export default {
  RESET_STORE: (state) => {
    Object.assign(state, initialState())
  },

  SET_AUTH_USER: (state, authUser) => {
    state.authUser = {
      uid: authUser.uid,
      email: authUser.email,
      name: authUser.displayName,
      photoURL: authUser.photoURL
    }
  }
}

Terakhir, buat file file state.js di dalam folder store.

export default () => ({
    authUser: null
  })

Jadi ada 5 file javascript di folder store.

Lanjutkan dengan membuat halaman login. Buat file login.vue di folder pages.

<template>
  <div class="shadow-nuxt">
    <div class="container text-center mx-auto px-4 pt-16 pb-8">
       <button @click="signInWithGoogle">
          <span class="ml-2">Login dengan Google</span>
        </button>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
      async signInWithGoogle() {
        var provider = new this.$fireModule.auth.GoogleAuthProvider();
        let authData = await this.$fire.auth.signInWithPopup(provider)
        this.$router.push('/profile')
      },
    }
}
</script>

Sampai di step ini, coba kunjungi halaman login di localhost:3000/login dan klik tombolnya.

Buat Halaman Profile

Lanjutkan dengan membuat halaman profile. Buat file profile.vue di folder pages.

<template>
 <div class="shadow-nuxt">
     <div class="container pt-4 mx-auto flex">
      <div class="p-4 lg:w-1/3 md:w-full sm:text-center mx-auto">
        <div class="flex border-2 rounded-lg border-gray-200 border-opacity-50 p-8 sm:flex-row  sm:text-center flex-col">
          <div class="w-16 h-16 sm:mr-8 sm:mb-0 mb-4 inline-flex items-center justify-center rounded-full flex-shrink-0">
            <img
          class="inline-block rounded-full"
          :src="authUser.photoURL"
                  />
          </div>
          <div class="flex-grow">
            <h2 class="text-gray-900 text-lg title-font font-medium">{{ authUser.name }}</h2>
            <p class="leading-relaxed text-base pb-4">{{ authUser.email }}</p>
            <button class="button inline-block px-4 py-2 text-ss font-small text-white uppercase rounded rounded-full shadow cursor-pointer bg-red-600 hover:bg-red-800 hover:shadow-md" @click="logout">Logout</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { metaGeneric } from '~/utils/metaTags'
import { mapState, mapGetters } from 'vuex'

export default {
    computed: {
    ...mapState(['authUser'])
    },
    methods: {
    async logout() {
      await this.$fire.auth.signOut()
      this.$router.push('/')
    }
    },
    head() {
        const title = 'Profile - Hamjs.com'
        const description = this.$i18n.t('meta.description')
        return {
            title,
            titleTemplate: '%s',
            meta: [...metaGeneric(title, description)],
        }
    },
}
</script>

Agar halaman profile tidak bisa dikunjungi saat pengguna belum login, buat folder middleware di root directory, dan buatlah file auth.js di dalamnya.

export default function ({ store, redirect }) {
    if (!store.getters['isLoggedIn']) {
      return redirect('/login')
    }
  }

Kemudian tambahkan middleware: 'auth' di bagian export default pada file pages/profile.vue.

...
<script>
export default {
    middleware: 'auth',
    ...
}
</script>

Sampai step ini halaman login, halaman profile serta tombol logout sudah berfungsi dengan baik. Selamat mencoba.

Jika ada kesulitan kamu bisa kunjungi dokumentasi modul @nuxtjs/firebase, dan dokumentasi Firebase.


Terima kasih sudah membaca artikel "Membuat Social Login di NuxtJS Menggunakan Firebase"
Bagikan
Silahkan Login untuk berkomentar.