Not getting authenticated when i use the redirectUri prop on the SocialLoginLink

[thedrew12]

If I specify a redirectUri on the SocialLoginLink component I get redirected back to the right URI, but I'm not authenticated. If I don't specify a redirectUri and use the default one I do get authenticated.

<SocialLoginLink providerId='facebook' redirectUri={window.location.origin}>

[robertjd]

Hi @thedrew12 , this happens because we're doing the authorization code flow with facebook, which requires you to land on the /callbacks/facebook endpoint of our express app. That endpoint handles the last part of the authentication flow by exchanging the facebook code for stormpath tokens.

If you need to redirect the user to a custom location after login, I would suggest this configuration in your express server:

app.use(stormpath.init(app, {
  web: {
    login: {
      nextUri: '/foo'
    }
  }
}));

That will cause the user to be redirected to /foo after the token exchange is done by /callbacks/facebook.

I hope this helps!

[thedrew12]

Hi @robertjd, thanks for getting back with me.
I added this to the express server.

    login: {
      nextUri: '/'
    },
    register: {
      nextUri: '/'
    }

But I'm still not getting authenticated. I tried a different nextUri like /explore, but that didn't work either. It redirects me to a custom route specified in the express server if I don't supply the redirectUri prop on the SocialLoginLink. Thanks for your time.

[robertjd]

Thanks, can you enumerate the user story you're trying to support, so that I can make sure I'm pointing you in the right direction?

[thedrew12]

I'm trying to login/register in to our app using a social provider. Everything seems to be setup properly in the stormpath admin. I've tested this on two different domains, localhost and in a QA environment. Same issue, correct redirectUri, but no authentication.

[thedrew12]

Any ideas on how to fix this?

[robertjd]

@thedrew12 are you still stuck on this one? Sorry for the delay here, holidays :)

[thedrew12]

@robertjd Yes, still having the same issue. Thanks for your time.

[the-overengineer]

@thedrew12 Sorry about the delay with resolving this issue. I think you're misunderstanding the redirectUri property here. If I understand correctly, you're trying to redirect the user to some page after they are logged in? The redirectUri is not used for that - instead it's the URI the social provider (e.g. Facebook) should redirect to for your application to verify that the user has been signed in. Unless you've implemented your custom FB/whatever login checker, you should not touch that property.

Now, if you're talking about redirecting the user after they are authenticated (i.e. standard post-login redirect), we have two possible scenarios: If there is always a redirect to the same URI, the answer provided by @robertjd above is absolutely correct - do not touch the redirectUri prop at all and just add a:

{
  login: {
    nextUri: '/your-uri-inside-app'
  }
}

I tested this inside the https://github.com/stormpath/stormpath-express-react-example repo and can provide you with a fork containing an example if you need something like that?

The other option is that you want dynamic redirects. For example, you want the user to be redirected back to the last page they were on. If that is your use case, I'm not sure it's currently supported, but it's quite easy to set up, provided you're using Express, which you seem to be.

Look at the few minimal changes I made to the SocialLoginLink in this branch that leverage express-stormpath's ability to unpack the URI from the cookie. It can then be used like this:

const redirect = '/profile';

const mySocialLink = (props) => {
 return (
   <SocialLoginLink providerId="google" nextUri={props.redirect} />
 );
};

// ...

mySocialLink({redirect}); // Redirects to http://my.host/profile after the process is successful

@robertjd A technical note: I'm leveraging the functionality offered by express-stormpath here:
https://github.com/stormpath/express-stormpath/blob/master/lib/oauth/common.js#L67

I'm not sure how standardised this behaviour is? If it is, I can make a PR to the version-1.x.x branch as to support this behaviour globally?

[thedrew12]

@Tweety-FER Thanks for the response, can you provide the example of the social login working? I can't seem to get it working on my end. I don't have the redirect props on the SocialLoginLink component <SocialLoginLink providerId={type} scope={scope}> and I have the stormpath configured like so

  web: {
    produces: ['application/json'],
    me: {
      expand: {
        groups: true,
        customData: true
      }
    },
    saml: {
      enabled: false,
      host: redirectHost,
      protocol: redirectProtocol
    },
    logout: {
      enabled: true
    },
    login: {
      enabled: true,
      nextUri: '/'
    }
  }

When I click on the social login link button I get redirected to /callbacks/facebook asking for me to login again with facebook. Thanks for your help.

[thedrew12]

I updated to version 2 and tried to use the SocialLoginLink component and now I'm getting an error. Cannot read property 'split' of undefined I feel like something in my stormpath config is not setup right. I followed the steps and setup a facebook login and setup a OAuth redirect URI.

[the-overengineer]

@thedrew12 Looking at the code in React and Express SDKs, it would appear that the new social login flow only works with Client API out of the box. I'm not seeing it documented anywhere, though, and the error is hardly descriptive, so we could improve on that.

@robertjd Are there plans for adding express support for the same social login behaviour? I remember we talked about this, but not sure what we concluded.

[thedrew12]

@Tweety-FER I got the facebook and google login working for version 1.3.3, but not with 2. I hadn't configured my Facebook Login or my Google product properly to send the valid OAuth redirect URI. I set it to/callbacks/facebook and it worked.

[the-overengineer]

@thedrew12 Thanks for the update! As I was saying (maybe not clearly enough), v2 works with the Client API flow, instead of handling the redirect flows manually like 1.X.Y. This binds the integration to the Client API (for the time being), but allows many more social login providers than the older versions.

Switching to the Client API, if needed for your use case, should be more or less seamless, as it only handles the basics, taking over for the pre-defined routes in the back-end integrations. At that point, it's just a question of handling the Client-API-provided token from the rest of the back-end integration. Of course, if the v1 implementation is sufficient, there is no need for any of this.

[dylanfpaul]

Is there a way to send a user to a certain URI upon 'registering' for the first time with a SocialLoginLink. Something akin to redirecting a user upon a successful signup on the RegistrationForm component? Sorry if this seems unrelated, perhaps I should start a new issue.