Webview native authentication in React Native - Maltem Academy


Webview native authentication in React Native

formation developpement application web mobile react reactnative


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

Learn more ...

Click here to read the full article on smakosh.com

Read more articles :

Nos formations

UX: Introduction au User Experience Design

Niveau : débutant et confirmé

Agile: Devenir agile vite et durablement

Niveau : débutant et confirmé

Dév: les technologies front

Niveau : débutant et confirmé