• 1
    Setup your application’s code
  • 2
    Create an app in Auth0 dashboard
  • 3
    Create a social connection

Setup your application's code

npm install angular2-jwt@0.1.23

Add the following lines to your base code

// src/services/auth/auth.service.ts

import { Storage } from '@ionic/storage';
import { AuthHttp, JwtHelper, tokenNotExpired } from 'angular2-jwt';
import { Injectable, NgZone } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import { Auth0Vars } from '../../auth0-variables';

// Avoid name not found warnings
declare var Auth0: any;
declare var Auth0Lock: any;

export class AuthService {

  jwtHelper: JwtHelper = new JwtHelper();
  auth0 = new Auth0({clientID: 'YOUR_CLIENT_ID', domain: 'YOUR_AUTH0_DOMAIN' });
  lock = new Auth0Lock('YOUR_CLIENT_ID', 'YOUR_AUTH0_DOMAIN', {
    auth: {
      redirect: false,
      params: {
        scope: 'openid offline_access',
  storage: Storage = new Storage();
  refreshSubscription: any;
  user: Object;
  zoneImpl: NgZone;
  idToken: string;
  constructor(private authHttp: AuthHttp, zone: NgZone) {
    this.zoneImpl = zone;
    // Check if there is a profile saved in local storage
    this.storage.get('profile').then(profile => {
      this.user = JSON.parse(profile);
    }).catch(error => {

    this.storage.get('id_token').then(token => {
      this.idToken = token;

    this.lock.on('authenticated', authResult => {
      this.storage.set('id_token', authResult.idToken);
      this.idToken = authResult.idToken;

      // Fetch profile information
      this.lock.getProfile(authResult.idToken, (error, profile) => {
        if (error) {
          // Handle error

        profile.user_metadata = profile.user_metadata || {};
        this.storage.set('profile', JSON.stringify(profile));
        this.user = profile;


      this.storage.set('refresh_token', authResult.refreshToken);
      this.zoneImpl.run(() => this.user = authResult.profile);
      // Schedule a token refresh


  public authenticated() { 
    return tokenNotExpired('id_token', this.idToken);
  public login() {
    // Show the Auth0 Lock widget
  public logout() {
    this.idToken = null;
    this.zoneImpl.run(() => this.user = null);
    // Unschedule the token refresh

Create an Application in Auth0 dashboard 

Create an Application in Auth0 dashboard

Install the Custom Social Connection extension under Extensions 


List the app under the Installed Extensions tab. Click on the Custom Social Connections

Installed Extensions tab

Create a AzureADv2 (oauth2) connection under Custom Social Connections

Authorize the Custom Social Connections app

Configure your connection settings and enable your application under the Apps tab

Configure Social Connection Settings

Authentication Built for Security & High Availability

Auth0 is the easiest way for developers to integrate enterprise-grade authentication and identity management to any app.

Industry Standard Compliance

SOC 2, HIPAA/BAA, EU/US Privacy Shield Framework, Open ID Certified.

Learn More
Built by Security Experts

Continuously reviewed and tested by external security experts. Strong password encryption and hashing algorithms, at rest and in transit.

Learn More
What Our Customers Say

Continuously reviewed and tested by external security experts. Strong password encryption and hashing algorithms, at rest and in transit.

Learn More
Availability & trust

Uptime time in 3 different regions.

Learn More
Host Anywhere

Deploy On-Premises or on Cloud on your data center or Auth0’s one.

Learn More

Get Auth0 free for 7,000 active users per month with unlimited logins

  • Single Sign On
  • Passwordless Login
  • Up to 2 Social Identity Providers
  • Multifactor Authentication
  • User Management
  • Extensibility (Run custom code on Auth)

Some of the companies that trust us every day