Social logins

[davidearl]

All people to login using their existing accounts with Facebook, Twitter, LinkedIn, Google, MS Live and Yahoo.

I have found JanRain Engage http://janrain.com/products/engage/social-login/ a dead easy way to implement this.

[mvl22]

@nikolai-b

Could you scope this out? Although it's an old one I think it should be bumped right up now. With the redesign coming this is bound to be a requirement to get more people onboard quickly.

I'd be surprised if there wasn't a Gem to handle this kind of thing nowadays.

[nikolai-b]

There is https://github.com/omniauth/omniauth.

To start with we need a Facebook, Google, Twitter apps (I think that should be enough to start with). There is a guide I've not checked but looks sane: https://scotch.io/tutorials/integrating-social-login-in-a-ruby-on-rails-application
Do you want to make the apps (a developer version with to localhost:3000 and a production version to cyclescape)?

[mvl22]

OK, I'll create app auths on FB and Twitter and we can take it from there.

[mvl22]

For twitter, it looks as if we can't create wildcards for the auth endpoint, so I've used www.

Will send you the details as I create them for each platform.

[nikolai-b]

When a new user is created we're adding their profile pic from that provider, using the nickname as their display name, their email as their email and their full name as their full name.
They will then be redirected to /settings where you can alter your settings.

They can change their email on either system and it won't matter as we authenticate via the oauth's UID (and provider i.e. "twitter"). The system will take them to /settings/sign_up if there is an existing user with the same email but not signed up using oauth and will pre-fill the form in (so when they submit it can warn them that the user exists).

The second time they log in using oauth then they'll be redirected back to whatever page they came from.

[nikolai-b]

Done mainly in 064e5b5

[nikolai-b]

FYI: this doesn't do anything clever if a user with that email already exists.

E.g. my@email.com is an existing CS user and has a twitter account. They now see a "Sign in with Twitter" which they click but are taken to the users/sign_in page with an error:

There was a problem signing you in with Twitter. If you have a Cyclescape account and password please sign in with that.

In the future we could add the option to sign-in and add oauth as a way of signing in next time, i.e. linking an existing CS account with a social account.

[mvl22]

This was generating an error at the point of getting to Facebook's domain. This indicated that I needed to add the staging and www.staging URLs to the Facebook developer settings page, and enabled both Client OAuth Login and Web OAuth Login. This now gets much further.

I've tried using Sign up with Facebook, on staging, but it comes back with:

"There was a problem signing you in with Facebook. If you have a Cyclescape account and password please signin with that."

I've tried disabling the Apache-level password protection in case there is a callback not working, but that doesn't seem to make any difference.

I see Rollbar issued a notification by e-mail:
[cyclescape] staging - New Error: #431 RuntimeError: Could not find a valid mapping for path "/users/auth/facebook/callback"

For Sign up with Twitter, following the button takes me to /users/auth/twitter which gives:

"We're sorry, but something went wrong.
We've been notified about this issue and we'll take a look at it shortly."

I see that Rollbar immediately then sent a notification - see e-mail
[cyclescape] staging - New Error: #432 OAuth::Unauthorized: 403 Forbidden

[nikolai-b]

With Twitter I sent you an email asking you to add the staging URL. Did you manage to do this? I believe that is why you are getting the 403 Forbidden error as I also get this on staging but not in development with localhost URL.

With Facebook the error is in that Rollbar:

This redirect failed because the redirect URI is not white-listed in the app's client OAuth settings. Make sure that the client and web OAuth logins are on and add all your app domains as valid OAuth redirect URIs.

So somehow you still need to add staging URLs to our Facebook app, I managed to log in locally (I think, maybe I didn't manage with Facebook as our app wasn't live 🤔) so I hope this is a configuration issue.

[nikolai-b]

Also if you get

There was a problem signing you in with Facebook. If you have a Cyclescape account and password please signin with that.

that could also be because the user could not be created (the email or the display name clash with an existing user). You could change your email / display name on staging so they don't clash. If after getting that message you go to settings/sign_up it should be pre-filled with the information from Facebook (if it worked)

[nikolai-b]

@mvl22 I've put this back in staging to test

[mvl22]

That looks much clearer.

Can we get rid of the duplicated (presumably boilerplate) two "Sign in with ..." links at the bottom of the page which are just now a duplicate:

[nikolai-b]

Thanks I'd not even noticed, removed in 61d239b

[nikolai-b]

@mvl22 I can't test twitter as I think we've still not added the staging URL to the twitter whitelist correctly and I don't have Facebook so can't test that. This is blocking the other API improvements so would be good to get it all live.

[mvl22]

Sorry, I've now added

/users/auth/twitter/callback

for www.staging (https) also.

Could you test this now?

[nikolai-b]

Thanks, Twitter works on staging. I haven't tested Facebook as I don't have an account. Are you happy to deploy?

[mvl22]

Twitter works - thanks.

Facebook doesn't seem to be working - could you check the logs to see what happened?

I got:

"There was a problem signing you in with Facebook. If you have a Cyclescape account and password please signin with that."

[mvl22]

Question: What happens when someone tries to sign up with Facebook/Twitter but that e-mail already exists as a native account?

[mvl22]

Facebook doesn't seem to be working - could you check the logs to see what happened?

Rollbar report:

RuntimeError: Could not find a valid mapping for path "/users/auth/facebook/callback"

[nikolai-b]

See #200 (comment) for what happens when the email exists.

That error looks like it is when the authorization flow is cancelled or the CSFR token isn't valid. I've added a better failure, would you mind re-trying?

[mvl22]

Tried again, but still getting:

"There was a problem signing you in with Facebook. If you have a Cyclescape account and password please signin with that."

[nikolai-b]

@mvl22 I think you might have missed #200 (comment) :

FYI: this doesn't do anything clever if a user with that email already exists.

E.g. my@email.com is an existing CS user and has a twitter account. They now see a "Sign in with Twitter" which they click but are taken to the users/sign_in page with an error:

There was a problem signing you in with Twitter. If you have a Cyclescape account and password please sign in with that.

In the future we could add the option to sign-in and add oauth as a way of signing in next time, i.e. linking an existing CS account with a social account.

and #200 (comment) :

Also if you get

There was a problem signing you in with Facebook. If you have a Cyclescape account and password please signin with that.

that could also be because the user could not be created (the email or the display name clash with an existing user).

If you'd like to re-word the message so it is clearer then can we do that in another issue? It does seem like that message can cause confusion!

I borrowed a friends facebook and made a user on staging to check it works.

[mvl22]

OK, sounds like we're good to go then.

I think this will need further work to tweak and tidy up but let's get this live.