How to share user session in React Native App and WebView component

Question

I have an application that shares backend with a web. This application has basic email/password login that returns Access Token which is being sent as a header for any other requests. The application also has a screen that is a WebView which displays the web version of this app.

My problem is that I don't know how to share user session between RN app and the WebView. When the user logs in the application it should also log him in the WebView page and if the user logs out it should log him out the WebView aswell.

Is there any way, to inform the WebView that user has logged in and that he should be logged in in the WebView as well?

I tried sending the Authorization header in the WebView source but it doesn't work. https://github.com/react-native-webview/react-native-webview/blob/master/docs/Guide.md#working-with-custom-headers-sessions-and-cookies

Answer 1

Any auth is based on a secret. First, you need to decide what is your secret, it can be a session identifier or jwt token. Then you can communicate between React Native -> Web and back Web -> React Native follow this guide communicating-between-js-and-native and share your knowledge about this secret and use it for your requests.

Related to custom headers this will set the header on the first load, but not on subsequent page navigations.