Quickstart Auth0 with Ionic2

Question

I'm new with ionic2 (and angular2) and I try to implement auth0 in my first app. So I followed this : https://auth0.com/docs/quickstart/hybrid/ionic2/no-api

I started with "get started" on ionic2 website and everything works perfectly. Then, I followed all steps in auth0 quickstart but when I do "ionic serve" I get this error :

0     883034   error    Uncaught Invalid provider - only instances of Provider and Type are allowed, got: [object Object], http://localhost:8100/build/js/app.bundle.js, Line: 24470

I think the problem is in app.ts, in @App providers :

import {App, Platform} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {TabsPage} from './pages/tabs/tabs';
import {provide} from 'angular2/core';
import {Http} from 'angular2/http'
import {AuthHttp, AuthConfig} from 'angular2-jwt';
import {AuthService} from './services/auth/auth';
import {Type} from 'angular2/core';


@App({
    template: '<ion-nav [root]="rootPage"></ion-nav>',
    config: {},
    providers: [
        provide(AuthHttp, {
            useFactory: (http) => {
                return new AuthHttp(new AuthConfig(), http);
            },
            deps: [Http]
        }),
        AuthService
    ],
 })
export class MyApp {
rootPage: any = TabsPage;

constructor(platform: Platform) {
    platform.ready().then(() => {
        StatusBar.styleDefault();
        // When the app starts up, there might be a valid
        // token in local storage. If there is, we should
        // schedule an initial token refresh for when the
        // token expires
        this.auth.startupTokenRefresh();

    });
}

}

Thx to help me !

Manuel Taber Manuel Taber · Accepted Answer · 2016-09-12T08:00:23

You are using the @App decorator. This means that you are using an old Beta of Ionic 2. Please update to the most recent version and bootstrap it the "new" way:

ionicBootstrap(MyApp, [
  provide(AuthHttp, {
    useFactory: (http) => {
      return new AuthHttp(new AuthConfig({noJwtError: true}), http);
    },
    deps: [Http]
  })],
  {
    tabbarPlacement: 'bottom'
  }
);

It should work this way!

Quickstart Auth0 with Ionic2

2 Answers