DEV Community

Cover image for Making authentication with Okta.
Serhii Korol
Serhii Korol

Posted on

Making authentication with Okta.

In this article, I want to tell you how you can make authentication by using third-party service authentication such as Okta. Actually, it's super easy, and I'll show a detailed tutorial.

Preconditions

It would be fine if you create a new ASP.NET Core MVC project. Anything else no need from your side.

dotnet new mvc -n OktaAuthSample 
Enter fullscreen mode Exit fullscreen mode

Registration application

Before using Okta, you need to register an account if you don't have it, otherwise log in. For people who don't have an account go to this link https://developer.okta.com/signup/.
After you go by the link, you'll see different plans, you need a free plan.

plans

I prefer GitHub authentication, but you can choose a different way.

register

Further, you need to select Other, which means the individual using.

other

Next step, you'll be redirected to the main page where you need to create a new application.

You need to select the type of application. We created ASP.NET MVC project, which means we need to select Regular Web Applications.

projects

Here just select ASP.NET Core

asp

You'll be redirected to the Application page and you need to go to the Settings tab. You'll see the secret data of your application.

application

Implementation

Here we'll begin implementing the application and create login and logout endpoints and also an endpoint for checking authenticated users.
For the next work, you need to install this package:

nuget

Next, go to the appsettings.json file an paste this code, where you need replace to your ClientId and Domain values.

"Auth0": {
    "Domain": "*********************.auth0.com",
    "ClientId": "******************************"
  },
Enter fullscreen mode Exit fullscreen mode

And now go to the Program.cs and paste this code:

builder.Services.AddAuth0WebAppAuthentication(options =>
{
    options.Domain = builder.Configuration["Auth0:Domain"];
    options.ClientId = builder.Configuration["Auth0:ClientId"];
});
Enter fullscreen mode Exit fullscreen mode

And don't forget to add use authentication:

app.UseAuthentication();
Enter fullscreen mode Exit fullscreen mode

Further you need to create a new controller in the Controllers folder:

public class AccountController : Controller
{
    public async Task Login(string returnUrl = "/")
    {
        var authenticationProperties = new LoginAuthenticationPropertiesBuilder()
            .WithRedirectUri(returnUrl)
            .Build();

        await HttpContext.ChallengeAsync(Auth0Constants.AuthenticationScheme, authenticationProperties);
        var usr = User.Claims.FirstOrDefault(c => c.Type == "name");
    }

    [Authorize]
    public IActionResult Profile()
    {
        return View(new
        {
            Name = User.Identity.Name,
            EmailAddress = !string.IsNullOrEmpty(User.Claims.FirstOrDefault(c => c.Type == ClaimTypes.Email)
                ?.Value)
                ? User.Claims.FirstOrDefault(c => c.Type == ClaimTypes.Email)
                    ?.Value
                : User.Claims.FirstOrDefault(c => c.Type == "nickname")
                    ?.Value,
            ProfileImage = User.Claims.FirstOrDefault(c => c.Type == "picture")?.Value
        });
    }

    [Authorize]
    public async Task Logout()
    {
        var authenticationProperties = new LogoutAuthenticationPropertiesBuilder()
            .WithRedirectUri(Url.Action("Index", "Home"))
            .Build();

        await HttpContext.SignOutAsync(Auth0Constants.AuthenticationScheme, authenticationProperties);
        await HttpContext.SignOutAsync(CookieAuthenticationDefaults.AuthenticationScheme);
    }
}
Enter fullscreen mode Exit fullscreen mode

As you are able to see, we created one opened endpoint for login and two closed for enter to the profile and logout. The Profile action will highlight the error that the view doesn't exist. You need to go to the Views folder, create the Account folder, and create the Profile.cshtml file.

@{
    ViewData["Title"] = "Profile Page";
}

<div class="text-center">
    <h1 class="display-4">Welcome @Model.Name</h1>
    <img style="align-content: center" src="@Model.ProfileImage"/>
    <p style="text-align: center">@Model.EmailAddress</p>
</div>
Enter fullscreen mode Exit fullscreen mode

Actually, we do not need to write code anymore, but I don't want to use a REST client and I decided to implement a login layout. Go to the Views => Shared and create _LoginPatrial.cshtml file:

<ul class="navbar-nav">
    @if (User.Claims.FirstOrDefault(c => c.Type == "name") != null)
    {
        <li class="nav-item">
            <img style="width: 30px; height: 30px; margin-top: 5px" src="@User.Claims.FirstOrDefault(c => c.Type == "picture").Value"/>
        </li>
        <li class="nav-item">
            <a class="nav-link text-dark" asp-area="" asp-controller="Account" asp-action="Profile">Hello @User.Identity?.Name!</a>
        </li>
        <li class="nav-item">
            <form class="form-inline" asp-area="" asp-controller="Account" asp-action="Logout" asp-route-returnUrl="@Url.Action("Index", "Home", new { area = "" })">
                <button type="submit" class="nav-link btn btn-link text-dark">Logout</button>
            </form>
        </li>
    }
    else
    {
        <li class="nav-item">
            <a class="nav-link text-dark" asp-area="" asp-controller="Account" asp-action="Login">Login</a>
        </li>
    }
</ul>
Enter fullscreen mode Exit fullscreen mode

And don't forget update _Layout.cshtml:

<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                <ul class="navbar-nav flex-grow-1">
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                    </li>
                </ul>
                <partial name="_LoginPartial"/>
            </div>
Enter fullscreen mode Exit fullscreen mode

Running and settings

If everything is made correct, your application will run. However if you'll click to log in, you'll get an error like this:

error

It is caused by reason security protection. You need to set a callback that returns after successful authentication. However, there are some pitfalls. In the settings of your application, you should find the Application URIs block and Allowed Callback URLs area. You need to set a URL that ends with the callback key:

callback

For logout set base URL:

logout

As a bonus, if you decided to change Application Login URI and want to test it locally, you need the necessary set the real IP address of localhost, since Okta doesn't know anything about localhost and it is replaced automatically on your PC form 127.0.0.1 to localhost. For this reason, you need set IP.
And now let's check this out. Run the application and you'll see the start page:

start

Try to log in and you'll be redirected to the login page:

login

I entered with a Google account, you can choose different ways. If everything is OK, you'll see this:

logged

If you click by name you'll go to the profile page.

profile

And let's check out the logout, you'll be redirected to the main page and the profile won't be accessible.

redirected

If you'll try to get to the "Account/Profile" URI, you'll be suggested log in:

login

The source code you can find by link and sure make subscribes and thank you for reading. I hope it'll be useful for you. Happy coding and see you the next week.

Buy Me A Beer

Top comments (0)