Ionic 3 Login With Firebase

Steps: 

create the ionic project run the command 

$ionic start blank myapp --type=ionic-angular

then open the command prompt  change the directory of your ionic project directory the install the some modules are here  down see this

Go To The Firebase Console -->   Authentication menu ---> SignIn-method tab

 -->Edit  -> Enable Allow users Only (First Toggle Button)  ---> Save

Install NPM Modules:

installed this module open the command prompt  run this command

npm i rxjs@6 rxjs-compat@6 promise-polyfill --save (or)  npm install rxjs@6.0.0 --save

npm install firebase  angularfire2 --save

Import Your Modules In App.module.ts And Yourfile.Ts

App.Module.ts

import {AngularFireModule} from 'angularfire2';

import {AngularFireDatabaseModule,AngularFireDatabase} from 'angularfire2/database';

import {AngularFireAuthModule} from 'angularfire2/auth';
 imports: [
    BrowserModule,
    AngularFireAuthModule,
    AngularFireDatabaseModule,
    AngularFireModule.initializeApp(firebaseConfig),
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
     SocialSharing,
    SplashScreen,
    CallNumber,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})

Imports:

AngularFireModule.initializeApp(firebaseConfig),

    AngularFireAuthModule,

   AngularFireDatabaseModule

YourFileName.TS:

  iimport { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import {AngularFireModule} from 'angularfire2';
import {AngularFireAuthModule} from 'angularfire2/auth';
import {AngularFireDatabaseModule}from 'angularfire2/database';
import { CallNumber } from '@ionic-native/call-number';
import { Geolocation } from '@ionic-native/geolocation';
import { NativeGeocoder, NativeGeocoderReverseResult, NativeGeocoderForwardResult, NativeGeocoderOptions } from '@ionic-native/native-geocoder';
import { Diagnostic } from '@ionic-native/diagnostic';
import { SocialSharing } from '@ionic-native/social-sharing';

Codes:

Register Firebase Authentication:

// form validation method

Register(formData){

if(!formData.valid){

this.RegisterForm.get(' Fname ').markAsDirty();

this.RegisterForm.get(' Lname ').markAsDirty();

this.RegisterForm.get(' Username ').markAsDirty();

this.RegisterForm.get(' Email ').markAsDirty();

this.RegisterForm.get(' Password ').markAsDirty();

}else{

// here store the firebase database  

this.fdb.list(" /register/ ").push({

Fname:formData.value.Fname,

Lname:formData.value.Lname,

Username:formData.value.Username,

Email:formData.value.Email,

Password:formData.value.Password

});

// Your Email and Passwords  are Stored in Firebase Signin Method

return this.ath.auth.createUserWithEmailAndPassword(formData.value.Email,formData.value.Password).then(() => {

this.RegisterForm.reset();

let toast = this.toast.create({

      message:  'Register SuccessFully ',

      position: ' bottom ',

      duration: 4000

    });

    toast.present();

})

}

}

Login:

Login(formData){

if(!formData.valid){

// form validation method

this.LoginForm.get('Email').markAsDirty();

this.LoginForm.get('Password').markAsDirty();

}else{

// Login Authentication with Firebase database

return this.ath.auth.signInWithEmailAndPassword(formData.value.Email,formData.value.Password).then(()=>{

this.navCtrl.setRoot(HomePage)

},error =>{

let toast=this.toast.create({

message: ' UserName or Password Is Wrong ',

      position: ' bottom ',

      duration: 4000

});

toast.present();

})

}

}

Signout:

signOut() {  return this.ath.auth.signOut();}