Skip to main content

Social Login Setup

In the section we will setup the social login for WooStore Pro application. The application supports

and each of them have their own steps that you need to follow to set them up properly.

Google Login#

In this section we will setup the Google Login feature in the application.

Follow the steps below to setup Google Login for your application.

Android Integration#

  1. Click on the link Google Cloud Platform API manager.

    You do need to enable the OAuth APIs.

    This link will take you on the Google Cloud Platform Api - OAuth Consent Screen where you will enable a few options to collect user data like email and other public profile information.

    In case you have not logged into your Google Account, the link will take you to login screen and will redirect to the desired location once you login.

  2. Make sure OAuth Consent Screen is selected in the left menu.

  3. Select a Project if not already selected from the top bar.

    The Firebase Project that you have created in Firebase Setup section will appear here. You need to select that project.

    Google Login Setup

  4. Once you've selected your project select the option External under the section User Type and click on Create

    Google Login Setup

  5. Add the required information under the following sections

    • App Information

      • App name - The name displayed to the users
      • User support email
      • You can also add an app logo here but adding an app logo may be subject to verification from Google's team.

    • App Domain

      • Application home page

      • Application privacy policy link

      • Application Terms of Service link

      • Authorised domains

        Most of the times it is already filled with your Firebase Project Hosting Url

    • Developer contact information

    Now click on Save and Continue to move to the next step.

  6. Under Scopes click on Add or Remove Scopes

    Google Login Setup

    From the pop up menu select the following scopes:

    • ../auth/userinfo.email

    • .../auth/userinfo.profile

      Google Login Setup

      Click on Update at the bottom of the pop up.

      Now click on Save and Continue to move to the next step.

  7. For the remaining steps you can add your information or choose to skip them and click on Save and Continue. At the last step you can verify your information and click on Back to dashboard to check your settings on the dashboard.

  8. Now we will add the SHA-1 Fingerprints for your debug and release keystore certificates in your Firebase Android App that you created in Firebase Console - Create Android Application

    Prerequisite

    The following steps assume that you have followed through Creating Release Keys for your application and have

    • upload_key.keystore
    • SHA-1 Fingerprints

    generated from the previous steps. If you have not generated the above mentioned files and fingerprints please follow them and come back later when you have them at hand.

    1. Go to Firebase Console

    2. Select the project that you created in the Firebase Setup

    3. Open the Project Settings by clicking on the Settings Icon from the top left menu.

      Firebase Console Project Settings

    4. Scroll down to the Your Apps section and select your app option under Android Apps and click on Add Fingerprint button at the bottom.

      Firebase Console Android App Settings

    5. Add both of your Debug and Release SHA-1 Fingerprints that you created from the previous steps.

Your Google Login setup for android is now complete.

iOS Integration#

The following section assumes that you have properly followed the Steps 3,4,5 from Create iOS Application under Firebase section

If you've done that please follow along. If you have not done that, please perform those steps and then follow the guide stepwise.

  1. Open Info.plist and GoogleServices-Info.plist files in android studio. These files are located in woostore_pro / ios / Runner directory.

    Google Login iOS Setup

  2. Follow the instructions below

    From your GoogleServices-Info.plist file copy the value under key REVERSED_CLIENT_ID. It might be on line number 8.

    Google Login iOS Setup

    In your Info.plist file scroll down to the key named CFBundleURLTypes. It might be on line number 23. You need to replace the value marked under CFBundleURLSchemes with your REVERSED_CLIENT_ID which you copied from the step above.

    Google Login iOS Setup

Your iOS Integration for Google Login is complete.

Facebook Login#

  1. Go to Facebook Developers App Dashboard

    You will need to sign into your facebook account or create a new facebook developer account.

  2. Click on Create App from the top right.

    • Select the app type as Consumer and click on Continue from the bottom

      Facebook Login Android Setup

    • Add the display name and contact email address for your app settings and click on Create App

      Facebook Login Android Setup

    • This will create a new app for you and take you to the app dashboard. You can also click on the App entry name to go to the app dashboard.

Android Integration#

In this section we will setup the Facebook login for WooStore Pro android application. You will need to follow the steps below to add specific values for your application Facebook login to work.

  1. Navigate to the Add Products to Your App section by clicking on the (+) icon in-front of the Product heading from the left menu in your dashboard. If you already have an entry named Facebook Login then click on it and select Quickstart.

  2. From Add Products to Your App section select Facebook Login and click on Setup.

    Facebook Login Android Setup

    If you do not see the Facebook Login option, please check under Product heading in the left menu as it might already be added to the app. If you already have an entry named Facebook Login then click on it and select Quickstart.

  3. Select the option Android from the option shown.

    Facebook Login Android Setup

  4. In the setup wizard skip Steps 1 and 2 by clicking on Next.

  5. In Step 3 - Tell Us about Your Android Project you will need to add your android app package name.

    • Package Name

      Under the Package Name add the Bundle Id name you entered while renaming the application in this step: Rename the package. Alternatively you can find this in your Android Manifest or your app's build.gradle file.

      For example: com.example.android.app

    • Default Activity Class Name

      Add the .MainActivity at the end of your Package Name and enter it into this field.

      For example: com.example.android.app.MainActivity

    Facebook Login Android Setup

    Click on Save and then on Continue. If you are prompted with a message that there was a problem verifying package name on Google Play. Please check the package name and try again. Just click Use this package name and Continue.

  6. In Step 4 - Add Your Development and Release Key Hashes you will add your debug and release key hashes which you created in the previous step Creating Key Hashes. Add both your release and debug key hashes here and click Save and then Continue.

  7. In Step 5 - Enable Single Sign On for Your App toggle the switch to Yes and click Save and Next.

  8. In Step 6 - Edit Your Resources and Manifest follow the steps below.

    1. Copy the following from your Facebook Dashboard setup wizard.

      <string name="facebook_app_id">17658553XXXXXX5</string>
      <string name="fb_login_protocol_scheme">fb176XXXXXX376365</string>
      <string name="facebook_client_token">YOUR CLIENT TOKEN</string>

    2. Open strings.xml in android studio. It is located in woostore_pro / android / app / src / main / res / values / strings.xml

    3. Replace the values which are already there with your specific values. You can find the information for the above at Getting started with Facebook SDK Android. You might also want to change the app name to your specific Bundle Id value.

    4. Finally Save the file by pressing command + s on MacOS and control + s on Windows.

You can skip all other steps as they are already done for you in the application.

Your Facebook Login for Android is now complete.

iOS Integration#

If you have followed the Facebook Login setup for android just now the select the iOS option from the setup wizard at the top tabbar and skip steps 1,2,3 from below. If you are setting up the Facebook Login for iOS first then follow through all the steps.

  1. Navigate to the Add Products to Your App section by clicking on the (+) icon in-front of the Product heading from the left menu in your dashboard. If you already have an entry named Facebook Login then click on it and select Quickstart.

  2. From Add Products to Your App section select Facebook Login and click on Setup.

    Facebook Login Android Setup

    If you do not see the Facebook Login option, please check under Product heading in the left menu as it might already be added to the app. If you already have an entry named Facebook Login then click on it and select Quickstart.

  3. Select the option iOS from the option shown.

    Facebook Login Android Setup

  4. In the setup wizard skip Steps 1 by clicking on Next.

  5. In Step 2 - Add your Bundle Identifier you will need to add your Bundle Id.

    Under the Bundle ID add the Bundle Id name you entered while renaming the application for iOS in this step: Rename the package. Alternatively find your bundle identifier in your Xcode Project's iOS Application Target and paste it into the box below.

    For example: com.example.ios.app

    Click on Save and Continue.

  6. In Step 3 - Enable Single Sign On for Your App toggle the switch to Yes and click Save and Next.

  7. In Step 4 - Configure Your info.plist you will need to edit your info.plist file.

    1. Open the info.plist file in android studio. It is located in woostore_pro / ios / Runner / info.plist.

    2. Scroll down to the key value CFBundleURLSchemes. It is already created for you in the file. The estimated line number is 34.

    3. Replace the value that starts with fb959564XXXXXXXX4 (on estimated line number 36) with your specific value from the Facebook dashboard. The value equals to fb{APP_ID}.

    4. In <string> in the key FacebookAppID, replace APP_ID with your App ID. (on estimated line number 52)

    5. In <string> in the key FacebookClientToken, replace CLIENT-TOKEN with the value found under Settings > Advanced > Client Token in your App Dashboard. (on estimated line number 54)

    6. In <string> in the key FacebookDisplayName, replace APP_NAME with the name of your app. (on estimated line number 56)

    7. Finally Save the file by pressing command + s on MacOS and control + s on Windows.

You can skip all other steps as they are already done for you in the application.

Your Facebook Login for iOS is now complete.

Apple Login#

Perform this setup only if you are releasing the application for iOS as Apple Login is not enabled on Android application.

Apple sign in different from the above two sign in methods. Please follow the steps mentioned below to set up Apple sign in with the application.

Prerequisites#

Before you can start integrating (or even testing) Sign in with Apple you need a paid membership to the Apple Developer Program. Sign in with Apple is one of the restricted services which is not available for free with just an Apple ID (source).

Setup#

Register an App ID#

If you don't have one yet, create a new one at https://developer.apple.com/account/resources/identifiers/list/bundleId following these steps:

  • Click Register an App ID

  • In the wizard select App IDs, click Continue

  • Set the Description and Bundle ID, and select the Sign In with Apple capability. Use the same Bundle ID as you used while changing the name from here Rename the package

  • Usually the default setting of Enable as a primary App ID should suffice here. If you ship multiple apps that should all share the same Apple ID credentials for your users, please consult the Apple documentation on how to best set these up.

  • Click Continue, and then click Register to finish the creation of the App ID.

In case you already have an existing App ID that you want to use with Sign in with Apple:

  • Open that App ID from the list

  • Check the Sign in with Apple capability

  • Click Save

Firebase Authentication for Apple#

After this is done you need to enable the Apple Sign In method provider in your Firebase Authentication module. Follow the steps below to do so.

  • Go to Firebase Console.

  • Select the project you created.

  • Select Authentication option from the left side menu. Click on Get started if it prompts you.

  • Select Sign-in method from the top tabbar

  • Under the heading Sign in providers search for Apple

  • Enable the option.

  • To complete setup, add the authorisation callback URL to your app configuration in the Apple Developer Console.

  • Perform any additional steps required if mentioned in the firebase authentication area.

Phone OTP Login#

  • Go to Firebase Console.

  • Select the project you created.

  • Select Authentication option from the left side menu. Click on Get started if it prompts you.

  • Select Sign-in method from the top tabbar

  • Under the heading Sign in providers search for Phone

  • Enable the option.