This article, we’ll learn how to implement firebase google authentication using Ionic. Before we starting we need to create google reverse client id for adding a plugin. please refer https://codesundar.com/create-reverse-client-id-for-google-login/ for detailed instructions
Let’s create new project & Add required dependencies
ionic <span class="hljs-keyword">start</span> firebasegoogleauth blank
cd firebasegoogleauth
ionic cordova platform <span class="hljs-keyword">add</span> android
ionic cordova platform <span class="hljs-keyword">add</span> ios
ionic cordova <span class="hljs-keyword">plugin</span> <span class="hljs-keyword">add</span> cordova-<span class="hljs-keyword">plugin</span>-googleplus <span class="hljs-comment">--save --variable REVERSED_CLIENT_ID=myreversedclientid</span>
npm <span class="hljs-keyword">install</span> <span class="hljs-comment">--save @ionic-native/google-plus</span>
npm <span class="hljs-keyword">install</span> <span class="hljs-comment">--save firebase</span>
Working with app.component.ts & app.module.ts
After adding all plugins and packages, we need to initiate our firebase inside app.component.ts
firebase.initializeApp({
<span class="hljs-symbol"> apiKey:</span> <span class="hljs-string">"xxx"</span>,
<span class="hljs-symbol"> authDomain:</span> <span class="hljs-string">"xxx"</span>,
<span class="hljs-symbol"> databaseURL:</span> <span class="hljs-string">"xxx"</span>,
<span class="hljs-symbol"> projectId:</span> <span class="hljs-string">"xxx"</span>,
<span class="hljs-symbol"> storageBucket:</span> <span class="hljs-string">"xxx"</span>,
<span class="hljs-symbol"> messagingSenderId:</span> <span class="hljs-string">"xxx"</span>
});
We need to declare plugin inside app.module.ts
import { <span class="hljs-symbol">GooglePlus</span> } from <span class="hljs-string">'@ionic-native/google-plus'</span>;
.
.
.
.
providers: [
<span class="hljs-symbol">StatusBar</span>,
<span class="hljs-symbol">SplashScreen</span>,
<span class="hljs-symbol">GooglePlus</span>,
{provide: <span class="hljs-symbol">ErrorHandler</span>, useClass: <span class="hljs-symbol">IonicErrorHandler</span>}
]
Working with home.html
Let’s create a new button for login with google.when the user clicks that button, we need to take two decision.
if the app is running on a browser, we need to call this code for a signup purpose
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.platform.<span class="hljs-keyword">is</span>(<span class="hljs-string">'core'</span>)) {
firebase.auth().signInWithPopup(new firebase.auth. GoogleAuthProvider()).then(gpRes => {
<span class="hljs-keyword">this</span>.displayToast(<span class="hljs-string">'Login Success'</span>)
<span class="hljs-keyword">this</span>.userData = gpRes.additionalUserInfo.profile;
}).<span class="hljs-keyword">catch</span>(err => <span class="hljs-keyword">this</span>.displayToast(err));
}
If the app is running on the device, we can log in with the cordova-google-plus plugin. Note: Here we need to use webclientid not reversed client id
<span class="hljs-keyword">else</span> {
<span class="hljs-keyword">this</span>.googleplus.login({
<span class="hljs-string">'webClientId'</span>: <span class="hljs-string">'YOUR CLIENT ID'</span>
}).<span class="hljs-keyword">then</span>(<span class="hljs-function"><span class="hljs-params">(success)</span> =></span> {
<span class="hljs-built_in">console</span>.log(success);
let credential = firebase.auth.GoogleAuthProvider.credential(success[<span class="hljs-string">'idToken'</span>], <span class="hljs-literal">null</span>);
firebase.auth().signInWithCredential(credential).<span class="hljs-keyword">then</span>(<span class="hljs-function"><span class="hljs-params">(data)</span> =></span> {
<span class="hljs-built_in">console</span>.log(data);
}).<span class="hljs-keyword">catch</span>(<span class="hljs-function"><span class="hljs-params">(err)</span> =></span> <span class="hljs-keyword">this</span>.displayToast(err));
}, err => <span class="hljs-keyword">this</span>.displayToast(err));
}
Download latest source code