Neste artigo, irei mostrar como fazer um formulário de login usando a API de autenticação do firebase.

Uma situação que teremos que implementar para seguirmos na autenticação, são as rotas, sem elas o nosso aplicativo não saberá quem apresentar para login e cadastro de pessoas.

Bem, vamos lá, primeiramente iremos habilitar a autenticação. No console do firebase clique no link Authentication.

Vá na aba métodos de login, clique em e-mail/senha, ative esse provedor de login e clique em salvar.  Vamos usar esse método por ser mais simples e não precisar de outras configurações.

Agora, vamos voltar na aba usuários e cadastrar um usuário. Clique em adicionar um usuário, informe um email e uma senha forte, por exemplo: 11223344

Perfeito. Até agora tudo bem simples, né? Bom, eu achei, rs. Vamos deixar isso tudo quietinho por enquanto e vamos criar nosso componente de login e as rotas. No terminal, dentro da pasta do aplicativo iremos criar o componente login, o módulo desse componente e um componente dentro dele chamado login-form. Para isso, digite:

ng g c login
ng g m login
ng g c login/login-form

Ótimo, se você chegou nesse resultado, já podemos criar as rotas. No terminal, na pasta do aplicativo, digite:

touch src/app/app.routing.module.ts

Arquivo criado, vamos adicionar algum código, coloque as linhas abaixo no arquivo.

import { NgModule, ModuleWithProviders } from ‘@angular/core’;
import { Routes, RouterModule } from ‘@angular/router’;

Vamos adicionar as referências dos nossos componentes e escrever o resto da implementação para o roteamento.

import { LoginFormComponent } from ‘./login/login-form/login-form.component’;
import { CadastroPessoaComponent } from ‘./cadastro-pessoa/cadastro-pessoa.component’;
const APP_ROUTES: Routes = [
{ path: ‘’, component: LoginFormComponent },
{ path: ‘cadastro’, component: CadastroPessoaComponent }
]

@NgModule({
imports: [RouterModule.forRoot(APP_ROUTES)],
exports: [RouterModule]
})
export class AppRoutingModule { }

Agora precisamos importar esse módulo no app.module.ts

Tem algumas coisinhas a se ajeitar ainda, por exemplo coloca a referencia do login.module no nosso app.module e retirar a de LoginComponent

import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;
import { FormsModule } from ‘@angular/forms’;
import { HttpModule } from ‘@angular/http’;
import { AppComponent } from ‘./app.component’;
import { AngularFireModule } from ‘angularfire2/index’;
import { FirebaseConfig } from ‘./../environments/firebase.config’;
import { AppRoutingModule } from ‘./app.routing.module’;
import { CadastroPessoaModule } from ‘./cadastro-pessoa/cadastro-pessoa.module’;
import { LoginModule } from ‘./login/login.module’;

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule, CadastroPessoaModule,
AngularFireModule.initializeApp(FirebaseConfig),
AppRoutingModule,
LoginModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Mas isso não é o suficiente, precisamos mexer ainda no template html do app.component, retirar o que tem e colocar a tag **** ela que vai identifcar e fazer o roteamento, deixe como no exemplo abaixo:

<router-outlet></router-outlet>

Vamos ver se está tudo ok? Vamos rodar a aplicação. No terminal digite o famigerado comando:

ng serve

Se tudo deu certo vc poderá ver o roteamento funcionando, levando primeiramente para o componente de login como descrito no arquivo app.routing e para voltar a visualizar o cadastro digite /cadastro no final do endereço.

Estava vendo no código e acabei esquecendo um detalhe, declarar o login.component no login.module também o importar o FormsModule

@NgModule({
imports: [
CommonModule, FormsModule
],
declarations: [LoginFormComponent, LoginComponent],
exports:[LoginComponent, LoginFormComponent]
})

Então… seria bom colocar lá! rs

Voltando à autenticação, vamos precisar colocar no login.module a declaração do provider do AngularFireAuth

Agora vamos colocar os campos no template html do login-form e escrever o código para ele.

Agora vamos adicionar o código no login-form.component.ts Observe que adicionei dois imports

import { AngularFireAuth } from ‘angularfire2/auth’;
import { Router } from ‘@angular/router’;

E adicione ao construtor o seguinte trecho:

constructor(private afAuth: AngularFireAuth, private router: Router) { }

Um é o objeto do angularfire2 responsável pela autenticação e o outro é router que vai nos enviar para a página de cadastro logo após o login.

Agora vamos modificar um pouco o cadastro-pessoa-form. No template html apenas iremos adicionar um botão para deslogar.

Agora no cadastro-pessoa-form.component.ts, ainda temos algumas coisas a fazer. Vamos importar o Router e AngularFireAuth.

import { AngularFireAuth } from ‘angularfire2/auth’;
import { Router } from ‘@angular/router’;

Vamos adicionar um método de logout também.

Vamos ver se está tudo funcionando?

ng serve

Abra o navegador, em seguida vá para aba feramentas de desenvolvedor e selecione Application.

Vamos logar!

Note que ao logar, ele adicionou um item ao Local Storage. É assim que o firebase gerencia a sessão de login. Se você clicar em deslogar, esse item irá desaparecer e o que importa é funcionar.

Gente, por hoje é isso. Na próxima parte pretendo ver a criação de usuários, até!

Beijos