Autenticación con correo y contraseña en Ionic con Firebase – Parte 2

2017-05-24T18:43:28-04:00

[…] En este momento ya tenemos todo listo en la consola de Firebase, asi que ya podemos empezar a escribir el código necesario para registrar y autenticar usuarios en nuestra aplicación, lo cual vamos a ver en la Parte 2. […]

2017-06-09T19:18:00-04:00

Tengo una duda, para un proyecto que puede escalar a un nivel alto de usuarios, es conveniente usar firebase?

2017-06-09T19:47:17-04:00

Si, siempre y cuando tengas el presupuesto necesario (como mismo sucede en el caso de AWS y Azure), con el plan gratis tienes algunas cuotas con las que puedes empezar, en dependencia del volumen que vaya teniendo tu proyecto vas a necesitar más capacidad de procesamiento, aquí puedes ver los precios de los distintos planes https://firebase.google.com/pricing/
Tomado de la página de inicio de Firebase: “Firebase is built on Google infrastructure and scales automatically, for even the largest apps”.

2017-06-15T01:26:53-04:00

Hola excelente tutorial y te lo agradezco muchisimo ahora solo una duda al querer compilar la app o subirla a ionic view me manda un error en el promise-polyfill.js segun entiendo podrias ayudarme

2017-06-15T22:39:04-04:00

Hola Ruben, gracias por tu comentario, realmente necesito más detalles para poder tratar de ayudarte, ¿exactamente cuándo te da el error? ¿cuando ejecutas ionic upload? o ¿cuando estás ejecutando ya la aplicación dentro de Ionic View?

2017-06-27T16:52:20-04:00

Hola Ruben, por si acaso si no has resuelto el error, me acaba de suceder lo mismo tratando de ejecutar la aplicación en el emulador de Android y lo solucioné instalando: npm install promise-polyfill –save-exact

2017-06-16T00:04:03-04:00

Hola, gracias por el tutorial, espero que pronto agregues más contenido y estoy en la espera de la autenticación con face y google, también me surgió la duda de qué pasa si un usuario no recuerda su contraseña, cómo la podría recuperar o en su caso reestablecer y también cuál es el procedimiento para salir de su sesión (deslogearse).

soy principiante y te agradezco mucho.

Saludos!!!

2017-06-16T12:30:58-04:00

Hola, me alegra que te sea útil el contenido, el API de Firebase te permite implementar cambio de contraseña, resetear contraseña y hasta enviar códigos de confirmación para validar el usuario cuando se registra, poco a poco voy a ir publicando sobre esos temas al igual que autenticación con Facebook. Saludos.

2017-07-12T00:59:49-04:00

Buenas noches, como podría validar al iniciar la aplicación si el usuario se encuentra autenticado o no y redireccionar el rootpage. saludos

2017-07-13T00:11:23-04:00

Hola Anibal, acabo de acualizar este post adicionando una sección llamada “Bonus” en la cual explico cómo hacer lo que me pides y además cómo cerrar sesión. Saludos.

2017-07-24T19:53:26-04:00

hola geyKey excelente tutorial , muy bien explicado, quisiera ver si me puieras ayudar con este error :
[WARN] Error occurred during command execution from a CLI plugin
(@ionic/cli-plugin-cordova). Your plugins may be out of date.
Error: ./node_modules/firebase/utils/promise.js
Module not found: Error: Can’t resolve ‘promise-polyfill’ in ‘C:\xampp\htdocs\ionicFire\no de_modules\firebase\utils’
resolve ‘promise-polyfill’ in ‘C:\xampp\htdocs\ionicFire\node_modules\firebase\utils’
Parsed request is a module
using description file: C:\xampp\htdocs\ionicFire\node_modules\firebase\package.json (re lative path: ./utils)
Field ‘browser’ doesn’t contain a valid alias configuration

ya instale la ultima version pero aun asi no me permite correrlo en mi telefono android, si pudieras ayudarme te lo agradeceria, saludos

2017-07-25T00:47:21-04:00

Hola Eduard, gracias por tu comentario, yo tuve un error similar ejecutando la app en el emulador de Android y lo solucioné instalando: npm install promise-polyfill –save-exact
Pruébalo y dime cómo te va. Saludos.

2017-07-25T15:56:20-04:00

me fue muy bien muchisimas gracias, ahora que termine la app y quiero pasarlo a mi telefono me marca un error en el formulario signIn.html y signUp.html , lo que pasa es que me pide que el el form cree algo como : [FormGroup]=”myForm” donde myForm comunmente es quien contiene la validacion y los datos , nose como lo manejes tu con #signInForm=”ngModel”, agradecería si pudieras ayudarme en esta duda.

2017-07-25T16:14:50-04:00

Puedes poner tu código de una de esas páginas (.html y .ts) en algun lugar done lo pueda ver? quizás en https://gist.github.com/ para poder tener mejor idea? Saludos.

2017-07-25T19:00:25-04:00

este es el link del archivo de registro : https://gist.github.com/anonymous/b905fb7ca8864e2763cdb336dfd42676

lo que quiero saber es cual es la diferencia de usar [FormGroup]=”myForm” en el archivo .html y el que tu tienes
que es :#signInForm=”ngForm”, ya lo hice como tu y me funciona perfectamente , pero estoy creando una aplicacion de un proyecto y veo que cuando pasan mas de dos objetos es decir email, nombre, password,apellido usan un objeto myfor de tipo FormGroup cuando se envia la informacion o se ejecuta el formulario, soy principiante como puedes ver no tengo mucho tiempo en esto por eso las dudas , lo que quiero agregar mas datos al formulario signUp.html aparte de correo y password como nombre y apellido para que se registre usando el mismo procedimiento de aqui y que se guarden en la base de datos fireBase pero nose como hacerle y agradeceria que pudieras ayudarme.

a esto me refiero que quiero masomenos tratar de hace signIn.ts

export class SigninPage {

userModel : UserModel;
myForm :FormGroup;
constructor(public navCtrl: NavController,
public navParams: NavParams,
public loadingCtrl : LoadingController,
public alertCtrl : AlertController,
public authService : AuthService,
public formBuildier: FormBuilder
) {

this.userModel =new UserModel();
this.myForm = formBuilder.group({
email :[‘ ‘,Validators.required],
password :[‘ ‘,Validators.required],
apellido : [‘ ‘, Validators.required]

})

}

2017-07-25T21:33:29-04:00

Ok ya veo te problema, mira lo que pasa es que son dos maneras distintas de implementar formularios en Angular, o lo haces como yo hice que es utilizando ngForms (para formularios sencillos como el mío) o con FormBuilder que es como quieres hacerlo tu ahora, en este caso lo que te pasa es que a la vista (html) le faltan cosas, una de las cosas que te falta, por ejemplo, es que cuando utilizas FormBuilder a tus inputs no le pueden faltar el atributo formControlName con el nombre de la propiedad que utilizaste cuando construiste el formulario por ejemplo “apellido”, “email” o “password”, entre otras cosas…
Mira hice un versión de mi “signin” utilizando FormBuilder (adicionando además otro campo “firstName”) para que puedas comparar mejor una con otra y veas las diferencias:

	<ion-header>
	<ion-navbar hideBackButton="true">
	<ion-title>Iniciar Sesión</ion-title>
	</ion-navbar>
	</ion-header>

	<ion-content>
	<form [formGroup]="signInForm">
	<ion-list>
	<ion-item>
	<ion-label stacked>Correo electrónico</ion-label>
	<ion-input type="email" formControlName="email" autocorrect="off" autocapitalize="none"></ion-input>
	</ion-item>

	<ion-item>
	<ion-label stacked>Contraseña</ion-label>
	<ion-input type="password" formControlName="password"></ion-input>
	</ion-item>

	<ion-item>
	<ion-label stacked>Nombre</ion-label>
	<ion-input type="text" formControlName="firstName" autocorrect="off"></ion-input>
	</ion-item>

	<div padding-left padding-right padding-top>
	<button ion-button [disabled]="!signInForm.valid" (click)="signIn()" block>Entrar</button>
	</div>
	</ion-list>
	</form>
	</ion-content>

view raw

signin-formbuilder.html

hosted with ❤ by GitHub

	import { Component } from '@angular/core';
	import { NavController, LoadingController, AlertController } from 'ionic-angular';
	import { Validators, FormBuilder, FormGroup } from '@angular/forms';

	import { AuthService } from '../../providers/auth-service';

	import { UserModel } from '../../models/user-model';

	import { SignUpPage } from '../signup/signup';
	import { HomePage } from '../home/home';

	@Component({
	selector: 'page-signin',
	templateUrl: 'signin.html'
	})
	export class SignInPage {
	private signInForm: FormGroup;

	constructor(
	public navCtrl: NavController,
	public loadingCtrl: LoadingController,
	public alertCtrl: AlertController,
	public authService: AuthService,
	private formBuilder: FormBuilder) {
	this.signInForm = this.formBuilder.group({
	email: ['', Validators.compose([Validators.required, Validators.pattern('[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$')])],
	password: ['', Validators.compose([Validators.required, Validators.minLength(6)])],
	firstName: ['', Validators.required]
	});
	}

	signIn() {
	let loading = this.loadingCtrl.create({
	content: 'Iniciando sesión. Por favor, espere…'
	});
	loading.present();

	let userModel = new UserModel();
	userModel.email = this.signInForm.value.email;
	userModel.password = this.signInForm.value.email;
	userModel.firtName = this.signInForm.value.firtName;

	this.authService.signInWithEmailAndPassword(userModel).then(result => {
	loading.dismiss();

	this.navCtrl.setRoot(HomePage);
	}).catch(error => {
	loading.dismiss();

	console.log(error);
	this.alert('Error', 'Ha ocurrido un error inesperado. Por favor intente nuevamente.');
	});
	}

	signUp() {
	this.navCtrl.push(SignUpPage);
	}

	alert(title: string, message: string) {
	let alert = this.alertCtrl.create({
	title: title,
	subTitle: message,
	buttons: ['OK']
	});
	alert.present();
	}
	}

view raw

signin-formbuilder.ts

hosted with ❤ by GitHub

	export class UserModel {
	email: string;
	password: string;
	firtName: string;
	}

view raw

user-model-formbuilder.ts

hosted with ❤ by GitHub

Mira en este post (en inglés) puedes ver 3 ejemplos distintos sobre cómo hacer formularios con sus ventanjas y desventajas:

https://ionicframework.com/docs/developer-resources/forms/

2017-07-26T11:23:50-04:00

Muchas Gracias amigo , ahora veo las diferencias , gracias por compartir tu tiempo y su conocimiento , ya lo probe y tube que agregar un objeto en el archivo signUp.ts puesto que no me dejaria usar let userMode=UserModel si no lo tengo declarado, ahora no me marca error ni nada solo que al correr el programa se pone la pantalla en blanco y ahi se queda, creo que se me ha deber escapado algo que al correr el signIn.html lo lo reconoce, Gracias.

2017-07-26T18:28:22-04:00

este es el codigo que use : https://gist.github.com/anonymous/9247a87dad642be2614ce9c593c0be9d
esta signUp.ts , .html , app.component.ts, module.ts , user-model.ts ,auth-service pero aun asi me sigue apareciendo la pantalla de mi telefono y el servidor de ionic en blanco , agradeceria si me podrias asesorar por que pasa esto. investigue esto y se dice que es por que paso de tiempo que necesitaba, cuando use el otro formulario si me funciono, pero ahora tube este problema

2017-07-26T23:37:40-04:00

Amigo Geykel perdon por andar enfadando tanto esque aun me surgen dudas jajaja, ya por fin pude auntenticar con mas de 2 datos pero mi duda ahora es ¿Donde queda la demas informacion y donde la puedo ver en mi proyecto firebase? no me manda ningun error ni nada ya hice pruebas y funciona pero nose donde queda la demas informacion en el caso de que demas usuarios usuarian la aplicacion y yo como administrador quiera verla.

2017-07-28T17:45:08-04:00

Hola Eduard, el problema es que en el proveedor “authService” estós utilizando métodos del API de autenticación de Firebase, por ejemplo para crear el usuario utilizas “createUserWithEmailAndPassword” del objeto “auth” el cual recibe el “username” y el “password” y te crea el usuario con esos datos, el usuario en Firebase “sólo” tiene esos datos, si deseas poner otros datos (como nombres y apellidos) tienes que preparar un lugar para guardarlos y relacionarlos al usuario, por ejemplo puedes utilizar el servicio de base de datos de Firebase, ahi puedes crear una colección que se llame “users” y con el “uid” del usuario que recien creaste puedes crear una entrada en esa colección con los demás campos que quieras. El próximo post que voy a escribir está medio relacionado con esto, pero no he tenido mucho tiempo en estos días. Saludos.

2017-07-28T16:41:14-04:00

Hola amigo, muchas gracias por tu post… estarás nombrado en el resultado de mi tesis jajajajaj… compañero tengo una tremenda duda, como puedo hacer que el usuario se mantenga logueado la próxima vez que inicie sesión?

2017-07-28T17:02:39-04:00

Hola Gonzalo, muchas gracias, si te fijas en este mismo post verás que hay una sección casi al final que se llama “Bonus” donde tienes lo que andas buscando y además cerrar sesión.

2017-07-29T16:09:43-04:00

Muy bien amigo geykel pues muchas gracias por todo y si estare pendiente a los siguientes posts muy interesantes e utiles, saludos.

2017-09-25T01:21:37-04:00

Hola Geykel, quiero poner el mail del usuario en otra vista por ejemplo en home en el html ¿como hago para tomar el dato?

2017-09-25T16:47:01-04:00

Hola Ezequiel, en la vista donde quieras mostrar el email puedes utilizar (inyectar) el proveedor AuthService y utilizar la propiedad “authenticated” para verificar si el usuario está autenticado o no, si está autenticado entonces puedes utilizar la propiedad user la cual a su vez tiene una propiedad email. Espero te ayude, saludos.

2017-09-27T20:50:48-04:00

Gracias Geykel, me sirvió un saludo!

2017-09-30T02:21:44-04:00

Hola Geykel, otra pregunta, quiero poner el botón de volver como esta en la vista signup en home por ejemplo, ¿como hago? porque busque en el código y no lo veo

2018-11-25T22:23:36-05:00

Hola, que buen post, tengo el siguiente error:

——————————
Typescript Error
Cannot find module ‘firebase/app’.
—————————–

es cuando das esa ruta en la línea 4 del archivo “auth-service.ts”, estas complemanete seguro que esa es la ruta? debo hacer algo adicional?

gracias!!

2018-11-25T23:09:54-05:00

Hola Camilo, lamentablemente este artículo fue escrito hace más de 1 año por lo que es muy probable que el API de Firebase haya cambiando desde entonces, tienes que ver cuál versión te está instalando npm y ver qué cambios debes hacer basado en la versión que tienes. Saludos.

2018-11-25T23:03:30-05:00

Otro error es el siguiente:

Typescript Error
Module ‘”/node_modules/firebase/index”‘ has no exported member ‘Promise’.

gracias

2018-11-25T23:11:13-05:00

Este error debe ser por la misma razón que te comenté en tu comentario anterior. Saludos.

	import { BrowserModule } from '@angular/platform-browser';
	import { ErrorHandler, NgModule } from '@angular/core';
	import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
	import { SplashScreen } from '@ionic-native/splash-screen';
	import { StatusBar } from '@ionic-native/status-bar';

	import { AngularFireModule } from 'angularfire2';
	import { AngularFireAuthModule } from 'angularfire2/auth';

	import { MyApp } from './app.component';
	import { HomePage } from '../pages/home/home';
	import { SignInPage } from '../pages/signin/signin';
	import { SignUpPage } from '../pages/signup/signup';

	export const firebaseConfig = {
	apiKey: "AIzaSyA3jE_yGw17BSReFk_QMo7fuf4fSiKFW8k",
	authDomain: "ionfire-df87b.firebaseapp.com",
	databaseURL: "https://ionfire-df87b.firebaseio.com",
	projectId: "ionfire-df87b",
	storageBucket: "ionfire-df87b.appspot.com",
	messagingSenderId: "783410523738"
	};

	@NgModule({
	declarations: [
	MyApp,
	HomePage,
	SignInPage,
	SignUpPage
	],
	imports: [
	BrowserModule,
	IonicModule.forRoot(MyApp),
	AngularFireModule.initializeApp(firebaseConfig),
	AngularFireAuthModule
	],
	bootstrap: [IonicApp],
	entryComponents: [
	MyApp,
	HomePage,
	SignInPage,
	SignUpPage
	],
	providers: [
	StatusBar,
	SplashScreen,
	{ provide: ErrorHandler, useClass: IonicErrorHandler }
	]
	})
	export class AppModule { }

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

	import { AngularFireAuth } from 'angularfire2/auth';
	import { User, Promise } from 'firebase/app';

	import { UserModel } from '../models/user-model';

	@Injectable()
	export class AuthService {
	user: User;

	constructor(public angularFireAuth: AngularFireAuth) {
	angularFireAuth.authState.subscribe((user: User) => {
	this.user = user;
	});
	}

	get authenticated(): boolean {
	return this.user != null;
	}

	signInWithEmailAndPassword(userModel: UserModel): Promise<any> {
	return this.angularFireAuth.auth.signInWithEmailAndPassword(userModel.email, userModel.password);
	}

	createUserWithEmailAndPassword(userModel: UserModel): Promise<any> {
	return this.angularFireAuth.auth.createUserWithEmailAndPassword(userModel.email, userModel.password);
	}

	signOut(): Promise<any> {
	return this.angularFireAuth.auth.signOut();
	}
	}

	import { BrowserModule } from '@angular/platform-browser';
	import { ErrorHandler, NgModule } from '@angular/core';
	import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
	import { SplashScreen } from '@ionic-native/splash-screen';
	import { StatusBar } from '@ionic-native/status-bar';

	import { AngularFireModule } from 'angularfire2';
	import { AngularFireAuthModule } from 'angularfire2/auth';

	import { AuthService } from '../providers/auth-service';

	import { MyApp } from './app.component';
	import { HomePage } from '../pages/home/home';
	import { SignInPage } from '../pages/signin/signin';
	import { SignUpPage } from '../pages/signup/signup';

	export const firebaseConfig = {
	apiKey: "AIzaSyA3jE_yGw17BSReFk_QMo7fuf4fSiKFW8k",
	authDomain: "ionfire-df87b.firebaseapp.com",
	databaseURL: "https://ionfire-df87b.firebaseio.com",
	projectId: "ionfire-df87b",
	storageBucket: "ionfire-df87b.appspot.com",
	messagingSenderId: "783410523738"
	};

	@NgModule({
	declarations: [
	MyApp,
	HomePage,
	SignInPage,
	SignUpPage
	],
	imports: [
	BrowserModule,
	IonicModule.forRoot(MyApp),
	AngularFireModule.initializeApp(firebaseConfig),
	AngularFireAuthModule
	],
	bootstrap: [IonicApp],
	entryComponents: [
	MyApp,
	HomePage,
	SignInPage,
	SignUpPage
	],
	providers: [
	StatusBar,
	SplashScreen,
	{ provide: ErrorHandler, useClass: IonicErrorHandler },
	AuthService
	]
	})
	export class AppModule { }

	import { Component } from '@angular/core';
	import { Platform } from 'ionic-angular';
	import { StatusBar } from '@ionic-native/status-bar';
	import { SplashScreen } from '@ionic-native/splash-screen';

	import { AuthService } from '../providers/auth-service';

	import { SignInPage } from '../pages/signin/signin';
	import { HomePage } from '../pages/home/home';

	@Component({
	templateUrl: 'app.html'
	})
	export class MyApp {
	rootPage: any = SignInPage;

	constructor(
	platform: Platform,
	statusBar: StatusBar,
	splashScreen: SplashScreen,
	authService: AuthService) {
	if (authService.authenticated) {
	this.rootPage = SignInPage;
	} else {
	this.rootPage = HomePage;
	}

	platform.ready().then(() => {
	statusBar.styleDefault();
	splashScreen.hide();
	});
	}
	}

	<ion-header>
	<ion-navbar>
	<ion-title>
	IonFire
	</ion-title>

	<ion-buttons end>
	<button ion-button icon-only (click)="signOut()">
	<ion-icon name="log-out"></ion-icon>
	</button>
	</ion-buttons>
	</ion-navbar>
	</ion-header>

	<ion-content padding>
	<p>
	Bienvenido a IonFire.
	</p>
	</ion-content>

Autenticación con correo y contraseña en Ionic con Firebase – Parte 2

AngularFire2

Modelo

Proveedor de autenticación

Registrando usuarios

Iniciando sesión

Bonus

Entrar directamente si el usuario ya está autenticado

Cerrar sesión

Conclusiones

31 thoughts on “Autenticación con correo y contraseña en Ionic con Firebase – Parte 2”

Leave a reply to geykel Cancel reply

	<ion-header>
	<ion-navbar>
	<ion-title>Registrarse</ion-title>
	</ion-navbar>
	</ion-header>

	<ion-content>
	<form #signUpForm="ngForm" (submit)="signUp()">
	<ion-list>
	<ion-item>
	<ion-label stacked>Correo electrónico</ion-label>
	<ion-input [(ngModel)]="userModel.email" type="email" autocorrect="off" autocapitalize="none" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$"
	required></ion-input>
	</ion-item>

	<ion-item>
	<ion-label stacked>Contraseña</ion-label>
	<ion-input [(ngModel)]="userModel.password" type="password" name="password" required minlength="6"></ion-input>
	</ion-item>

	<div padding-left padding-right padding-top>
	<button ion-button [disabled]="!signUpForm.form.valid" block>Registrarse</button>
	</div>
	</ion-list>
	</form>
	</ion-content>

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

	import { AuthService } from '../../providers/auth-service';

	import { SignInPage } from '../signin/signin';

	@Component({
	selector: 'page-home',
	templateUrl: 'home.html'
	})
	export class HomePage {

	constructor(
	public navCtrl: NavController,
	public authService: AuthService) {
	}

	signOut() {
	this.authService.signOut();
	this.navCtrl.setRoot(SignInPage);
	}
	}