Forum Academy Marketplace Showcase Pricing Features

[Solved] Oauth Prompt User after already creating account

Hello Bubble Community!

Question: Can someone tell me the workflow to prompt a user to link their current non-oauth account to an Oauth service.

Scenario: I have several users that would like to begin using Google instead of their standard credentials. The bubble documentation mentioned prompting, but there is not guide or terminology that I can find for this.

Background: I have Google setup and working. I have where they can either create an account using the old fashioned way and by using Google.

Unfortunately I don’t think you’ll be able to use the Social Login action. You’ll need to build all of the oAuth dance yourself, or you may be able to use Auth0.

Another Bubbler just released a plugin for Auth0 too. [New plugin] 🔒 Auth0 integration

If you want more control you can build it yourself inside Bubble. These posts should help.

This is a very interesting option. I wonder if I can have both APIs running at the same time in my app for different purposes. Could I just use this when I’m wanting to convert a standard login to oauth?

As the documentation describes, you can add any number of alternative login types to a User, simply by having them (1) log in with a method they already use and then (2) while logged in, log them in again with the new method.

Done.

That is:

  1. User must be logged in via (for example) their email/password or a social auth they already use.

  2. Present them with an interface for “Add another way to log in”

  3. When they click, for example, “Facebook” – run the log the user in with Facebook action.

  4. Now the user can login using email/pass or Facebook

Repeat for any other methods user would like to log in.

Note: Bubble has a built in “uses email” state for Users. Users do not have a built-in list of what social authorizations they use. So, if you support multiple logins, you may want to manage your own list of those.

(I’m not sure if this is really helpful or useful, but just an idea. What you’d do to maintain this list is just push a value onto some list on the User when the first ‘sign up’ or ‘add’ (which is just signing up, of course) with a certain login method. E.g., step 1 sign up/login with method_X; step 2 make changes to User - field List of Social logins - add method_X)

Hmm, I never saw this documentation before, but my experience has not matched what it is being said on this page. I had a user who was already setup with password/email who I then authenticated with a social account, since the emails were different Bubble created a separate user.

THE USER MUST BE LOGGED IN before attempting that supplemental authentication, or #2 will happen:

Users in Bubble can use traditional logins and social logins at the same time. There are a few cases here.

  1. If the user is currently logged in with email and password, you can prompt them to link their account with an Oauth provider (such as Facebook, Google…). If a user goes through such a flow, a new user will not be created, but, instead, the Oauth credentials will be added to the current, logged-in user. After this flow completes, the user will be able to login either with his email/password, or via an Oauth flow. If another user exists in the database with the email provided by the external service, the action will fail and a message will be shown to the user.
  1. If the user isn’t logged in when he goes through an Oauth flow, a new user will be created, except if a user with the same email (the email registered with Facebook) already exists in the app’s database. In such a case, the workflow will fail and a message will be shown to the user.
  1. If a user has signed up with an external service and wishes to add a password to his account, he can do this by going through a ‘reset the user’s password’ action. This will effectively modify the user that was authenticating only with Oauth credentials and will the email and password values to the user object.

QUICK EDIT: I have not tested this functionality extensively. It could be that in situation #1, if the email associated with the social auth is different from the email that the logged in User uses for email/password to your app, that an error/problem occurs. However, the docs seem to imply that this should work (unless another account in your app – not the one the User is logged in with – has been set up with that email).

And I just got a chuckle over “#2 will happen”. :poop:

#imtwelve

… point being, @Kfawcett, you must create a new interface for this. If you’re using the sample login/sigunup reusable from the starter template, for example, a logged in user cannot log in again. (this is how it should be)

So it sounds like your user (1) logged out then (2) signed up via a social network. They triggered situation 2. They had no way of triggering situation 1.

(Further, they must have signed up for your app with a different email than the one they use for their social network, or else situation 2 would have failed.)

This is not to say that there couldn’t be bugs with all of this, but this is functionality that I’ve built out in my app (but not yet deployed as I’m not happy with my interface for it) and AFAICT it worked exactly as described in https://manual.bubble.is/working-with-data/the-user-type.html

My user was logged in – I do not have a social login setup. The only way they could use the button that allowed them to connect their social account was to be logged in. Use case 1 is what should have happened, but it didn’t and a new user was created.

So, caveat emptor.

Gotcha. Hmm… I could actually test that case real quick and report back.

@Kfawcett: I just tested this. It works exactly as described in the docs.

Here’s a page with a button that allows us to add Facebook as an auth method. All it does is run signup/login the user with Facebook when clicked. Here’s that flow:

Here’s the page:

I have created a Facebook test user. He is Aiden Putnamson.

Aiden comes to GRUPZ and signs up with an email/password:

After signing up, Aiden can visit this page and we have a text showing his email, firstname, lastname and other info to watch what happens. The text is like this:

Here is Aiden visiting the page:

Now Aiden clicks Add Facebook Auth and authenticates / allows us permission:

So we see Aiden can log in to GRUPZ as [email protected] with a password. And we seem to be connected to Facebook as well.

Let’s see if Aiden can log in via Facebook now. First we log out:

And now we log in and click Log in with Facebook:

Did that work? Yes it did:

You will note a couple of things:

(1) the fact that Aiden’s GRUPZ last name changed to match Facebook is something that my app does (when a user logs in with facebook, we check if their FB name and profile pic is different than the app’s data, if it is, I change it in my database)… so that’s why Aiden’s last name is now corrected.

(2) Aiden can in fact have completely different GRUPZ email login address and FB-associated email address.

OK, what happens if Aiden logs out and then logs in via email/password to GRUPZ? Log out:

Log in with email/pass:

The page shows us:

So all works as expected.

I don’t know what explains your past experience with this, @Kfawcett… coulda been bugged at the time?

It’s highly possible it was a bug or an edge case. It was my corporate email, connected to Office365, that had the domain changed when we formed a new company, so I’m sure that had something to do with it. I had signed up to my app with the new email (which created the user), then pressed a button (social login) to Microsoft Graph with my corporate credentials to authorize oAuth and it created a user with my old email.

I’m handling everything outside of Bubble’s social login now though, so not too worried about it.

Wow!!! You guys gave me a bunch of good information. I’m going to try some of these solutions out tomorrow. I’ll let you know how it works for me.

It worked! The alternative login option helped. I had to create a secondary menu for if they user is already logged in.