Auth0 Home Blog Docs

Auth0-lock and Ionic2. Cutomize the login layout

auth0-lock
ionic2

#1

I’m having a weird issue with the login layout of Auth0 in Ionic2. I can’t customize the layout as I did with Angular2.

Angular 2 Code:

lock = new Auth0Lock(Auth0Vars.AUTH0_CLIENT_ID, Auth0Vars.AUTH0_DOMAIN, {
auth: {
  language:"es",
  languageDictionary:{
    title: "Iniciar",
    passwordInputPlaceholder: "Password" 
  },
  allowedConnections: "prdad"],
  avatar: null, 
  closable: false,
  params: {
    scope: 'openid offline_access employeeID sAMAccountName name email picture'
  },
  rememberLastLogin: false,
  theme: {
    logo: './../../img/icon_reverse.png',
    labeledSubmitButton: false,
    primaryColor: '#00827C'
  }
}
});

Ionic 2 code:

lock = new Auth0Lock(Auth0Vars.AUTH0_CLIENT_ID, Auth0Vars.AUTH0_DOMAIN, {
auth: {
  language:"es",
  languageDictionary:{
    title: "Iniciar",
    passwordInputPlaceholder: "Password" 
  },
  allowedConnections: "prdad"],
  avatar: null, 
  redirect: false,
  closable: false,
  params: {
    scope: 'openid offline_access nickname sAMAccountName profile employeeID name email picture',
    device: 'my-device'
  }
  sso: false,    
  theme: {
    logo: './../../img/icon_reverse.png',
    labeledSubmitButton: false,
    primaryColor: '#00827C'
  }
  }
 });

As you can see, both configurations are quite similar, but do not show the same results. In the case of ionic, I’m not getting the Theme, some Scopes and language configuration sets.

Unfortunately in the Auth0 documentation for Ionic2 there’s no much info about it.

Regards


#2

Both code snippets show all options being provided within the auth inner property which is not correct. Update your question with the correct configuration you use because the provided ones don’t seem valid. Also state which version of Lock are you using.


#3

@jmangelo the version is 10.13.0, and the options provided in both code snippets that are within the auth property, It’s because I was following the Ionic2+Auth0 documentation. Also provided in https://github.com/auth0-samples/auth0-ionic2-samples

A few days ago I figure it the issue in my code and fixed it, but again documentation about Ionic2+auth0 is incomplete.

By the way, thank you @jmangelo for your time and answer.


#4

For future reference, the samples may not highlight the use of all Lock options and may only make use of auth related options.

For full information on how to configure Lock with additional options refer to the Lock documentation; for version 10, see: https://auth0.com/docs/libraries/lock/v10/customization


#5