Using react app auth and react native and getting access to the profile pages

[dan]

I'm using react app auth as documented here to log my react native app into FusionAuth.

However, when I try to access the account pages (for self service account management) I am prompted to log in again. So the login isn't persisted.

How should I proceed?

[dan]

Hmmm.

The account management pages require you to ensure that "Remember Me" is checked because they use the single sign-on cookie for session state. (See more on that at this issue.) (They are also a premium feature, not available in the community edition.)

There are two issues:

• Can you set the rememberMe parameter from react App Auth?
• Will the cookies set by FusionAuth be shared between the view of React App Auth and the webview displaying the profile application.

For the first issue, I think you can, using the additionalParameters parameter, documented here.

For the second one, it's important to realize that react app auth depends on two other projects: https://github.com/openid/AppAuth-iOS and https://github.com/openid/AppAuth-Android

Looking through the issues of these two project, it looks like it is possible. In particular: https://github.com/openid/AppAuth-iOS/issues/508#issuecomment-674473796

Need to test and see if this works.

[dan]

Hmmm, after further investigation, the first issue (rememberMe) isn't the problem, because in each scenario, after I login, I am remembered. I am remembered after I login using App Auth and also after I login to the profile page.

The issue is the second one. App Auth and the profile page are not sharing cookies. This is not a FusionAuth specific problem.

I'm looking further into app auth options to share browser instances and/or make sure cookies are shared between the webview which loads the profile page and the App Auth view.

[dan]

Okay, using cookiemanager, I can get all the cookies from the appauth authentication event.

I'm having some issues trying to figure out how to set the cookies on the webview. There's some support in the cookie manager and there are some hints on stack overflow:

• https://stackoverflow.com/questions/63168705/how-can-i-get-cookies-from-react-native-webview-on-ios
• https://stackoverflow.com/questions/69469144/react-native-webview-set-cookies-policy
• https://stackoverflow.com/questions/26573137/can-i-set-the-cookies-to-be-used-by-a-wkwebview

This article looks useful as well: https://medium.com/mobile-app-development-publication/sync-cookies-across-webviews-and-native-app-for-ios-and-android-f2ed5ac79f32

But I haven't been able to make it work.

[dan]

Okay, so you can set cookies in the webview. From the guide:

const App = () => {
  return (
    <WebView
      source={{
        uri: 'http://example.com',
        headers: {
          Cookie: 'cookie1=asdf; cookie2=dfasdfdas',
        },
      }}
      sharedCookiesEnabled={true}
    />
  );
};

So here's my profile screen:

const ProfileScreen = ({
        navigation,
        route
    }) => {

        for (const [key, value] of Object.entries(route.params.cookies)) {
            console.log(`${key}: ${value}`);
            cookie = value;
        }
        //return <WebView source={{ uri: route.params.name }} 
        return ( < CustomHeaderWebView source = {
                {
                    uri: 'https://httpbin.org/cookies',
                    headers: {
                        Cookie: 'cookie1=asdf111; cookie2=dfasdfdas',
                    },
                }
            }
            sharedCookiesEnabled = {
                true
            }
            />);
        };

And here's the custom header webview.

const CustomHeaderWebView = (props) => {
  const { uri, onLoadStart, ...restProps } = props;
  const [currentURI, setURI] = useState(props.source.uri);
  const newSource = { ...props.source, uri: currentURI };

  return (
    <WebView
      {...restProps}
      source={newSource}
      onShouldStartLoadWithRequest={(request) => {
        // If we're loading the current URI, allow it to load
        if (request.url === currentURI) return true;
        // We're loading a new URL -- change state first
        setURI(request.url);
        return false;
      }}
    />
  );
};

In the ios simulator, this shows the cookies (httpbin just echoes back any cookies).

So it's only a matter of setting the cookies retrieved from CookieManager into header options and passing them to the webview. Haven't tested this in android, but from what I've read, android shares cookies more easily.

This solution should work fine.

[dan]

We should wrap this up into a nice SDK.

Feature request opened here: https://github.com/FusionAuth/fusionauth-issues/issues/2088

[dan]

Realized I forgot to drop the code which iterates the cookies. You can see that with the CookieManager below.

  const getUser = async () => {
    try {

      // get the cookies
      CookieManager.get('https://sandbox.fusionauth.io')
        .then((cookies) => {
          console.log('in getUser CookieManager.get =>', cookies);
       });

//...
    } catch (e) {
      console.log(e);
    }
  };

The cookie manager is installed using this package: https://github.com/react-native-cookies/cookies

[jamesbaxter]

@dan Thanks Dan. Can you provide the full example zipped up? thanks

[dan]

Hi @jamesbaxter . Sorry, just saw this now. I don't have the example app available. Sorry!