Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Contents

Table of Contents
minLevel1
maxLevel6
outlinefalse
typelist
printablefalse

...

How does the feature look in the App?

This section is in Progress

Steps to Setup Social Login for a New Market

Note

If the market has pre-existing apps created they will need to transfer them to us. We will need to have both Google Firebase and Apple Developer access to their apps to be able to setup Social Login.

If the market already has a Facebook App for Social Login setup, we need:

  • FacebookAppID, FacebookClientToken and FacebookDisplayName

  • The market needs to update the list of whitelisted URLs in the Facebook App (we can provide these URLs at this stage)

If the market has never set up Social Login, then to set up Google and Apple we need access to their Firebase Apps. For Facebook the market will need to follow the below steps.

Facebook

Overview

The Social Sign Up and Sign In feature allows users to either sign up or sign in to the app using Google, Apple or Facebook. With this feature we hope to make the authentication process into the app smoother and more seamless. We also hope to increase user acquisition and monthly active users.

Info

Notes for Data Privacy

  • We do not allow users to Sign-In into our platform with their Facebook, Google or Apple account;

  • We use Facebook, Google or Apple to get the user's name and e-mail address to create an account in our database. 

  • We are not doing SSO with Facebook, Google or Apple;

  • Facebook, Google or Apple does not share with us any other data point and also, we do not share any user data with Facebook, Google or Apple as well.

How does it work?

This section shows a Popeyes guest successfully signing up using Google, Apple and Facebook.

Events

Info

For Social Sign Up and Sign In Events please refer to: Sign In & Sign Up (Conversion)

Important events to monitor include:

  • Sign Up Complete

    • The properties within this event that refers to Social Sign Up are:

      • Method : Social

      • Social Service : Apple or Google or Facebook

  • Sign In Complete

    • The properties within this event that refers to Social Sign In are:

      • Method : Social

      • Social Service : Apple or Google or Facebook

How do you configure it?

If you would like to set up Social Login for Google and Apple, please provide RBI team with access to your Firebase Apps. To setup Social Login for Facebook please follow the instructions here.

Lokalise Translation Strings

  • signUpWithGoogle (Button to Sign Up with Google)

  • signUpWithApple (Button to Sign Up with Apple)

  • signUpWithFacebook (Button to Sign Up with Facebook)

  • continueWithGoogle (Button to Sign In with Google)

  • continueWithApple (Button to Sign In with Apple)

  • continueWithFacebook (Button to Sign In with Facebook)

  • finishSigningUp (Confirmation screen where user confirms information)

  • authErrorDifferentProvider error message when the user registered with Apple but is trying to sign in with Google or vice versa (both using the same email)

  • authErrorUserNotFound error message when the email coming from a social provider does not exist (while trying to sign in)

User Consent:

  • acceptEmailsAndSpecialOffers.bk (message to user consent if they want to receive special offers and other information from Burger King/Popeyes via email)

  • acceptTermsAndPrivacyIntro (message to user consent if they agree to the Privacy Policy and/or Reward Policy for markets which have Loyalty Program in place.)

  • agreeCollectionPersonalData (message to user consent: if they agree to collection and use of personal data)

  • agreeTransferPersonalDataThirdParty (message to user consent: if they agree to transfer personal data to 3rd party entities)

Optional strings:

  • agreeOutsourcingPersonalData (message to user consent: outsourcing of personal data handling)

  • agreeTransferPersonalDataOverseas (message to user consent: transfer personal data to an overseas country)

Launch Darkly Flags

Note

Please reach out to your CSM Team Representative to enable the Launch Darkly flags needed for this feature in Production or Staging.

Facebook

To setup Facebook Social login please follow the below steps and reach out to your CSM representative in case you have any questions. The setup follows 4 steps:

Create Your Facebook Social Login App

  1. Go to the Facebook Developers site: https://developers.facebook.com/ to create Facebook app for Social Login.

...

  1. The app needs to be submitted for review and approved by Meta / Facebook!

  2. Once logged in, go to My Apps.

  3. Click on Create App button. It will lead you to the app creations page.

Image Modified
  1. Select "Set up Facebook Login" then click on the Next button to continue.

Image Modified
  1. Fill out the App Name, and App Contact Email. Then click the Create App button.

Image Modified
  1. You will then get redirected to the App Dashboard page. On the left-side menu, go to Products > Added Products.

Image Modified
  1. Click on Quickstart from the Configure drop-down in the Facebook Login product. 

Image Modified
  1. Select the Web from the platform to add a Facebook login to our app.

Image ModifiedImage Modified

...

Set Up Your Facebook Social Login App

After you've completed creating the app, head to the app's navigation menu. You need to do the steps below before your app setup is complete.

Image Modified

1. Go to App Review > Request Permissions and Features

Image Modified
  1. When you click on the  Request Permissions or Features button, you'll be redirected to Facebook Login Use Cases. You can set the permissions for scopes here. Add public_profile and email permission by clicking on the "Add" button. 

Image Modified

3. Go to Settings >

...

Basic

Info

This tab contains the App ID and App Secret.

Both must be copied and pasted later into the Ultimate Member> Settings>Extension>Social Login>Facebook Social Connect tab. You must fill in the following information: Privacy Policy URL and Terms of Service URL, and you can also include an app icon to make the app appear more professional.

Image Modified
  1. When you scroll down the page, you will find the Website section. Add your Site URL, then click the "Save Changes" button.

Image Modified
  1. To make the app live, you need to go to the navigation menu and click on "Go Live"

Image Modified
  1. Enable JS SDK and Allow All Domains

Info

You’ll find this settings page at: https://developers.facebook.com/apps/<APP_ID>/fb-login/settings/

  • You’ll need to enable the JS SDK Toggle on the bottom right.

  • You’ll need to add all domains related to RBI and production URL in the bottom input field:

    • For example, if your website is Popeyes Spain (https://www.popeyes.es/) the list would look like the following:

      Code Block
      https://poppeyes.es/
      https://dev-plk-web.es.rbi.tools/
      https://staging-plk-web.es.rbi.tools/
      https://qa-plk-web.es.rbi.tools/
      https://prod-plk-web.es.rbi.tools/
      https://www.popeyes.es/
    • When specifying allowed hosts, subdomains are considered different hosts (1034). So popeyes.es is considered different than www.popeyes.es. We should specify both.

Screenshot 2024-02-20 at 12.12.24.pngImage Addedimage-20240429-130827.pngImage Added

7. Add Allowed Domains to your App

Info

Similar to the previous step, you also need to add all the allowed domains in the apps configuration page at: https://developers.facebook.com/apps/<APP_ID>/settings/basic/

Screenshot 2024-02-20 at 12.18.18.pngImage Added

App Setup Complete Validation

Note

To validate the below steps when setting up the first App

  1. After you've done all of that, the app is complete. Add the App ID and App Secret to the Ultimate Member Settings Facebook tab.

  2. Go to Meta for Developers > Settings> Basic  then Copy the App ID and App Secret.

Image Modified
  1. Go to Ultimate Member > Settings > Extension > Social Login > Facebook Social Connect tab, and paste the App ID and App Secret in the Facebook Social Connect App ID and App Secret fields.

Image Modified

Connect With Your CSM Representative

Info

Next steps: please reach out to your CSM team representative to configure the last steps necessary to configure Facebook Social Login in the RBI platform.

Other Social Login User Journeys

This section runs over other user journeys in the app with Social Login:

  • A guest accidentally clicks on Sign Up tab and logins with an existing user account (tick)

  • A guest accidentally clicks on Sign In tab and attempts to create a new account ❌

  • A guest uses an existing email to login to the app using the Sign In tab (tick)

  • A guest attempts to login with a different social login provider using the same email that he has used in the past with another social login provider ❌

User uses existing Account to sign in using Sign Up tab

Tip

User Signs In Successfully (without seeing Sign Up Confirmation page)

User creating an Account for the first time using Sign In tab

Warning

User expected to see Error message

User uses existing Account to sign in using Sign In tab

Tip

User Signs In Successfully

User Signs Up / In with the same email they have used with different provider in past

Warning

User expected to see Error message