TypeScript can't find Oidc.UserManager

[Martin-Andersen]

I am trying to create a new instance of: "var mgr = new Oidc.UserManager(config);" But VSCode are unable to find the namespace Oidc.

I am using JSPM and have made this adjustments. The index.d.ts in my wwwroot looks like this

/// <reference path="../typings/index.d.ts" />
/// <reference path="jspm_packages/github/IdentityModel/oidc-client-js@1.1.0/oidc-client.d.ts" />

I have replaced callback:(ev:null) with callback:(ev:any) and included the oidc-client.d.ts in package.json

What am I missing?

[brockallen]

Not sure -- I'm not a TS user. If you learn anything, please report back here so I/we can fix whatever is needed. Thanks.

[nikki603]

@Martin-Andersen I am also using VS Code, Typescript 2. Here is what works for me if it will help you:

/// <reference path="../../config/oidc-client.d.ts" />
import { Injectable } from '@angular/core';

const settings: any = {
  client_id: 'client1',
  authority: 'http://localhost:5000/',
  response_type: 'id_token token',
  scope: 'openid email profile',
  loadUserInfo: true,
  redirect_uri: 'http://localhost:3000/signInCallback.html',
  post_logout_redirect_uri: 'http://localhost:3000/',
  monitorSession: true
};

@Injectable()
export class AuthService {
  mgr: any = new UserManager(settings);
  private loggedIn: boolean = false;

  constructor() {
    this.mgr.getUser()
      .then((user) => {
        if (user) {
          this.loggedIn = true;
        } else {
          this.loggedIn = false;
          this.signIn();
        }
      })
      .catch((err) => {
        this.loggedIn = false;
      });

    this.mgr.events.addUserSignedOut((e) => {
      this.signOut();
    });
  }

  getLoggedInState() {
    return this.loggedIn;
  }

  signIn() {
    this.mgr.signinRedirect().then(function () {
    }).catch(function (err) {
      console.log(err);
    });
  }

  signOut() {
    this.mgr.signoutRedirect().then(function () {
    }).catch(function (err) {
      console.log(err);
    });
    this.loggedIn = false;
    this.mgr.clearStaleState();
  };
}

[robbaman]

I'm now also running into this issue and I think I've figured out what's wrong here. The type definitions file should tell TypeScript what the non-TypeScript library looks like. Unfortunately as it stands now this does not seem to be the case.

The most notable difference is that in the actual oidc library the UserManager is supposed to be used as a class (and should thus be 'newed up'). As it stands now, the declaration file describes it as an interface, which makes it impossible to create a 'new' Oidc.UserManager.

For now I've solved it by simply changing the declarations of UserManager and OidcClient from interface to class like so:

class OidcClient {
    constructor (settings: OidcClientCtor);
    ... 
}

class UserManager extends OidcClient {
    constructor (settings: UserManagerCtor);
    ...
}

A few disclaimers:

• While this works and makes total sense to me, I must admit that I'm fairly new to the whole modular import/export part of TypeScript, so there is a chance I'm wrong.
• This solves the issue for the UserManager, but looking at the docs I think the WebStorageStateStore declaration should also be a class (since it is supposed to be used as a class and just a container for data)
• The MetadataService interface defines a new method on the interface as well, implying the above would also apply to it, but I haven't personally found out why any user would want to create a new instance of it.
• The declarations at the top of the definition file (e.a. declare var UserManager: Oidc.UserManager;) makes the following statement valid for the TypeScript compiler: var x = new UserManager({}), but at runtime this will break seeing as the UserManager is actually in the Oidc namespace. I'm not sure why these declarations were added, but I think they should be removed.
• I totally don't know what the declare module "oidc-client" does, removing it broke nothing for me, so I'm unsure what it is supposed to do.

I can create (another) PR for a changed oidc-client.d.ts file that does work for me if you want. Just know that while I have quite a bit of experience with TypeScript in general, this whole module loading thing is still fairly new to me.

[brockallen]

As I said:

Not sure -- I'm not a TS user.

And I don't have time right now to learn and make sure it's all correct. There are some other issues and PRs related. Maybe you can ping those folks to help and provide input.

[brockallen]

Can we close this now?