How to add customer custom attributes in PWA Magento

Here I am taking custom attribute as Phone Number so you can replace your custom attribute with the Phone Number.

In today’s article, we will guide you about steps to add customer attributes programmatically in Magento 2. Customer attributes help in collecting additional information from customers and offering a personalized experience using that information. First of all, we’ll create a simple module and name it Learn_Magento and use it here.

Let’s follow step by step instructions to create customer attribute in Magento 2

Step 1: Create a module.xml file 

In order to do that, we need to create a module.xml file in the following directory – app/code/Learn/Magento/etc

<?xml version="1.0"?>
<config xmlns:xsi="" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
<module name="Learn_Magento" schema_version="0.0.1" setup_version="0.0.1">

Step 2: Create a registration.php file 

To do this, we need to create a registration.php file in app/code/Learn/Magento and paste the following code:


Step 3: Create a schema.graphqls file 

To do this, we need to create a schema.graphqls file in app/code/Learn/Magento/etc and paste the following code:

input CustomerInput {
    custom_attribute: String @doc(description: "The customer's phone number")

Note: Please replace custom_attribute with your customer attribute

Let’s follow step by step instructions to add a custom attribute in the Registration form in PWA Venia Concept

Step 1: Add custom attribute field in createAccount.js file 

Goto this path: packages/venia-ui/lib/components/CreateAccount/createAccount.js

Add / Update below code in CreateAccount-form mentioned in above mentioned component file.

                    id: 'createAccount.customAttribute',
                    defaultMessage: 'Custom Attribute'
                    mask={value => value && value.trim()}

Reference Image

Step 2: Add custom attribute code in create account mutation createAccount.gql.js

Goto this path: packages/peregrine/lib/talons/CreateAccount/createAccount.gql.js

Add / Update below code in CREATE_ACCOUNT ggl so currently i am adding full export code so you can just update your custom attribute one.

export const CREATE_ACCOUNT = gql`
    mutation CreateAccount(
        $email: String!
        $firstname: String!
        $lastname: String!
        $custom_attribute: String!
        $password: String!
        $is_subscribed: Boolean!
    ) {
            input: {
                email: $email
                firstname: $firstname
                lastname: $lastname
                custom_attribute: $custom_attribute
                password: $password
                is_subscribed: $is_subscribed
        ) {
            # The createCustomer mutation returns a non-nullable CustomerOutput type
            # which requires that at least one of the sub fields be returned.

            # eslint-disable-next-line @graphql-eslint/require-id-when-available
            customer {

Step 3: use and pass custom attribute front-end to server in useCreateAccount.js file

Goto Path: packages/peregrine/lib/talons/CreateAccount/useCreateAccount.js

Add / Update you custom attribute in handleSubmit callback method.

 await createAccount({
                    variables: {
                        firstname: formValues.customer.firstname,
                        lastname: formValues.customer.lastname,
                        custom_attribute: formValues.customer.custom_attribute,
                        password: formValues.password,
                        is_subscribed: !!formValues.subscribe

Note: So please replace custom_attribute to your real customer attribute and if you have any questions or feedback so please feel free to ask in the comments or reach me my email address

Thank you so much for reading this blog and keep support me and i will coming with the new blog.

Related Posts

3 thoughts on “How to add customer custom attributes in PWA Magento

  1. I discovered your blog web site on google and verify a few of your early posts. Continue to maintain up the superb operate. I just further up your RSS feed to my MSN Information Reader. Searching for forward to reading extra from you in a while!?

  2. Sir Can you please add some more videos regarding pwa module development
    as well as how we can use current custom magento plugin in pwa ??

    ex. in magento 2 i create a custom plugin for delete account in customer account section but i don’t know how we apply in pwa

Leave a Reply

Your email address will not be published. Required fields are marked *