How to configure social login?


  1. Create a firebase project.

  1. First you need to have a google account and login in your browser.

  2. Goto this link: https://console.firebase.google.com/

  3. Click the “Add Project” Button.

  4. Add your project name and continue.

  5. Off the “disable google analytics” and Click the “Continue” Button.

  6. Click the “Continue” Button.


Add Android app on your Firebase project

  1. Click the android icon.

Add some informations:

  1. Android package name

  2. App nickname

  3. Add signing certificate SHA-1 and SHA-256

How to get SHA-1 code in your project ?

  1. Goto android studio and open your project then open terminal and ensure that it shows your project directory in the terminal.

  2. Then drive into the android folder(cd android).

  3. i)For debug mode: write this command on your android studio terminal  “gradlew signinReport”  then press enter.


ii) For release mode:  write this command on your android studio terminal “keytool -list -v -keystore YOUR_PROJECT_DIRECTORY\key.jks -alias key”  then press enter.

2. Click the “Register App” button

3. Download config file and add this file into your project->android->app folder

4. Add firebase SDK

5. Click the “Continue to console” button

6) After upload your app on playstore you need to add signing certificate SHA-1 and SHA-256 in firebase project setting : Open your google play console->Your App->Setup->App integrity







You must generate your own google-services.json. Do not use ours - it will not work for you.


Add IOS app on your Firebase project

  1. Goto your firebase project setting click add app button.

  2. Click IOS icon

  3. Add some information.
    i) Apple bundle id: Insert your app bundle id.

ii) App nickname (optional).

iii) App Store ID (optional).

  1. Click the Register app button.

  2. Download GoogleService-Info.plist file

Next you must add the file to the project using Xcode (adding manually via the filesystem won't link the file to the project). Using Xcode, open the project's ios/{projectName}.xcworkspace file. Right click Runner from the left-hand side project navigation within Xcode and select "Add files", as seen below:




Select the GoogleService-Info.plist file you downloaded, and ensure the "Copy items if needed" checkbox is enabled:


Firebase Authentication : 

  1. Goto signin method and then enable Google, facebook and twitter and apple.

  2. For facebook you need a facebook app id and app secret, we will create the next step.

Add these documents.


I) Facebook: Package Used

https://pub.dev/packages/flutter_facebook_auth

See its documentation and steps

How to create a facebook app ?

  1.  First you have to login facebook in your browser.

  2. Goto https://developers.facebook.com/

  3.  Goto My Apps.

  1.  Create an app.


Select App Type None.



  1.  Add your app details 

  • App Name.

  • App Contact Email.

  • Business Account. (Don’t Change it).


  1. Add product “Facebook Login”.

  • Click the “Set Up” button.


  1. Click the “Basic” Option.


  1. Add some information and save it.

  1. This app privacy policy url.

  2. This app terms of service url.

  3. This app icon (Icon size also 1024 X 1024 Or 512 X 512 ).

  4. This app category.

J) Now activate your app.

K) Click the “Switch Mode” Button.



L) Make sure your app facebook login settings are on these options.

  1. Client OAuth Login.

  2. Web OAuth Login.

  3. Enforce HTTPS

  4. Use Strict Mode for Redirect URIs






 



Integration

For Android:


M) Add your facebook app id, app name, facebook_client_token and fb login protocol scheme (**NOTE**: The scheme needs to start with `fb` and then your ID.example: fb123456789)

 into your project->android->app->src->main->res->values->string.xml file.


For IOS:





Client Token: Where do you get the client token?

Ans: Goto your facebook app setting->advance finde the Client token




For IOS: Add your facebook app id, app name, facebook_client_token and fb login protocol scheme (**NOTE**: The scheme needs to start with `fb` and then your ID.example: fb123456789)

 into your project->ios->Runner->info.plist file.



Google: Package Used

https://pub.dev/packages/google_sign_in 


Integration

For IOS:

  1. First register your application.

  2. Make sure the file you download in step 1 is named GoogleService-Info.plist.

  3. Move or copy GoogleService-Info.plist into the [my_project]/ios/Runner directory.

  4. Open Xcode, then right-click on Runner directory and select Add Files to "Runner".

  5. Select GoogleService-Info.plist from the file manager.

  6. A dialog will show up and ask you to select the targets, select the Runner target.

  7. Then add the CFBundleURLTypes attributes below into the [my_project]/ios/Runner/Info.plist file.




Open your GoogleService-Info.plist file and copy REVERSED_CLIENT_ID 


Put REVERSED_CLIENT_ID in your source_code->ios->info.plist files CFBundleURLSchemes-> array-> string 




Follow the guideline from here https://pub.dev/packages/google_sign_in  


Twitter : package used

https://pub.dev/packages/twitter_login

How to create a Twitter app.

  1. First you have to login twitter in your browser.

  2. Go to https://developer.twitter.com/

  3. Go to Developer Portal.

  4. Go to Project & Apps->Overview create a new project.






1.5. Filup some information for your project. Project Name, Use case, Project description.

2. Setup your app

2.1. Select your app environment.

2.2. Enter your app name.

2.3. Collect your API Key and API Key Secret.(you will have to collect it.)




3. Setup user authentication setting.

3.1. Go to Project & Apps-> select your project and then select your created app.

3.2. Find User authentication settings.

3.3. Click the Setup button.

3.4. Enable OAuth 2.0

3.5. Select Type of App.(Native app)

3.6. Callback URl.(activeecommerceflutterapp://).

3.7. Web site URL.(It's your web URL).

3.8. Save it.




4. Setup in your flutter e-commerce code.

4.1. Go to your flutter project->lib->social_config.dart

4.2. Enter your twitter_consumer_secret and twitter_consumer_key.




Apple SignIn: package used

https://pub.dev/packages/sign_in_with_apple

Configure properly as we mention in our ecommerce cms documentation. You don’t need extra configuration for the app.

Note: Use the same Bundle ID name for IOS bundle id  as you created an apple developer account for  web apple signUp.


×