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:

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!