FB Login Implementation in 2019

andras · February 4, 2019, 6:13am

Hi guys!

This is a step-by-step guide for those you try to implement FB Login in 2019. I lost pretty much time on figuring it out, so it would be cool if my recommendations help someone to save it.

I assume that you have already installed your FB plugin. First, in order to get APP ID/ API Key and Secret Key, you should go to https://developers.facebook.com/ and create a new app.

Second, you should enter your full website address as a site URL. Note, it is important to add https:// before it as it is done below. I entered the same full address as App Domain at the screenshot above.

Third, go to FB Plugin Page on Bubble. You can find a generic redirect URL there. This is an example : https://yourwebsite.com/api/1.1/ oauth_redirect

Fourth, take it and paste on Facebook for Developers page under the section FB Login (Settings) as a Valid OAuth Redirect URI.

Hope that it helps you as it worked for me:crossed_fingers:

marlonromano · February 4, 2019, 9:16am

Does this work on the bubble test server or I have to be on the live server? Beacuse I keep getting an error.
URL Blocked: This redirect failed beacuse the redirect URI is not whitelisted in the app’s Client OAuth Settings.

BUt I do have the URL in the settings

andras · February 5, 2019, 6:43pm

Hi, I have tested it on the live server only.

marlonromano · February 15, 2019, 12:57am

hi thanks i got it to work. What about the login with instagram. I am getting an error with it. Have u tried that?

andras · February 18, 2019, 8:13pm

Hi, I have not had a use case for this yet:wink:

prajnyabaliga3186 · March 8, 2019, 10:53am

Hey Andras, I was wondering if you’ve tried the three legged authentication for Linkedin for 2019 and have been successful in doing that. Can you help me out if you have?

Regards,
Prajnya

prajnyabaliga3186 · March 8, 2019, 11:14am

Yeah we’ve now used API connector but i’m not able to figure out how to do it. Can you please help me out?

Regards,
Prajnya

leshawn.yang · July 10, 2019, 6:42am

Hi!

What I did was

Add in the generic redirct URL on the API tab. It asks for 3rd Party APP name then asks for the API & Secret.
2.Once you paste in the URL the system will generate your API & Secret.
Click on the API number it generated and it’ll automatically copy.
4.Go to the Intalled Plugins Page & choose the app you want to connect.
Paste that into the API Section. Then go and do the same with the Secret.

This worked for me. Hopefully it makes sense for you & will work too.

prajnyabaliga3186 · July 11, 2019, 11:05am

Will try this method now, will let you know How it goes, thanks @leshawn.yang

sameeee92 · November 23, 2019, 5:55am

Can i have small video tutorial how to create facebook, google and instergam true login to app or web page in bubble login form.What is the using plugin and API

birbilis · March 4, 2020, 10:07am

it’s unfortunate that the Bubble settings page doesn’t allow one to select and copy/paste that generic URL or at least have a copy action next to it to copy to the clipboard

hagiwara.shohei · March 13, 2020, 8:49am

Yeah I thought the same. A copy button would be nice

For a workaround, if you are using Google Chrome, you can open the developer tool (Ctrl+Shift+I), go to the Element tab, search for “oauth_redirect” by pressing ctrl+F, and select and copy the text.

That’s what I did

c0risan · May 19, 2020, 11:10pm

I don’t see where to put this on the FB Dev site anymore. Is it still needed? I guess they have moved things around.

giulio.maselli · May 28, 2020, 1:09pm

hi @andras

I was trying to figure out the connection fb/bubble and couldn’t get through, always got the same error on fb side about the domain/subdomain not being authorized.

Following your instructions I got the connection working! Thank you for this post

sidestreetapp · June 7, 2020, 9:12pm

Hello, I am building an app from scratch here on Bubble. Will FB take my test page as a URL? What should I send to them? Thanks! – SS

gracegabby75 · June 19, 2020, 12:49pm

I don’t know where to go on the website to create an app.

giulio.maselli · June 19, 2020, 1:36pm

gracegabby75 · June 19, 2020, 5:12pm

I went there before but I didn’t understand what to click on. I want to use the Facebook app by Bubble, so that users can login with facebook.

giulio.maselli · June 20, 2020, 7:49am

you need to create an app in facebook developer to get the APP/API keys and connect it to Bubble. Follow the instruction by andras, in his original post (feb 19) at the very top of this thread

gracegabby75 · June 23, 2020, 6:55pm

I’ve been trying and did get anything to work. I just want to practice by making the facebook clone, I don’t care about making money from it. However, one of the requirements on their policy page says that the app must make sense, and be functional (I paraphrased)