Before you start reading and getting into this article, you must be aware that only the minority of mobile developers get into this use case and due to that, I decided to write this article to guide you through on how to implement authentication within a native app that has a webview part included. You may be wondering why going through this while you could have just converted the web app into a fully native app or just go fully with the webview. Well to answer the first question, sometimes your client wants a quick & cheap MVP to deploy to TestFlight or the Beta track on the Play Store for their customers to test and share feedback. The reason we want to have at least the authentication part being fully native is because your submitted app on the App Store unlike Google gets tested by humans, and they reject the app if it uses the webview only. Before we move into to the practical part in this guide, let me explain how we will deal with authentication first: 1. User has to register or sign in 2. A request is sent to our REST or GraphQL API returning a JWT token 3. Token gets stored within the device storage 4. User gets redirected to the webview screen being authenticated as we pass the token to the web app using a great library called react-native-webview-invoke, that lets us pass values and functions to be executed within the web app. 5. When the user signs out within the webview screen, a function will be invoked from the web app that logs out the user on the native app as well This way, when the user opens up the app once again, they will start from the authentication process 6. We will be getting the stored token and verifying that it is still valid, if it is, the API will return user’s data, else user has to login once again.
So let us begin by initializing a new React Native project using npx react-native init authApp ⚠️ I’ll be using React Native 0.61.5 Let us install all the libraries we will be using in this example: Navigation: react-native-navigation HTTP requests: axios Webview: react-native-webview Storage: @react-native-community/async-storage Forms & validation: formik + yup Styling: styled-components
you must be aware that only the minority of mobile developers get into this use case
