DEV Community

Cover image for Fluxo de autenticação no React Native usando Expo Router

Fluxo de autenticação no React Native usando Expo Router

Luma Montes on February 18, 2024

Quem já trabalhou com rotas com Expo ou React Native, sabe que o React Navigation é a forma padrão de lidar com navegação! No entanto, conforme mai...
Read full post
Collapse
 
donpsantos profile image
Brendon Santos •

Excelente artigo, mas fiquei com uma duvida, como eu poderia atualizar o valor do isLoading? nessa demonstração mostra apenas como usar e não como settar ele, acabei ficando com duvida.

Collapse
 
marlonx19 profile image
Marlon Englemam •

Não faz muito sentido tu alterar o valor do isLoading manualmente, ele só é usando enquanto os valores da session estão sendo capturados do secure store/localStorage. Como a função do expo secure storage é assíncrona, é necessário termos o estado de loading pra colocar na tela um componente tipo "está carregando, aguarde", para só depois do valor ser pego do local storage decidir mandar o usuário pras rotas privadas ou publicas.

Collapse
 
lumamontes profile image
Luma Montes Proesc •

Caracaaa, foi mal na demora @donpsantos, não tinha visto tua dúvida!

Mas é exatamente como o @marlonx19 falou! O valor do isLoading é atualizado de forma automática nesse código de demonstração. E aí esse valor é alterado de acordo com a informação ter sido recuperada da biblioteca expo-secure-storage.

Toooda essa batucada fica na função useStorageState:

Por exemplo, se tu usar assim:

const [[isLoading, session], setSession] = useStorageState("session");

E dando um olho na função useStorageState:

export function useStorageState(key: string): UseStateHook<string> {

  // nesse caso, o valor de key seria 'session', por exemplo

  const [state, setState] = useAsyncState<string>();  

// Por padrão, o `useAsyncState` define o estado inicial de 'state' como `[true, null]`. 
// ou seja, IsLoading começa como true e nesse caso session começa como null

  React.useEffect(() => {
   // aqui ele vai procurar de forma assíncrona na storage pelo valor que possui  a chave 'session'
    SecureStore.getItemAsync(key).then((value) => {
       // Quando o valor é recuperado (ou não encontrado), `setState` é chamado
      setState(value);  
      // Isso altera o estado para `[false, value]`, o que faz `isLoading` se tornar `false`
      // e `session` conter o valor encontrado (ou `null` se não houver nada armazenado)
    });
  }, [key]);

  const setValue = React.useCallback(
    (value: string | null) => {
      //Aqui teria o mesmo comportamento do setState de cima!
      setState(value);
      setStorageItemAsync(key, value);
    },
    [key]
  );
  // E aqui vai retornar o estado atual
  return [state, setValue];
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
lorenalgm profile image
Lorena GM •

Arrasou no artigo! Muito bacana usar o expo router no projeto