Managed workflow authentication SecureStore alternative for web

Hey everyone :wave:

I am building a universal mobile app targeting all platforms (including web) and I stumble in a problem that seems often neglected by most people so I would like some guidance/advice/suggestions

Looking at the guide above you see the following

import * as SecureStore from 'expo-secure-store';

const MY_SECURE_AUTH_STATE_KEY = 'MySecureAuthStateKey';

function App() {
  const [, response] = useAuthRequest({});

  React.useEffect(() => {
    if (response && response.type === 'success') {
      const auth = response.params;
      const storageValue = JSON.stringify(auth);

      if (Platform.OS !== 'web') {
        // Securely store the auth on your device
        SecureStore.setItemAsync(MY_SECURE_AUTH_STATE_KEY, storageValue);
      }
    }
  }, [response]);

  // More login code...
}

I was wondering what suggestions people have for the web scenario

I did read up on https://github.com/expo/expo/issues/7744 which points to some folks recommending AsyncStorage but that seems insecure for web targets as it would lead to LocalStorage there

There seems to be a great misunderstanding everywhere with the implications of choosing AsyncStorage, my understanding is that the Web target ends up being the same scenario as a regular SPA app

Looking at common guides for securing SPA apps tells us that the recommendations are to never store tokens in the browser local storage!

Here’s some examples of such guides (had to remove the links because my new account doesn’t let me create a post with more than 2 links)

  • curity -> /resources/architect/oauth/spa-best-practices/
  • auth0 -> /docs/tokens/token-storage#browser-local-storage-scenarios
  • scottbrady91 -> .com/OAuth/Cheat-Sheet-OAuth-for-Browser-Based-Applications

I would like to know if anyone has thought of this before and how did they plan their Web code to accommodate security standards and best practices in this topic

Thank you!