Forum Academy Marketplace Showcase Pricing Features

FB Login Implementation in 2019

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:

24 Likes

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

2 Likes

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

1 Like

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

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

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 :slight_smile:

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

Hi!

What I did was

  1. 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.

  2. 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.

  3. 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.

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

1 Like

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

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

5 Likes

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

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 :slight_smile:

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.

1 Like

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 :+1:

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

1 Like

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

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.

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

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)