Making an Observable from a callback

Question

I have an auth guard that needs an asynchronous response true/false when the site is visited and the user is already logged in.

I'm using Firebase's onAuthStateChanged (link to docs) and it uses a callback function. How can I turn my isLoggedIn() method into something that can return Observable<boolean>?

Typscript:

get isLoggedIn(): Observable<boolean> {

    // want something like this:
    return Observable.fromCallback(firebase.auth().onAuthStateChanged).map(user => !!user);

    // this returns () => boolean, but I need a promise or observable
    return firebase
      .auth()
      .onAuthStateChanged((user) => {
        return !!user;
      });

}

score 26 · Accepted Answer · edited Jan 10 '19 at 19:21

26

You can do it like this.

get isLoggedIn(): Observable<boolean> {

  // want something like this:
  return Observable.create(
    observer => firebase
        .auth()
        .onAuthStateChanged((user) => {
          observer.next(!!user)
        });
    );
}

edited Jan 10 '19 at 19:21

OJ7

307
1
2
13

answered Mar 31 '17 at 02:16

rohit anand

286
3
5

1

Beware that this will add a listener with each property access/subscription and that said listener will not be removed. The arrow function passed to `create` should return the result of the `onAuthStateChanged` (which is a function that removes the listener). Doing so will see the listener removed when the observable is unsubscribed. – cartant Mar 31 '17 at 04:40
1

@cartant or rohit would you mind add an example of subscribing / unsubscribing to make this answer a bit more thorough? – Nick Jonas Mar 31 '17 at 05:13
`onAuthStateChanged()` returns the unsubscribe function so you just need to remove the curly braces in the subscription function when you create the Observable: `Observable.create(observer => firebase.auth().onAuthStateChanged(user => observer.next(!!user)))`. – Jaye Renzo Montejo Nov 08 '17 at 11:26
5

[bindCallback](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-bindNodeCallback) is the modern approach for the problem since RxJs 6. Checkout [these examples](https://rxjs-dev.firebaseapp.com/api/index/function/bindCallback#convert-jquery-s-getjson-to-an-observable-api). – Alex Klaus Jun 25 '19 at 01:14

score 15 · Answer 2 · answered Jan 29 '19 at 16:11

there is one more way of doing this using bindCallback from rxjs/observable/bindCallback

const observable=bindCallback(functionWhichExpectsCallBack)

e.g

function foo(value, callback) {
  callback(value);
}
//converts callback to observable
    const observable = bindCallback(foo); 
    observable(1)
      .subscribe(console.log);

score 7 · Answer 3 · answered Dec 23 '20 at 15:06

7

Note: bindCallback and Observable.create were deprecated,
you could use new Observable instead:

...
return new Observable((subscriber) => {
  firebase
    .auth()
    .onAuthStateChanged((user) => {
      subscriber.next(user);
    })
}

answered Dec 23 '20 at 15:06

am0wa

7,724
3
38
33

3

`bindCallback` is not deprecated https://rxjs-dev.firebaseapp.com/api/index/function/bindCallback – daisura99 Jan 12 '21 at 17:20

Making an Observable from a callback

3 Answers3

Linked