Add Google Login and Sign Up To Bubble [2024] - Bubble.io Tutorial 

You're welcome. The buttons are just groups in Bubble that are styled with a white background, 1px border of #D0D5DD, round corners of 8px and the image is from commons.wikimedia.org/wiki/File:Google_%22G%22_Logo.svg.

@@NoCodeAcademy That's cool, thanx, yet there is one problem with it, you cannot get all button functions to a group, for example no chance to create a hover or click effect. any idea how to do that for buttons created using group or shape elements?

​Hi @@marmanlive you'll welcome and I think you'll be happy to know that isn't true it just takes an extra minute of setup. If you select the group in question and under the Property Settings panel, go to the Conditional tab and for the When of the conditional choose "This Group" and then you can add when it is hovered and then a second one for when it is pressed. You can also add a transition effect near the bottom of the Appearance tab so the hover state eases in. If you're into this kind of polish on your app, keep an eye for my animations video on the channel coming in the next few weeks. There will also be a full course available that goes deeper into the topic of adding these nice interaction touches.

@@NoCodeAcademy thanks a lot!

Hey Lorenzo, you're very welcome glad you found what you were looking for

@@NoCodeAcademy your videos are always exhaustive and easy to understand, I'm making an app and i solved many things thanks to you! have a nice day bro

Hey that's correct, they will log into your app only via the Google authentication which is tied to their gmail account and password. If they want to change their password or they forgot it, they would do the password reset/change over at Google. If they want to change their email -- which if you've seen over the past 3-5 years, some large companies offer the ability to change the email now inside an account -- this would create a headache for that. But it's a very small % of people out there who change their email at an account so wouldn't worry about it.

I have to say in dev mode its working properly

Hey Mauricio, inside of the OAuth Consent Screen area of the APIs & Services section, what does it say at the top if it's testing or production? You'll want to hit the "PUBLISH APP" button if not already but keep in mind you'll need to do some verification of your app that involves gathering: 1. An official link to your app's Privacy Policy 2. A RU-vid video showing how you plan to use the Google user data you get from scopes 3. A written explanation telling Google why you need access to sensitive and/or restricted user data 4. All your domains verified in Google Search Console Or is that complete and you'll still getting the request not validated message?

Hi I got it from the source, Google ;)

Hey Bernardo, thanks for the question. At the 2:25 mark, note the internal and external options and read about them. Then, even though it's not shown in this video, try adding a few emails accounts in the test user list at 2:55ish. That might solve it. It is kind of odd it's saying that, but without knowing your exact configuration, hopefully this helps.

Hi Manoj, even on Bubble.io's main website it does not allow someone who has already made an entry for the same email address which then later tries to sign in with google for the first time, it will not work. So the issue is in the capabilities of Bubble unless you can find a workaround, which if you do, I'd be very pleased to be wrong here.

Hi thanks for the comment. If you are building an app on iOS using Bubble it is ultimately still a web app that is wrapped using a special service (bdk or build natively, etc) and your setup should look the same as presented here. If you were using traditional code, it would involve the Bundle ID. So whatever setting you set when going through the steps, if you selected mobile app, either go back and change it or start a new app choosing web app as your platform. Confusing, I know. Anyway, in summary, if you set it up as seen here for a regular web app, it should work the same on a mobile device. Though with a slightly less smooth user experience as it's going to require the person to login vs the easy way of a normal browser where they are already logged in so they can just click and move in. Does that help?

@@NoCodeAcademy Hello, thank you! Yes, that helps. If the app loads slower, is there a better platform I should use other than Bubble? I also see that it helps by building the app as a single-page app. Would it still be built the same way as the desktop?

​@@user-gq3kw6iw5x overall yes the process of building ui, data and workflows will mostly still be built the same way as a desktop app. But on mobile it is one page, and navigation is therefore slightly different (see my mobile menu videos for that) and then the placement of showing/hiding groups to control what is display are really the only differences. To recommend something besides Bubble for mobile it would depend on the type of app. I have no personal experience with Glide but it looks decent for mobile apps that are simple. Bubble has a lot of capabilities, which if you are pulling together a lot of tools via API (i.e. ai tools) I would still recommend Bubble. But it is a known thing that they have not prioritized mobile.

Hey thanks for the comment, you're right about the setup via Bubble's out-of-the-box Oauth being a bit stuck with the expressions of Current User's First Name, etc if you wanted to do more than that. I have not doing it personally, but the general idea if you really wanted to implement what you're suggesting is you would do something like (a) use the Oauth 2.0 video on this channel, (b) have the user login via the auth (c) you manage the storage and refreshing of tokens in fields in the database (d) you manage the 'sign the user up' workflow. It's a bit more involved but I believe possible. Though like I said, you'd be managing all the variables of the Oauth process from the ground up, which may require additional time learning all the details of it. Good luck.