Facebook

This briefly introduces integrating Facebook authentication into your web or mobile app.

This documentation is a work in progress, and we welcome your feedback and suggestions. Please let us know if you have any questions or if there is anything else you would like to see included in the documentation.

Mainly there are 3 steps involved in having Facebook login integrated into your app.

  1. Create an app in the Facebook Developers Console (Now it's renamed to "Meta for Developers")

  2. Link Facebook to CodeMash. Here you need to enter the App ID and Secret Key you have received from the 1rst step.

  3. Implement Facebook Sign-In capability in your app.

1. Creating the Facebook app

You will need a Facebook project to connect to CodeMash.

  • Go to the Facebook developers console and log in with your Facebook account.

  • Once you logged in, go ahead and press the "My Apps" menu link and press the button "Create App."

  • When you create an app, you will be asked how the app will be used. If you just want to have Facebook login capability and get some useful user information to avoid the long onboarding process, choose the "Consumer" type. Otherwise, follow the original Meta guidance for the right app type.

  • Choose Facebook login and press the "Set up" button as it is shown in the image below.

  • Under Products now you can see that the Facebook Login section appeared. Press "Settings" and enter https://api.codemash.io/v2/auth/facebook URL in the "Valid OAuth Redirect URIs" input field.

  • For further integrations, you need to fetch the App ID and App Secret. In this case, click the Settings -> Basic menu item on the left side, and at the very top of the screen, you will see the App ID and App Secret. Copy it and follow the instructions provided below.

In Development mode, your app can only request data from users with an app role (Roles section). To request end-user data, your app must have Advanced Access permissions (App Review -> Permissions and Features) and be set to Live mode (you can see the App Mode switcher on the header of the Meta portal).

To publish your Facebook app and use it in production, you need at least the following:

  • Select App Category in Settings -> Basic

  • Add Privacy Policy Url (Don't have a website ready? You can write your Privacy Policy using Google Docs, make that document publicly available, copy and paste the URL of the document in Settings -> Basic section.

  • Add App Icon (512x512 or 1024x1024) in Settings -> Basic

As you have all the necessary information filled in, you can ask Facebook to approve your app (App Review -> Requests) and publish it for production use.

2. Link Facebook to CodeMash

Once you have created the app on the "Meta for Developers" portal, copy the App ID and App Secret to CodeMash.

  • Log in to the Cloud portal of CodeMash.

  • Navigate to your Project > Membership > Settings. Here select Facebook.

  • In the opened screen enter the following:

    • App ID - enter your Facebook App ID.

    • App Secret - enter your Facebook App Secret.

  • Other recommended fields to fill out (applicable to web scenarios only):

    • Callback URL - after a successful login, the user will be redirected to this URL.

    • Logout URL - after successful logout, the user will be redirected to this URL.

    • Failure URL - after failed login, the user will be redirected to this URL.

3. Implement Facebook Sign-In

3.1 Implement Facebook Sign-In on your website.

To implement Facebook log-in on your website you need

  1. Add a platform called "website" to the Facebook app.

  2. Add a login button to the website and call the CodeMash endpoint https://api.codemash.io/v2/auth/facebook. Try out our Live demo

Let's start with the platform.

  • Go to Settings -> Basic

  • Scroll down to the very bottom until you will find the "+ Add Platform" button

  • Press the button and choose the "Website" platform

  • You only need to provide the URL of your Website which can actually be any URL.

After registering your website on the Facebook Meta platform, it's time to implement a button that calls the right endpoint.

Try it out: As a reference, we created a Live demo on the CodeSandbox platform where you can play with OAuth logins.

Go to the CodeMash -> Membership -> Integrations -> Facebook and try things like:

  1. Different environments (Production, Development, Test)

  2. Set Callback URL - where you should be redirected after successful login. The same goes when you logout - Logout URL or when a failure occurs - Failure Redirect URL

3.2 Implement Facebook Sign-In on ReactNative

PreviousAzureNextGoogle

Last updated

Was this helpful?