Fazer com que o fluxo de autenticação certo ao iniciar um novo projeto de desenvolvimento de aplicativo economiza muito tempo. Para esse fim, hoje, aprenderemos como criar um fluxo de autenticação reutilizável no React Native.
O objetivo deste tutorial é demonstrar como configurar um fluxo de autenticação básico, porém real, de ponta a ponta. O resultado será uma solução genérica que lida com a maioria dos casos de uso de autenticação que podemos facilmente copiar e colar em nosso próximo projeto.
Requisitos
Para seguir este tutorial, certifique-se de que sua configuração de dev inclui a seguinte configuração:
- Versão do nó ≥10.x.x instalada
- Um gerenciador de pacotes, como npm ou Yarn
-
react-native-cliinstalado em sua máquina local
Observe que estamos usando a React Native versão 0.64.0 neste tutorial, então faça com que você esteja usando a versão ≥0.60.x.
Para obter um passo a passo completo sobre como configurar um ambiente de desenvolvimento para React Native em sua máquina local, você pode consultar a documentação oficial aqui .
Reagir configuração do projeto nativo
Agora criaremos um novo projeto React Native. Primeiro, criaremos um diretório para conter todo o nosso código e, em seguida, cd nesse diretório. Escolhemos RNauthflow como o nome do aplicativo e usaremos esse nome em todo o tutorial, mas você pode usar qualquer nome que desejar.
Execute este comando para criar os arquivos básicos do projeto e configuração:
npx init nativo RNauthflow # navegar para o diretório do projeto cd RNauthflow
Assim que a configuração básica do projeto estiver concluída, podemos instalar todas as dependências necessárias para executar e construir o aplicativo de demonstração:
# para navegação yarn add @ react-navigation/native @ react-navigation/stack react-native-reanimated react-native-gestos-handler react-native-screens react-native-safe-area-context @ react-native-community/masked-view
Vale a pena ler como usar o React Navigation em projetos React Native se você não está familiarizado. Para finalizar a instalação no iOS, você terá que instalar pods (NB, certifique-se de ter CocoaPods instalado para esta finalidade).
cd ios/&& pod install # uma vez instalada a dependência do pod CD.. # para rodar no iOS run-ios react-nativo # para rodar no Android react-nativo run-andriod
Criação de uma função de utilidade para armazenar tokens
Para armazenar o token aqui, estamos usando o pacote npm react-native-async-storage/async-storage .
No entanto, já existem soluções para as plataformas Android e iOS.
Para começar, primeiro instale react-native-async-storage/async-storage :
yarn add @ react-native-async-storage/async-storage
Então, podemos implementar facilmente as funções de nossos auxiliares, como:
//arquivo async-storage.js
importar AsyncStorage de'@ react-native-async-storage/async-storage';
exportar função assíncrona getItem () { valor const=await AsyncStorage.getItem ('token'); valor de retorno ? JSON.parse (valor): nulo;
}
exportar função assíncrona setItem (valor) { return AsyncStorage.setItem ('token', JSON.stringify (value));
}
exportar função assíncrona removeItem () { return AsyncStorage.removeItem ('token');
}
Criação do contexto de autenticação
Observe que não estamos usando nenhuma biblioteca para gerenciar o estado do nosso projeto. Podemos usar qualquer biblioteca de gerenciamento de estado que quisermos, mas aqui usaremos a API React Context, que fornece uma maneira de compartilhar valores entre os componentes sem ter que passar explicitamente um prop em cada nível da árvore.
Primeiro, criamos um contexto de autenticação simples e implementamos os componentes do provedor. Nós
tem status , authToken , signIn e signOut em nosso contexto de autenticação. Estamos usando a abordagem useReducer para atualizar o estado, o que ajudará a tornar nosso código limpo e fácil de seguir.
Criamos nossas ações de autenticação com o gancho useMemo para memorizá-las. Essa otimização ajuda a evitar a geração de novas instâncias em cada renderização. Por último, encerramos nosso aplicativo usando o AuthProvider :
/**
* Arquivo AuthProvider.js
*
**/
import * as React from'react';
import { getItem as getToken, setItem as setToken, removeItem as removeToken,
} de'./async-storage';
const AuthContext=React.createContext ({ Status Ocioso', authToken: null, signIn: ()=> {}, signOut: ()=> {},
});
export const useAuthorization=()=> { contexto const=React.useContext (AuthContext); if (! contexto) { lance novo Error ('Error'); } contexto de retorno;
};
exportar const AuthProvider=props=> { const [estado, despacho]=React.useReducer (redutor, { Status Ocioso', authToken: null, }); React.useEffect (()=> { const initState=async ()=> { tentar { const authToken=await getToken (); if (authToken!==null) { despachar ({tipo:'SIGN_IN', token: authToken}); } senão { despachar ({tipo:'SIGN_OUT'}); } } catch (e) { console.log (e); } }; initState (); }, [estado, despacho]); ações const=React.useMemo ( ()=> ({ signIn: token assíncrono=> { despacho ({tipo:'SIGN_IN', token}); esperar setToken (token); }, signOut: async ()=> { despachar ({tipo:'SIGN_OUT'}); aguarde removeToken (); }, }), [estado, despacho], ); Retorna ( {props.children} );
};
redutor const=(estado, ação)=> { switch (action.type) { case'SIGN_OUT': Retorna { ...Estado, status:'signOut', authToken: null, }; case'SIGN_IN': Retorna { ...Estado, status:'signIn', authToken: action.token, }; }
};
Adicionando telas e navegação
Vamos criar duas novas telas, HomeScreen e LoginScreen , dentro do diretório src/screens/. Este componente de tela será responsável por exibir uma tela de login caso o usuário não tenha se autenticado. Assim que o usuário for autorizado, ele poderá acessar a tela inicial.
Aqui, estamos usando o React Navigation v5. Ele segue uma abordagem mais baseada em componentes, usando um NavigatorContainer e uma instância de createStackNavigator :
/**
* Arquivo Home.js
*
*/
import * as React from'react';
importar {NavigationContainer} de'@ react-navigation/native';
importar {createStackNavigator} de'@ react-navigation/stack';
importar {HomeScreen, LoginScreen} de'../screens';
const Stack=createStackNavigator ();
export function Home () { Retorna ( );
}
Se verificarmos o aplicativo em um emulador ou dispositivo, devemos ver uma saída semelhante a esta:
Para usar esta solução, precisamos envolver nosso componente Root (App) com AuthProvider e podemos começar a usar nosso fluxo de autenticação reutilizável.
exportar função padrão App () { Retorna ( );
}
Conclusão
E aí está-criamos com sucesso um fluxo de autenticação genérico e reutilizável. Também aprendemos como configurar o React Navigation e usar sua abordagem baseada em componentes. Podemos prosseguir e implantar esse fluxo de autenticação reutilizável com Firebase, Okta, Auth0 e outros.
Por último, mas não menos importante, você pode encontrar o código completo usado nesta demonstração no repositório GitHub aqui .
A postagem Construindo um fluxo de autenticação reutilizável no React Native apareceu primeiro no LogRocket Blog .
