Vamos começar gerenciando o estado de carregamento aqui na tela de autenticação, porque obviamente quero dar
ao usuário algum feedback enquanto aguardamos uma resposta no momento.
Para isso, podemos importar o indicador de atividade que você já conhece e gerenciar o
estado de carregamento aqui, adicionando outro estado aqui, isLoading e defina isLoading, que inicializamos como false, porque inicialmente não estamos carregando e
agora aqui quando estamos nessa autenticação manipulador, posso adicionar assíncrono aqui, porque é claro que a inscrição aqui retorna uma promessa, a mesma
para o login, portanto, essas
funções do criador de ações retornam promessas. Assim, podemos aguardar o resultado do
despacho, que finalmente usa essas promessas que recebemos e basicamente inicia todo esse processo. Antes de esperarmos
isso, posso definir isLoading como true, portanto, quando iniciamos todo
esse processo, antes de enviarmos uma solicitação e depois defina isLoading como false assim que
concluirmos essa solicitação, independentemente de sua falha ou não.
E agora o isLoading pode ser usado para exibir
um controle giratório de carregamento. Depende de você exibi-lo, por exemplo, você pode dizer que deseja substituir esse botão
de inscrição pelo girador de carregamento.
Então, aqui podemos dizer se isLoading é verdadeiro, quero mostrar
o indicador de atividade assim, caso contrário mostrarei o botão,
então essa é a sintaxe que
poderíamos usar, defina o tamanho
aqui como small e a cor em Colors. primário, digamos. Agora, se tentarmos e voltarmos, aqui
no iOS, se eu tentar fazer login, na verdade vejo o botão giratório de carregamento e volto, então isso
funciona, agora para o tratamento de erros.
Para o tratamento de erros, você também aprende como isso funciona.
É claro que você também pode gerenciar seu
estado de erro aqui. Você também pode usar o redutor de uso para
mesclar
o estado de carregamento e de erro em um objeto.
atribuir um valor para que isso seja indefinido inicialmente e, em seguida, aqui, podemos agrupar try catch em torno deste despacho aqui,
onde obtemos um erro em potencial e definimos nosso erro para
esta mensagem de erro que estamos recebendo de volta e antes de enviar a solicitação, Também
quero definir meu erro novamente como nulo. Portanto, agora estamos armazenando um erro em potencial aqui no erro definido
e só quero lançar um alerta, mostrar um alerta ao usuário se recebermos um erro.
Portanto, para isso, é necessário certificar-se de importar o alerta do React Native e também
usar o efeito do react porque o efeito do uso nos permite reagir a alterações no estado
de erro e mostrar o alerta de erro, se houver um erro. Então, talvez aqui depois de configurar o redutor, possamos adicionar o efeito use e
minha dependência aqui seja a variável ou a constante do estado de erro e, se
houver um erro, se for verdadeiro, quero mostrar um alerta com o alerta API onde digo que ocorreu um erro e minha mensagem é
o erro que deve ser uma string e adicionarei um botão onde tenho um texto de
OK e, é claro, você pode adicionar mais botões para fazer coisas diferentes.
Agora podemos simular isso no criador da ação, indo para lá e para fazer login, digamos que removemos o D aqui,
para que este seja um URL incorreto no final. Se agora tentarmos fazer login aqui,
recebo este erro.
Agora
isso é bom, mas também existem outros tipos de erros que eu quero resolver, por exemplo, e se eu
fizer login com um endereço de email que não existe? É claro que também quero mostrar um erro ao
usuário, mas apenas mostro que algo deu errado, que não é exatamente o erro que gostaria de mostrar.
Agora estou mostrando esse erro, porque no criador da ação aqui, se a resposta não estiver boa, lancei algo
deu errado.
Agora, o problema é quando enviamos um email incorreto ou uma senha incorreta, também como
forma de inscrição, se enviarmos algo que não seja um email ou uma senha muito curta, se isso acontecer, receba de volta
uma resposta com um código de status de 400 alguma coisa e obtemos alguns detalhes do erro como parte da resposta
e agora,
com o tratamento de erros, não os vemos,
por isso precisamos mudar isso. Em vez de lançar imediatamente um
erro aqui, se a resposta não estiver correta, ainda quero investigar.
Portanto, terei meus dados de resposta
de erro que recebo aguardando resposta JSON aqui. Portanto, faço o mesmo que no caso de sucesso, mas o extraio para um campo
diferente e agora aqui quero console registrar os dados da resposta
a erros, para ter uma ideia de como isso é.
Então agora vamos tentar digitar um endereço de e-mail que não existe novamente e agora temos nosso erro estranho que você acabou de ver, mas agora temos essa saída interessante
aqui e você vê que esse é o objeto de erro que o Firebase retornou para mim e, é
claro, isso depende da
API com a qual você está falando, que tipo de erro você
está recebendo, quando está recebendo e quais detalhes ele inclui. Isso, como você vê, é um objeto
que possui uma chave de erro, que é outro objeto que possui um código de erro, alguns detalhes sobre os erros
e, em seguida, esta mensagem que é, por exemplo, e-mail não encontrada e é essa
a parte que me interessa. A propósito, nos documentos oficiais, você encontrará mais identificadores de erros
em potencial que poderia estar obtendo. Então, no
final, é isso que quero verificar agora. Quero obter meu ID de erro, digamos, a partir dos dados da resposta ao
erro, acessando o campo de erro, que é esse campo que me dá acesso a esse objeto que, em seguida, possui
esse campo de mensagem.
Portanto, aqui, acesso a mensagem para receber essa mensagem e agora podemos verificar isso, podemos verificar se o
ID do erro é igual ao e-mail não encontrado. Se for esse o caso, desejo definir minha própria
mensagem personalizada. Por isso, adicionarei uma mensagem variável, que é algo que deu errado por padrão,
mas aqui, se sabemos que o problema é que não encontramos um e-mail endereço,
poderíamos dizer que este e-mail não foi encontrado e adicionarei mais se o check-in for um segundo.
Portanto, isso é algo que eu quero verificar aqui e, no final, tenho uma mensagem que agora desejo lançar,
então
agora lançarei um novo erro com minha própria mensagem personalizada. Portanto, outra verificação que
eu quero adicionar com uma declaração else / if aqui é se o ID
do erro é para entrar com uma senha inválida, digamos. Para que eu possa verificar isso e definir a mensagem igual a essa senha não é válida e
agora vamos tentar novamente.
Vamos voltar e digitar um endereço de e-mail que não existe, login rápido e obtemos esse endereço de e-mail que
não foi encontrado ou que não foi encontrado.
Agora, vamos tentar um endereço de e-mail válido, mas na verdade uma senha inválida, como essa, e obtemos essa senha
não é válida;
agora, fornecemos um feedback melhor ao usuário.
Agora vamos implementar o mesmo para a inscrição, por isso vou copiar isso e ir para o meu caso de inscrição aqui
e ali, tenho apenas códigos de erro
diferentes, existem códigos como o e-mail, se esse
endereço de e-mail já existir.
Por isso, extraio meu ID de erro da mesma maneira, mas verifiquei se existe um email e, se esse for o erro,
digo que já existe.
Agora, essa é realmente a
única coisa que quero verificar aqui. Também existem outros erros que você pode obter e, por exemplo, pode simplesmente desativar sua
validação aqui e ver qual erro está recebendo se estiver enviando um e-mail inválido. endereço de e-mail
registrando esse ID de erro e, em
seguida, você também pode verificar isso. Aqui, implementarei esta mensagem e, portanto, agora, se eu tentar me inscrever aqui com
um endereço de e-mail que eu já usei, assim, recebo esse e-mail já existe. Por outro lado, se eu usar um endereço de
e-mail válido, é claro, isso só ocorre no Firebase; então, se você for autenticar e
atualizar isso, verá o segundo usuário.
É assim que você pode adicionar um controle giratório de carregamento e tratamento de erros com autenticação.
Tudo bem, mas agora seria bom também deixar a tela e ir para o nosso aplicativo e começar a
trabalhar com o token que estamos recebendo.