Retrieve TypeScript object after successful login with Firebase

Question

Retrieve TypeScript object after successful login with Firebase

I'm struggling with the code snippet below:

login = (email: string, senha: string): { nome: string, genero: string, foto: string;} => {
    this.fireAuth.signInWithEmailAndPassword(email, senha).then(res => {
        firebase.database().ref('Usuarios/' + res.uid).once('value', snapshot => {
            return {
                nome: snapshot.val().nome,
                genero: snapshot.val().genero,
                foto: snapshot.val().avatar
            };
        });
    });
}

After logging in to Firebase and fetching my information, I expect it to return an object. However, I am encountering an error stating that I need to return something if the function type is not 'void' or 'any'. Despite returning an object as required.

Any advice on how to resolve this issue?

javascript typescript firebase types ionic2

Answer 1

Answer №1

Your understanding of async and promises needs some adjustments. There are a couple of solutions to correct it.

1 - You can return the promise and have the caller resolve it.

login = (email: string, password: string): Promise<{name: string, gender: string, photo: string}> => {
    return new Promise<{name: string, gender: string, photo: string}>((resolve, reject) => {
        this.fireAuth.signInWithEmailAndPassword(email, password).then(result => {
            firebase.database().ref('Users/' + result.uid).once('value', snapshot => {
                resolve({
                    name: snapshot.val().name,
                    gender: snapshot.val().gender,
                    photo: snapshot.val().avatar
                });
            });
        });
    });
}

2 - You can pass a callback function in the login method and execute it when the promise is fulfilled

login = (email: string, password: string, loginCallback: (name: string, gender: string, photo: string) => any) => {
    this.fireAuth.signInWithEmailAndPassword(email, password).then(result => {
        firebase.database().ref('Users/' + result.uid).once('value', snapshot => {
            loginCallback({
                name: snapshot.val().name,
                gender: snapshot.val().gender,
                photo: snapshot.val().avatar
            });
        });
    });
}

Edit: I reviewed the Firebase Documentation (https://firebase.google.com/docs/database/web/read-and-write#read_data_once), and found another mistake.

firebase.database().ref('Users/' + result.uid).once('value', snapshot => {

should be:

firebase.database().ref('Users/' + result.uid).once('value').then(snapshot => {

Answer 2

Your understanding of async and promises needs some adjustments. There are a couple of solutions to correct it.

1 - You can return the promise and have the caller resolve it.

login = (email: string, password: string): Promise<{name: string, gender: string, photo: string}> => {
    return new Promise<{name: string, gender: string, photo: string}>((resolve, reject) => {
        this.fireAuth.signInWithEmailAndPassword(email, password).then(result => {
            firebase.database().ref('Users/' + result.uid).once('value', snapshot => {
                resolve({
                    name: snapshot.val().name,
                    gender: snapshot.val().gender,
                    photo: snapshot.val().avatar
                });
            });
        });
    });
}

2 - You can pass a callback function in the login method and execute it when the promise is fulfilled

login = (email: string, password: string, loginCallback: (name: string, gender: string, photo: string) => any) => {
    this.fireAuth.signInWithEmailAndPassword(email, password).then(result => {
        firebase.database().ref('Users/' + result.uid).once('value', snapshot => {
            loginCallback({
                name: snapshot.val().name,
                gender: snapshot.val().gender,
                photo: snapshot.val().avatar
            });
        });
    });
}

Edit: I reviewed the Firebase Documentation (https://firebase.google.com/docs/database/web/read-and-write#read_data_once), and found another mistake.

firebase.database().ref('Users/' + result.uid).once('value', snapshot => {

should be:

firebase.database().ref('Users/' + result.uid).once('value').then(snapshot => {

Answer 3

Answer №2

The function nested within once in your inner function doesn't return the login function itself, but an object instead. Make sure that the outermost function returns a promise.

Consider revising with the following code snippet:

login = (email: string, password: string): Promise<any> => {
    // Add return statement here
    return this.fireAuth.signInWithEmailAndPassword(email, password).then(res => {
        // Include return for database call 
        return firebase.database().ref('Users/' + res.uid).once('value', snapshot => {
            return {
                name: snapshot.val().name,
                gender: snapshot.val().gender,
                photo: snapshot.val().avatar
            };
        });
    });
}

Answer 4

The function nested within once in your inner function doesn't return the login function itself, but an object instead. Make sure that the outermost function returns a promise.

Consider revising with the following code snippet:

login = (email: string, password: string): Promise<any> => {
    // Add return statement here
    return this.fireAuth.signInWithEmailAndPassword(email, password).then(res => {
        // Include return for database call 
        return firebase.database().ref('Users/' + res.uid).once('value', snapshot => {
            return {
                name: snapshot.val().name,
                gender: snapshot.val().gender,
                photo: snapshot.val().avatar
            };
        });
    });
}

Retrieve TypeScript object after successful login with Firebase

Answer №1

Answer №2

Similar questions

Animating Text Changes with JavaScript and jQuery

AngularJS: Implementing a toggle click function for a list of items within an iframe

Establishing a secure Firebase connection with several Node.js instances via an AWS/ALB load balancer and Nginx

What is the best way to set up the login page and logged-in homepage using Node, Express, and Passport with the "/" route?

`There is a problem of callbacks executing twice upon loading AJAX content`

The try/catch block proves ineffective at handling a socket connection exception

Exploring the World of Angular JS Services

Locate every instance where two arrays are compared in TypeScript

In JavaScript, the function will return a different object if the string in an array matches the

Experiencing trouble accessing a property in TypeScript

Using template literals with Optional chaining in Javascript does not yield the expected results

Employing jQuery, how can one assign attributes to appended HTML and store them

Is the Order of a JSON Array Dependable?

Trouble with Metro UI Library: CSS not loading properly

Can someone help me extract a specific portion and display the dimensions of the area?

The error message received is: "mongoose TypeError: Schema is not defined as

Using Selenium WebDriver and JavaScript: Enabling Chrome to Download Multiple Files at Once

Should tabs be closed or redirected after successful authentication with Google?

What sets xhr.response apart from xhr.responseText in XMLHttpRequest?

How can we efficiently retrieve newly submitted JSON data using AJAX?