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!

Comments

[SeriousLee13]

And this works without issue for you? When I try to do .getRedirectResult() in the created() hook the whole thing bombs out with:

[t [Error]: This operation is not supported in the environment this application is running on. "location.protocol" must be http, https or chrome-extension and web storage must be enabled.] {                       14:42:15  
  code: 'auth/operation-not-supported-in-this-environment',
  a: null
}

It even kills the server! I've done some research and found out that firebase's auth module can only be used in the browser and so this is expected behaviour coz we're trying to call it on the server. Which is what's got me wondering how you managed to pull it off? 🤔

I realize this is quite an old post by now (in javascript years, at least lol) - now we use this.$fire.auth.getRedirectResult() and $fireAuth doesn't exist anymore, but I'd appreciate any insight into this issue.