Skip to content

Instantly share code, notes, and snippets.

@keathmilligan
Last active March 20, 2018 20:56
Show Gist options
  • Save keathmilligan/92004bfb15d63f6989eb3ca738bd951f to your computer and use it in GitHub Desktop.
Save keathmilligan/92004bfb15d63f6989eb3ca738bd951f to your computer and use it in GitHub Desktop.
auth0 + angular-cli notes

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';
// 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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment