Autenticação Simplificada com Flutter, Firebase e Lit

Image for post
Image for post

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:

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

Written by

Professor e desenvolvedor

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store