Um momento
Aula 20
Cursos / Autenticação com o Firebase, React Native & Redux
Caso de Autenticação Bem Sucedida (dispatch e Mudança de Cena)

Summary

Resumo do Transcrito

O usuário fala sobre a autenticação e manipulação de um sistema utilizando React Native e Redux.

Principal Tópicos Abordados:

  • Autenticação:

    • O usuário menciona a importância de garantir que os arquivos estejam salvos e que a autenticação esteja funcionando corretamente.
    • Após tentar entrar no sistema, alguém comenta sobre a necessidade de atualizar e verificar as credenciais.
  • Mudança de Cena:

    • Explica o processo de mudança de cena após a autenticação, usando react-native-router-flux.
    • Menciona a necessidade de chamar a ação para mudar a cena e a importância de importar os actions.
  • Formulário e Estado:

    • O formulário é discutido, incluindo como limpar os campos após o login, utilizando Redux para despachar uma ação ao ter sucesso na autenticação.
    • O estado inicial é utilizado para limpar as informações do formulário.
  • Propiedades do Input:

    • Há uma atenção especial a como o e-mail é tratado no input, especificamente sobre a capitalização automática.
    • O ajuste auto-capitalize é configurado para none no campo do e-mail para evitar a capitalização automática da primeira letra.
  • Tratamento de Erros:

    • O usuário observa como o sistema lida com erros de autenticação, demonstrando a mensagem quando a senha é inválida.

Conclusões:

O usuário demonstra um passo a passo sobre como configurar a autenticação, gerenciar estados e formularios, além de interagir com o sistema de forma intuitiva com reações sobre os resultados das ações executadas.

Video Transcript

Provavelmente esqueci de salvar os arquivos, se o personal está aqui está tudo certo. A gente fez as coisas certas, dá uma atualizada, vamos ver o que acontece. O meu.com, tirar esse M aqui, entrar, deu nisso, é a resposta aqui. Se notam não sei o que, várias coisas, o e-mail é esse, vermo? Aqui é o seu, não tem foto, mas tem o seu usuário, a id de usuário, identificação, que deve ser a mesma, vamos lá para o console, dzdo, dzdo, mesma coisa. Então, mandou o usuário authentico mesmo, deu certo. Legal, hein? Agora, se a gente digitar alguma coisa que não seja, vai dar em erro, vai dar esse negócio, message do erro, e o meu address, não sei o que, e essa coisa, muito legal. Tá bom? Vamos deixar esse console logo aí, só para você ver o que é a resposta. Então, a gente autoneticou, só falta a gente mudar para a outra cena. Vamos lá, vai para o, onde? Action Creator, vai para o login aqui. O que acontece se a gente autoriza e der certo? O sucesso vai aqui para o caso do then, e a gente vai mudar de cena. Se lembra como é que a gente muda usando react-native router flux? Se você não viu meu vídeo de introdução Redux, vamos aprender. Para a gente mudar de cena, a gente vai chamar actions.acquidacena. Vamos lá voltar para aquele arquivo chamado router. Você note que tem aqui para cada cena, então a gente quer ir para key main. Pega a sua chave, actions.main, e chama como uma função, e é isso, só isso. Vai mudar, muda de cena. A gente tem que importar actions do react-native router flux. Vai lá no cima, importe, distruturar actions from react-native router flux. Só isso. Vamos lá, muda de cena. Vamos tentar novamente, marco mail.com, entrar, cadê? Ah, esqueci, até vai estar o M, né? Ei, e aí? Estamos dentro do sistema, finalmente. Você nota que o react-native router flux, adiciona esse botão de voltar também, a gente pode ver o que aconteceu antes, mas deu tudo certo, autentificado. Só voltar aqui para você ver algumas coisas que a gente tem que ajeitar. Note que quando eu volto aparece o email e passo o ordem novo, mas normalmente a gente tem que limpar esse formulário depois que a gente clica em entrar, tá bom? Então para fazer isso, o que é que eu vou fazer? Quando a gente der sucesso aqui, antes de mudar para a cena, eu vou despachar uma ação. Quando a gente está usando Redux Slunk, a gente pode chamar de dispatch e passo o objeto da ação, tá bom? Vai ser o type, o quê? A gente vai botar login, user, sucesso, sucedido, tá bom? Só isso. Vamos criar isso, vou copiar. Vai lá em cima. Eu vou break a line aqui. A gente vai importar do arquivo, login, user, sucesso, vamos definir dentro de types. Vamos lá, vamos lá. Export const, login, user, sucesso. É uma string com o mesmo nome. Só isso. Voltando ao index. Definimos, importamos o tipo de ação logo em user, sucesso. Despachamos quando foi autenticado. Vamos lá no reducer, author reducer, para lidar com essa ação. No caso de csk, a gente vai limpar o formulário. Em vez de passar a state, não sei o quê, eu só vou retornar o initial state para limpar tudo. Tá bom? Initial state vai retornar esse cara que está tudo vazio. Só isso, muito simples. E temos que importar isso. A gente vai aqui, deixa eu quebrar a linha, e importar esse cara. Salvar, vamos testar. 1, 2, 3, 4, 5, 6. Ah, esqueci esse M aqui, muito chato, vamos ajeitar isso depois, espera aí. Entrar, ter uma entrada, voltando, formulário está vazio, muito bem. Muito bem. Agora vamos ajeitar esse email aqui, rapidinho. O problema é que está capitalizando o primeiro letro. Para isso não acontecer, a gente vai lá no input, tá bom? Esse cara tem uma opção chamada auto-capitalize, eu acho. Só olhar no documentação do React Native, se esquecer, documentação do text input. Salver. E vai ser auto-capitalize, a gente vai setar para none, tá bom? Vamos aqui, antes de secure text entry, a gente vai botar auto-capitalize, tá bom? Se você não quiser que auto-capitalize, você põe none, tá bom? Se você quiser que o usuário entry auto-capitalize, e se não entrar, vai por padrão ser none. Depende de como você criar o sistema. Se você quiser o padrão para ser capitalizado, você põe aqui diferente, né? Se você olhar na página do React Native, vamos ver. Cadê, cadê, cadê? Quero não, text input. Auto-capitalize. Cadê auto-cap... Está aí, acho que é o primeiro. Esse cara aqui, você pode escolher o padrão para você. Eu vou escolher none para não capitalizar nada, tá bom? Mas se o usuário quiser mudar isso, é só passar com propriedade. Eu vou adicionar aqui. Auto-capitalize, vírgula. Salva. Padrão é none. Bom? Vamos testar. Então, eu nem preciso passar auto-capitalize aqui no login form, aqui no e-mail, porque o padrão que você tem lá é o none, vai lá para o none. Então, vamos lá. Finalmente, não capitaliza mais. Yeah. Alê-o. Agora a gente vai mudar a ver. Parece um erro. Olha o erro. Password invalid, não sei o que. O user não tem password. Muito legal, né? A gente pode saber a mensagem do erro aqui. Um, dois, três, quatro, cinco, seis. Entrar. Passou o objeto, o responso. Tudo OK. Bem-vindo.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: