Introdução

Neste artigo vamos desenvolver uma tela de login de duas etapas com Phoenix LiveView. Falaremos também sobre os recursos extras de usabilidade que temos quando utilizamos LiveView, assim como suas limitações.

Apesar do LiveView proporcionar dinamicidade e uma melhor usabilidade para o usuário — considerando que ele não precisa recarregar a página para ter dados atualizados — o mesmo não possui exatamente as mesmas capacidades que o Plug.Conn. A principal limitação do Plug.LiveView.Socket que nos afetou foi a incapacidade de “escrever” na sessão do usuário.

Requisitos (Observações)

Neste exemplo usaremos como base o código de autenticação gerado pelo phx.gen.auth

Implementação

O código a seguir é um form de login com suas etapas. Na primeira etapa, existe um campo de email, listagem de erro caso haja algum, e um botão “Continue” para submeter o form. Na segunda etapa, exibimos um campo para o código de confirmação, enviado para o e-mail após a primeira etapa:

Logo de cara já utilizaremos o LiveView para controlar a exibição de dados e campos na interface. Para determinarmos qual a etapa em que o usuário se encontra, usamos condicionais com uma das credenciais que serão preenchidas e uma variável que armazenará possíveis erros de validação. Desta maneira, exibimos as credenciais que devem ser preenchidas devidamente em cada etapa da autenticação.

O formulário da primeira etapa da autenticação deve ser submetido como um evento login para uma rota do LiveView, para especificar isto, a tag formpossui o atributo phx_submit.

Já o formulário da segunda etapa da autenticação será submetido para uma rota “comum” do UserSessionController, sendo assim, não há necessidade de especificar atributo extra.

O código abaixo exibe o módulo LiveView da aplicação chamado UserSessionLive, que recebe os eventos do form presente no template acima.

Abaixo temos o controller UserSessionController, responsável pela autenticação, após a submissão do form da segunda etapa.

Primeira etapa de autenticação

Inserção apenas do E-mail, credencial esta que pode ser alterada para qualquer outra credencial única e que possibilita identificar um usuário.

Ao submeter o formulário, o E-mail inserido será recebido na função handle_event, que fará a verificação de existência do mesmo.

Caso o email exista, ocorrerão os assigns do email e do email_input_error, que como exibido no template, farão com que seja exibida a segunda etapa da autenticação. Além disso, um código de acesso será geado e enviado ao usuário

Segunda etapa da autenticação

O E-mail inserido na primeira etapa de autenticação e agora verificado está presente no formulário, mas com o atributo type="hidden". Desta maneira, a informação estará presente quando o formulário for submetido, mas não exibido para o usuário.

Após a inserção do código enviado e submissão do formulário, as credenciais do usuário serão verificadas no UserSessionController. Como exibido acima, o usuário será redirecionado ou para a página inicial de usuários autenticados do sistema ou para a etapa inicial de autenticação.

Conclusão

O LiveView proporciona uma melhor usabilidade para o usuário final. Porém, a forma como se integra com Plug.Conn, faz com que tenhamos que utilizar o ciclo de request e response “padrão” para que escrever dados na sessão.

Para autenticação, o phx.gen.auth é recomendado, por incluir grande parte do código comum para autenticação escrito seguindo as boas práticas atuais de design.

Espero que este post tenha te ajudado!

Glossário

Phoenix.LiveView.Socket— Struct utilizada pelo LiveView para comunicação e associação de variáveis

Plug.Conn— Struct comumente utilizada pelo Phoenix para requisições e respostas dessas requisições. Possibilita a aplicação e/ou função que o utiliza “escrever“ na sessão do usuário e nos cookies

‍