DEV Community

loading...
kikstart.dev

Agregando autenticación a tu app

derlys profile image Derlys ・5 min read

Requisitos

Asegurate de tener una app básica creada, similar a la que hicimos en la serie # 1 Introducción a Kikstart UI.

Paso # 1

En primer lugar generamos los componentes y el módulo que los contendrá.

1: Crea una carpeta llamada auth y genera los componentes register, login y logout.

ng g module auth/register --route register --module app
Enter fullscreen mode Exit fullscreen mode
ng g module auth/login --route login --module app
Enter fullscreen mode Exit fullscreen mode
ng g module auth/logout --route logout --module app
Enter fullscreen mode Exit fullscreen mode

Paso # 2

Renderizamos las rutas de los componentes creados.

1: Abre el archivo app.component.ts y agrega los labels dentro del array de links asi:

{ label: 'Register', path: '/register'},
{ label: 'Login', path: '/login' },
{ label: 'Logout', path: '/logout'},
Enter fullscreen mode Exit fullscreen mode

Paso # 3

Creamos el servicio,lo configuramos para que esté listo y utilizarlos en nuestro componente login.

1:Crea el servicio ejecutando el comando

 ng g service auth/auth
Enter fullscreen mode Exit fullscreen mode

2:Añade las dependencias necesarias para utilizar las funcionalidades de firebase. Utiliza los siguientes comandos:

npm i @angular/fire
npm install @angular/fire firebase --save
Enter fullscreen mode Exit fullscreen mode

3:Abre el archivo auth.service.ts y agrega lo siguiente en la parte superior:

import * as firebase from 'firebase';
Enter fullscreen mode Exit fullscreen mode

4:En el mismo archivo auth.service.ts agrega lo siguiente en la clase AuthService:

export class AuthService {
  user: firebase.User;
  isLoggedIn: boolean;
Enter fullscreen mode Exit fullscreen mode

5:Luego en el mismo archivo agrega lo siguiente en la parte superior:

import { AngularFireAuth } from '@angular/fire/auth';
Enter fullscreen mode Exit fullscreen mode

6:Cuando hayamos importado AngularFireAuth podemos inyectar su funcionalidad en el constructor:

 constructor(private readonly afa: AngularFireAuth) {
    this.afa.authState.subscribe((res) => {
      console.log(res);
      this.user = res;
      this.isLoggedIn = !!this.user;
    });
  }
}
Enter fullscreen mode Exit fullscreen mode

7:Importa el modulo para utilizar observables asi:

import { from, Observable, ObservedValueOf } from 'rxjs';
Enter fullscreen mode Exit fullscreen mode

💡Nota

Si te aparece inactiva la línea que acabas de colocar en el punto 6 , no te preocupes , apenas estamos construyendo la lógica y no hemos usado Observables, vamos con calma 😉.

8:Como último punto en este paso en el archivo auth.service.ts agrega lo siguiente después del constructor:

login(
    email: string,
    password: string
  ): Observable<ObservedValueOf<Promise<firebase.auth.UserCredential>>> {
    return from(this.afa.signInWithEmailAndPassword(email, password));
  }

  register(
    email: string,
    password: string
  ): Observable<ObservedValueOf<Promise<firebase.auth.UserCredential>>> {
    return from(this.afa.createUserWithEmailAndPassword(email, password));
  }

  loginGoogle(): Observable<
    ObservedValueOf<Promise<firebase.auth.UserCredential>>
  > {
    const provider = new firebase.auth.GoogleAuthProvider();
    return from(this.afa.signInWithPopup(provider));
  }

  logout(): Observable<ObservedValueOf<Promise<void>>> {
    return from(this.afa.signOut());
  }
}
Enter fullscreen mode Exit fullscreen mode

Paso # 4

Ahora crearemos las funciones para cada una de las formas de autenticación y luego las configuraremos.

💡Recuerda

En el paso anterior implementamos varias formas de autenticación cuando quieras puedes hacer uso de estos servicios solo debes configurarlo en tu componente como lo hacemos en el punto # 3 de este paso.

1: Abre el archivologin.component.ts y agrega lo siguiente en la parte superior:

import { Router } from '@angular/router';
import { AuthService } from '../auth.service';
Enter fullscreen mode Exit fullscreen mode

2:Inyecta e inicializa la forma de autenticación que usarás. En este caso usaras loginGoogle.

private router: Router, private service: AuthService
Enter fullscreen mode Exit fullscreen mode

3: En el mismo archivo login.component.ts agrega la siguiente función:

loginGoogle(): void {
    this.service.loginGoogle().subscribe((res) => {
      console.log(res);
      return this.router.navigate(['/']);
    });
  }
Enter fullscreen mode Exit fullscreen mode

paso # 5

Aquí configuraremos el proyecto que creamos en firebase a nuestra app.

1:Busca en la terminal tu proyecto y ejecuta el siguiente comando:

ng add @angular/fire
Enter fullscreen mode Exit fullscreen mode

💡 KikstartTip

Si es la primera vez que instalas @angular/fire en tu computador te hará preguntas como esta:
Allow Firebase to collect CLI usage and error reporting information? (Y/n).

2: Durante el proceso de instalación sobre el proyecto elige el que quieres desplegar.

Installing packages for tooling via npm.
Installed packages for tooling via npm.
UPDATE package.json (1516 bytes)
✔ Packages installed successfully.
✔ Preparing the list of your Firebase projects
? Please select a project: (Use arrow keys or type to search)
❯ site2 (site2-8ce5b)
Enter fullscreen mode Exit fullscreen mode

3:Configura el enviroment con las llaves de tus proyectos en firebase.

4:En la consola de firebase busca tu proyecto.

5:En descripción general haz clic en configuración del proyecto.

Alt Text

3: Busca el siguiente título:

Alt Text

4: Busca la ruta src/enviroments/enviroment.ts y coloca esta secuencia de comandos con sus respectivas llaves:

export const environment = {
  production: false,
  firebase: {
    apiKey: '',
    authDomain: '',
    databaseURL: '',
    projectId: '',
    storageBucket: '',
    messagingSenderId: '',
    appId: '',
    measurementId: '',
  },
};
Enter fullscreen mode Exit fullscreen mode

5: En tu archivo app.module.ts importa las funcionalidades de la autenticación de firebase para utilizarlas en el siguiente paso.

Agrega las siguientes líneas en la parte superior:

import { AngularFireModule } from '@angular/fire';
import { environment } from '../environments/environment';
import { AngularFireAuthModule } from '@angular/fire/auth';
Enter fullscreen mode Exit fullscreen mode

6: En el import del mismo archivo agrega esto:

AngularFireModule.initializeApp(environment.firebase),
AngularFireAuthModule
Enter fullscreen mode Exit fullscreen mode

paso # 6

Llegó el momento de los templetes, que se haga la luz y renderizamos la lógica que hemos creado.

1: En el archivo login.component.html crea el templete para renderizar un formulario y un botón con ayuda de Kikstart UI.

<!-- This flex container takes the full height and vertically centers the content -->
<div class="d-flex flex-column h-100 justify-content-center">
  <div class="container">
    <div class="row">
      <!-- This is a single column that is responsive -->
      <div class="col-12 col-md-6 offset-md-3">
        <div class="card">
          <div class="card-header">Login</div>
          <div class="card-body">
            <!-- The formGroup 'form' is defined in the component class -->
          </div>
          <div class="card-footer">
            <div class="d-flex justify-content-between">
              <a routerLink="/" class="ml-2 btn btn-outline-secondary">
                Home
              </a>
              <!-- The button has a click handler, it will be disabled if the form is not valid -->
              <button
                (click)="loginGoogle()"
                type="submit"
                class="btn btn-outline-success"
              >
                Log in
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

2: Ve a la tu proyecto de firebase y busca la pestaña autenticación, en el botón añadir usuario ingresa un correo y una contraseña para autorizar el login.

Alt Text

Ahora en la consola del navegador tu puedes ver que ya tenemos un usuario que utiliza este servicio.

Alt Text

Sin embargo como nos damos cuenta en nuestra app que esto pasó, hagamos el siguiente paso.

paso # 7

Creamos la lógica del logout y agregamos el código del templete para saber cuando estamos logueados o no.

1:Abre el archivologout.component.ts y agrega lo siguiente en la parte superior:

import { Router } from '@angular/router';
import { AuthService } from '../auth.service';
Enter fullscreen mode Exit fullscreen mode

2:Inyecta e inicializa el servicio del logout en el constructor.

constructor(private router: Router, private service: AuthService) {}
Enter fullscreen mode Exit fullscreen mode

3: En el mismo archivo logout.component.ts agrega la siguiente función:

logout(): void {
    this.service.logout().subscribe((res) => {
      return this.router.navigate(['/']);
    });
  }
Enter fullscreen mode Exit fullscreen mode

4:En el archivo logout.component.htmlagrega las siguientes líneas:

<button (click)="logout()" class="btn btn-secondary mr-1">
  logout
</button>
Enter fullscreen mode Exit fullscreen mode

Asi dando click en el botón logout puedes notar que cuando ingresar al login nuevamente te solicitara tu correo.

Resumen

Hemos agregado 3 nuevos componentes login, register y logout, también hemos configurado estos 3 componentes para darle autenticación a nuestra app.

Puedes encontrar el repositorio con los pasos aquí.

Discussion

pic
Editor guide