Merge pull request #10465 from carusology/auth0-lock-v10

Update Auth0Lock to v10 API
2026-10-03 22:37:03 +00:00 · 2016-08-10 09:42:36 -07:00
parent 5ef96e491c 14261aa459
commit dba089bf7d
2 changed files with 258 additions and 63 deletions
@@ -1,13 +1,165 @@
 /// <reference path="../auth0/auth0.d.ts" />
 /// <reference path="auth0.lock.d.ts" />

-var lock: Auth0LockStatic = new Auth0Lock("dsa7d77dsa7d7", "mine.auth0.com");
+const CLIENT_ID = "YOUR_AUTH0_APP_CLIENTID";
+const DOMAIN = "YOUR_DOMAIN_AT.auth0.com";

-lock.showSignin({
-        connections: ["facebook", "google-oauth2", "twitter", "Username-Password-Authentication"],
-        icon: "https://contoso.com/logo-32.png",
-        socialBigButtons: true
-    },
-    () => {
-        // The Auth0 Widget is now loaded.
+var lock: Auth0LockStatic = new Auth0Lock(CLIENT_ID, DOMAIN);
+
+lock.show();
+lock.hide();
+lock.logout(() => {});
+
+// The examples below are lifted from auth0-lock documentation on Github
+
+// "on" event-driven example
+
+lock.on("authenticated", function(authResult : any) {
+  lock.getProfile(authResult.idToken, function(error, profile) {
+    if (error) {
+      // Handle error
+      return;
+    }
+
+    localStorage.setItem("idToken", authResult.idToken);
+    localStorage.setItem("profile", JSON.stringify(profile));
+  });
 });
+
+
+// test theme
+
+var themeOptions : Auth0LockConstructorOptions = {
+  theme: {
+    logo: "https://example.com/assets/logo.png",
+    primaryColor: "green"
+  }
+};
+
+new Auth0Lock(CLIENT_ID, DOMAIN, themeOptions);
+
+// test authentication
+
+var authOptions : Auth0LockConstructorOptions = {
+  auth: {
+   params: { state: "foo" },
+   redirect: true,
+   redirectUrl: "some url",
+   responseType: "token",
+   sso: true
+  }
+};
+
+new Auth0Lock(CLIENT_ID, DOMAIN, authOptions);
+
+// test multi-variant example
+
+var multiVariantOptions : Auth0LockConstructorOptions = {
+  container: "myContainer",
+  closable: false,
+  languageDictionary: {
+    signUpTerms: "I agree to the <a href='/terms' target='_new'>terms of service</a> ...",
+    title: "My Company",
+  },
+  autofocus: false
+};
+
+new Auth0Lock(CLIENT_ID, DOMAIN, multiVariantOptions);
+
+// test text-field additional sign up field
+
+var textFieldOptions : Auth0LockConstructorOptions = {
+  additionalSignUpFields: [{
+    name: "address",
+    placeholder: "enter your address",
+    // The following properties are optional
+    icon: "https://example.com/assests/address_icon.png",
+    prefill: "street 123",
+    validator: function(input : string) {
+      return {
+         valid: input.length >= 10,
+         hint: "Must have 10 or more chars" // optional
+      };
+    }
+  }]
+};
+
+new Auth0Lock(CLIENT_ID, DOMAIN, textFieldOptions);
+
+// test select-field additional sign up field
+
+var selectFieldOptions : Auth0LockConstructorOptions = {
+  additionalSignUpFields: [{
+    type: "select",
+    name: "location",
+    placeholder: "choose your location",
+    options: [
+      {value: "us", label: "United States"},
+      {value: "fr", label: "France"},
+      {value: "ar", label: "Argentina"}
+    ],
+    // The following properties are optional
+    icon: "https://example.com/assests/location_icon.png",
+    prefill: "us"
+  }]
+};
+
+new Auth0Lock(CLIENT_ID, DOMAIN, selectFieldOptions);
+
+// test select-field additional sign up field with callbacks for
+
+var selectFieldOptionsWithCallbacks : Auth0LockConstructorOptions = {
+  additionalSignUpFields: [{
+    type: "select",
+    name: "location",
+    placeholder: "choose your location",
+    options: function(cb) {
+      // obtain options, in case of error you call cb with the error in the
+      // first arg instead of null
+
+      let options = [
+        {value: "us", label: "United States"},
+        {value: "fr", label: "France"},
+        {value: "ar", label: "Argentina"}
+      ];
+
+      cb(null, options);
+    },
+    icon: "https://example.com/assests/location_icon.png",
+    prefill: function(cb) {
+      // obtain prefill, in case of error you call cb with the error in the
+      // first arg instead of null
+
+      let prefill = "us";
+
+      cb(null, prefill);
+    }
+  }]
+}
+
+new Auth0Lock(CLIENT_ID, DOMAIN, selectFieldOptionsWithCallbacks);
+
+// test Avatar options
+
+var avatarOptions : Auth0LockConstructorOptions = {
+  avatar: {
+    url: (email : string, cb : Auth0LockAvatarUrlCallback) => {
+      // obtain url for email, in case of error you call cb with the error in
+      // the first arg instead of null
+
+      let url = "url";
+
+      cb(null, url);
+    },
+    displayName: (email : string, cb : Auth0LockAvatarDisplayNameCallback) => {
+      // obtain displayName for email, in case of error you call cb with the
+      // error in the first arg instead of null
+
+      let displayName = "displayName";
+
+      cb(null, displayName);
+    }
+  }
+};
+
+new Auth0Lock(CLIENT_ID, DOMAIN, avatarOptions);
@@ -1,10 +1,70 @@
-// Type definitions for Auth0Widget.js
+// Type definitions for auth0-lock v10.0.1
 // Project: http://auth0.com
-// Definitions by: Robert McLaws <https://github.com/advancedrei>
+// Definitions by: Brian Caruso <https://github.com/carusology>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped

 /// <reference path="../auth0/auth0.d.ts" />

+interface Auth0LockAdditionalSignUpFieldOption {
+  value: string;
+  label: string;
+}
+
+type Auth0LockAdditionalSignUpFieldOptionsCallback =
+    (error: Auth0Error, options: Auth0LockAdditionalSignUpFieldOption[]) => void;
+
+type Auth0LockAdditionalSignUpFieldOptionsFunction =
+    (callback: Auth0LockAdditionalSignUpFieldOptionsCallback) => void;
+
+type Auth0LockAdditionalSignUpFieldPrefillCallback =
+    (error: Auth0Error, prefill: string) => void;
+
+type Auth0LockAdditionalSignUpFieldPrefillFunction =
+    (callback: Auth0LockAdditionalSignUpFieldPrefillCallback) => void;
+
+interface Auth0LockAdditionalSignUpField {
+    icon?: string;
+    name: string;
+    options?: Auth0LockAdditionalSignUpFieldOption[] | Auth0LockAdditionalSignUpFieldOptionsFunction;
+    placeholder: string;
+    prefill?: string | Auth0LockAdditionalSignUpFieldPrefillFunction;
+    type?: "select" | "text";
+    validator?: (input: string) => { valid: boolean; hint?: string };
+}
+
+type Auth0LockAvatarUrlCallback = (error: Auth0Error, url: string) => void;
+type Auth0LockAvatarDisplayNameCallback = (error: Auth0Error, displayName: string) => void;
+
+interface Auth0LockAvatarOptions {
+    url: (email: string, callback: Auth0LockAvatarUrlCallback) => void;
+    displayName: (email: string, callback: Auth0LockAvatarDisplayNameCallback) => void;
+}
+
+interface Auth0LockThemeOptions {
+    logo?: string;
+    primaryColor?: string;
+}
+
+// https://auth0.com/docs/libraries/lock/v10/sending-authentication-parameters
+interface Auth0LockAuthParamsOptions {
+    access_token?: any;
+    connection_scopes?: any;
+    device?: any;
+    nonce?: any;
+    protocol?: any;
+    request_id?: any;
+    scope?: string;
+    state?: string;
+}
+
+interface Auth0LockAuthOptions {
+    params?: Auth0LockAuthParamsOptions;
+    redirect?: boolean;
+    redirectUrl?: string;
+    responseType?: string;
+    sso?: boolean;
+}
+
 interface Auth0LockPopupOptions {
    width: number;
    height: number;
@@ -12,68 +72,51 @@ interface Auth0LockPopupOptions {
    top: number;
 }

-interface Auth0LockOptions {
-    authParams?: any;
-    callbackURL?: string;
-    connections?: string[];
-    container?: string;
-    closable?: boolean;
-    dict?: any;
-    defaultUserPasswordConnection?: string;
-    defaultADUsernameFromEmailPrefix?: boolean;
-    disableResetAction?: boolean;
-    disableSignupAction?: boolean;
-    focusInput?: boolean;
-    forceJSONP?: boolean;
-    gravatar?: boolean;
-    integratedWindowsLogin?: boolean;
-    icon?: string;
-    loginAfterSignup?: boolean;
-    popup?: boolean;
-    popupOptions?: Auth0LockPopupOptions;
-    rememberLastLogin?: boolean;
-    resetLink?: string;
-    responseType?: string;
-    signupLink?: string;
-    socialBigButtons?: boolean;
-    sso?: boolean;
-    theme?: string;
-    usernameStyle?: any;
-}
-
 interface Auth0LockConstructorOptions {
-    cdn?: string;
+    additionalSignUpFields?: Auth0LockAdditionalSignUpField[];
+    allowedConnections?: string[];
+    allowForgotPassword?: boolean;
+    allowLogin?: boolean;
+    allowSignUp?: boolean;
    assetsUrl?: string;
-    useCordovaSocialPlugins?: boolean;
+    auth?: Auth0LockAuthOptions;
+    autoclose?: boolean;
+    autofocus?: boolean;
+    avatar?: Auth0LockAvatarOptions;
+    closable?: boolean;
+    container?: string;
+    defaultADUsernameFromEmailPrefix?: string;
+    defaultDatabaseConnection?: string;
+    defaultEnterpriseConnection?: string;
+    forgotPasswordLink?: string;
+    initialScreen?: "login" | "signUp" | "forgotPassword";
+    language?: string;
+    languageDictionary?: any;
+    loginAfterSignup?: boolean;
+    mustAcceptTerms?: boolean;
+    popupOptions?: Auth0LockPopupOptions;
+    prefill?: { email?: string, username?: string};
+    rememberLastLogin?: boolean;
+    signupLink?: string;
+    socialButtonStyle?: "big" | "small";
+    theme?: Auth0LockThemeOptions;
+    usernameStyle?: string;
 }

 interface Auth0LockStatic {
    new (clientId: string, domain: string, options?: Auth0LockConstructorOptions): Auth0LockStatic;
+    getProfile(token: string, callback: (error: Auth0Error, profile: Auth0UserProfile) => void) : void;

    show(): void;
-    show(options: Auth0LockOptions): void;
-    show(callback: (error?: Auth0Error, profile?: Auth0UserProfile, token?: string) => void) : void;
-    show(options: Auth0LockOptions, callback: (error?: Auth0Error, profile?: Auth0UserProfile, token?: string) => void) : void;
+    hide(): void;
+    logout(query: any): void;

-    showSignin(): void;
-    showSignin(options: Auth0LockOptions): void;
-    showSignin(callback: (error?: Auth0Error, profile?: Auth0UserProfile, token?: string) => void) : void;
-    showSignin(options: Auth0LockOptions, callback: (error?: Auth0Error, profile?: Auth0UserProfile, token?: string) => void) : void;
-
-    showSignup(): void;
-    showSignup(options: Auth0LockOptions): void;
-    showSignup(callback: (error?: Auth0Error) => void) : void;
-    showSignup(options: Auth0LockOptions, callback: (error?: Auth0Error) => void) : void;
-
-    showReset(): void;
-    showReset(options: Auth0LockOptions): void;
-    showReset(callback: (error?: Auth0Error) => void) : void;
-    showReset(options: Auth0LockOptions, callback: (error?: Auth0Error) => void) : void;
-
-    hide(callback: () => void): void;
-    logout(callback: () => void): void;
-
-    getClient(): Auth0Static;
+    on(event: "show", callback: () => void) : void;
+    on(event: "hide", callback: () => void) : void;
+    on(event: "unrecoverable_error", callback: (error: Auth0Error) => void) : void;
+    on(event: "authorization_error", callback: (error: Auth0Error) => void) : void;
+    on(event: "authenticated", callback: (authResult: any) => void) : void;
+    on(event: string, callback: (...args: any[]) => void) : void;
 }

 declare var Auth0Lock: Auth0LockStatic;