Continuando nossa integração com o Firebase utilizando o Angular 11, vamos hoje integrar os métodos de registro de usuário.

Se você está chegando agora e ainda não viu o artigo anterior, recomendo que inicie sua leitura por ele, onde explico o passo a passo inicial para integração e criação do app do Angular.

Se você quiser baixar o projeto, está em meu GitHub no repositório Firebase.

Vamos atualizar o serviço com os métodos de registro do Firebase

Irei criar primeiro o método no serviço, como fizemos no exemplo anterior, para termos acessíveis em nossa página os métodos para comunicação com o Firebase.

Anteriormente eu já tinha demonstrado o snippet ou código com o método registerWithEmail.  Confira seu serviço se está com o método correto. Veja novamente:

Vamos ver o que podemos aprender no código anterior

Como pode notar, adicionamos ao serviço a referência às bibliotecas do Angular/Fire, trazendo as rotinas para acesso aos métodos Firebase.

Com isso, iremos ter acesso a métodos como createUserWithEmailAndPassword(), signInWithEmailAndPassword() e signOut(), que usaremos para troca entre nossa aplicação e o Firebase.

Existem outros métodos dentro desta classe AngularFireAuth que você pode explorar.

Caso queira ir além, recomendo a documentação do próprio projeto no GitHub do AngularFire.

Criando os componentes da tela de Registro no Firebase

Já deixamos criadas as paginas / componentes no artigo anterior, mas caso queira, segue o script para executar:

Então vamos construir o layout da pagina de registro. Já inclui também a lógica do componente Register, que irei comentar.

Vou deixar o código aqui embaixo:

Vamos entender a implementação acima de nosso projeto Angular

A tela e o componente que orquestra suas ações (register-component.ts) não terá referências ao Firebase, uma vez que quem irá fazer este trabalho será o serviço Auth.

Com isso, fica bem mais simples a chamada para o método de Registro do Usuário, bastando apenas acessar o método createUserWithEmailAndPassword() do serviço.

Concluindo

Ao executar o projeto com o comando ng serve, acesse a rota para registro do usuário (register) e irá ter a tela já fazendo a chamada do seu serviço.

O layout da tela ficou bem simples, nada muito sofisticado, apenas para entender como funciona a integração. Veja:

No próximo artigo, irei demonstrar como pode fazer um simples Portal e recuperar as informações do usuário. Até a próxima semana!