MxAuth

Una librería para hacer más fácil usar el oAuth2 de Firebase en proyectos de Angular

❗ IMPORTANT ❗
This documentation is writed in mexican spanish for latin developers for motivate to they always read software documentation. But you always can count on the cunning of google translate XD.

Dependencias

Esta librería chambea con Angular Material y Angular Fire de Firebase.

Primeros pasos antes de empezar

Sigue estos pasos para empezar un proyecto Firebase - Angular

Ve a Firebase console y pícale en Crear proyecto o selecciona alguno que ya hayas creado.
Ve a la configuración y baja a la parte Fireabase SDK y pícale en la opción de Configuracion.
Copia las lineas de código que están entre los corchetes
Ve a tu proyecto de Angular y entra en el archivo src/environments/environment.ts y pega las lineas de código en una variable nueva. El código se debe ver así:

export  const  environment  =  {
   production:  false,
   firebaseConfig:  {
   	apiKey:  "AIzaS++++++++++++++++++++++++++",
   	authDomain:  "++++++++.firebaseapp.com",
   	projectId:  "++++++++",
   	storageBucket:  "+++++++++.appspot.com",
   	messagingSenderId:  "0000000000",
   	appId:  "1:000000000000:web:++++++++++++++",
   	measurementId:  "G-++++++++++"
   }
};

Corre los siguientes comandos y sigue sus respectivas instrucciones: ng add @angular/fire ng add @angular/material
Inicializa tu proyecto de Firebases en app.module.ts:

import { AngularFireModule } from "@angular/fire";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    AngularFireModule.initializeApp(environment.firebaseConfig)
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ahora sí, ya puedes instalar esta librería:

Como dependencia Node

Inicia sesión en https://marxa.jfrog.io/. En el menú de navegación ve a Set me up. y sigue las instrucciones para ingresar tus contraseñas.
Si usas VSCode, en la terminal corre el comando code ~/.npmrc, si no, navega a ~/.npmrc en tu explorador de archivos y ábrelo.
Pega el código resultante de las instrucciones, asegurándote que la URL del artifact tenga el prefijo @marxa: en cada uno de los registros. Ejemplo:

_auth = <PASSWORD> (converted to base 64)
email = youremail@email.com
always-auth = true
@marxa:registry = https://marxa.jfrog.io/artifactory/api/npm/mx-library-npm/

Importa la dependencia

npm i -s @marxa/auth

Como submódulo

Asegúrate de que tienes permisos para copiar el repositorio
Abre la terminal en la raíz de tu proyecto

Corre los comandos

git submodule init
git submodule add -b develop https://github.com/Marxa-Digital/mx-auth libs/marxa/auth

Configura el archivo angular.json incluyendo este bloque de códgio dentro de projects

{
  "projects":{
    "@marxa/auth": {
      "projectType": "library",
      "root": "projects/marxa/auth",
      "sourceRoot": "projects/marxa/auth/src",
      "prefix": "mx",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:ng-packagr",
          "options": {
            "project": "projects/marxa/auth/ng-package.json"
          },
          "configurations": {
            "production": {
              "tsConfig": "projects/marxa/auth/tsconfig.lib.prod.json"
            },
            "development": {
              "tsConfig": "projects/marxa/auth/tsconfig.lib.json"
            }
          },
          "defaultConfiguration": "production"
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/marxa/auth/src/test.ts",
            "tsConfig": "projects/marxa/auth/tsconfig.spec.json",
            "karmaConfig": "projects/marxa/auth/karma.conf.js"
          }
        }
      }
    }
  }
}

Configura el archivo tsconfig.json incluyendo este bloque de códgio dentro de paths

{
  "compilerOptions": {
    ...
    "paths":{
      "@marxa/auth": [
        "dist/marxa/auth/marxa-auth",
        "dist/marxa/auth"
      ],
    }
  }
}

Corre el siguiente comando

cd libs/marxa/auth && start cmd /k ng build @marxa/auth --watch

Instala la lib de manera manual con el siguiente comando

npm i "./dist/marxa/auth"

Pasos adicionales

Para un mejor rendimiento, no olvides hacer los siguiente:

Ve a tu proyecto de Firebase configurado y a la sección Authentication
Presiona el Botón de empezar
Ve a la sección de Sing-in method y configura al menos las siguientes opciones
1. Email/Password
2. Google
3. Facebook
También podrías en ese momento o más tarde, configurar los Dominios autorizados más abajo

¿Cómo se usa?

Puedes usar los componentes pre-construidos o usar el servicio de autenticación como MxAuth

Autenticación con Google

Como método rápido de autenticación, tus usuario pueden autenticarse con cuentas de Google o Gmail. Para esto, hemos construido un pop-up para usar este método de autenticación. Recuerda que antes necesitas activar esta opción en la consola de firebase.

Botón reactivo

Un simple botón de material para un sencillo inicio y cierre de sesión con cuenta de Google. En cualquier parte de tu componente o de tu aplicación puedes agregar el snipet mx-login-button

Por defecto, este component displara un primer modal de advertencia de que se necesita una cuenta de google

Así se usa:

<!-- your-components.component.html -->
<mx-login-button (isLogged)="onLogged($event)" ></mx-login-button>

import firebase from 'firebase/app'

export class LoginComponent implements OnInit {

	constructor()  {}
	
	onLogged(user: firebase.User) {
		console.log(user)
	}
}

Después de iniciar sesión, el botón cambia la leyenda de Iniciar sesión por Cerrar sessión. Puedes cambiar las leyendas. Aquí te ponemos las propiedades:

Escuchando eventos

Evento	Ejemplo
@Input() `method: 'google'	'facebook'
@Input() `accountAdvertice: boolean`	Por defecto es `true`. Controla el modal de advertencia de cuenta de google
@Output() `isLogged: EventEmitter<firebase.User>`	Emite un evento con lainformación del usuario autenticado

Propiedades

Nombre	Ejemplos por default
`signInLabel: string`	[signInLabel]="Iniciar sesión"
`signOutLabel: string`	[signOutLabel]="Cerrar sessión"
`adverticeLabel: string`	[adverticeLabel]="IMPORTANTE"
`googleAccountAdverticeLabel: HTML as string`	[googleAccountAdverticeLabel]="`<p>Debes tener una cuenta de Google <i>(tunombredeusuario@<b>gmail.com</b>)</i> para iniciar sesión.</p>`"
`adverticeConfirmBtn: string`	[adverticeConfirmBtn]="Entiendo"

Componentes preconstruidos

Componente Login Card

En cualquier componente ruteado puedes agregar mx-login-card

<!-- your-component.html-->
<mx-login-card  (onSubmit)="onSubmit($event)"></mx-login-card>

El evento que se emite contiene MxLoginFields y lo puedes usar así:

// your-component.ts
import  {  Component,  OnInit  }  from  '@angular/core';
import  {  MxAuth,  MxLoginFields  }  from  '@marxa/auth';

@Component({
	templateUrl:  './login.component.html',
	styleUrls:  ['./login.component.scss']
})
export  class  LoginComponent  implements  OnInit  {

	constructor( private  _auth:  MxAuth )  {  }

	ngOnInit():  void  { }

	onSubmit(fields:  MxLoginFields)  {
		this._auth.emailSignIn(fields.email,  fields.password)
    // Esto emite una promesa con la interface firebase.User
    .then(user => console.log(user))
	}
}

PERSONAZIZACIONES

Puedes escuchar los eventos

Evento	Ejemplo
@Output() `onSubmit: EventEmitter<MxLoginFields>`	Emite un objeto con la interface `MxLoginFields`
@Output() `restorePwd: EventEmitter<void>`	Emite un evento cuando el link "Olvidé mi contraseña" fue clickado

También puedes cambiar lo siguiente en el template.

Nombre	Ejemplo & Default
@Input() `signInTitle: string`	signInTitle="Iniciar sesión"
@Input() `emailLabel: string`	emailLabel="Email"
@Input() `passwordLabel: string`	passwordLabel="Contraseña"
@Input() `forgotPasswordLabel: string`	forgotPasswordLabel="Olvidé mi contraseña"
@Input() `signInButton: string`	adverticeConfirmBtn="Entrar"

Componente Restore Password

En cualquier componente ruteado puedes agregar mx-restore-password

Por defecto, el compoente envía un evento a tu proyecto de firebase que enviará un email con las instrucciones para que se restablezca la contraseña. Puedes editar el template en Firebase Console => Autenticación => Templates.

<!-- your-component.html-->
<mx-restore-password></mx-restore-password>

Si necesitas controlar el botón de envío, desactiva la propiedad autoSend y asigna una función que escucha el evento. Tal como el siguiente ejemplo. Este método enviará una promesa void para que puedas hacer lo que requieras.

<!-- your-component.html-->
<mx-restore-password 
  [autoSend]="false"  
  (onSubmit)="onSubmit($event)"
></mx-restore-password>

también puedes combianr los componentes usando el cuadro de diálogo RestorePasswordDialog de la siguiente manera:

<!-- your-component.html -->
<mx-login-card (restorePwd)="onRestorePwd()" ></mx-login-card>

// your-component.ts
import  {  Component,  OnInit  }  from  '@angular/core';
import  {  MxAuth,  MxLoginFields  }  from  'gdev-auth';
// No olivdes importar MatDialog
import { MatDialog } from '@angular/material/dialog';

@Component({
	templateUrl:  './login.component.html',
	styleUrls:  ['./login.component.scss']
})
export  class  LoginComponent  implements  OnInit  {

	constructor( private  _auth:  MxAuth )  {  }

	ngOnInit():  void  { }

	onRestorePwd(): void {
    this._dialog.open(RestorePasswordDialog, {
      width: '450px',
      data: {
        requiredLabel: 'Este dato es necesario',
        confirmationMessage: 'Un mensaje fue enviado a tu correo'
      }
    })
  }
}

PERSONALIZACIONES

EventO	Ejemplo
@Input() `autoSend: boolean`	As default is `true`. Change the behaviour on Click button.
@Output() `onSubmit: EventEmitter<void>`	Emits a void event in the click event on send button

Change labels:

Name	Example & Default
`emailLabel: string`	[emailLabel]="Email"
`exampleLabel: string`	[exampleLabel]="example@gmail.com"
`requiredLabel: string`	[requiredLabel]="Este campo es requerido"
`cancelButtonLabel: string`	[cancelButtonLabel]="Cancelar"
`sendButtonLabel: string`	[sendButtonLabel]="Enviar"
`confirmationMessage: string`	[confirmationMessage]="`Enviando un correo a ${email} para cambiar la contraseña`"

Inicio con redes

Para iniciar con redes sociales, puedes crear tus propios botones y usar los métodos de MxAuth

export class LoginComponent implements OnInit {

	constructor( private  _auth:  MxAuth )  {  }

	ngOnInit():  void  { }

	onFacebookSingIn(){
		this._auth.facebookSingIn()
			.then(user => console.log(user))
	}

	onGoogleSingIn(){
		this._auth.googleSingIn()
			.then(user => console.log(user))
	}
	
}

Configuración

You can configure some propieties for Sing In methods

Personaliza la colección de usuarios en FIRESTORE

Para guardar los usuario que se autentiquen en una colección en especial, puedes cambiar el nombre de la colección. Por defecto las colección donde MxAuth guarda es en la colección users.

export class LoginComponent implements OnInit {

	constructor( private  _auth:  MxAuth )  {
		this._auth.userCollection = 'administradores'
	}
}

Ruta de desloggeo

Fácilmente puedes cerrar sesión de firebase con el método singOut(). Pero esto va a activar la ruta por defecto '/' que envía al root de tus rutas. También lo puedes cambiar con el servicio MxAuth.

export class LoginComponent implements OnInit {

	constructor( private  _auth:  MxAuth )  {
		this._auth.unloggedPath  = 'cualquier/ruta/que/quieras'
	}
}

Escuchar los errores de inicio de sesión con email.

Para usos comunes, te puedes suscribir al errors listener y/o cambiar los mensajes de error:

export class LoginComponent implements OnInit {

	constructor( private  _auth:  MxAuth )  {
		// Actuales valores por defecto
		this._auth.notFoundMessage = 'Usuario no encontrado'
		this._auth.invalidMessage = 'Usa una dirección de correo válida'
		this._auth.wrongPasswordMessage = 'Contraseña incorrecta'
	}

	ngOnInit() {
		this._auth.listenForErros().subscribe(
			(message:string) => console.log(message)
		)
	}
}

This library was generated with Angular CLI version 11.0.9.

@marxa/auth

MxAuth

Dependencias

Primeros pasos antes de empezar

Como dependencia Node

Como submódulo

Pasos adicionales

¿Cómo se usa?

Autenticación con Google

Botón reactivo

Así se usa:

Componentes preconstruidos

Componente Login Card

PERSONAZIZACIONES

Componente Restore Password

PERSONALIZACIONES

Inicio con redes

Configuración

Personaliza la colección de usuarios en FIRESTORE

Ruta de desloggeo

Escuchar los errores de inicio de sesión con email.

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

@marxa/auth

MxAuth

Dependencias

Primeros pasos antes de empezar

Como dependencia Node

Como submódulo

Pasos adicionales

¿Cómo se usa?

Autenticación con Google

Botón reactivo

Así se usa:

Componentes preconstruidos

Componente Login Card

PERSONAZIZACIONES

Componente Restore Password

PERSONALIZACIONES

Inicio con redes

Configuración

Personaliza la colección de usuarios en FIRESTORE

Ruta de desloggeo

Escuchar los errores de inicio de sesión con email.

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads