Social(github) authentication with Firebase and Nuxt

Łukasz Kurek — Thu, 11 Jun 2020 11:18:23 +0000

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!

Forem: Łukasz Kurek

Social(github) authentication with Firebase and Nuxt