Ionic + firebase authentication with email/password and social accounts

Ionic Framework ionic-v3
1

Hello everybody !

I’m french, i’m sorry if my english is not very understandable.
I have a problem with Ionic authentication. I have a gmail account and a twitter account using the same email and password.

First, i login with google and no problem, the user is well created in the database.
Then, when i try to login with twitter account or manually entering Email and Password, I have some errors.
With twitter account, i have the following error “An account already exists with the same email addr…ng a provider associated with this email address” and with Email/Password, the error is “The password is invalid or the user does not have a password”.

Is it possible to solve this problem ?

Thanks in advance

<ion-header>

  <ion-navbar color="dark">
    <ion-title>Connexion</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <form [formGroup]="form" (ngSubmit)="login()" novalidate>
    <ion-item>
      <ion-label floating>Email</ion-label>
      <ion-input type="text" formControlName="email"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label floating>Mot de passe</ion-label>
      <ion-input type="password" formControlName="password"></ion-input>
    </ion-item>

    <ion-item>
      <h2 class="text-center">Ou se connecter avec :</h2>
      <div class="social-media-login">
        <img class="social-media-icon" src="assets/icon/icon-google.png" (click)="socialLogin('google')">
        <img class="social-media-icon" src="assets/icon/icon-facebook.png" (click)="socialLogin('facebook')">
        <img class="social-media-icon" src="assets/icon/icon-twitter.png" (click)="socialLogin('twitter')">
      </div>
    </ion-item>

    <button ion-button type="submit" [disabled]="!form.valid" block>Se connecter</button>
    <button ion-button secondary block (click)="goRegister()" color="secondary">S'inscrire</button>
  </form>
</ion-content>

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

import {RegisterPage} from "../register/register";
import {LoginService} from "./login-service";
import {LoginForm} from "../../models/forms/login-form";
import {FormGroup} from "@angular/forms";

/**
 * Generated class for the LoginPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {
  private form : FormGroup = LoginForm.buildForm();

  constructor(public navCtrl: NavController, public navParams: NavParams, private loginService: LoginService) {

  }

  login(){
    this.loginService.login(this.form.value.email, this.form.value.password);
  }

  socialLogin(type) {
    this.loginService.socialLogin(type);
  }

  goRegister() : void{
    this.navCtrl.push(RegisterPage);
  }
}

import { Injectable } from '@angular/core';

import { AngularFireAuth } from "angularfire2/auth";
import firebase from "firebase";


@Injectable()
export class LoginService {
    private TYPE_LOGIN;

    constructor(private fire : AngularFireAuth) {

    }

    login(email, password){
        var credential = firebase.auth.EmailAuthProvider.credential(email, password);

        this.fire.auth.signInWithCredential(credential)
            .then(res => {
                this.TYPE_LOGIN = "default";
                console.log(res);
            })
            .catch(e => {
                console.log(e);
            });
    }

    socialLogin(type) : any {
        switch(type){
            case 'google':
                this.loginWithGoogle();
            case 'facebook':
                this.loginWithFacebook();
            case 'twitter':
                this.loginWithTwitter();
            default:
                return null;
        }
    }

    private loginWithGoogle() {
        this.fire.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider())
            .then(res => {
                this.TYPE_LOGIN = "google";
                console.log(res);
            })
            .catch(e => {
                console.log(e);
            });
    }

    private loginWithFacebook(){
        this.fire.auth.signInWithPopup(new firebase.auth.FacebookAuthProvider())
            .then(res => {
                this.TYPE_LOGIN = "facebook";
                console.log(res);
            })
            .catch(e => {
                console.log(e);
            });
    }

    private loginWithTwitter(){
        this.fire.auth.signInWithPopup(new firebase.auth.TwitterAuthProvider())
            .then(res => {
                this.TYPE_LOGIN = "twitter";
                console.log(res);
            })
            .catch(e => {
                console.log(e);
            });
    }
}