Finalizando nossa integração com o Firebase utilizando o Angular 11, acessar as informações do usuário na página.

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.

Vou deixar, caso queira os dos artigos anteriores, se ainda não sabe como integrar, recomendo a leitura antes de prosseguir:

• Integrar o Firebase no Angular 11 – Parte 1
• Integrar o Firebase no Angular 11 – Parte 2

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

Criando os componentes da tela de Informações do usuário do 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 UserInfo, que estará logo abaixo:

Fiz uma pequena mudança na tela UserInfo, caso não tenha o login, exibo o link para direcionar para o Login. O trecho é o seguinte:

Você pode modificar o quanto quiser este layout depois, este é apenas um exemplo didático, então me atentei a tela e recursos de UX.

Então, vamos fazer um teste com todos os demais itens que criamos. Vamos começar registrando um usuário e logo após, entrar na tela de Login:

Ao efetuar o Login, as informações da sua conta serão exibidas na tela (uid e email):

Simples, não?

Concluindo

Temos muitas aplicações para esta integração com o Firebase, podendo ser utilizado em qualquer pagina web ou app mobile.

O layout da tela ficou bem simples, nada muito sofisticado, mas futuramente irei revisitar os artigos e acrescentar mais algumas coisas, se possível.

Então é isso, espero ter ajudado de alguma forma e até a próxima semana!