Hi there,

I’m going to set up Social Login using Google for my house chore roster site, and I’ll write it up in this article, so that if you want to do something similar, you can get there quicker. Note, if you want to set up login using Twitter, see my article here

Why?

People are tired of managing passwords. I know I am. I have a password management system which works well, but sometimes I just want to click Login with Google, and not think too much more about it. Of course, every bit of convenience is trading away a little privacy, but most people are used to this trade off by now, and not having to think of a password is a little bit less friction in your new customer sign up flow.

OK, lets get into it.

Prerequisites

A Bubble app
A Google account

The Docs

I’m using the Canvas templates from Airdev, which I’ve chosen to make it easier to quickly release a nice looking app, with a decent chance that it will also be responsive. This article will show you many canvas specific steps, but I’m confident that it will still be useful if you aren’t using Canvas. The main parts are just a Button, and some Google config.

The Canvas docs are here https://docs.airdev.co/canvas/ and at the top right is a search box, into which I typed : Social
This resulted in this:

which links to https://docs.airdev.co/canvas/canvas-functionality/reference/reusable-elements/signup-login so lets work through that. It looks like there is a reusable popup element in the header, which makes sense because you want to login/out from any page.

Locating this in my bubble app

The popup comes pre loaded with several Social Login buttons, but within a group that is hidden by default. This means that by default, the a new customer will be required to type in their email address plus a password of their choosing.

This works fine as is, due to all the workflow items you get for free when you use canvas templates.. you can see why I like them. I’m all about saving as much time as possible in getting to launch day.

What I’ll do next is locate the google button and unhide it. A search for ‘google’ in the top left search field locates it and I want the (sign up) version to start with & we’ll get to the login one later

The button (Group Google button (sign up) is already visible by default, so we’ll check the parent folder.. yep, it’s Group other buttons (sign up) that we need to show:

Also check the other items in this group, to make sure they are hidden.. we are focusing on google for now.

So running your app now and choosing signup from the login page you’ll now see the google button displayed.. yay

Looking at the Worklow, there are no actions, so it looks like we’ll need to set that up:

Building with Bubble

How to enable Social Login using Google, in…

Comments on this post are for paid subscribers