Amplify-js: Unable to customize Builtin Vue Components (no examples / incorrect documentation )

[armedoctopus]

* Which Category is your question related to? *
Amplify Builtin Vue Auth Component customizing
* What AWS Services are you utilizing? *
IAM S3 LAMBDA DYNAMODB APPSYNC
* Provide additional details e.g. code snippets *
I am trying to customize the amplify vue sample using https://aws-amplify.github.io/amplify-js/media/vue_guide#signup-fields documentation to remove the phone number requirement from the SignUp builtin amplify Auth component. According to stackoverflow documentation https://stackoverflow.com/questions/52578961/how-to-pass-objects-to-aws-amplify-vue-signup the aws amplify document is incorrect
and I cannot find any real-world examples showing customization of the builtin amplify Vue components in this repo. Having a real-world example showing how to customize the builtin amplify Vue components would be great and prove that the documentation is correct and then I could Use the documented techniques successfully.

[armedoctopus]

The only other Vue Amplify example other than the new Vue Sample here that I can find which is on Medium also does not show any working customization:

https://hackernoon.com/how-to-build-serverless-vue-applications-with-aws-amplify-67d16c79e9d6

[mlabieniec]

Have to tried the vue sample? This has been updated to use the new components:
https://github.com/aws-samples/aws-amplify-vue

which part are you finding to be incorrect in the documentation?

[armedoctopus]

I am using https://github.com/aws-samples/aws-amplify-vue
The default SignUp Vue component is in /src/router/index.js
From what I understand I need to customize the Auth component inside of that index.js using AmplifyEventBus I was researching how to do this and came across https://stackoverflow.com/questions/52578961/how-to-pass-objects-to-aws-amplify-vue-signup
After reading this I am unsure how to do it since it shows that the documentation is incorrect:
https://aws-amplify.github.io/amplify-js/media/vue_guide#signup

##### this is supposedly the correct answer which is not found in the amplify documentation:

sure, maybe the complete solution will help you. you should have on the template section. Now on the data section you should refers to the authOptions : { signUpConfig: { signUpFields: [{ label: 'Name', key: 'name', required: true, displayOrder: 1, type: 'string' }]}};

#

Please help me understand how to do this customization that I would like to achieve which is to remove the phone number field from the SignUp component in the Amplify Vue example.

[armedoctopus]

Here is a screenshot of the signUp component with the phone_number computed option object I would like to remove when loading the signUp component. I thought with Vue it is possible to dynamically change option objects of vue components? Otherwise what is the recommended way to change these builtin Vue components for Authorization, or are we forced to use the defaults? However, that wouldn't make any sense if we are forced to use defaults because you guys recently refactored all the auth components into their own builtins from this vue amplify example because we can customize the components at run time?

[armedoctopus]

I found specific reference to what I want to do in the documentation here:
https://aws-amplify.github.io/amplify-js/media/vue_guide#signup-fields
However I still haven't figured out how to use that information to make it work yet.
Here is a what the documentation says:
"
By default the SignUp Component will display Username, Password, Email and Phone Number fields (all required, and in that order). You can override the labels, displayOrder or ‘required’ booleans for these fields by passing objects with ‘username’, ‘password’, ‘email’ or ‘phone_number’ keys in the signUpConfig.signUpFields array.

Fields passed into the signUpFields array without a displayOrder property will be placed after those fields with defined displayOrders and in alphabetical order by key.
"
If anyone knows how to do this with the aws-amplify-vue sample please let me know.
Thanks.

[haverchuck]

@armedoctopus - There was indeed a mismatch between the docs and the Authenticator component - thanks for calling this out. The fixed code should be available on our unstable npm tag shortly. If you need to get it to work ASAP or don't want to download a new version of aws-amplify-vue, simply replace the props name authConfig with authOptions.

Additionally, to answer your question about the sample app - the Authenticator component is rendered via the Vue router in the sample app, so you need to pass in the signUpFields via the props object in the route:

{
      path: '/auth',
      name: 'Authenticator',
      component: components.Authenticator,
      props: {
        authConfig: {    <-- replace me with 'authOptions' if you are using older version of package
          signUpConfig: {
            header: 'I am the new header for the Authenticator component!',
            signUpFields: [
              {
                label: 'Address',
                key: 'address',
                type: 'string',
              }
            ]
          }
        }
      }
    }

[haverchuck]

@armedoctopus - The fix has been merged in github and should be on it's way to NPM. I'm closing this issue but feel free to let us know if there is still a problem.