Create a React Native lib to implement user registration

[vcampitelli]

Create a React Native lib to implement user registration

Problem

FormidableLabs/react-native-app-auth doesn't offer a way of register users because it's not part of the OAuth Standard, but one of our clients wants that.

Solution

Instead of adding the feature directly to the library and opening a PR (which probably wouldn't be approved) or forking it, I suggest that we create a new library (e.g. @fusionauth/react-native-app-auth) to add this and other features that we may want in the future. This way, current users don't need to change their existing code.

We have to code in both Java and Objective-C classes, duplicating all authorize-related methods in all FormidableLabs/react-native-app-auth, openid/AppAuth-Android, openid/AppAuth-iOS libraries and combine them all into a single location.

Additional context

Goal is to have this done by the 1st of Sep.

Internal

Ticket 73805

Community guidelines

All issues filed in this repository must abide by the FusionAuth community guidelines.

[vcampitelli]

Actually, things are way easier than I first realized... I thought we had to duplicate the entire authorization workflow to create this because, even though I was overriding the authorizationEndpoint in my tests, the library was still using /oauth2/authorize as it was using the discovery doc to cache things. After I almost finished duplicating everything, I saw that it was only doing so due to a prefetchConfiguration() call in the React Native code (it was also "warming up" the browser to make things faster so I didn't catch that part in my initial assessment).

So, to call the user registration form, one just need to:

1. Remove any calls to prefetchConfiguration()
2. Pass every needed URL (authorize, token and logout endpoints) to a serviceConfiguration object
3. Call the authorize() method but use the custom /oauth2/register endpoint

Here's a sample code:

// Configuring FusionAuth
const fusionAuthConfig = {
  issuer: "your.fusionauth.url",
  clientId: "Your application's Client Id",
  redirectUrl: "com.your.app://oauthredirect",
  scopes: ["openid", "offline_access"],
  serviceConfiguration: {
    authorizationEndpoint: "https://your.fusionauth.url/oauth2/authorize",
    userRegisterEndpoint: "https://your.fusionauth.url/oauth2/register", // This will be used down below
    tokenEndpoint: "https://your.fusionauth.url/oauth2/token",
    endSessionEndpoint: "https://your.fusionauth.url/oauth2/logout",
  },
};

// And then, in your component, replace the URL in authorizationEndpoint
// with the one in userRegisterEndpoint and call authorize()
const config = {...fusionAuthConfig, ...{
  serviceConfiguration: {
   ...fusionAuthConfig.serviceConfiguration,
    authorizationEndpoint: fusionAuthConfig.serviceConfiguration.userRegisterEndpoint,
  },
}};
const authState = await authorize(config);

[mooreds]

Hmmm. This feels like a forum post since we don't have a page dedicated to react native right now. When we get the quickstart written, this could be an addition there.

Does that make sense, @vcampitelli ?

[vcampitelli]

This was posted on https://fusionauth.io/community/forum/topic/2481/register-a-user-with-formidablelabs-react-native-app-auth