Custom Authentication AngularFire2 Ionic2

Question

I update my application from Ionic 1 to Ionic 2. For the first App (Ionic 1) I use AngularFire and custom authentication (with Slim Framework). With Ionic 2 I try to do the same thing with AngularFire2 (and firebase 2.4.2) but I have this error when I auth to firebase.

Code (App.ts):

@App({
  templateUrl: './build/app.html',
  providers: [
    FIREBASE_PROVIDERS,
    defaultFirebase('https://<APP>.firebaseio.com/'),
    firebaseAuthConfig({
      provider: AuthProviders.Custom,
      method: AuthMethods.CustomToken
    })
  ]
})

Code (Login.ts):

export class LoginPage {
  n_adherent:number = null;
  password:string = '';

  constructor(..., private af:AngularFire, private _authService:AuthService) {}

  connect() {
    let credentials = {
      n_adherent: parseInt(this.n_adherent, 10),
      password: this.password
    };

    // Send credentials to my PHP server
    this._autService.login(credentials)
      .subscribe(data => {
        if (data.token) {

          // I get the token

          let token = data.token;

          // Authenticate to Firebase
          this.af.auth.login(token)
            .then((data) => console.log(data))
            .catch((error) => console.log(error));
        }
      });
  }
}

Error (in console):

You must include credentials to use this auth method.

Code from firebase/php-jwt:

<?php
use \Firebase\JWT\JWT;

$key = "example_key";
$token = array(
    "iss" => "http://example.org",
    "aud" => "http://example.com",
    "iat" => 1356999524,
    "nbf" => 1357000000
);

/**
 * IMPORTANT:
 * You must specify supported algorithms for your application. See
 * https://tools.ietf.org/html/draft-ietf-jose-json-web-algorithms-40
 * for a list of spec-compliant algorithms.
 */
$jwt = JWT::encode($token, $key);
$decoded = JWT::decode($jwt, $key, array('HS256'));

print_r($decoded);

/*
 NOTE: This will now be an object instead of an associative array. To get
 an associative array, you will need to cast it as such:
*/

$decoded_array = (array) $decoded;

/**
 * You can add a leeway to account for when there is a clock skew times between
 * the signing and verifying servers. It is recommended that this leeway should
 * not be bigger than a few minutes.
 *
 * Source: http://self-issued.info/docs/draft-ietf-oauth-json-web-token.html#nbfDef
 */
JWT::$leeway = 60; // $leeway in seconds
$decoded = JWT::decode($jwt, $key, array('HS256'));

?>

Your help is needed.

score 0 · Answer 1 · answered Jun 24 '16 at 08:12

0

Your token is a string, right?
We just had the same error and had to debug the source code.
We realised, that the this.af.auth.login method is waiting for two parameters.

Simply put, use the following:
this.af.auth.login(token, {})

Cheers, Marcell

answered Jun 24 '16 at 08:12

Marcell Kiss

538
3
11

score 0 · Answer 2 · answered Mar 14 '17 at 14:15

This should fix your issue:

      this.af.auth.login(data.token, {
        provider: AuthProviders.Custom,
        method: AuthMethods.CustomToken
      })
        .then(data => {
          console.log(data);
        })
        .catch(error => {
          console.log(error);
        });

Cheers.

Custom Authentication AngularFire2 Ionic2

2 Answers2