Autenticação Simplificada com Flutter, Firebase e Lit
Olá pessoal, tudo bem?
Nesse artigo vou apresentar um package que encontrei “sem querer querendo”. Trata-se do lit_firebase_auth que na sua descrição traz o seguinte objetivo.
Fornecer um conjunto de utilitários e widgets úteis para adicionar facilmente a autenticação Firebase a um aplicativo Flutter.
Na verdade com apenas 2 Widgets declarados já é possível ter uma UI de login com toda a lógica encapsulada para autenticação no Firebase.
Nos passos a seguir apresento como inicializar e utilizar o básico do lit. Se preferir, gravei um vídeo com a demonstração.
📍Atenção !!! De acordo com a documentação o pacote ainda está em fase inicial, logo sua utilização é por sua própria conta e risco.
Início
No arquivo pubspec.yaml adicione:
lit_firebase_auth: ^0.3.0No método main será preciso inicializar o firebase:
Vamos implementar a classe MyApp(), ou seja, o primeiro widget que será carregado na inicialização. No fonte escrevi todas as classes no mesmo arquivo para exemplificar o uso.
No entanto, procure sempre adotar uma arquitetura pensando na reutilização do código e boas práticas👍.
Vamos definir as configurações iniciais indicando os providers de autenticação em authProviders.
Note que o Widget superior deve ser o LitAuthInit, onde declaramos quais os provedores de autenticação. No exemplo, utilizamos apenas o emal-senha e o Google. É possível usar outros como Github, Twitter …
No filho declaramos o MaterialApp. Observe que a classe LitAuthState temos a opção de recuperar o estado da autenticação já direcionando um fluxo com as propriedades authenticated para HomePage() e unauthenticated para o LoginPage().
Isso de cara quebra um galho enorme🙈🙈🙈.
Página Login
Na classe LoginPage vamos utilizar um widget utilitário que define os providers declarados na inicialização.
Apenas com o próximo widget já temos uma interface UI com os campos e botões.
No widget LitAuth é possível personalizar o widget padrão. Na demonstração mudei somente o título e uma notificação de erro com a propriedade errorNotification definindo um fundo vermelho.
Vamos finalizar a implementação do exemplo codificando a classe HomePage que será exibida quando a autenticação for realizada com sucesso.
Aqui só temos um RaiseButton com o método para encerrar a sessão. Note que através do context conseguimos invocar vários métodos do lit, no caso, o signOut().
Ao executar o projeto com F5 temos as telas do login:
Com notificação de erro:
E a tela home após a autenticação efetuada com sucesso.
Esse post só abordou o básico do pacote.
Finalmente, é bom reiterar a informação. O package ainda está em fase inicial, mas sem dúvida é um recurso interessante para acompanhar a evolução e possível adoção.
Abaixo o link do projeto criado com a biblioteca.
Até mais.
