Social(github) authentication with Firebase and Nuxt

Didn't find any direct instructions, so to save your time, this is how I went about using Firebase authentication with github login flow in my nuxt app.

I've used Nuxt-Firebase community module but you don't have to use it.

Follow firebse instruction on to how setup your app on github.

Create github login icon to have something to click:

      <div class="social">
        <p class="mt-4 title font-weight-light">Login with:</p>
        <div @click="githubLogin">
          <v-icon x-large>mdi-github</v-icon>
        </div>
      </div>

When click is made it will call this function:

  methods: {
    githubLogin() {
      const provider = new this.$fireAuthObj.GithubAuthProvider();
      this.$fireAuth.signInWithRedirect(provider);
    },
  },

Firebase magic will happen and you'll get redirected back so you can use in the same component:

export default {
  created() {
    this.$store.commit("auth/setLoading", true);
    this.$fireAuth
      .getRedirectResult()
      .then((result) => {
        if (result.credential) {
          // This gives you a GitHub Access Token. You can use it to access the GitHub API.
          var token = result.credential.accessToken;
        }
        // The signed-in user info.
        var user = result.user;
        this.$store.commit({ type: "auth/addUser", email: user.email });
        this.dialog = false;
        this.$router.push({ name: "user" });
      })
      .catch((error) => {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        // The email of the user's account used.
        var email = error.email;
        // The firebase.auth.AuthCredential type that was used.
        var credential = error.credential;
        // ...
        if (errorCode === "auth/account-exists-with-different-credential") {
          this.snackbar = true;
          this.snackbarText = "An account already exists with the same email";
        }
        this.$store.commit("auth/setLoading", false);
      });
  },
};

Above I've add some vuex commits to add user to store and redirect to user page after success.

Thats it!

Blog

Social(github) authentication with Firebase and Nuxt

Łukasz Kurek

Join Our Newsletter. No Spam, Only the good stuff.

Related