Agregando autenticación a tu app
Tags: angular, kikstart, beginners, espanol
Published: 2020-10-24 17:31:37

---
title: "Agregando autenticación a tu app"
description: "En este tutorial implementaremos la autenticación de nuestra app, con la posibilidad de
ingresar a ella con diferentes medios como: google,redes sociales etc.
published: true
series: "Agregando funcionalidad a tu app"
cover_image: ""
canonical_url: ""
tags: angular, kikstart, beginner, espanol
---
 
## Requisitos

Asegurate de tener una app básica creada, similar a la que hicimos en la serie # 1 [Introducción a Kikstart UI](https://dev.to/derlys/series/7746).

## 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.

```bash
ng g module auth/register --route register --module app
```

```bash
ng g module auth/login --route login --module app
```

```bash
ng g module auth/logout --route logout --module app
```
## 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:

```typescript
{ label: 'Register', path: '/register'},
{ label: 'Login', path: '/login' },
{ label: 'Logout', path: '/logout'},
```

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

1:Crea el servicio ejecutando el comando

```bash
 ng g service auth/auth
```
2:Añade las dependencias necesarias para utilizar las funcionalidades de `firebase`. Utiliza los siguientes comandos:

```bash
npm i @angular/fire
npm install @angular/fire firebase --save
```
3:Abre el archivo `auth.service.ts` y agrega lo siguiente en la parte superior:
 
```typescript
import * as firebase from 'firebase';
```

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

```typescript
export class AuthService {
  user: firebase.User;
  isLoggedIn: boolean;
```
5:Luego en el mismo archivo agrega lo siguiente en la parte superior:

```typescript
import { AngularFireAuth } from '@angular/fire/auth';
```
6:Cuando hayamos importado `AngularFireAuth` podemos inyectar su funcionalidad en el constructor:

```typescript
 constructor(private readonly afa: AngularFireAuth) {
    this.afa.authState.subscribe((res) => {
      console.log(res);
      this.user = res;
      this.isLoggedIn = !!this.user;
    });
  }
}
```
7:Importa el modulo para utilizar `observables` asi:

```typescript
import { from, Observable, ObservedValueOf } from 'rxjs';
```

> 💡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:

```typescript
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());
  }
}
```

## 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 archivo`login.component.ts` y  agrega lo siguiente en la parte superior:

```typescript
import { Router } from '@angular/router';
import { AuthService } from '../auth.service';
```
2:Inyecta e inicializa la forma de autenticación que usarás. En este caso usaras `loginGoogle`.

```typescript
private router: Router, private service: AuthService
```
3: En el mismo archivo `login.component.ts` agrega la siguiente función:

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

## 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:

```bash
ng add @angular/fire
```
> 💡 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)
```
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](https://dev-to-uploads.s3.amazonaws.com/i/cv69v4i3s537sv0jrgdp.png)

3: Busca el siguiente título:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jx0vtqr6e2u6mi3xscnm.png)

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

```bash
export const environment = {
  production: false,
  firebase: {
    apiKey: '',
    authDomain: '',
    databaseURL: '',
    projectId: '',
    storageBucket: '',
    messagingSenderId: '',
    appId: '',
    measurementId: '',
  },
};
```
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:

````typescript
import { AngularFireModule } from '@angular/fire';
import { environment } from '../environments/environment';
import { AngularFireAuthModule } from '@angular/fire/auth';
```
6: En el import del mismo archivo agrega esto:

```typescript
AngularFireModule.initializeApp(environment.firebase),
AngularFireAuthModule
```

## 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`.

```html
<!-- 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>
```
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](https://dev-to-uploads.s3.amazonaws.com/i/n97w8kiltncxc9lwb4q4.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d58c47zncdusvmh2g19w.png)

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 archivo`logout.component.ts` y  agrega lo siguiente en la parte superior:

```typescript
import { Router } from '@angular/router';
import { AuthService } from '../auth.service';
```
2:Inyecta e inicializa el servicio del `logout` en el constructor.

```typescript
constructor(private router: Router, private service: AuthService) {}
```
3: En el mismo archivo `logout.component.ts` agrega la siguiente función:

```Typescript
logout(): void {
    this.service.logout().subscribe((res) => {
      return this.router.navigate(['/']);
    });
  }
```
4:En el archivo `logout.component.html`agrega las siguientes líneas:

```typescript
<button (click)="logout()" class="btn btn-secondary mr-1">
  logout
</button>
```
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í](https://github.com/Derlys/Tutorial-auth).