How to implement user profile with token auth - angularjs

Question

I'm using out-of-the-box auth with Individual User Accounts that comes with the Visual Studio template for Web Api. I consume the api in an Angular.js front end.
What is the 'canonical' way of providing user profile to the front end?
Are getting the token and getting user profile (email, first and last name, roles) separate activities or should /Token provide the token and at least the roles and maybe first and last name so the UI can display it?
I'm looking for a general guidance about architecture/flow for apps using a token for auth as well as ASP.Net Web Api + Angular.js specific info.

Answer 1

For the record this is how I implemented it.
TL;DR
I decided to use claims, because 'GivenName', 'Surname' already exists which suggests that it's an OK place to store this info.
I found it very awkward to edit claims.
Details
Here's my Add/UpdateUser method. I hate the way claims are handled, but I couldn't find a better way.
[HttpPost]
[Authorize(Roles = "admin")]
public async Task<IHttpActionResult> Post(AccountModelDTO model)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
using (var transaction = Request.GetOwinContext().Get<ApplicationDbContext>().Database.BeginTransaction())
{
ApplicationUser user;
if( string.IsNullOrEmpty(model.Id) )
{//Add user
user = new ApplicationUser() { UserName = model.Email, Email = model.Email };
IdentityResult resultAdd = await UserManager.CreateAsync(user); //Note, that CreateAsync this sets user.Id
if (!resultAdd.Succeeded)
{
return GetErrorResult(resultAdd);
}
} else
{//Update user
user = await UserManager.FindByIdAsync(model.Id);
if( user == null )
{
throw new HttpResponseException(Request.CreateResponse(System.Net.HttpStatusCode.BadRequest, "Unknown id"));
}
user.UserName = model.Email;
user.Email = model.Email;
//Remove existing claims
var claims = user.Claims.Where(c=>c.ClaimType == ClaimTypes.GivenName).ToList();
foreach( var claim in claims)
{
await UserManager.RemoveClaimAsync(user.Id, new Claim(ClaimTypes.GivenName, claim.ClaimValue));
}
claims = user.Claims.Where(c => c.ClaimType == ClaimTypes.Surname).ToList();
foreach (var claim in claims)
{
await UserManager.RemoveClaimAsync(user.Id, new Claim(ClaimTypes.Surname, claim.ClaimValue));
}
claims = user.Claims.Where(c => c.ClaimType == ClaimTypes.Role).ToList();
foreach (var claim in claims)
{
await UserManager.RemoveClaimAsync(user.Id, new Claim(ClaimTypes.Role, claim.ClaimValue));
}
}
var result = await UserManager.AddClaimAsync(user.Id, new Claim(ClaimTypes.GivenName, model.FirstName));
if (!result.Succeeded)
{
return GetErrorResult(result);
}
await UserManager.AddClaimAsync(user.Id, new Claim(ClaimTypes.Surname, model.LastName));
if (!result.Succeeded)
{
return GetErrorResult(result);
}
foreach (var role in model.Roles)
{
result = await UserManager.AddClaimAsync(user.Id, new Claim(ClaimTypes.Role, role));
}
if (!result.Succeeded)
{
return GetErrorResult(result);
}
transaction.Commit();
return Ok();
}
}