Instagram Authentication

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


Register an Instagram Client

The first step in setting up your Instagram authentication integration is to create an app (AKA client) on Instagram.

Make sure you see the URL in a box like shown below. If it’s not in a box, make sure to hit enter inside the Valid redirect URIs field.

Client ID & Secret

Now that you’ve got an app setup, you need to let us know about the Client ID and Client Secret. Both can be found when you click Manage next to your app.

Back in the Ionic Services app settings page, navigate to the User Auth section and enter the necessary details into the Instagram integration.

App Implementation


Plugin Installation

The InAppBrowser plugin is used to login your users with Instagram authentication.

$ cordova plugin add cordova-plugin-inappbrowser --save

Injecting Auth and User

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

  • auth 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 { Auth, User } from '@ionic/cloud-angular';

@Component( ... )
export class LoginPage {
  constructor(public auth: Auth, public user: User) {

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

  • $ionicAuth 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, $ionicAuth, $ionicUser) {


this.auth.login('instagram').then( ... );
$ionicAuth.login('instagram').then( ... );


Logging out clears the current user context.


Social Data

Unfortunately, Instagram does not give us email addresses.

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 Instagram user ID
data Instagram data object
data.profile_picture Instagram profile picture
data.full_name The user’s full name
data.raw_data The data object straight from Instagram (see these docs)


const full_name =;
const profile_picture =;
const instagram_raw_data =;
var full_name = $
var profile_picture = $
var instagram_raw_data = $;