How to create a Basic Authentication App using React Query and React Navigation
In this tutorial we will see how to create a basic authentication app using react navigation 6 and react query. Requests to the server, validation and navigation flow is handled in this application.
We are using expo app for this tutorial. Create a blank expo application by executing the below command.
expo init BasicAuthApp # select blank template app
cd BasicAuthApp
npm startInstall React Navigation
npm install @react-navigation/native @react-navigation/native-stackInstalling dependencies into an Expo managed project
expo install react-native-screens react-native-safe-area-contextInstall React Query for Data fetching
npm i react-queryApplication setup
Open App.js and setup react-query and react-navigation
Two stack navigators are created to handle authenticated and non authenticated screens so that we can’t navigate to authentication screens after login via back button and restrict access to non authorized users.
Register Screen
Using react-query we will handle the basic authentications. useMutation hook is used to do the register the new user.
Login Screen
Create a file for handling requests to servers
service.js
With this create screens for HomeScreen.js and DetailScreen.js which will be a part of authenticated stack.
Link to the repository: https://github.com/YajanaRao/BasicAuthApp
