Skip to main content

Sign In & Sign Up

This guide is for WooCommerce, Opencart, Magento, PrestaShop, WordPress:

Precondition

✅ This guide is for WooCommerce, Opencart, Magento, PrestaShop, WordPress.

❎ Not use for Shopify, BigCommerce, Notion, Strapi.

Follow this guide to configure the Social Login:

Requirement​

1. SHA-1 and SHA-256 keys

  • Get from Play Store: Once uploaded the app to Google Play Console, you get SHA-1 and SHA-256 keys under App signing key certificate & Upload key certificate

  • Save all of the SHA-1 keys to a note for later usage

2. Facebook App ID and Secret

3. Add Facebook base64 keys

  • Go to this site and convert the SHA-1 keys to base64. Copy the output base64 and paste them in Facebook Login -> QuickStart -> Android -> section 6.

4. iOS App id and Team id (Optional)

Firebase Configuration​

Precondition: refer to Firebase Settings to create your application on Firebase.

Then follow the steps below:

  1. Add SHA-1 keys to your Android App
  1. Add Team ID and Apple ID to your iOS App
  1. Enable Social Login Methods and add Facebook App ID/Secret ID to Facebook Login Method.
  1. Add a support email.
  1. Create FireStore Database and select the nearest location to your customers.
  1. Change the rule of FireStore Database
  1. You need to create a Google Map API Key at this point.

Social Login​

After preparing the Requirement and configuring Firebase above, you can configure one or many login methods as below:

  1. [Problem Internal Link]
  1. [Problem Internal Link]
  1. [Problem Internal Link]
  1. [Problem Internal Link]

Apple Login

✅ This guide is for WooCommerce, Opencart, Magento, PrestaShop, WordPress.

❎ Not use for Shopify, BigCommerce, Notion, Strapi.

Follow steps below to enable Apple Login:

  1. Enable the Apple Login option on the app builder

  2. Enable the Apple Login option on Firebase https://tppr.me/yd1Yv - this option is used to register user's Apple account with the Firebase app.

Google Login

✅ This guide is for WooCommerce, Opencart, Magento, PrestaShop, WordPress.

❎ Not use for Shopify, BigCommerce, Notion, Strapi.

Follow steps below to enable Google Login:

Precondition: Follow Firebase Settings to create application on Firebase.

1. Setup OAuth consent screen​

To set up a login with Google. First, you need to set up the Oauth consent Screen for your Firebase application.

Step 1: open the page https://console.developers.google.com

Step 2: In the upper right corner, click the button as shown in the picture (it could be any one of your project names)

  • Select the project you want to setup. If you cannot find them in the RECENT project list, please click ALL to display them all and select the project.

Step 3: on the left menu, select the OAuth consent screen

Step 4: Choose Prepare for verification button

Step 5: Fill in some necessary information on the OAuth consent screen:

  • Add Application logo and choose Support email

  • Add Authorized domains or use the default
  • Enter Application Homepage link, Privacy policy link, Terms of Service link. If not, use it with the default Authorized domains link (don't forget to add https://).
  • Click Save & Continue

  • Done

2. Setup for IOS​

Step 1: Enable Authentication

  • Open your firebase project, in the left menu bar, select Authentication → Sign-in method → Google

Step 2: Click Enable → choose Project support email and click Save

Step 1: Create Project in https://console.firebase.google.com

Step 2: Add Firebase to your iOS app.

  • Open your firebase project console, click the gear icon in the upper left corner, and select Project setting

  • Select the IOS icon in the Your apps section

  • Fill in the information with:

    • IOS bundle Id: is bundle ID taken from your application.

      Please use the same for both iOS Bundle ID & Android package name__. ([Problem Internal Link] is to create iOS Bundle ID)

    • Recommend in reverse domain format. For example, your domain is example.com, bundle ID and package name for your app should be "com.example.app"Use only lowercase letters)

    • Enter app nickname (the name here is only used to distinguish between applications on firebase so you can set arbitrary).

    • App Store ID you can omit this parameter.

  • Click Register app

  • Click on the button Download GoogleService-Info.plist to download the file. (save this important file to use later)

  • Click Next

  • This step is already installed in Flickmax App Builder, click Next to continue

  • Click Next to continue

  • Next, press Continue to Console

  • Complete the process of creating an IOS application on firebase.

3. Setup for Android

Step 1: Open your project in https://console.firebase.google.com/

Step 2: Open your firebase project console, click the gear icon in the upper left corner, and select Project setting

Step 3: Click the Add app Button then select android icon in popup window

Step 4: Enter info about your app

  • Android package name is the name of packages on android.
    • Please use the same for both iOS Bundle ID & Android package name__.
    • Recommend in reverse domain format. For example, your domain is example.com, bundle ID and package name for your app should be "com.example.app"Use only lowercase letters.
    • Fill out the information and click Register app (You can omit the Debug signing certificate SHA-1 parameter)

Step 5: Download file google-services.json (save this important file to use later)

Click Next to continue...

Step 6: This step is Add Firebase SDK because our project has all set up already, so just click Next to continue.

Step 7: At this stage, it is possible that firebase will not detect your test device, but that's okay, just click Skip step to continue the following steps. (In case Firebase detect can click Continue to console)

  • Complete the process of creating an Android application on Firebase.

Facebook Login

✅ This guide is for WooCommerce, Opencart, Magento, PrestaShop, WordPress.

❎ Not use for Shopify, BigCommerce, Notion, Strapi.

Follow steps below to enter your Facebook’s information to App Builder:

  1. Open your App Builder
  2. Open your App
  3. Select Features, General, then Sign In / Sign Up
  4. Enter your Facebook’s information (at [Problem Internal Link])
  5. Click UPDATE

SMS Login

✅ This guide is for WooCommerce, Opencart, Magento, PrestaShop, WordPress.

❎ Not use for Shopify, BigCommerce, Notion, Strapi.

1. Setup SMS Login​

Follow steps below to enable SMS Login:

  1. Enable the SMS Login option on the app builder:

  2. Configure Firebase:

    Precondition: Follow Firebase Settings to create application on Firebase.

For Android, open the project on the **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](https://developers.google.com/android/guides/client-auth)


![](/notion_imgs/1670205232.png)


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


![](/notion_imgs/1067257520.jpg)


![](/notion_imgs/1257089714.jpg)

2. New SMS Login​

  • Another UI of Registration Form of SMS login:

image

  • Allow updating Email, Password after registration.
  • Enable this new feature by go to Features > General > Sign In/Sign Up > enable SMS Login > enable Use New SMS Login

3. SMS OTP Digits plugin​

This Digits WordPress plugin is Not compatible with 'New SMS Login' above. It is available for SMS Login (OTP SMS).

Instead of remembering a password, the feature supports users signing up and logging in with their Phone Number and One Time Passcode (OTP) on SMS. The feature also helps to avoid fake orders.

First, install the Digits: WordPress Mobile Number Signup and Login plugin on your website. Make sure that the plugin works well on your backend.

Then, open app on builder , go to Features > General > Sign In/Sign Up > enable SMS Login and Custom SMS Login Plugin

Logo and Others

This guide shows the way to:

  1. Change Logo on Sign Up and Sign In screen
  2. Require users to login before using the app
  3. Show Phone field on the Sign Up screen
  4. Require users to input Phone Number on the Sign Up screen
  5. Show Reset Password and URL to reset on the Sign In screen.

1. Logo​

To change Logo on Login screen:

  • Open app on builder
  • go to Features > Branding > Theme and Logo
  • Add Theme Logo > click Update

2. Others​

Enable these items if you need:

  1. Required Login: Require users to login before using the app
  2. Show Phone Number Field: Show Phone field on the Sign Up screen
  3. Require Phone Number: Require users to input Phone Number on the Sign Up screen
  4. Show Reset Password on the Sign In screen
  5. Custom Reset Password URL: edit the url of reset password.

This guide is for Shopify, BigCommerce, Notion, Strapi:

🎗 [Problem Internal Link] on Sign In and Sign Up screens.