Google Native Authentication

Ionic Cloud has been deprecated. To continue using Ionic services, migrate to Ionic Pro before Jan. 31, 2018.


Create a Google Project

If you are migrating from the old Google Auth Provider, you can skip this segment.

The first step in setting up your Google authentication integration is to create a project on Google.

You’ll use these details in the next section.

Client ID & Secret

Now that you’ve got an app setup, you need to let us know about the Client ID and Client Secret. You can find both details listed in the dialog referenced above.

Device Configuration

iOS Setup

  1. Open the downloaded file and copy the REVERSED_CLIENT_ID, and use it in the Cordova Plugin step.

Android Setup

App Implementation


Cloud Configuration

The webClientId and REVERSED_CLIENT_ID are different IDs, and it’s important to not mix them up. The REVERSED_CLIENT_ID is used for iOS, and can be found in your project’s iOS credentials on the Google developer console (or in the downloaded .plist file). The webClientId is used for both iOS and Android, and is required.

const cloudSettings: CloudSettings = {
  'core': {
    'app_id': 'APP_ID'
  'auth': {
    'google': {
      'webClientId': 'WEB_CLIENT_ID',
      'scope': ['permission1', 'permission2']
  "core": {
    "app_id": "APP_ID"
  "auth": {
    "google": {
      "webClientId": "WEB_CLIENT_ID",
      "scope": ["permission1", "permission2"]

Plugin Installation

cordova plugin add cordova-plugin-googleplus --save --variable REVERSED_CLIENT_ID="myreversedclientid"

Injecting GoogleAuth and User

Import GoogleAuth and User from the Cloud Client and specify them as dependencies in your component constructor.

  • googleAuth is a service that deals with user authentication.
  • user is a reference to the current user, whether that user is anonymous or authenticated.
import { Component } from '@angular/core';
import { GoogleAuth, User } from '@ionic/cloud-angular';

@Component( ... )
export class LoginPage {
  constructor(public googleAuth: GoogleAuth, public user: User) {

Specify as a dependency for your module. This gives you access to $ionicGoogleAuth and $ionicUser.

  • $ionicGoogleAuth is a service that deals with user authentication.
  • $ionicUser is a reference to the current user, whether that user is anonymous or authenticated.
angular.module('myapp.controllers', [''])

.controller('MyCtrl', function($scope, $ionicGoogleAuth, $ionicUser) {


this.googleAuth.login().then( ... );
$ionicGoogleAuth.login().then( ... );


Logging out clears the current user context.


Additional Information

Social Data

We store social data in Unlike your custom data which uses user.get() and user.set(), is just an object with the following properties.

uid Google user ID
data Google data object
data.profile_picture Google profile picture Google email
data.full_name The user’s full name
data.raw_data The data object straight from Google (see these docs)


const full_name =;
const profile_picture =;
const google_raw_data =;
var full_name = $
var profile_picture = $
var google_raw_data = $;



If you get Error 12501 - User Cancelled, this means you used the wrong Bundle ID during your iOS/Android configuration steps. Make sure you are using the correct one, by setting your desired Bundle ID in your config.xml, and using that ID during the Device Setup

400 - Invalid Scheme on iOS

This likely means you provided the Cordova Plugin with the Client ID instead of the REVERSED_CLIENT_ID. You don’t need to go and generate and download the configuration file again. You can just go to your Google developer console and open up the iOS Credentials, and copy the iOS URL scheme. This is your REVERSED_CLIENT_ID.