This section shows the way to configure all Sign In features: Google, Apple, SMS, Facebook, Email.

Most of these features require Firebase to be set.

You can do these steps to configure the new App when using any service for Firebase:

  1. Using the Firebase Console, add an Android app to your project: Follow the assistant, download the generated google-services.json file, and place it inside android/app.

  2. Using the Firebase Console, add an iOS app to your project: Follow the assistant, download the generated GoogleService-Info.plist file, open ios/Runner.xcworkspace with Xcode, and within Xcode place the file inside ios/Runner.

When installing, if you get issue, please go to Common Questions or Common Issues to find the solutions.

1. Google Sign In

We have added this library google_sign_in from pub.dev and upgrade new mstore-api plugin to support for this feature, you need to update Firebase setting to activate this feature from the app (also make sure update the google-service file to Fluxstore project)

You also can check the manual guide here.

1.1 In Firebase, enable Google:

FDK path

Next, please scroll down and copy Authorized domain

FDK path

1.2 Config Google Cloud Console

select your project (1). Then, select API& Service (2) and choose OAuth consent screen (3)

FDK path

Then, click on edit app.

FDK path

Paste Authorized domain on position (1),(2),(3) and click save.

FDK path

2. Apple Sign In

FDK path

This is a rejected message from Appstore by recent policies update from Apple:

“We noticed that your app uses a third-party login service but does not offer Sign in with Apple. To resolve this issue, please revise your app to offer Sign in with Apple as an equivalent login option. To learn more, see the Sign in with Appl Overview.”. To resolve the message, the login form should include the Apple Sign-In.

3. SMS Sign In

3.1 Integrate with the SMS Login:

Please follow this guide to integrate with the SMS Login.

More detailed document, refer to https://pub.dev/packages/firebase_auth

For android, Open project on firebase console. Then move to Settings/General. You need to upload SHA key to firebase project. You can follow this guide to generate SHA key https://developers.google.com/android/guides/client-auth

Packages_get

In case you meet this issue: after creating APK and releasing the app in App Stores, you get error when login with SMS Login. You need to go to the App stores and copy the SHA-1 key and past to your Firebase setting:

FDK path

FDK path

3.2 Change SMS default country:

Open lib/screens/login_sms/login_sms_constants.dart and change the default country: (if not found, please check lib/common/constants/general.dart)

class LoginSMSConstants {
  static const String countryCodeDefault = 'VN';
  static const String dialCodeDefault = '+84';
  static const String nameDefault = 'Vietnam';
}
  • countryCodeDefault: default country IOS Code.

  • dialCodeDefault: default country phone IOS Code when login as SMS Login feature.

  • nameDefault: default name of country.

4. Facebook Sign In

This part shows the way to set up Facebook login on your Flutter application. This needs to use the FlutterFacebookLogin package

AndroidX support

Install flutterfacebooklogin package

  • Step 1: Add this command to dependencies in the pubspec.yaml file:
dependencies:
  flutter_facebook_login: ^3.0.0
  • Step 2: Run this command to install package:
$ flutter pub get
  • Step 3: Import it in your Dart code:
import 'package:flutter_facebook_login/flutter_facebook_login.dart';

Android

  • Step 1: In the Facebook Login documentation for Android site, finish all steps in 2 parts: the "Associate Your Package Name and Default Class with Your App" and "Provide the Development and Release Key Hashes for Your App".
  • Step 2: Find your Facebook App ID in your Facebook App's dashboard in the Facebook developer console.
  • Step 3: Create file /android/app/src/main/res/values/strings.xml. If this file exists, just edit the content same with below:
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">Your App Name here.</string>

    <!-- Replace "000000000000" with your Facebook App ID here. -->
    <string name="facebook_app_id">000000000000</string>

    <!--
      Replace "000000000000" with your Facebook App ID here.
      **NOTE**: The scheme needs to start with `fb` and then your ID.
    -->
    <string name="fb_login_protocol_scheme">fb000000000000</string>
</resources>
  • Step 4: Edit the /android/app/src/main/AndroidManifest.xml with below content:
<meta-data android:name="com.facebook.sdk.ApplicationId"
    android:value="@string/facebook_app_id"/>

<activity android:name="com.facebook.FacebookActivity"
    android:configChanges=
            "keyboard|keyboardHidden|screenLayout|screenSize|orientation"
    android:label="@string/app_name" />

<activity
    android:name="com.facebook.CustomTabActivity"
    android:exported="true">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="@string/fb_login_protocol_scheme" />
    </intent-filter>
</activity>

iOS

  • Step 1: In the Facebook Login documentation for iOS site, finish all steps in "Register and Configure Your App with Facebook". (You can skip "Step 2: Set up Your Development Environment" and "Step 5: Connect Your App Delegate").
  • Step 2: Find your Facebook App ID in your Facebook App's dashboard in the Facebook developer console.
  • Step 3: Copy and paste the following content to your /ios/Runner/Info.plist file, before the ending </dict></plist> tags. If you also enable Google Sign In feature, you need to merge CFBundleURLTypes of Google Sign In and Facebook Sign In together.
<key>CFBundleURLTypes</key>
<array>
    <!--
    <dict>
    ... Some other CFBundleURLTypes definition.
    </dict>
    -->
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <!--
              Replace "000000000000" with your Facebook App ID here.
              **NOTE**: The scheme needs to start with `fb` and then your ID.
            -->
            <string>fb000000000000</string>
        </array>
    </dict>
</array>

<key>FacebookAppID</key>

<!-- Replace "000000000000" with your Facebook App ID here. -->
<string>000000000000</string>
<key>FacebookDisplayName</key>

<!-- Replace "YOUR_APP_NAME" with your Facebook App name. -->
<string>YOUR_APP_NAME</string>

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>fbapi</string>
    <string>fb-messenger-share-api</string>
    <string>fbauth2</string>
    <string>fbshareextension</string>
</array>

5. Show/hide the Login options

Update the lib/common/config/general.dart to show/hide the Login options:

/// Option to show/hide the Social Login
const kLoginSetting = {
  "IsRequiredLogin": false,
  'showAppleLogin': true,
  'showFacebook': true,
  'showSMSLogin': true,
  'showGoogleLogin': true,
};
/// Enable the Start Rating features
"EnableRating": true,
/// If the Start Rating is empty, we could hide it or keep with blank star
"hideEmptyProductListRating": false,

/// set to true if you have finish running Re-generate image plugin
"kIsResizeImage": false,

File lib/common/config/general.dart:

fluxstore-1

6. Add Forgot password

This feature is available for the WooCommerce only. To enable the native forgot password screen, we just only set forgetPassword: "" in the lib/common/config.dart file.

/// set blank to use as native screen
"forgetPassword": "http://demo.mstore.io/wp-login.php?action=lostpassword"