Connecting multiple providers to Firebase using JavaScript

Question

Connecting multiple providers to Firebase using JavaScript

I have successfully implemented authentication for Email/Password and social login with Facebook/Google. Now, my goal is to link the user's account on Firebase if they sign up with Facebook/Google after previously signing up with either Facebook/Google or Email.

Currently, I am handling the 'auth/email-already-in-use' error code.

Although I have managed the separate parts, I am facing issues linking accounts. Despite using the provided code, nothing seems to get linked on Firebase.

I am utilizing Vue.js for the Frontend, but the authentication process is primarily JavaScript-based. Feel free to ask for further clarification if needed.

An error I encounter when clicking the signup button for Email/Password is:

TypeError: self.googleSignin(...) is undefined

Below is a portion of the code:

<template>
    <div class="row">
        <div class="display-block">
            <div class="row">
                <div class="input-field col s12">
                    <input id="email" type="email" v-model="email" class="validate email-input-field" placeholder="Email Address">
                    <i class="material-icons prefix">email</i>
                </div>
            </div>
            // More HTML Code...
        </div>
        <!-- end display block -->
    </div>
</template>

// Javascript Code ...

javascript firebase vue.js firebase-authentication

Answer 1

Answer №1

Consider removing the self references in your code. Here's an alternative approach:

var googleProvider = new firebase.auth.GoogleAuthProvider();
var facebookProvider = new firebase.auth.FacebookAuthProvider();

var app = {}

app.data = function() {
    return {
        email: '',
        password: '',
        credential: {}
    };
};

app.signup = function(provider) {
    firebase.auth().createUserWithEmailAndPassword(app.data.email, app.data.password).then(
        (user) => {
            self.registerProfile()
            user.sendEmailVerification()
            Materialize.toast('Email verification sent to: ' + app.data.email, 5000)
        },
        (err) => {
            console.log("Error Code: " + err.code)
            if (err.code == 'auth/email-already-in-use') {
                var credential = firebase.auth.EmailAuthProvider.credential(app.data.email, app.data.password)
                app.data.credential = credential
                //check if google-link with facebook or if facebook link with google
                app.googleSignin().then(function() {
                    firebase.auth().currentUser.link(app.data.credential).then(function(user) {
                        console.log("Account Linking success: " + user)
                    }, function(error) {
                        console.log("Error on linking accounts" + error)
                    })
                })
            } else {
                Materialize.toast('Uppss: ' + err.message, 5000)
                user.sendEmailVerification()
            }
        }
    );
};

app.googleSignin = function() {
    firebase.auth().signInWithPopup(googleProvider).then(function(result) {
        var token = result.credential.accessToken;
        var user = result.user;
    }).catch(function(error) {
        var errorCode = error.code;
        var errorMessage = error.message;
        console.log(error.code)
        console.log(error.message)
    });
};

app.facebookSignin = function() {
    firebase.auth().signInWithPopup(facebookProvider).then(function(result) {
        var token = result.credential.accessToken;
        var user = result.user;
    }).catch(function(error) {
        var errorCode = error.code;
        var errorMessage = error.message;
        console.log("error code:" + error.code)
        console.log("error msg:" + error.message)
    });
};

export default {
    name: 'signUp',
    data: app.data,
    methods: {
        signUp: app.signup,
        googleSignin: app.googleSignin,
        facebookSignin: app.facebookSignin,
    }
}

Some observations:

The call to self.registerProfile() is present but the function is not defined in the code.
You directly reference data in the signup method, consider passing it as a parameter instead.

Answer 2

Consider removing the self references in your code. Here's an alternative approach:

var googleProvider = new firebase.auth.GoogleAuthProvider();
var facebookProvider = new firebase.auth.FacebookAuthProvider();

var app = {}

app.data = function() {
    return {
        email: '',
        password: '',
        credential: {}
    };
};

app.signup = function(provider) {
    firebase.auth().createUserWithEmailAndPassword(app.data.email, app.data.password).then(
        (user) => {
            self.registerProfile()
            user.sendEmailVerification()
            Materialize.toast('Email verification sent to: ' + app.data.email, 5000)
        },
        (err) => {
            console.log("Error Code: " + err.code)
            if (err.code == 'auth/email-already-in-use') {
                var credential = firebase.auth.EmailAuthProvider.credential(app.data.email, app.data.password)
                app.data.credential = credential
                //check if google-link with facebook or if facebook link with google
                app.googleSignin().then(function() {
                    firebase.auth().currentUser.link(app.data.credential).then(function(user) {
                        console.log("Account Linking success: " + user)
                    }, function(error) {
                        console.log("Error on linking accounts" + error)
                    })
                })
            } else {
                Materialize.toast('Uppss: ' + err.message, 5000)
                user.sendEmailVerification()
            }
        }
    );
};

app.googleSignin = function() {
    firebase.auth().signInWithPopup(googleProvider).then(function(result) {
        var token = result.credential.accessToken;
        var user = result.user;
    }).catch(function(error) {
        var errorCode = error.code;
        var errorMessage = error.message;
        console.log(error.code)
        console.log(error.message)
    });
};

app.facebookSignin = function() {
    firebase.auth().signInWithPopup(facebookProvider).then(function(result) {
        var token = result.credential.accessToken;
        var user = result.user;
    }).catch(function(error) {
        var errorCode = error.code;
        var errorMessage = error.message;
        console.log("error code:" + error.code)
        console.log("error msg:" + error.message)
    });
};

export default {
    name: 'signUp',
    data: app.data,
    methods: {
        signUp: app.signup,
        googleSignin: app.googleSignin,
        facebookSignin: app.facebookSignin,
    }
}

Some observations:

The call to self.registerProfile() is present but the function is not defined in the code.
You directly reference data in the signup method, consider passing it as a parameter instead.

Connecting multiple providers to Firebase using JavaScript

Answer №1

Similar questions

What is causing styled-components to include my attributes in the DOM?

Utilizing node-gcm with a proxy configuration

Clicking on a link to submit a form and passing a POST variable

Comparing AJAX to a source script request

Remove bulleted list from HTML using JavaScript DOM

Creating a Dynamic Controller with Dynamic Parameters in AngularJS

Why do variables maintain the same value across modules when using the require function in Node.js?

Converting uploaded file data into JSON format using JavaScript

Angular-nvd3: maintaining consistent spacing between data points along the x-axis

Error: The type 'Element[]' cannot be assigned to the type 'ReactElement<any, string | JSXElementConstructor<any>>'

Designing a web application with Angular2

Creating a custom color palette with Material UI using ThemeProvider

Steps for implementing Onclick event within the <Script> tag to display a div:

Real-time data updates using AJAX in Ruby on Rails

What is the best method for encrypting a URL that contains AngularJS data?

The function did not return a Promise or value as expected when using async and await

The JavaScript submenu has ceased to function properly following the latest update to iPhone iOS 5

Encountering issues with styled component's flex not functioning as expected in React

Using AngularJS to auto-fill input and textarea fields

Comparison Between Angular and Web API in Regards to Racing Condition with Databases