Auth0 Home Blog Docs

Custom fields on login screen

lock

#1

How do I add custom fields on the login screen? I have a way for it to show up on Signup screen , need a way for it to show up on the login screen.


#2

Hi there @zmotiwala, you can add custom fields with the Hosted Login Page. Here are some additional customizations/configurations you can do when leveraging lock as well. Please let me know if this helps you as you venture forward. Thanks!

Example referenced in lock configuration docs :

var options = {
  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(address) {
      return {
         valid: address.length >= 10,
         hint: "Must have 10 or more chars" // optional
      };
    }
  },
  {
    name: "full_name",
    placeholder: "Enter your full name"
  }]
}

#4

That shows up on Signup Page, I have used that how do I use that on Login Page? Like sign in not sign up?


#5

As I look more into this @zmotiwala I would like to better understand the dataset you would like to send across at login in your use-case. Can you share a little more details on the scenario? Thanks in advance!


#6

Hello James,
I would like to pass in a string variable like a confirmation id , based on that value we could do a lookup in our external system an assign roles to the user.

This would provide a seamless way to assign roles based on a lookup from a third party system.


#7

You cannot add custom inputs on the login screen, at least not related to the authentication flow.
I’m still not understanding the scenario fully, but if the value you are after is related to one specific application, you will probably ask the value after the user logs in, directly into the application.