Securing ASP.NET Core MVC 6 App - Add a profile page - Part 2

In the next couple of minutes, we will add a profile page with basic information to our previous project.
If you missed the first part of the article, you can use the link below.

Securing ASP.NET Core MVC 6 App - add authentication to the application - Part 1

Emanuele Bartolesi ・ Jun 15 '22

Adding the scopes

By default, the email is not included in the information that Auth0 send back to the application after the authentication.
It's a common practice also from others authentication providers.
So, first of all, let's add the email in the scope.

In the Program.cs file, replace the Auth0 Authentication configuration with the following code:

builder.Services
    .AddAuth0WebAppAuthentication(options => {
        options.Domain = builder.Configuration["Auth0:Domain"];
        options.ClientId = builder.Configuration["Auth0:ClientId"];
        options.Scope = "openid profile email";
    });

The most important part of this code snippet is the Scope property.
Starting from now, in your profile you have the email as well.

Creating the profile model

In the Model folder (or the folder you use for the models), add a class called "UserProfile".
Create three properties (for the moment) with the information about the user profile.

public class UserProfile
{
    public string Avatar { get; set; }
    public string Email { get; set; }
    public string Name { get; set; }
}

Managing the profile information

Under the Views folder, create a new folder called "Account" and add an empty Razor view called "UserProfile".
You can paste the code below to your new razor view.

@model UserProfile

<section class="vh-100" style="background-color: #9de2ff;">
    <div class="container py-5 h-100">
        <div class="row d-flex justify-content-center align-items-center h-100">
            <div class="col col-md-9 col-lg-7 col-xl-5">
                <div class="card" style="border-radius: 15px;">
                    <div class="card-body p-4">
                        <div class="d-flex text-black">
                            <div class="flex-shrink-0">
                                <img src="@Model.Avatar"
                                     alt="" class="img-fluid"
                                     style="width: 180px; border-radius: 10px;">
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h5 class="mb-1">@Model.Name</h5>
                                <p class="mb-2 pb-1" style="color: #2b2a2a;">@Model.Email</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

And now in the AccountController.cs file you have to add the code below to retrieve the information from the Auth0 profile information and transfer the information to the Profile view.

[Authorize]
public IActionResult UserProfile()
{
    return View(new UserProfile()
    {
        Name = User.Identity.Name,
        Email = User.FindFirst(c => c.Type == ClaimTypes.Email)?.Value,
        Avatar = User.FindFirst(c => c.Type == "picture")?.Value
    });
}

And now, the last thing to do, adding a menu item in the navbar with a link to the profile page.

<li class="nav-item">
    <a class="nav-link text-dark" asp-area="" asp-controller="Account" asp-action="UserProfile">Profile</a>
</li>

You can paste this code snippet before the Logout link in the navbar.

Testing the profile page

Now we are ready to test our new profile page.
Launch the application by pressing F5 and click on "Login" link in the navbar.
After the login, click on the "Profile" link and the application should open the profile page with the following UI.

Conclusion

In this second part of the series, we have learned how to implement a basic profile page to the information about the user.
In the next parts we will learn how use the roles and other cool stuff related to Auth0 and ASP.NET MVC.

You can find the source code at this link.