How to display a SharePoint page in a react-native-webview using authentication that has been made in the react-native app containing the view?

Julien MAGNE 6 Reputation points
2023-07-05T15:40:57.8633333+00:00

Hi all !

I am building a react-native app that is displaying a SharePoint site inside a react-native-webview.

The app is up and running.

Starting few weeks ago, we had issues with sso that used to work well before. Openning of Power Apps url in the webview now sometime asks for authentication. Same for other non Microsoft sites that are configured for SSO with Azure AD.

Question #1 : why would react-native-webview ( cookie, storage, other ) not be able anymore to open a site with SSO from a link in an authenticated SharePoint session ? Has any security mechanisme been update on Microsoft side that could impact ?

Not being able to have SSO working when login is made from a SharePoint page in the webview, I am evaluating the solution to implement Auth directly from my react-native app using react-native-app-auth.

I implemented with success Microsoft msgraph-sample-react-native app with my own Azure Ad Application.

I am authenticated in my app, I am able to make calls to graph API, and I received what I think is an access token.

Now I am trying to open a SharePoint page in my webview, using my application authentication so that the user does not have to log again. I read many ( many, many ) threads of people attempting to perform this but I was not able to find one that succeeded.

The use of the received token seems not to work, either as an url access_token parameter, nor as a header Authorisation.

Question #2 : is it possible to display a SharePoint site inside a react-native-webview without the user authenticating in the webview, but instead using the authentication that has been performed at the react-native level, using for example react-native-app-auth library ? If so, is there any documentation, thread, link to a description of a successfull attempt to do so.

Thanks a lot for you help or tips

Microsoft 365 and Office SharePoint Development
{count} vote

1 answer

Sort by: Most helpful
  1. Julien MAGNE 6 Reputation points
    2024-02-01T09:21:26.8833333+00:00

    Hi Patrik, we found a 'solution' but not the one I'm the most proud of. We added some custom code in our app : if we try to open a PowerApps url, we first inject javascript to wipe out local and session storage for PowerApps, then open the url again ( adding &skipMobileRedirect=1 at the end for better user experience ), and there it goes. Her our piece of code, hope it can help :

      //CLEAN BOTH STORAGES
      const CLEAN_POWERAPPS_BOTH_STORAGE = Platform.OS === 'android' ?
      "localStorage.clear();sessionStorage.clear();true;" :
      `setTimeout(() => {
        localStorage.clear();
        sessionStorage.clear();
        true;
      }, 100);
      `
      ;   
    
    
    0 comments No comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.