Social Login with V2 - Can't retrieve authorizeUri from SP

[oshalygin]

In recent development, I need to start leveraging the TOKEN_SET and TOKEN_REFRESH dispatched events so that I can properly pass them on subsequent API calls to the express application.

Looking at the documentation, those events are not dispatched in stormpath-react@1.3.X so I upgraded to stormpath-react@2.0.0.

After doing so, social login link throws the following error:

Uncaught TypeError: Cannot read property 'split' of undefined
    at SocialLoginLink._buildAuthorizationUri (eval at <anonymous> (bundle.js:4076), <anonymous>:11254:59)
    at eval (eval at <anonymous> (bundle.js:4076), <anonymous>:11315:42)
    at eval (eval at <anonymous> (bundle.js:4076), <anonymous>:938:12)
    at XMLHttpRequest.request.onreadystatechange (eval at <anonymous> (bundle.js:4076), <anonymous>:886:8)

Looking at the code, specifically this section:

_createClass(SocialLoginLink, [{
	    key: '_buildAuthorizationUri',
	    value: function _buildAuthorizationUri(accountStore, scope, redirectUri) {

	      // The authorizeUri includes the basic set of query parameters, but
	      // we need to be able to override them with values that the developer
	      // may supply via this library
              console.log(accountStore);
              console.log(scope);
              console.log(redirectUri);
	      var authorizationUri = accountStore.authorizeUri;

	      var authorizationUriBaseEndpoint = authorizationUri.split('?')[0]; //here

	      var defaultQueryString = authorizationUri.split('?')[1];

	      var provider = accountStore.provider;

	      var queryString = _utils2.default.parseQueryString(defaultQueryString);

	      return authorizationUriBaseEndpoint + '?' + _utils2.default.encodeQueryString((0, _xtend2.default)(queryString, {
	        client_id: provider.clientId,
	        scope: scope || provider.scope,
	        redirect_uri: redirectUri || _utils2.default.getCurrentHost(),
	        response_type: 'stormpath_token'
	      }));
	    }

From the above, console.log(accountStore) yields the following object:

Note I added special chars to the clientId here for security reasons but I can ping my exact clientId if necessary.

{
  href: "https://api.stormpath.com/v1/directories/5dOVvMXS9HuYWB9Gfq48Pb",
  name: "Local-ACME-Google"
  provider: {
    clientId: "4136362asdf855-6gsti0asdf6hk61bed5p211rm0lkofdki.apps.googleusercontent.com",
    href: "https://api.stormpath.com/v1/directories/5dOVvMXS9HuYWB9Gfq48Pb/provider",
    providerId: "google",
    scope: "email profile"
  }
}

Looking at the SP console, the AUTHORIZED REDIRECT URI is set appropriately,

It appears that the authorizeUri is not properly getting set in the accountStore

Looking further into userStore.getLoginViewData,

_context2.default.userStore.getLoginViewData(function (err, data) {
	        var fields = null;
	        var socialProviders = null;
          console.log(data);
	        if (err) {
	          fields = defaultFields;
	        } else if (data && data.form) {
	          fields = data.form.fields;
	          if (!_this2.props.hideSocial) {
	            data.accountStores.forEach(function (accountStore) {
                // More code here, but it's unrelated
}

The log of the data object from above:

{
      accountStores: [
         {
            href: "https://api.stormpath.com/v1/directories/5dOVvMXS9HuYWB9Gfq48Pb",
            name: "Local-ACME-Google",
            provider: {} // This is the same object as above, its populated with the clientId, href and providerId
         }
      ],
      form: {
         fields: Array[2] // this is populated with login/password objects
     }
}

This is somewhat related to #161 but in that case I wasn't setting the redirectUri appropriately in the SP Portal. This scenario seems quite a bit different.

Thanks as usual and glad to help if I can figure out why the redirectUri is not passed down.

[advance512]

I am having a similar issue. Not receiving authorizeUri.
Since Stormpath aren't very responsive, I'd appreciate a bit of help here @oshalygin before I give up and just use their main competitor instead. :)

What configuration in the Stormpath Portal do I need to do? I set authorization URIs everywhere I could.

[oshalygin]

@advance512

Don't go with the competitor, mostly because there isn't one this good :). There is a lot that is offered out of the box with Stormpath and all of the various integrations, along with things like multi-tenancy, AD/SAML, MFA, etc. I don't know any other product thats offering the same with so much dev support. Also note that with the amount of integrations and the growing development, it may take some time to get changes.

I got this working but I'm using "react-stormpath": "1.3.5". Instead of getting the TOKEN_SET event that you can listen to and then update your store on, you can just create an API endpoint that you call to pull down the customData that you're looking for.

Note when you're in your first authorized component, the user object will be set on context, so you can use THAT object to perform any kind of additional calls that you need.

Here's a small code snippet, feel free to ask more Q's. I'm leaving this open for now, even though I got a workaround that works pretty well for my needs:

componentWillMount() {
    const { authorizationActions } = this.props;
    const { user } = this.context;
    authorizationActions.getAuthorizations(user.href);
  }

Note I'm using Redux, so none of the reducers have any nonsense about side-effects or XHR calls.

[advance512]

You're using v1.3.5, not v2.0.0, because v2.0.0 is broken.
I managed to get it working, with an older version of stormpath-express-react-example and the corresponding v1.3.2 react-stormpath. However, I get "Invalid Token" errors when doing social logins, though it did seem to work for a short while.

While Stormpath might offer lots of impressive features, if it doesn't offer the basic feature I am looking - simple to integrate social login - I might as well try Auth0, or just use Passport.js and get it over with... which is highly disappointing.

[advance512]

I just checked. The reason I get "invalid token" is almost certainly because I enabled "Email Verification", and the React example doesn't know how to handle that. The standard express example works perfectly, and shows that "verification" thing.

It's very disappointing. I've spent nearly 4 hours trying to get their simple React example working, and still got nearly nowhere.

[advance512]

Alright, the "straw that broke the camel's back" is that it seems the account linking is not working, even though I enabled it. I'll give the competitor a go.