<commit_before># Custom Signup

In some cases, you may want to customize the user sign up form with more fields other than email and password.
[Lock](lock) has a `signup` mode but it does not support adding arbitrary fields,
so you will have to implement your own UI for signup.
Lock can still be used for logging in to your application.

> Note that there is currently no way to validate user-supplied custom fields when signing up.
Validation must be done from an Auth0 rule when logging in, or with custom logic in your application.

You can find the [full source of this example on GitHub](https://github.com/auth0/auth0-custom-signup-apiv2-sample), or [see it live here](https://auth0.github.io/auth0-custom-signup-apiv2-sample/).

## Overview

We can describe a custom signup flow with the following steps:

1. [Sign up the user](/auth-api#!#post--dbconnections-signup) with just their username and password
2. [Log them in programatically](/auth-api#!#post--oauth-ro) and [get back a JWT](/scopes)
3. [Call API v2 with the user's JWT](/api/v2#!/Users/patch_users_by_id) to [add the custom fields to `user_metadata`](/api/v2/changes#user-metadata)

## 1. Signup form

```html
<form id="signup">
  <fieldset>
    <legend>Sign up</legend>
    <p>
      <input type="email" id="signup-email" placeholder="Email" required/>
    </p>
    <p>
      <input type="password" id="signup-password" placeholder="Password"
             required/>
    </p>
    <p>
      <input type="text" id="name" placeholder="<NAME>" required/>
    </p>
    <p>
      <input type="text" id="color" placeholder="Favorite color"/>
    </p>
    <input type="submit" value="Sign up"/>
  </fieldset>
</form>
```

Notice that `name` and `color` are custom fields.

## 2. Auth0.js and dependencies

```html
<script src="https://cdn.auth0.com/w2/auth0-6.js"></script>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
```

```js
window.auth0 = new Auth0({
  domain: '${account.namespace}',
  clientID: '${account.clientId}'
});
```

## 3. Submitting the form (popup mode)

Here we are first signing up the user through Auth0. If the signup is successful,
a call to `PATCH users/{user_id}` is made, which adds the custom fields to the
`user_metadata` field of the user's profile.
<commit_msg>Update Auth0.js<commit_after># Custom Signup

In some cases, you may want to customize the user sign up form with more fields other than email and password.
[Lock](lock) has a `signup` mode but it does not support adding arbitrary fields,
so you will have to implement your own UI for signup.
Lock can still be used for logging in to your application.

> Note that there is currently no way to validate user-supplied custom fields when signing up.
Validation must be done from an Auth0 rule when logging in, or with custom logic in your application.

You can find the [full source of this example on GitHub](https://github.com/auth0/auth0-custom-signup-apiv2-sample), or [see it live here](https://auth0.github.io/auth0-custom-signup-apiv2-sample/).

## Overview

We can describe a custom signup flow with the following steps:

1. [Sign up the user](/auth-api#!#post--dbconnections-signup) with just their username and password
2. [Log them in programatically](/auth-api#!#post--oauth-ro) and [get back a JWT](/scopes)
3. [Call API v2 with the user's JWT](/api/v2#!/Users/patch_users_by_id) to [add the custom fields to `user_metadata`](/api/v2/changes#user-metadata)

## 1. Signup form

```html
<form id="signup">
  <fieldset>
    <legend>Sign up</legend>
    <p>
      <input type="email" id="signup-email" placeholder="Email" required/>
    </p>
    <p>
      <input type="password" id="signup-password" placeholder="Password"
             required/>
    </p>
    <p>
      <input type="text" id="name" placeholder="<NAME>" required/>
    </p>
    <p>
      <input type="text" id="color" placeholder="Favorite color"/>
    </p>
    <input type="submit" value="Sign up"/>
  </fieldset>
</form>
```

Notice that `name` and `color` are custom fields.

## 2. Auth0.js and dependencies

```html
<script src="https://cdn.auth0.com/w2/auth0-6.7.js"></script>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
```

```js
window.auth0 = new Auth0({
  domain: '${account.namespace}',
  clientID: '${account.clientId}'
});
```

## 3. Submitting the form (popup mode)

Here we are first signing up the user through Auth0. If the signup is successful,
a call to `PATCH users/{user_id}` is made, which adds the custom fields to the
`user_metadata` field of the user's profile.

{'fraction_non_alphanumeric': 0.13722051731696625, 'fraction_numerical': 0.012275317843051293, 'mean_word_length': 3.8646055437100215, 'pattern_counts': {'":': 0, '<': 51, '<?xml version=': 0, '>': 53, 'https://': 6, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4520704', 'n_tokens_mistral': 1489, 'n_tokens_neox': 1450, 'n_words': 531}