How to Setup Google Login in Bubble.io

[@xeniarubleva7779]

Thank you very much! Very helpful, and it works!

[@BuildingWithBubble]

I've got you 😎

[@rreport]

Thank you so much! I spent 2 hours to figure this out. Now your tutorial have saved me and my time!

[@BuildingWithBubble]

We got you 😎

[@antoniahyman62]

This was one of the best tutorials I've watched. Thank you!

[@BuildingWithBubble]

Appreciate it! Always glad it can help ✌

[@potatil98]

Bro, wtf, It's difficult to find a good teacher like you, I loved your teaching and your way of explaining, one more subscriber!

[@BuildingWithBubble]

My pleasure! This means the world to me 🙏

[@thetasmiarana]

You have explained everything thoroughly. Really helpful!

[@BuildingWithBubble]

Thanks! Glad it could help 🙌

[@rmajdodin]

I successfully tried it, greate video with all needed details! Thank you 🙂

[@BuildingWithBubble]

Glad it could help ✌

[@sixthtulip]

Hello. Thank you for the video. Do I understand correctly: When a user registers in the usual way, his email and password (which is hidden from the developer) is added to the database. When a user registers with Google, only the e-mail is added to the database? If so, is there a way to determine how exactly the user was registered, other than creating an additional parameter in the database (for example, yes / no) that will be set depending on the way the user was registered?

[@Andrea-mh7wb]

Super helpful! Can you just please explain the logic for the URIs. Say I am sending the user from a page that already has a dynamic URL (e.g. we have a login popup on a random page). How can I account for this?

[@suspicoussnowowl]

did you find a solution?

[@baloshi69]

What, if we want to build a app and let a online community test it, and sont know there emails, Isn't there a test mode, like stripe give us when we are testing its payment gateway.

[@CupcakePass]

I wish you would have showed the database. One thing I noticed was that the database does not show any new entries. The actual google part worked but I'm not sure about how to save it in the db

[@BuildingWithBubble]

This is a good point. When you use Google authentication, technically you're not storing that users data in your database, you're just borrowing it whenever you need to reference information. As an end-user, this is the appeal of using a third-party login. It means you don't have to hand over any additional data to another service. Hope this helps!

[@hustlin_heev]

Very clear and to the point, thank you!

[@BuildingWithBubble]

Awesome to hear it was helpful!

[@adamzaorski7]

Hey - what should be the correct URI if I have my log in/sign in setup on a pop-up rather than a page? Any pro tips or that?

[@BuildingWithBubble]

Great question. I'd recommend using a URL/page parameter on the page when the popup is opened. This parameter could be something like '?google-auth=yes'. If you set the redirect URI as your page plus the parameter, you could then create a workflow that's trigger every time your page is loaded. Within this workflow, add a condition and allow it to only run when the 'google-auth' URL is not empty (meaning it has a value). Within this workflow, you could create an action that then displays the popup once again. Hope this helps point you in the right direction!

[@malekaix]

thank you for this video lachlan! appreciate it as always

[@BuildingWithBubble]

Thanks! Always glad it can help

[@lucaspiccoli]

Hey Lachlan! Amazing content! Used this video and it worked perfectly in Development. But I believe that to push it to the Live version, I need to publish the app on the Google Cloud Platform. Right? I get the following message when I try to do that: "Push to production? Your app will be available to any user with a Google Account. You've configured your app in a way that requires verification. To complete verification, you will need to provide: - An official link to your app's Privacy Policy - A KZbin video showing how you plan to use the Google user data you get from scopes - A written explanation telling Google why you need access to sensitive and/or restricted user data - All your domains verified in Google Search Console" Is that normal? Is it mandatory?

[@BuildingWithBubble]

Glad the tutorial could help! And when Google mentions that '"your app will be available to any user with a Google Account", this just refers to the fact that anyone with a Google account can sign up on your apps registration page. And yes, you'll often need to provide some additional documentation when pushing your app into production. The data Google provides is considered PII, so they'll often tread on the cautious side. Hope this helps!

[@silvercrownwisdom]

First, excellent video! Question: If the user signs up with the email, and you add a Google Login, how do you get the user's settings into their already existing account?

[@BuildingWithBubble]

Good question. I could be wrong here, but my from my experience, most real-world apps won't allow you to log in with Google authentication unless you actually signed up for an account through your Google login itself. That being said, if a user already has an account, then chooses to register a separate email through the Google sign in, you could update their existing email with the new value. Hope this helps point you in the right direction!

[@tylerchae-banks7428]

amazing tut!! thank you so much for all the great informative content you publish about bubble it really has been very valuable! Along the lines of this video id like to redirect users from an "existing user login" page to a "create account" page if they try to login through google auth with an email they have not yet created an account with on my site. I'd assume you could do this in workflows but I need a little direction.. Do you have an existing tuts or guidance you could provide? Thank you!

[@BuildingWithBubble]

Glad the content is helpful! And when it comes to building this feature, this is definitely possible. In your workflow that runs when a user logs in, you could add a step that sends someone through to the 'create account' page. Add this workflow step before main step that logs the user in. On this workflow step, add a condition that just recognises if the user already has an existing account or not. To do this, just perform a search in your database for all of the users where the email = the same value as the Gmail address. If the count of this search is 0, then you could run this step of the workflow. Hope this helps point you in the right direction!

[@pratimadudhewar3680]

Thank you for sharing this video. Well i have followed steps and it is working well. The only issue i'm having is we are getting auth code in URL after authentication. My requirement is i need the idtoken which google send in response. Will this google plugin help me getting idtoken? how can i get it? once again thank you.

[@darrenbealeofficial]

Another awesome video. Just a question relating to your approach, if you were offering both Facebook or Google authentication, how would you configure the settings page and workflow to know where to source the data from? Appreciate your channel, thank you.

[@BuildingWithBubble]

This is a good question. Under your user data type, you could create a data field called something like 'registered platform'. You could set this field to be a text type. When the user registers an account through a particular platform authentication, you could update this data field accordingly e.g. if the user signs in through Google, store a value called 'Google'. Then, on your settings page, you can create conditions on all of your elements to only display the elements related to a users chosen provider. The condition should look something like 'when the current user's, registered platform is Google'. Hope this helps point you in the right direction!

[@chrismcclure4264]

Fantastic Tutorial. Well done sir!

[@BuildingWithBubble]

Glad it could help ✌

[@davidnduka3618]

This was very helpful, thank you!

[@BuildingWithBubble]

My pleasure. Glad it could help ✌

[@vegim]

That is very well explained Lachlan. Thank you I have one question though. What is the difference between "Sign up with Google" and "Login with Google"?

[@BuildingWithBubble]

Great question! The sign-up option will allow someone to create a brand new account using their Google account. If the user has already used Google to register an account in your app, you can use the log in option to leg them in to an existing profile. Hope this helps!

[@baloshi69]

After registration by Google will user data be always available to us in our data base or, it would be link continuously via Google unless user revike our app access.

[@BuildingWithBubble]

Great question. If a user registers an account through Google, their data won't automatically be stored in your database. You can create workflows that allow to pull data from their Google account and store it in your database. At the 18:46 mark, you'll see how I can reference the data of a users Google account. You could go one step further and save the values form these input fields in your database. Hope this helps!

[@smackronme]

is there a way to do continue with google pop up we see in the right top?

[@rishumehta745]

greate video... One question though can i set dynamic redirect uri in Google consol as I prompt social sign up from multiple place as I have 3 types of user I need to set role for them.

[@BuildingWithBubble]

Great question. I'm under the impression the best way to achieve this would be by setting up 3 different auth API keys - one for each page you'd like to redirect to. Then, when running the workflow, reference the relevant auth key for each different page. Hope this helps!

[@rishumehta745]

@@BuildingWithBubble gladly i figure this out...can you tell me how to show popup instead of new tab or window?

[@oojeni]

Very very helpful!!! Thank you Is it possible for you to make a video about instagram logins too? It is really confusing....

[@BuildingWithBubble]

Always glad it can help! And I'd be happy to add this to my list 👍

[@Thechosenone1337-e3h]

What about signing in now? This is sign up but what are the steps for sign in?

[@BuildingWithBubble]

Great question! You won't need to make any changes. The workflow step we use caters for both the signup/login experience. If a user already has an account, it will automatically authenticate through Google OAuth, then log them in. Hope this helps!

[@mikyonmars]

Great, clear tutorial! Quick question - I get an redirect_uri_mismatch error whenever I try to sign up from a page that is not the Authorized redirect URI I indicated in google console. Quite annoying if I have the signup button in my website's header and want user's to be able to sign up from any page that they're on. Is there a way to allow users to sign up from any page they're visiting on the site, rather than just the specific redirect URI I've provided to Google??

[@BuildingWithBubble]

Glad it could help! And yes, this should be possible by appending your core app domain with an asterisk - for example yourapp.com/* The asterisk approves any extension/page URL built from your core domain. Let me know if this does the trick!

[@thepacktechteam]

@@BuildingWithBubble Hi, where should I append an asterisk to my app domain because wildcards are not supported

[@BuildingWithBubble]

@@thepacktechteam Hey, you could add this in at 13:20 after you remove the debugger URL string. Let me know if this does the trick.

[@thepacktechteam]

@@BuildingWithBubble xxxxxxxx/version-test/?* This still shows "Invalid Redirect: cannot contain a wildcard (*)." My requirement is I'll have login/signup in many pages in my app. I want to user to be redirected to where he was before, after google sign-in is completed.

[@thepacktechteam]

@@BuildingWithBubble I was able to do this by turning on generic redirect uri on plugin page, and using that uri on oauth consent screen I have another question, How do I connect existing users to their google accounts

[@IrvanAriesdhana]

How can I create a new user on my app database after enabling Google Login? Currently, the user is able to sign in using Google, but no new user is being created on my app's database. I have added the workflow to “Make changes to current user” and then “Go to page edit-user”. The Google data (First Name, Last Name, Profile Photo) are shown on the edit-user page, but when I checked the app’s database, there is no new user being created. I would appreciate any help or guidance on how to solve this issue.

[@BuildingWithBubble]

Great question. When a user signs in through their Google account, they're technically not registering an account directly with you. This means that it's Google who stores all of their data, not you. You will only have access to a Google token which connects you to their information. If you'd like to store the user in your own database, once they sign in with Google, you could create a 'sign the user up' workflow step, then store all of a user Google account data into your database through a series of your own data fields. Hope this helps point you in the right direction.

[@IrvanAriesdhana]

@@BuildingWithBubble actually bubble stored the user's Google Email automatically to the app database, and the "Make changes to current user" workflow works properly. What I missed when I posted my question was I didn't clear the browser cache and didn't try logging in using incognito. Once i tried using incognito, the user is created in the app database.

[@BuildingWithBubble]

@@IrvanAriesdhana Great to hear you found a fix in the end!

[@bountisphere]

Thank you!!! Great tutorial!

[@BuildingWithBubble]

Glad it could help ✌

[@eml9147]

Thanks. How might I do this but to log in with Instagram or TikTok?

[@BuildingWithBubble]

Greta question. I'd be happy to create a dedicated tutorial that cover these options!

[@sergeyauts]

Very helpful and clear tutorial! Thanks a lot!

[@BuildingWithBubble]

Always glad to hear it could help ✌

[@christianbernlibo-on3394]

Thank you for this helpful video! A question though, can I allow only predefined email address to be created? In my case, I used internal since I'm in an organization, but I don't want everyone in my organization to have their account created only specific people.

[@BuildingWithBubble]

Glad it could help! And yes, this could be possible. Within your database, you could create a data field called 'approved emails', then a data field within this that stores the email address. Then, on registration page, you could only allow a user to click the sign-up button if the email they're inputting matches the value of a pre-approved email within your database. I've explained how to create a similar experience when creating unique usernames when building a Reddit clone. I'd recommend watching from the 30 minutes mark in my tutorial here: kzbin.info/www/bejne/l3fSpKV8ecaWptE Hope this helps!

[@OmarG123]

life saver top g thanks man

[@BuildingWithBubble]

I got you ✌

[@meganwerdmuller5575]

Hey Lachlan! I love your videos, so thank you! I was able to set this process up with out much issue but then when I tried to test it, I was redirected back to the correct page but with a warning that the email I used to log in was already in use. How do we differentiate between a user signing up and logging in using this method? I would like a user to be able to sign up initially, but then log in and have all their information display with what has already been saved to their user account in my database.

[@BuildingWithBubble]

Glad the content can help! When it comes to the login error, I'm under the impression you might be seeing this because your browser is already logged in as a user when running a preview of the app. This post on the Bubble community forum shares some potential solutions: forum.bubble.io/t/google-login-email-already-in-use/231840/2 You could also look at adding a log out button to your app, then running the 'log the user out' action, before you then try the login workflow again. Let me know if this makes a difference!

[@GreyHawk78]

Thanks for sharing these great skills ! Cheers mate

[@BuildingWithBubble]

My pleasure 🙌

[@raamasf]

Thank you for your content! Very clear.

[@BuildingWithBubble]

Always glad it can help ✌

[@Francotujk]

Hello! I have a problem using the login: Error 400: redirect_uri_mismatch; and is a problem with the redirect. When I enter in google dashboard, it asked me to change the app to "production mode" instead of testing. And are asking me more information about the app. Is that ok?

[@BuildingWithBubble]

Hey Franco, you'll just need to ensure that the URL you link back to is accurate. I should note that Bubble will often add a parameter on your URL for its own debugger as well (?debug_mode=true) And yes, it's normal for Google to request links to two versions of your app - development and production. As it stands, you're currently building the development version of your app, but once you publish your app, you'll need to ensure your Google API links to the relevant link that you use for your own custom domain. Hope this helps!

[@seoyen952]

Same problem happened to me too. But I solved it! Since the non-debug mode url is uploaded to Google API Cloud, you must remove the debug mode part from the bubble's url when you try to test it yourself.

[@HelakaJayakody]

is it possible to create google signout as well

[@BuildingWithBubble]

Yes, you can use the 'log the user out' option and it will sign them out of their Google account. Hope this helps!

[@HelakaJayakody]

@@BuildingWithBubble In my case I have use google login after login into bubble account. now i want to logout from google without logout from bubble app. is it possible to make

[@YKA1]

Hello! I was coding a bubble app for a school project, and really needed this. Also, is it possible for the app to record the user data (such as email and name)

[@BuildingWithBubble]

Glad it could help! You could save the Google account information by displaying it in a series of input fields (like I did on the settings page in the demo), then running a workflow to 'make changes to a thing'. The thing you'll want to change is the current user, then you can update the relevant data fields to store the values of the data pulled from the plugin. Hope this helps!

[@jasonsiegel8895]

Really solid tutorial! Thank you.

[@BuildingWithBubble]

Always good to hear it was helpful!

[@richarddaka4023]

Thanks for the video. i had a bit of challenges when you log out, there was an error, but i decided to put three links on the URI and it works. Any idea on how put Google ads in my bubble app? thanks

[@BuildingWithBubble]

Glad you found a solution! I haven't had a chance to look at integration AdSense yet, but I'll put it on my to-do list 👌

[@ahmedazek6965]

Thank you very much it was really helpful

[@BuildingWithBubble]

Always glad it can help 😎

[@stephenessex4515]

Great video. Thanks for the tutorial. Obviously when the user registers via Google we see the email added to the 'Users' table, however, how do we get the rest of the Google information to also be added to the 'User' database e.g. 'Name' etc?

[@BuildingWithBubble]

Glad it could help! And this is a great question. After registering someones account, you could add an additional step to the workflow, then choose to 'make changes to a thing'. The thing you'll want to change is the current user, then you can reference the users Google account like I did at 18:41. Hope this helps 👍

[@stephenessex4515]

@@BuildingWithBubble Great. Many thanks.

[@midokratie]

Thanks for sharing. Very helpful. I did this as well and it worked. However, when I was trying to use the Bubble Data API, I couldn't figure out how to get the access token. Any idea if and how this works?

[@BoluwatifeAlugbin]

Great tutorial. What if a user logs in with email and password, how do I get the currentUser details because for google auth I will have to do currentUser Google's .? I hope you understand

[@BuildingWithBubble]

If a user signs up with an email address (not a Google account), you won't be able to fetch their Google account information. That person will need to register an account through Google Auth for you to be able to access their details. Hope this helps.

[@thepacktechteam]

I have created the google SSO, thanks to this video. Now the problem is, Is there a way for me to remember what invoked google SSO. Use Case is: I have made signup and login as reusable elements. I have a services page for which needs users to be signed up to register, I am using google SSO for sign-up process. When a user clicks book button on services page and they are not signed up, I’ll show a popup asking them to signup. They do it and they come back to the same page they were before. What I expect is for the bubble to store information that a particular button is clicked and then use that information to redirect them. This is just so that I do not want the users to click Book button again, I tried storing the value in states but after the SSO redirect, the page is refreshed and I do not have the information anymore. I have seen this is in few websites but could not figure out a way to do this. Is there any way to achieve this. Is it possible to store this information in a state parameter and google returns this back to you after successful login. Can you please help me with this? Thanks, RP

[@BuildingWithBubble]

Great question! Unfortunately a custom state won't be the best option for this. The value of a custom state refreshes as soon as you reload the page. The best solution would be storing the value using a URL/page parameter. If you're not familiar with these, I'd recommend checking out my tutorial here: kzbin.info/www/bejne/npCXf6yEbNR8mqs Essentially, you could set the redirect destination page to be the initial page, but you could also add a URL parameter key. From here, you can then create a condition on your button or popup that recognises the URL has a specific parameter, from which, you can then choose to hide or display these elements accordingly. Hope this helps point you in the right direction!

[@techteam406]

Thanks for the video. I have a question, How do I connect existing users in the database through google login. It says "Respective user is already registered". Thanks in advance!

[@BuildingWithBubble]

Glad it could help! And I'd try and use the 'log user in with social login' option instead of registering a brand new account. Let me know if this helps.

[@techteam406]

@@BuildingWithBubble Yes, but I already have few users registered directly, I need to give them access to login through google. Is there any possibilities?

[@ShakstudiosAu]

Great video thank you! A question though, if a user updates their name in the settings page, what would happen? Would their Google account name be changed too? Thank you for all you do

[@BuildingWithBubble]

Glad it could help! And no, it wouldn't change the name within the users Google account. It would update the users record within the Bubble database. The Google authentication only allows you to view information from a users Google account, not make changes to it. Hope this helps.

[@ShakstudiosAu]

@@BuildingWithBubble Thank you :)

[@bbapp4493]

Hello, configure the authentication as it is in your tutorial, but when I access the google button that I created in my app, the "error 403: disallowed_useragent". thanks for your help

[@BuildingWithBubble]

Happy to help. Can I ask what browser you're using when you run a preview of the app? I just did some research around this error code and found this: "The Error: disallowed_useragent will . The most common reason for this rejection is an unauthorized browser agent (the app is using a deprecated browser agent that Google no longer accepts" It could be worth trying to use a different browser to see if this makes a difference.

[@bbapp4493]

@@BuildingWithBubble Hello, thank you very much for your help, there is something I do not understand. When I run the preview of the application in the live version, the access with google works perfectly for me. I published the application in the google play store and when I run from the published application there is when I get the "403 error: disallowed_useragent". that is, from the web it works fine but in the google play app it no longer works for me. thanks for your help.

[@BuildingWithBubble]

@@bbapp4493 I see. Once you published your app, did you create a separate redirect URI in to factor for the change in URL? When your Bubble app is in development, the link will be different to when it's in production on a custom domain. Let me know if this helps.

[@bbapp4493]

@@BuildingWithBubble yes of course, I have a personalized domain since I am in a paid version. and the redirect uri is the one that the google plugin gives me by default. thanks for your help

[@bbapp4493]

@@BuildingWithBubble Can I send you the error capture by email?

[@ludovicblondeau5713]

Hi, Thanks for this vidéo. Very helpfull !! . Do you have a tuto that explain how we can convert a bubble's group to a PNG image ? I would like my user to download a unique member card. (Do you have a community where we can speak all together ?)

[@BuildingWithBubble]

Hey, unfortunately I don't have a tutorial that covers this, but I'd be happy to add it to my list. When it comes to a community, the best place to visit is by far the Bubble community forum: forum.bubble.io Hope this helps.

[@camilla3254]

Obrigada por isso 🌹

[@BuildingWithBubble]

My pleasure!

[@rahulrijal2191]

great work, very helpful video

[@BuildingWithBubble]

Awesome to hear it was helpful 🙌

[@ProNoobDev]

Amazing as usual !

[@BuildingWithBubble]

Appreciate it 🙏

[@ProNoobDev]

@@BuildingWithBubble A quick update , i found out that the plugin leaks the app id and api key while doing some routine security checks ! i'm not sure if it's supposed to do so or i missed something in the setup but i'd like to know if you have any idea on this matter and/or how to resolve it ! thank you

[@saraeissa4954]

Thanks!!

[@BuildingWithBubble]

Glad it could help 🙌

[@scaffeoa]

Great video! Unreal helpful.

[@BuildingWithBubble]

Awesome to hear. Glad it could help!

[@NadeemWBR]

Thanks bro...

[@mando_data_python]

not bad so far

[@BuildingWithBubble]

Glad it can help 🙌

[@healthwellness5]

hello to futur millionnaires reading this

[@amparaanimal552]

it coould not be better

[@BuildingWithBubble]

🙏✌

[@AmitChauhan-fz9qj]

Thank you it is working for me. Can you also suggest how to allow only Gsuite or companies signup to my SaaS app as I don't want to allow users with personal email to signup. Only work emails. Your suggestion will definitely help. Waiting.

[@BuildingWithBubble]

Glad it could help! And great question. I'd be happy to add a video that covers this to my list!