auth0 + angular-cli notes

auth0-angular-cli-notes.md

Auth0 Example with Angular CLI

A complete example is available at https://github.com/keathmilligan/angular2-cli-auth0-example

The provided auth0 tutorial uses SystemJS, these notes outline how to integrate into an angular-cli or straight webpack project.

Create project as usual with "ng create".

Install auth0 packages & bootstrap:

npm install --save auth0-lock angular2-jwt bootstrap

Also install typings:

npm install --save-dev @types/auth0-lock

Add bootstrap CSS to angular-cli.json apps/styles section.

We will just import the auth0 modules we need rather than globally including them in index.html.

Add "allowSyntheticDefaultImports": true to app/tsconfig.json. Hat tip: mikeesouth.

Complete the Quick-Start Phase 1 Example (canned AuthLock dialog)

Create AuthService per auth0 example, change the declar var line in auth.service.ts to an import:

import Auth0Lock from 'auth0-lock';

Remember to add the service to app.module.ts providers.

Add http://localhost:4200 to the Allowed Hosts (CORS) section in the auth0 client dashboard.

Custom Login Dialog

Remove auth0-lock, install auth0-js:

npm uninstall --save auth0-lock
npm uninstall --save-dev @types/auth0-lock
npm install --save auth0-js

@types/auth0-js is currently broken. Use the auth0-js.d.ts in this gist, place it in your src folder.

auth.service.ts:

import Auth0 from 'auth0-js';

auth0-js.d.ts

// Type definitions for Auth0.js
// Project: https://github.com/auth0/auth0.js
// Definitions by: Robert McLaws <https://github.com/advancedrei>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped

/** Extensions to the browser Window object. */
interface Window {
    /** Allows you to pass the id_token to other APIs, as specified in https://docs.auth0.com/apps-apis */
    token: string;
}

/** This is the interface for the main Auth0 client. */
interface Auth0Static {

    new(options: Auth0ClientOptions): Auth0Static;
    changePassword(options: any, callback?: Function): void;
    decodeJwt(jwt: string): any;
    login(options: any, callback: (error?: Auth0Error, profile?: Auth0UserProfile, id_token?: string, access_token?: string, state?: string) => any): void;
    loginWithPopup(options: Auth0LoginOptions, callback: (error?: Auth0Error, profile?: Auth0UserProfile, id_token?: string, access_token?: string, state?: string) => any): void;
    loginWithResourceOwner(options: Auth0LoginOptions, callback: (error?: Auth0Error, profile?: Auth0UserProfile, id_token?: string, access_token?: string, state?: any) => any): void;
    loginWithUsernamePassword(options: Auth0LoginOptions, callback: (error?: Auth0Error, profile?: Auth0UserProfile, id_token?: string, access_token?: string, state?: string) => any): void;
    logout(query: string): void;
    getConnections(callback?: Function): void;
    refreshToken(refreshToken: string, callback: (error?: Auth0Error, delegationResult?: Auth0DelegationToken) => any): void;
    getDelegationToken(targetClientId: string, id_token: string, options: any, callback: (error?: Auth0Error, delegationResult?: Auth0DelegationToken) => any): void;
    getProfile(id_token: string, callback?: Function): Auth0UserProfile;
    getSSOData(withActiveDirectories: any, callback?: Function): void;
    parseHash(hash: string): Auth0DecodedHash;
    signup(options: Auth0SignupOptions, callback: Function): void;
    validateUser(options: any, callback: (error?: Auth0Error, valid?: any) => any): void;
}

/** Represents constructor options for the Auth0 client. */
interface Auth0ClientOptions {
    clientID: string;
    callbackURL: string;
    callbackOnLocationHash?: boolean;
    domain: string;
    forceJSONP?: boolean;
}

/** Represents a normalized UserProfile. */
interface Auth0UserProfile {
    email: string;
    email_verified: boolean;
    family_name: string;
    gender: string;
    given_name: string;
    locale: string;
    name: string;
    nickname: string;
    picture: string;
    user_id: string;
    /** Represents one or more Identities that may be associated with the User. */
    identities: Auth0Identity[];
    user_metadata?: any;
    app_metadata?: any;
}

/** Represents an Auth0UserProfile that has a Microsoft Account as the primary identity. */
interface MicrosoftUserProfile extends Auth0UserProfile {
    emails: string[];
}

/** Represents an Auth0UserProfile that has an Office365 account as the primary identity. */
interface Office365UserProfile extends Auth0UserProfile {
    tenantid: string;
    upn: string;
}

/** Represents an Auth0UserProfile that has an Active Directory account as the primary identity. */
interface AdfsUserProfile extends Auth0UserProfile {
    issuer: string;
}

/** Represents multiple identities assigned to a user. */
interface Auth0Identity {
    access_token: string;
    connection: string;
    isSocial: boolean;
    provider: string;
    user_id: string;
}

interface Auth0DecodedHash {
    access_token: string;
    idToken: string;
    profile: Auth0UserProfile;
    state: any;
    error: any;
}

interface Auth0PopupOptions {
    width: number;
    height: number;
}

interface Auth0LoginOptions {
    auto_login?: boolean;
    connection?: string;
    responseType: string;
    email?: string;
    username?: string;
    password?: string;
    popup?: boolean;
    popupOptions?: Auth0PopupOptions;
}

interface Auth0SignupOptions extends Auth0LoginOptions {
}

interface Auth0Error {
    code: any;
    details: any;
    name: string;
    message: string;
    status: any;
}

/** Represents the response from an API Token Delegation request. */
interface Auth0DelegationToken {
    /** The length of time in seconds the token is valid for. */
    expires_in: string;
    /** The JWT for delegated access.  */
    id_token: string;
    /** The type of token being returned. Possible values: "Bearer"  */
    token_type: string;
}

declare var Auth0: Auth0Static;

declare module "auth0-js" {
    export = Auth0;
}