Ionic 2 google signin Error 10 with firebase

The mysterious Error 10

I hope this article helps to clarify and find a solution quickly to the Error 10 using ionic 2 framewrok with firebase sign in and cordova-plugin-googleplus. I was developing an Ionic 2 application “quiz dev” to create a playful platform for developers to practice and improve their skill through quizzes, based on the spaced repetition approach. I wanted to provide the user the ability to sing in into the application using their google account.

error 10

The issue

The point is, that I’ve spend 2 or 3 days trying to figure out the error 10 I was receiving once I deployed to the Android Play Store. I followed the official documentation of Ionic https://ionicframework.com/docs/native/google-plus/

I installed the cordova-plugin-googleplus and implemented the plugin (I going to skip high level details, for more information refer to the documentation provided here)
 

  this.googlePlus.login({
        'webClientId':'#############-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com',
        'offline': true
      })
          .then(res => {
             //logged in
              ...
          })
          .catch(err => {
              alert("There is an error " + JSON.stringify(err));
          });

 

After that, I signed my debug.apk following the steps here, this is the google official documentation, then I get the SHA-1 fingerprint certificate that is going to be needed to setup the firebase project, you can do it via cmd following these steps. The result is going to be something like this:
sha-1 fingerprint certificate

I had set up a Firebase project, following the steps here https://chriztalk.com/ionic-2-firebase-google-authentication/

The headache

At this point installing the application in my device in release or debug mode, everything was working properly. Then I decided to deploy it to the google android app store. When installing the app from the android app store I wasn’t unable to login with my google accounts, the previous code to handle the google sign in was entering in the catch section and showing an alert with error 10
 

 
          .catch(err => {
              alert("There is an error " + JSON.stringify(err));
          });

The solution

After spending hours and hours trying to figure out what the issue was, I realize that there is an option when you are setting up your application in the google app store that ask you if you want to sign your apk in the store. After you say yes it shows you a message like this:
google app store apk sign
 

the real solution is to go to Release Management/App signing section and get the SHA-1 fingerprint certificate and include it in your Firebase project
 
app signing google android app store

Go to your Firebase project configuration and add you SHA-1 fingerprint and it will do it
 
firebase add sha-1 fingerprint

Final thought

I really hoe this save you a lot of time of banging your head against the wall.

Here is a demo of the app, you can from android to ios here. The is the application in the android app store in case you are interested https://play.google.com/store/apps/details?id=com.evolutionsys.quiz&hl=en

Angular 2 seed for Visual Studio 2015

Angular 2 seed for Visual Studio 2015

This Angular 2 seed for Visual Studio 2015 targets Angular version 2.1.0 released on Oct 12, 2016. This project is based on official Angular2 Seed project. It relies on TypeScript and SystemJS.

angular 2 seed

Instructions:

-1 Clone or fork the repocitory.
https://github.com/jomendez/AngularJs-2-Visual-Studio-2015
-2 Make sure you have node installed, this code require node v5.x.x or higher and npm v3.x.x or higher, to check what version you are using run node -v and npm -v, in your cmd console.
-3 Open a cmd console, and go to your project root file location and run npm install to install dependencies

npm behind a corporate proxy

If you are trying to setup the seed behind a proxy, you migth encounter issues of connection refuced, etc. You can use the following command:
With password:

npm config set proxy=http://<username>:<pass>@proxyhost:<port>
npm config set https-proxy=http://<uname>:<pass>@proxyhost:<port>

or without password:

npm config set proxy=http://proxyhost:<port>
npm config set https-proxy=http://proxyhost:<port>

 

Fixing errors when using resharper

If you don’t have installed resharper in your computer please ignore this section, if you have it intalling, resharper migth cause cause some sintax error validation.

Error:
“Typescript Feature 1.5. Current language level is 1.4”.

Solution:
Resharper setting. From the menu bar in VS2015 -> Resharper -> Options -> Code Editing -> TypeScript -> Inspections -> Typescript language level, change to 1.5

Error:
Symbol ‘component can not be properly resolved, probably its located in an inaccessible module’

Solution:
You can disabled resharper’s typescript inspection for now.
Resharper > Options > Code Inspection > Settings
Find ‘File masks’ (bottom right) and add *.ts

 

Browser support

The Angular 2 seed runs on all major browsers including Internet Explorer 11+, Edge, Firefox, Chrome, Opera and Safari.

License

The Angular 2 seed is released under the MIT license.