Auth0 - Lock : Dynamic Signup Select Options - unable to populate

70 Views Asked by At

I am new to using Auth0 and am creating a signup form which needs to capture

  1. Given Name - records fine
  2. Family Name - records fine
  3. Country - records fine
  4. Team - need help making dynamic

The problem I have is collecting the team information.

https://auth0.com/docs/libraries/lock/lock-configuration#select-field

I currently have this in place for country

var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
  additionalSignUpFields: [
  // Ommitted{
    type: "select",
    name: "location",
    placeholder: "choose your location",
    options: [
        {value: "at", label: "Austria"},
        {value: "dk", label: "Denmark"},
        {value: "de", label: "Germany"},
        {value: "gb", label: "Great Britain"},
        {value: "ch", label: "Switzerland"},
        {value: "ua", label: "Ukraine"},
    ],
    }],
  /// Omitted
});

Which creates the select list and passes the information correctly.

The problem I have is when using this example

var options = {
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
    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
    cb(null, prefill);
    }
}]
}

I get an error

Uncaught ReferenceError: prefill is not defined

The desired result that I need is that on selection of ch I want the team to be sch-1, sch-2, or if its gb, ihc-1, ihc2...

A couple of things that I have tried are

options: function(cb) {
  // obtain options, in case of error you call cb with the error in the
  // first arg instead of null
  cb({value: "ch", label: "shc-1"}, options);
},
prefill: function(cb) {
  // obtain prefill, in case of error you call cb with the error in the
  // first arg instead of null
  cb({value: "gb", label: "ihc-1"}, prefill);
}

If I take out prefil and use somethign like this

options: function(cb) {
  // obtain options, in case of error you call cb with the error in the
  // first arg instead of null
  var arr = new Array();
  arr.push({value: "ch", label: "shc-1"})
  console.log(arr)
  
  cb(arr, options);
},

I get this response as per the image.

enter image description here

Any and all help in resolving this would be great and will complete the initial signup process.

0

There are 0 best solutions below