jQuery User Profile

Sample Project

Download this sample project configured with your Auth0 API Keys.

Profile

To fetch user profile information, call the lock.getProfile function, specifying the idToken and a callback to process the response.

Once you retrieve the user profile, you can store it in localStorage (or any store).

// app.js

$(document).ready(function() {
  var lock = null;

  lock = new Auth0Lock('YOUR_CLIENT_ID', 'YOUR_AUTH0_DOMAIN', {
    auth: {
      params: {
        scope: 'openid email'
      } //Details: https://auth0.com/docs/scopes
    }
  });

  ...

  lock.on("authenticated", function(authResult) {
    lock.getProfile(authResult.idToken, function (err, profile) {
      if (err) {
        // Remove expired token (if any)
        localStorage.removeItem('id_token');
        // Remove expired profile (if any)
        localStorage.removeItem('profile');
        return alert('There was an error getting the profile: ' + err.message);
      } else {
        localStorage.setItem('id_token', authResult.idToken);
        localStorage.setItem('profile', JSON.stringify(profile));
        showUserProfile(profile);
      }
    });
  });

  ...

  var logout = function() {
    localStorage.removeItem('id_token');
    localStorage.removeItem('profile');
    window.location.href = "/";
  };

  ...
});

Then display user profile attributes in your HTML:

// app.js

...

var showUserProfile = function(profile) {
  // Editing purposes only
  user_id = profile.user_id;
  ...
  $('#avatar').attr('src', profile.picture);
  $('#name').text(profile.name);
  $('#email').text(profile.email);
  $('#nickname').text(profile.nickname);
  $('#created_at').text(profile.created_at);
  $('#updated_at').text(profile.updated_at);
  ...
};
...
  <!-- index.html -->

  ...

  <div id="login" class="row">
    <h4>You are not logged in</h4>
    <button type="button" class="btn btn-primary" id="btn-login">Login</button>
  </div>

  <div id="logged" class="row" style="display: none;">
    <h4>You are logged in</h4>
    <div class="row">
      <div class="col-md-6">
        <h3>Profile</h3>
        <img alt="" id="avatar">
        <p><strong>Name: </strong> <span id="name"></span></p>
        <p><strong>Email: </strong> <span id="email"></span></p>
        <p><strong>Nickname: </strong> <span id="nickname"></span></p>
        <p><strong>Created At: </strong> <span id="created_at"></span></p>
        <p><strong>Updated At: </strong> <span id="updated_at"></span></p>
      </div>
    </div>
    <button type="button" class="btn btn-default" id="btn-logout">Logout</button>
  </div>

  ...

Custom Sign Up Fields

Auth0 allows you to store user information that has not come from the identity provider as metadata. There are two types of metadata: user_metadata and app_metadata. For more information, see User Metadata.

You can add input fields to the sign-up form by adding additionalSignUpFields to the options parameter of the Auth0Lock instantiation.

NOTE: See Additional Sign-Up Fields for more information (only available for Lock 10).

// app.js

...

  var lock = new Auth0Lock('YOUR_CLIENT_ID', 'YOUR_AUTH0_DOMAIN', {
    additionalSignUpFields: [{
      name: "address",                              // required
      placeholder: "Enter your address",            // required
      icon: "https://example.com/address_icon.png", // optional
      validator: function(value) {                  // optional
        // only accept addresses with more than 10 characters
        return value.length > 10;
      }
    }]
  });

...

Each additionalSignUpFields value is saved to the profile in the user_metadata attribute.

To display this data, read it from the profile's user_metadata:

// app.js

...

var showUserProfile = function(profile) {

  ...

  if (profile.hasOwnProperty('user_metadata')) {
    $('#address').text(profile.user_metadata.address);
  }
}

...
  <!-- index.html -->

  ...

  <strong>Address: </strong> <span id="address"></span>

  ...

Update User Profile

You can add an address attribute to the user profile's user_metadata by creating an AJAX call and a simple form. You will need to call the Update a User endpoint on form-submit.

To call the endpoint we need to add the Authorization header to requests.

First, use $.ajaxSetup() for setting Authorization header automatically for all the requests:

// app.js

...

$.ajaxSetup({
  'beforeSend': function(xhr) {
    if (localStorage.getItem('id_token')) {
      xhr.setRequestHeader('Authorization',
        'Bearer ' + localStorage.getItem('id_token'));
    }
  }
});

...

Then use $.ajax() with method = 'PATCH' to update the user's data.

// app.js

...

$('#btn-edit-submit').on('click', function(ev) {
  ev.preventDefault();
  var user_address = $('#edit_address').val();
  $.ajax({
    url: 'https://' + 'YOUR_AUTH0_DOMAIN' + '/api/v2/users/' + user_id,
    method: 'PATCH',
    data: { user_metadata: {address: user_address} }
  }).done(function(updated_profile) {
    localStorage.setItem('profile', JSON.stringify(updated_profile));
    showUserProfile(updated_profile);
  }).fail(function(jqXHR, textStatus) {
    alert("Request failed: " + textStatus);
  });
});

...

Then create a simple form to add/update the address attribute:

  <!-- index.html -->

  ...

  <div id="edit_profile" class="row" style="display: none;">
    <div class="col-md-6">
      <h3>Profile</h3>
      <img alt="" id="edit-avatar">
      <form>
        <div class="form-group">
          <label for="name">Address</label>
          <input type="text" class="form-control" id="edit_address" placeholder="Enter address">
        </div>
        <button type="submit" class="btn btn-default" id="btn-edit-submit">Submit</button>
      </form>
    </div>
  </div>

  ...
Previous Tutorial
4. Session Handling
Use Auth0 for FREECreate free Account