How to avoid "this.fireAuth.auth.createUserWithEmailAndPassword is not a function" when using akita-ng-fire

Question

I've just followed most of the akita-ng-fire example + doc to setup the auth in my ionic project.

I've installed @angular/fire(6.0.2), akita-ng-fire(1.5.13), firebase(7.19.1), angular lib(10.0.0), ionic libs(5.0.0).

Here is my model:

export interface Profile {
  displayName: string;
  photoURL: string;
  organizationIds: string[];
}

export function createProfile(profile: Partial<Profile>): Profile {
  return {
    displayName: '',
    photoURL: '',
    organizationIds: [],
    ...profile,
  };
}

Here is my query:

import { Injectable } from '@angular/core';
import { Query } from '@datorama/akita';
import { AuthStore, AuthState } from './auth.store';

@Injectable({ providedIn: 'root' })
export class AuthQuery extends Query<AuthState> {
  profile$ = this.select('profile');
  userId$ = this.select((state) => state.profile.id);
  roles$ = this.select('roles');
  isLoggedIn$ = this.select((state) => !!state.profile); // check section "roles" below

  constructor(protected store: AuthStore) {
    super(store);
  }
}

Here is my store:

import { Injectable } from '@angular/core';
import {  Profile } from './auth.model';
import {  Store, StoreConfig } from '@datorama/akita';
import { FireAuthState, RoleState } from 'akita-ng-fire';


export interface AuthState extends FireAuthState<Profile>, RoleState {}

const initialState: AuthState = {
  uid: null,
  profile: null,
  roles: {},
  loading: false,
  emailVerified: false,
};

@Injectable({ providedIn: 'root' })
@StoreConfig({ name: 'auth' })
export class AuthStore extends Store<AuthState> {
  constructor() {
    super(initialState);
  }
}

And here is my service:

import { Injectable } from '@angular/core';
import { AuthStore, AuthState } from './auth.store';
import { CollectionConfig, FireAuthService } from 'akita-ng-fire';
import { createProfile } from './auth.model';

@Injectable({ providedIn: 'root' })
@CollectionConfig({ path: 'users' })
export class AuthService extends FireAuthService<AuthState> {
  formatFromFirestore = createProfile;

  constructor(store: AuthStore) {
    super(store);
  }

  onCreate() {
    console.log('Logged from onCreate hook');
  }

  onDelete() {
    console.log('Logged from onDelete hook');
  }

  onUpdate() {
    console.log('Logged from onUpdate hook');
  }

  onSignup() {
    console.log('Logged from onSignup hook');
  }

  onSignin() {
    console.log('Logged from onSignin hook');
  }

  onSignout() {
    console.log('You have been signed out. Logged from onSignout hook');
  }
}

I've set the environment's firebase + initialized firebase in my app.module.

But, when in my app, I'm trying to make a call to the service:

  async doLogin() {
    await this.authService.signup('aaa@bbb.com', 'xxxyyyzzz');
    await this.authService.signin('aaa@bbb.com', 'xxxyyyzzz');
  }

I get this error in chrome dev tools:

[WDS] Live Reloading enabled. core.js:4197 ERROR Error: Uncaught (in promise): TypeError: this.fireAuth.auth.createUserWithEmailAndPassword is not a function TypeError: this.fireAuth.auth.createUserWithEmailAndPassword is not a function
    at AuthService.<anonymous> (akita-ng-fire.js:1181)
    at Generator.next (<anonymous>)
    at tslib.es6.js:74
    at new ZoneAwarePromise (zone-evergreen.js:960)
    at __awaiter (tslib.es6.js:70)
    at AuthService.signup (akita-ng-fire.js:1179)
    at AppComponent.<anonymous> (app.component.ts:80)
    at Generator.next (<anonymous>)
    at tslib.es6.js:74
    at new ZoneAwarePromise (zone-evergreen.js:960)
    at resolvePromise (zone-evergreen.js:798)
    at zone-evergreen.js:705
    at rejected (tslib.es6.js:72)
    at ZoneDelegate.invoke (zone-evergreen.js:364)
    at Object.onInvoke (core.js:27436)
    at ZoneDelegate.invoke (zone-evergreen.js:363)
    at Zone.run (zone-evergreen.js:123)
    at zone-evergreen.js:857
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:27424)

What could I've missed? What to do to initialize auth? I'm looking everywhere, but I can't find what I've missed.

I've dumped the this.authService before calling it, I'm seing a fireAuth property, but no auth below. Is there some kind of incompatibility?

How to avoid "this.fireAuth.auth.createUserWithEmailAndPassword is not a function" when using akita-ng-fire

0 Answers0