Forem: Lee Brandt

A Quick Guide to Integrating React and GraphQL

Lee Brandt — Wed, 04 Dec 2019 05:00:00 +0000

If your application consumes a ReST API from React, the default setup will give you ALL the data for a resource. But if you want to specify what data you need, GraphQL can help! Specifying exactly the data you want can reduce the amount of data sent over the wire, and the React applications you write can have less code filtering out useless data from data you need.

There are a lot of GraphQL clients to choose from. Two of the most popular are Apollo and Relay, but both are powerful and might be too complex for a beginner. Luckily, each offers a preconfigured “light” option: Apollo Boost and Relay Modern.

For this article, you will use Apollo Boost to do GraphQL queries and mutations from a React frontend to a .NET Core backend. Emphasis here is on the frontend and the GraphQL setup, so you will start by simply cloning a functional backend from Github

git clone https://github.com/oktadeveloper/okta-dotnet-react-graphql-example.git

This backend uses EntityFramework Core and that powers an in-memory database with books and authors so you can keep a reading list. It is based on another Okta blog post, Build a GraphQL API with ASP.NET Core, so follow that post to understand more of what happens in the backend. One caveat: that backend is made with dotnet new webapi, while the close we use in this post is made with dotnet new react. This adds a starter React frontend application, and it also sets up hot reloading, which works straight out of the box when running it in Visual Studio or with the dotnet command.

Add Apollo Boost to the React Frontend

Open a terminal and go to the folder ClientApp, which contains the React frontend. Run these npm-commands:

npm install
npm install apollo-boost @apollo/react-hooks graphql

The first one downloads all packages already referenced, and then the second adds Apollo Boost, a library that supports using React Hooks to access GraphQL, and the main GraphQL itself.

React Hooks was released with React v16.8 early in 2019, and it enables using state and other features in React in simple function components. So, you don’t need to write a class!

Open Layout.js, which sets the main layout for the application, and update it to this:

import React, { Component } from 'react';
import { Container } from 'reactstrap';
import { NavMenu } from './NavMenu';
import { ApolloProvider } from '@apollo/react-hooks';
import ApolloClient from 'apollo-boost'

export class Layout extends Component {
  static displayName = Layout.name;

  render() {
    const clientParam = { uri: '/graphql' };
    const client = new ApolloClient(clientParam);

    return (
      <div>
        <NavMenu />
        <Container>
          <ApolloProvider client={client} >
            {this.props.children}
          </ApolloProvider>
        </Container>
      </div>
    );
  }
}

The tag <ApolloProvider client={client}> must surround all components that will use GraphQL queries. It also must be configured with an ApolloClient instantiated with a parameter telling the URL of the GraphQL endpoint in the backend.

Rewrite React Component to Use GraphQL

In the components folder, open the FetchData component and clear everything in it. You will use FetchData to do a simple query and mutation. Start by adding these imports at the top of the file:

import React, { useState, useCallback } from 'react';
import { useQuery, useMutation } from '@apollo/react-hooks';
import { gql } from 'apollo-boost';

The first line imports useState and useCallback, which are hooks that save state and implement event handlers. The second line imports useQuery and useMutation, which execute GraphQL queries and mutations. The last line imports gql, which converts plain text to GraphQL queries and mutations. Use it straight away to define your first query. Add these lines right below the import statements:

const query = gql`{
author(id:1){
    name,
    books {
      name
    }
  }
}`;

This is a GraphQL query for the author with an id of 1, and it asks for the name of the author, and a list of books with only the name of each book. Also, add this code:

export function FetchData() {
  const runningQuery = useQuery(query);
  let author = runningQuery.data && runningQuery.data.author;

 return runningQuery.error ? <div>Error in GraphQL query : <pre>{JSON.stringify(runningQuery.error, null, 2)}</pre></div> :
  !author ? <div>loading...</div> :
    <div>Data: {author.name}
      <ul>
        {author.books.map(book => <li>{book.name}</li>)}
      </ul>
    </div>;
}

Here, useQuery registers the query, using a hook. Once registered, the query starts the first time the component renders. When the query has finished, the component re-renders, and runningQuery will either have data in runningQuery.data or an error in runningQuery.error. So, if the query returns with a data field that exists and an author, the component will show the name of the author and a list of all the author’s books.

Now, you are ready to run the first version of the app. Press ctrl+F5 in Visual Studio, or run dotnet run in the main folder in the terminal. Select Fetch Data in the menu to load data from the backend. It should look something like this:

Now, add the ability to update the data.

Add a GraphQL Mutation to Your React Component

Updates are called mutations in GraphQL. Add the following code above the function FetchData() in the FetchData.js file:

const mutation = gql`
mutation ($name: String!, $id: ID!) {
  addBookToAuthor(name: $name, id: $id) {
    id
    name
    books {
      name
    }
  }
}`;

The addBookToAuthor() mutation adds a book (name) to an author (id). The expression has two variables, the$name of the author with a GraphQL type of String! and $id of type ID!. The values $name and $id will be passed to the mutation before it runs.

The mutation takes name and id as parameters and returns an author name and id inside the curly braces. Next, the mutation returns the id, name, and complete list of books for the author who was returned.

To actually run the mutation, update the function FetchData() to this:

export function FetchData() {
  const [myMutation] = useMutation(mutation);
  const runningQuery = useQuery(query);
  const [isSending, setIsSending] = useState(false);
  const [newBookName, setNewBookName] = useState('');
  const [authorFromMutation, setAuthorFromMutation] = useState(null);
  const sendRequest = useCallback(async (newBookName) => {
    if (isSending) return;
    setIsSending(true);
    let result = await myMutation({ variables: { name: newBookName, id: 1 } });
    setIsSending(false);
    setAuthorFromMutation(result.data.addBookToAuthor);
  }, [isSending]);
  let author = authorFromMutation || (runningQuery.data && runningQuery.data.author);

  return !author
    ? <div>loading...</div>
    : <div>Data: {author.name}
      <ul>
        {author.books.map(book => <li>{book.name}</li>)}
      </ul>
      Book name: <input type="text" value={newBookName} onChange={e => setNewBookName(e.target.value)} />
      <input type="button" disabled={isSending} onClick={() => sendRequest(newBookName)} value="Add Book" />
    </div>;
}

In the first line, useMutation(mutation) registers the mutation in much the same way useQuery(query) registers the query. These commands do not start the query or the mutation, they only set them up.

Next, to avoid starting multiple mutations at the same time, you need to store mutation state that includes whether it is running and what the user is writing in the text input field for book. The mutation also returns data, which you will store in the state, in authorFromMutation.

Next, the sendRequest function runs the mutation, and is triggered by the user clicking the button. The first two lines ensure that only one mutation runs at a time.

The code myMutation({ variables: { name: newBookName, id: 1 } }) executes the mutation with an author id of 1, and the book name entered by the user. The result is saved in the state with setAuthorFromMutation(), and the next line selects authorFromMutation, if it exists, and the result of the query if not.

The HTML code is pretty much the same, but adds a text input field for new book names and a button to trigger the update.

Now, run the application again and add a book. You can reload the page, and you should see that the new book is still there. Because the backend uses an in-memory database, the new books you add will be gone after you restart the backend. After you add a new book, the page should look something like this:

Add Authentication to Your React GraphQL Application

It is surprisingly easy to add authentication to both the backend and the frontend without writing it all yourself from scratch. You can integrate Okta to handle the authentication for you easily:

Sign up for a forever-free developer account (or login if you already have one). Once you have signed up and logged in, you’ll be taken to your dashboard. Make note of your Org URL in the top right corner. It looks something like this: Org URL: https://dev-######.okta.com.

In the backend project, edit the file Startup.cs and replace {yourOktaDomain} in the code below with the value from your Okta Developer Dashboard:

services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
  .AddJwtBearer(options =>
  {
      options.Authority = "/oauth2/default";
      options.Audience = "api://default";
  });

You must also register your application in the Okta dashboard. Select Applications at the top, and then click the green button, Add Application. Select Single-Page App and click Next.

Enter “GraphQL” for Name, and click Done. Then click Edit to go back to the form.

Examine what port number your application uses in the browser, and in Okta change both Login redirect URIs and the Initiate login URI to use your port number and to use https instead of http. Also, add a Logout redirect URIs pointing to the root of your site. Make sure to check Authorization Code. It should look something like this:

Click Save.

The last thing you need to do in the dashboard is adding a trusted origin. Select API in the top menu, and then Trusted Origins. Click Add Origin. Enter Localhost for Name, and the same base URL as your application for Origin URL. Check both CORS and Redirect. It should now be somewhat similar to this:

Click Save.

Now, add authentication to the front end. Okta has a library for React; install it by running this in a terminal in the ClientApp folder:

npm install @okta/okta-react

Next, go to App.js in the ClientApp/src, and add one more import:

import { Security, SecureRoute, ImplicitCallback } from '@okta/okta-react';

Also, surround the existing HTML with a <Security> -tag, change /fetch-data to a SecureRoute, and add a route for /implicit/callback, so you have this:

render() {
  return (
    <Security issuer='/oauth2/default'
      clientId='{yourClientId}'
      redirectUri={window.location.origin + '/implicit/callback'}
      pkce={true}>
      <Layout>
        <Route exact path='/' component={Home} />
        <Route path='/counter' component={Counter} />
        <SecureRoute path='/fetch-data' component={FetchData} />
        <Route path='/implicit/callback' component={ImplicitCallback} />
      </Layout>
    </Security>
  );
}

Remember to replace {yourOktaDomain} with your personal okta domain, which you can find in the Okta Dashboard, and replace {yourClientId} with the client id you can find in the applications listing.

If you run the application now, you should not be able to access the Fetch Data page without being logged in. If you are not logged in, you will be redirected to [Okta[(https://developer.okta.com) for authentication, and then back to the page.

Add API Authorization with Okta

One thing remains, to protect the API for unauthorized access. Add an [Authorize]-attribute above the Post()-method in GraphQLController in the backend. It should look like this:

[Authorize]
public async Task<IActionResult> Post([FromBody] GraphQLQuery query)

Now, when logged in, you can access the page, but the call will fail and you won’t get any data. (Watch your web browser’s developer console to see the error message.) To fix that, edit Layout.js to add this import:

import withAuth from '@okta/okta-react/dist/withAuth';

Also, add some lines between const clientParam = ... and const client = ...:

const clientParam = { uri: '/graphql' };
let myAuth = this.props && this.props.auth;
if (myAuth) {
  clientParam.request = async (operation) => {
    let token = await myAuth.getAccessToken();
    operation.setContext({ headers: { authorization: token ? `Bearer ${token}` : '' } });
  }
}
const client = new ApolloClient(clientParam);

If you are authenticated, this code will get an access token from Okta, and pass it to the backend, along with all requests sent with the Apollo Client.

To make sure this.props.auth is set, wrap this component with the withAuth()-function that comes with the Okta React authentication library. Add this line to the end of the Layout.js file:

export default Layout = withAuth(Layout);

Run, and enjoy your app with easy and secure GraphQL queries to a .NET Core backend!

Learn More about GraphQL, React, .NET and Okta

Here are some related blog posts to learn more about GraphQL, React, and Okta:

If you have any questions about this post, please add a comment below. For more awesome content, follow us on Twitter, like us on Facebook, or subscribe to our YouTube channel.

ASP.NET Core 3.0 MVC Secure Authentication

Lee Brandt — Fri, 15 Nov 2019 05:00:00 +0000

On September 23rd, Microsoft announced the third major release of its .NET Core framework. This new release boasts better performance, support for Windows Desktop apps, improved support for Docker containers, and more. Naturally, I was excited to see this new release and get authentication hooked into it with Okta! I put together this tutorial to demonstrate how to quickly and securely set up user management with Okta and OIDC (OpenID Connect) in an ASP.NET Core 3.0 application.

To follow along, you will need:

DotNet Core 3.0
I am using Visual Studio Code on Linux, but you should be able to follow along with Visual Studio 2019
A free forever Okta developer account

Scaffold an ASP.NET Core 3.0 MVC Application

To scaffold your new ASP.NET Core 3.0 MVC application, open a terminal window to where you want to store your source code and run:

dotnet new mvc -n AspNetCore3AuthExample

Then, change into the newly created directory and open up Visual Studio Code.

cd AspNetCore3AuthExample
code .

You should be asked to restore missing components (the .vscode folder) that will allow you to easily run the app with a quick press of F5. Click Yes, and the folder and files will be added for you. From there, you can run the application and see the base MVC application running.

Configure an Application in Okta

Once you’ve signed up for a free developer account on Okta, log in to your dashboard and click the Applications menu item, then click the Add Application button.

On the first screen, choose Web as the platform then click the Next button.

On the Application Settings screen, give your application a name (I chose “Sample ASP.NET Core 3 OIDC”) and update the Base URIs and Login redirect URIs values to use https and port 5001, then click Done.

Once complete, you will be redirected to the General tab of the application settings. Click Edit in the top right corner to update a few values.

First, change the Login redirect URIs value to https://localhost:5001/signin-oidc and update the Logout redirect URIs value tohttps://localhost:5001/signout-callback-oidc, then click Save. These values update the Okta settings to align with what the ASP.NET Core OIDC middleware expects.

When you first created an Okta account, it automatically set up an AS (Authorization Server) for you called default. Your next step is to add groups as a claim for authenticated users.

To view the settings for your default AS, hover over the API menu item at the top of the page and click on the Authorization Servers menu item in the dropdown. From the list of Authorization Servers, choose default to l, see the settings page for the default AS. From the settings page, select the Claims tab and click on the Add Claim button. In the Add Claim dialog add and select the values as shown:

This will add the groups claim to the ID Token when a user authenticates. Lastly, go to your application’s General Settings and make note of the Client ID and Client Secret values. You will be using those to configure your application.

Configure Your ASP.NET Core 3 MVC App for Authentication

In VS Code, open up the appsettings.Development.json file and add a new section below the Logging section so that your completed file looks like this:

{
  "Logging": {
    "LogLevel": {
      "Default": "Debug",
      "System": "Information",
      "Microsoft": "Information"
    }
  },
  "Okta": {
    "ClientId": "{yourClientId}",
    "ClientSecret": "{yourClientSecret",
    "Domain": "https://{yourOktaDoomain}",
    "PostLogoutRedirectUri": "https://localhost:5001/"
  }
}

CAUTION: It’s important that you never commit sensitive information to your repository. This becomes another attack vector for attackers. For production client IDs and secrets, consider using a Key Management Service (KMS) such as AWS Key Management Service or Azure Key Vault.

Before setting up the OpenID Connect middleware for ASP.NET Core 3, you’ll need to install the NuGet package for it:

dotnet add package Microsoft.AspNetCore.Authentication.OpenIdConnect --version 3.0.0

Then add a few using statements to bring in:

using Microsoft.AspNetCore.Authentication.Cookies;
using Microsoft.AspNetCore.Authentication.OpenIdConnect;
using Microsoft.IdentityModel.Protocols.OpenIdConnect;
using Microsoft.IdentityModel.Tokens;

TIP: You can always just cut and paste the code below and use the key-chord CTRL+. to have VS Code (and Visual Studio) add the using statements for you.

Use the Client ID and Client Secret values from the General Settings tab of your application in Okta. Your Okta Domain is listed in the top right corner of your Okta dashboard and looks something like https://dev-123456.okta.com.

Use these values to set up the OIDC configuration in startup.cs. In the ConfigureServices() method, before the services.AddControllerWithViews(); call, add the following code:

services.AddAuthentication(options =>
{
  options.DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme;
  options.DefaultChallengeScheme = OpenIdConnectDefaults.AuthenticationScheme;
})
.AddCookie()
.AddOpenIdConnect(options =>
{
  options.SignInScheme = CookieAuthenticationDefaults.AuthenticationScheme;
  options.Authority = Configuration["Okta:Domain"] + "/oauth2/default";
  options.RequireHttpsMetadata = true;
  options.ClientId = Configuration["Okta:ClientId"];
  options.ClientSecret = Configuration["Okta:ClientSecret"];
  options.ResponseType = OpenIdConnectResponseType.Code;
  options.GetClaimsFromUserInfoEndpoint = true;
  options.Scope.Add("openid");
  options.Scope.Add("profile");
  options.SaveTokens = true;
  options.TokenValidationParameters = new TokenValidationParameters
  {
    NameClaimType = "name",
    RoleClaimType = "groups",
    ValidateIssuer = true
  };
});

services.AddAuthorization();

While it may look like there’s a lot to unpack here, all you really did was add AddAuthentication(), AddCookie(), AddOpenIdConnect(), and AddAuthorization(). The rest of it is configuration options.

Starting from the top, you told ASP.NET’s authentication middleware to use cookies as the authorization scheme and to use OpenID Connect to authenticate. The AddCookie() method with no options passed to it simply lets the middleware know to use the default setup for cookies.

The AddOpenIdConnect() tells the middleware you want to use OpenID Connect and sets the OpenID Connection options. You told OpenID Connect you’ll be using “Cookies” as the authentication scheme and set values in the options pulled from the appSettings.Development.json file you just edited. You’ll notice I added oauth2/default to the Okta:Domain value - this is the path to your default authorization server.

The ResponseType options lets the middleware know to use the authorization code flow for authentication. Setting GetClaimsFromUserInfoEndpoint to true tells the middleware that it will need to make a call to the authorization server’s userinfo endpoint to populate the user claims.

The Scopes added here are the openid and profile scopes. This tells the middleware that you want all the claims contained in those two scopes. SaveTokens determines whether the access and refresh tokens should be stored in the ASP.NET authentication properties.

TokenValidationParameters set a few more options for the OIDC set up. The NameClaimType = "name" lets the middleware know the Name property for User will be in the name claim in the token. The same goes for the RoleClaimType.

Since you set the “groups” claim in Okta, you can map it to the roles list of the User object in your application. Finally, you told OpenID Connect to check that the issuer was valid by making sure it matches the Authority value from above.

AddAuthorization() turns on the authorization services for the ASP.NET middleware.

We have one last change to make in Startup.cs: add authentication to the Configure() method. Directly before app.UseAuthorization();, add:

app.UseAuthentication();

Your app is now configured and ready to use OAuth2 and OpenID Connect for authentication and authorization!

Add Authentication to Your ASP.NET Core 3 MVC App

Now that your app is configured to use Okta as the OpenID Connect Identity Provider, you can add the necessary plumbing to the app to actually utilize OpenID Connect for authentication.

Add a controller called AccountController.cs with the following content:

using Microsoft.AspNetCore.Authentication.Cookies;
using Microsoft.AspNetCore.Authentication.OpenIdConnect;
using Microsoft.AspNetCore.Mvc;

namespace DockerPipelineExample.Controllers
{
  public class AccountController : Controller
  {
    public IActionResult Login()
    {
      if(!HttpContext.User.Identity.IsAuthenticated)
      {
        return Challenge(OpenIdConnectDefaults.AuthenticationScheme);
      }
      return RedirectToAction("Index", "Home");
    }

    public IActionResult Logout()
    {
      return new SignOutResult(new[]
      {
        OpenIdConnectDefaults.AuthenticationScheme,
        CookieAuthenticationDefaults.AuthenticationScheme
      });
    }
  }
}

The two actions here simply kick off an OpenID Connect challenge on Login() and get the SignOutResult() in the Logout() action. You’ve already seen the AuthenticationScheme string literals in the configuration.

Now you need to add the user interface elements to kick off login and logout. In the /Views/Shared folder, add a file called _LoginPartial.cshtml and add the following code to it.

@if (User.Identity.IsAuthenticated)
{
  <ul class="navbar-nav">
    <li>
      <span class="navbar-text">Hello, @User.Identity.Name</span>  
      <a onclick="document.getElementById('logout_form').submit();" style="cursor: pointer;">Log out</a>
    </li>
  </ul>
  <form asp-controller="Account" asp-action="Logout" method="post" id="logout_form"></form>
}
else
{
  <ul class="navbar-nav">
    <li><a asp-controller="Account" asp-action="Login">Log in</a></li>
  </ul>
}

This will give you a little “chunk” of UI that you can inject into your main page layout. So in the _Layout.cshtml file, add the login partial right before the close of the div with a navbar-collapse class, like:

<div class="navbar-collapse collapse justify-content-between">
  <ul class="navbar-nav mr-auto">
    <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>

You’ll also notice I replaced the d-sm-inline-flex flex-sm-row-reverse classes on the main div with justify-content-between. This pushes the login partial to the right of the main menu bar while keeping the menu items on the left and justifying the content between them.

Now you can fire up the app and log in with your username and password you use for signing in to Okta!

Add Authorization to your ASP.NET Core 3 MVC App

Because you mapped the authenticated user’s roles from the groups claim you set up in Okta, adding authorization becomes drop-dead simple. Add a new action to your HomeController.cs file:

[Authorize(Roles="Everyone")]
public IActionResult Everyone()
{
  return View();
}

Make sure to add the using statement for the Authorize decorator.

using Microsoft.AspNetCore.Authorization;

Add a view to the /Views/Home folder called Everyone.cshtml with one simple text line:

This page is for people in the "Everyone" group.

Make sure to add a menu item. I just copied the existing privacy link in _Layout.cshtml and changed the values like this:

<li class="nav-item">
    <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Everyone">Everyone</a>
</li>

You can check this isn’t a false positive by changing the Roles value passed into the Authorize decorator to something else. I always use Roles="Dancers" because I know I’m not in that group.

Then when you log in and try to go to the Everyone page, you should be redirected to an /Account/AccessDenied page. To handle this more gracefully, you can add an action handler to the AccountController and a view to display a more user-friendly message.

If you want the final code for this post, you can get it on GitHub.

Learn More About OpenID Connect and ASP.NET

If you want to learn more about OAuth2, OpenID Connect, or ASP.NET in general, check out these other great pieces of content!

As always, feel free to hit us up in the comments below. Also, don’t forget to follow us on Twitter and check out our YouTube Channel!

Build a CRUD App with ASP.NET Core 2.2 and SQL Server

Lee Brandt — Wed, 24 Apr 2019 05:00:00 +0000

I’ve always said that you can tell a lot about a person by the kind of music they listen to. Don’t tell me you haven’t had serious doubts about whether you can be friends with someone when you find out that they like a particular band or artist. In that spirit, I created JudgeMyTaste, an ASP.NET Core web application where people can enter their favorite band or artist so that people on the Internet can judge them openly.

The combination of ASP.NET and SQL Server is probably the most common pairing in the enterprises that use ASP.NET. With ASP.NET Core and SQL Server both being cross-platform, you don’t have to run this combination on Windows anymore! I’ll show you how to create a basic CRUD application using ASP.NET Core 2.2 and SQL Server 2016. I’ll be running on Linux, but with the free tools used here, it won’t matter what operating system you’re using!

The tools I’ll be using that are available for all platforms are:

SQL Server 2016 (I’ll be running on Ubuntu 18.04)
Visual Studio Code
Azure Data Studio
ASP.NET Core 2.2

Once you’ve got all the tools installed for your platform, let’s rock and roll!

Scaffold Your ASP.NET Core 2.2 Application

No matter the platform you’re on, the dotnet CLI is available. The commands used here should be the same for everyone. To scaffold the ASP.NET Core 2.2 MVC application, create a new folder for it:

mkdir JudgeMyTaste

Change into that new directory:

cd JudgeMyTaste

Then run the following command:

dotnet new mvc

Then open the new application in VS Code.

code .

When you open the new application in VS Code, you should get a warning in the bottom right corner, asking to add some missing assets. Go ahead and add the missing assets. You’ll see the .vscode folder added with a launch.json and a tasks.json file.

These will allow you to run the application from VS Code. To verify that everything scaffolded properly, run the base application by typing F5. This will build the application, run it, and open it in a new browser window.

You may notice a strange error page come up if you’ve never run an ASP.NET Core 2.x application before. By default, ASP.NET Core wants to run on HTTPS. This is a recommended practice for web applications. You could avoid this message by removing the redirect to HTTPS in your Startup.cs or by generating a certificate for your local machine, but this error screen only comes up once in a great while, so I just sidestep it by clicking on Advanced and telling the browser that it’s okay to visit this site even though there is no certificate for it.

For your daily work, it will probably behoove you to create a local certificate for development so that you never have to see this message again.

Create Your SQL Server Database

Open Azure Data Studio and connect to your localhost server with the SA password you created when installing SQL Server on your machine. You’ll notice it is arranged very much like VS Code. In the Connections Explorer, you will see localhost as a connection. Right-click on the connection and choose New Query, which will open a new query window on the right side. Start typing the word CREATE, and an intellisense drop down will open, and one of the choices will be sqlCreateDatabase. Choose that option, and a query will be scaffolded with the database name highlighted in the three places that it occurs in the query. You can just start typing the database name “JudgeMyTaste,” and it will be replaced in all three places so that the final query looks like this.

-- Create a new database called 'JudgeMyTaste'
-- Connect to the 'master' database to run this snippet
USE master
GO
-- Create the new database if it does not exist already
IF NOT EXISTS (
  SELECT [name]
    FROM sys.databases
    WHERE [name] = N'JudgeMyTaste'
)
CREATE DATABASE JudgeMyTaste
GO

Now you can just click the green Run arrow at the top of the window to create the database. Simple, no?

Now when you expand the Databases folder in the Connection Explorer, you will see the JudgeMyTaste database in the list. Right-click on the new database and choose New Query again. Start typing CREATE again, and this time choose sqlCreateTable from the options presented. Again, you can start typing the table name FavoriteBands, and it will be filled in all the places it occurs in the query.

You’ll also need to add some other columns to the table. Add the columns for Id, Name, EnteredBy, and EnteredOn so that the query looks like this:

-- Create a new table called '[FavoriteBands]' in schema '[dbo]'
-- Drop the table if it already exists
IF OBJECT_ID('[dbo].[FavoriteBands]', 'U') IS NOT NULL
DROP TABLE [dbo].[FavoriteBands]
GO
-- Create the table in the specified schema
CREATE TABLE [dbo].[FavoriteBands](
  [Id] [int] IDENTITY(1,1) NOT NULL,
  [Name] [varchar](255) NULL,
  [EnteredBy] [varchar](255) NULL,
  [EnteredOn] [date] NULL
);
GO

Then run the query by clicking the green Run arrow as before.

It’s good practice to create a user specifically for your application to connect with the database. One that only has the permissions that it will need to interact with your database. Here’s a script to create a login and a user for the database and assign that user dbo permissions to the database.

USE master

GO

CREATE LOGIN webapp WITH PASSWORD=N'P@ssw0rd!', DEFAULT_DATABASE=JudgeMyTaste

GO

ALTER LOGIN webapp ENABLE

GO

USE JudgeMyTaste

GO

CREATE USER webapp FOR LOGIN webapp
EXEC sp_addrolemember 'db_owner', 'webapp'

GO

It might seem like a lot going on here, but it simply creates a login for SQL Server, makes that login a user for the JudgeMyTaste database, and add it to the db_owner role for the database. This will allow that login to do all the CRUD operations that the application will need. Now your database is ready to be used by your application!

Connect SQL Server to Your ASP.NET Core 2.2 MVC Application

Before anything else, you’ll need the Entity Framework Core NuGet package. To install it, run the following command in the terminal.

dotnet add package Microsoft.EntityFrameworkCore.SqlServer --version 2.2.4

Start by adding the connection string to your appsettings.json file in the root of your MVC project, so that it looks like this:

{
  "Logging": {
    "LogLevel": {
      "Default": "Warning"
    }
  },
  "AllowedHosts": "*",
  "ConnectionStrings": {
    "JudgeMyTasteDatabase": "Server=.;Database=JudgeMyTaste;user id=webapp;password=P@ssw0rd!"
  }
}

In the Models folder, create a class file called FavoriteBand.cs.

using System;
using System.ComponentModel.DataAnnotations;

namespace JudgeMyTaste.Models
{
  public class FavoriteBand
  {
    public int Id { get; set; }
    public string Name { get; set; }
    public string EnteredBy { get; set; }
    public DateTime EnteredOn { get; set; }
  }
}

This class will be used to work with the FavoriteBand entries.

In the root of the project, create a folder called Data to house the database context for the application. Create a C# file called JudgeMyTasteContext.cs with the following contents:

using JudgeMyTaste.Models;
using Microsoft.EntityFrameworkCore;

namespace JudgeMyTaste.Data
{
  public class JudgeMyTasteContext : DbContext
  {
    public JudgeMyTasteContext(DbContextOptions<JudgeMyTasteContext> options) : base(options)
    {
    }

    public DbSet<FavoriteBand> FavoriteBands { get; set; }
  }
}

In your Startup.cs file, in the ConfigureServices() method, right before the services.AddMvc()... line, add the newly created context with the connection string.

services.AddDbContext<JudgeMyTasteContext>(options => options.UseSqlServer(Configuration.GetConnectionString("JudgeMyTasteDatabase")));

Now your database is all hooked into your application. All you need to do is create some way for the user to enter their favorite bands. To get some more scaffolding goodness for the CLI, install the Code Generation tool.

dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design

Now you can scaffold a controller to handle all the CRUD operations for the FavoriteBand class by running the following command from the terminal.

dotnet aspnet-codegenerator controller -name FavoriteBandsController -async -m JudgeMyTaste.Models.FavoriteBand -dc JudgeMyTaste.Data.JudgeMyTasteContext -namespace Controllers -outDir Controllers -udl

This is a long one, but if you break it down into its component pieces, it’s easier to understand.

The first part just calls the dotnet CLI’s new aspnet-codegenerator command for a controller. You want the controller’s name to be “FavoriteBandsController” and for the controller actions to all be -async. The model being used to generate the controller is the JudgeMyTaste.Models.FavoriteBand class and the database context will be the JudgeMyTaste.Data.JudgeMyTasteContext class you just created. The namespace and output directory for the controller will be Controllers, and the -udl switch tells the generator to use the default layout for the views it will generate (yeah, it’s going to generate views for everything too!). Pretty cool, right?

Once you run the command, you should see the controller and all its views show up. The only thing left is to create a link so that users can get to the favorite band's section of the site easily.

In the Views/Shared folder open the Layout.cshtml file and add a link to the menu to get to the new section of the site.

<li class="nav-item">
  <a class="nav-link text-dark" asp-area="" asp-controller="FavoriteBands" asp-action="Index">Favorite Bands</a>
</li>

Now when you run the application, you can click on the Favorite Bands menu item and see a list of all the favorite bands that have been entered. Of course, there aren’t any right now, so add one using the Create New link at the top of the page and see it show up in the listing.

Now it’s a little cumbersome to add the EnteredOn value manually, and the code generator you used can’t know that you can just add that field to the entry as it’s being saved, so change the Create() method of the FavoriteBandController to add it automatically.

// POST: FavoriteBands/Create
// To protect from overposting attacks, please enable the specific properties you want to bind to, for
// more details see http://go.microsoft.com/fwlink/?LinkId=317598.
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create([Bind("Id,Name,EnteredBy")] FavoriteBand favoriteBand)
{
  if (ModelState.IsValid)
  {
    favoriteBand.EnteredOn = DateTime.Now;
    _context.Add(favoriteBand);
    await _context.SaveChangesAsync();
    return RedirectToAction(nameof(Index));
  }
  return View(favoriteBand);
}

The only thing that have changed is that I removed the EnteredOn field from the Bind statement in the method signature, and I added the value DateTime.Now as the value right before saving it to the database.

Add Authentication to Your ASP.NET Core 2.2 MVC + SQL Server Application

What you have now is okay, but there’s currently no way to keep users from editing other user’s entries. We want to make sure to judge people for their favorite band that they actually entered, right?

No reason to write this yourself. You can easily integrate Okta to handle the authentication for you and easily:

Authenticate and authorize your users
Store data about your users
Perform password-based and social login
Secure your application with multi-factor authentication
And much more! Check out our product documentation

Once you have signed up and logged in, you’ll be taken to your dashboard. Make note of your Org URL in the top right corner.

Click on the Applications menu item at the top, click Add Application, and from the first page of the wizard choose Web and click Next.

On the next screen, change the application name to “Judge My Taste App” and update the Base URIs value and the Login Redirect URIs to reflect the correct port and the fact that you’re running on the HTTPS scheme.

Then click Done, and you’re taken to the application page. On the General Settings tab, click Edit and add a URL to the Logout Redirect URIs with a value of https://localhost:5001/signout/callback. This is where Okta will redirect back to after the logout call. This is handled by the ASP.NET OIDC Middleware.

Configure Your ASP.NET Core 2.2 MVC Application for Authentication

Now you need to tell your application how to use Okta for authentication. The easiest way is to use the ASP.NET SDK from Okta. You can install it from NuGet using the following command:

dotnet add package Okta.AspNetCore --version 1.1.5

Add some configuration values to your appsettings.json file to that the final file looks like this:

{
  "Logging": {
    "LogLevel": {
      "Default": "Warning"
    }
  },
  "AllowedHosts": "*",
  "ConnectionStrings": {
    "JudgeMyTasteDatabase": "Server=.;Database=JudgeMyTaste;user id=webapp;password=P@ssw0rd!"
  },
  "Okta": {
    "ClientId": "{yourClientId}",
    "ClientSecret": "{yourClientSecret}",
    "OktaDomain": "https://{yourOktaDomain}",
    "PostLogoutRedirectUri": "https://localhost:5001/"
  }
}

This PostLogoutRedirectUri is the URL that the middleware will redirect to once Okta has redirected back to the signout/callback URL. You can use any valid URL in the MVC application. Here, I am just redirecting to the root of the application.

Back in the Startup.cs file, add the following using statements:

using Okta.AspNetCore;
using Microsoft.AspNetCore.Authentication.Cookies;

Then at the very beginning of the ConfigureServices() method add:

var oktaMvcOptions = new OktaMvcOptions();
Configuration.GetSection("Okta").Bind(oktaMvcOptions);
oktaMvcOptions.Scope = new List<string> { "openid", "profile", "email" };
oktaMvcOptions.GetClaimsFromUserInfoEndpoint = true;

services.AddAuthentication(options =>
{
  options.DefaultAuthenticateScheme = CookieAuthenticationDefaults.AuthenticationScheme;
  options.DefaultSignInScheme = CookieAuthenticationDefaults.AuthenticationScheme;
  options.DefaultChallengeScheme = OktaDefaults.MvcAuthenticationScheme;
})
.AddCookie()
.AddOktaMvc(oktaMvcOptions);

This is a pretty dense chunk of code, but most of it is boilerplate for the OIDC middleware that the Okta SDK is built on. The first part just binds all of those configuration values you just added in appsettings.json to the oktaMvcOptions. It also adds the scopes you want to receive (which are the OpenID information, the user’s profile, and the user’s email address). It also tells the middleware that it can get the claims from the user info endpoint, which all OIDC identity providers have.

When the code adds authentication, it tells the OIDC provider to use cookies for storing tokens and that you’ll be sending users to Okta from an MVC application.

To actually wire up authentication, you need to tell the Configure() method to use this service you just configured. Right before the app.UseMvc(...) line, add:

app.UseAuthentication();

Okta is now configured in your application! You still need to set up your application to challenge the user (send them to Okta to authenticate).

Create a new controller in the Controllers folder called AccountController with the following code:

using Microsoft.AspNetCore.Authentication.Cookies;
using Microsoft.AspNetCore.Mvc;
using Okta.AspNetCore;

namespace JudgeMyTaste.Controllers
{
  public class AccountController : Controller
  {
    public IActionResult Login()
    {
      if (!HttpContext.User.Identity.IsAuthenticated)
      {
        return Challenge(OktaDefaults.MvcAuthenticationScheme);
      }
      return RedirectToAction("Index", "Home");
    }

    public IActionResult Logout()
    {
      return new SignOutResult(new[]
      {
        OktaDefaults.MvcAuthenticationScheme,
        CookieAuthenticationDefaults.AuthenticationScheme
      });
    }
  }
}

This will give you a Login() and Logout() method to wire up some menu items. Speaking of which, add a new view in Views/Shared called _LoginPartial.cshtml. This will house all the code for the login menu items.

@if (User.Identity.IsAuthenticated)
{
  <ul class="navbar-nav ml-auto">
    <li>
      <span class="navbar-text">Hello, @User.Identity.Name</span>  
      <a onclick="document.getElementById('logout_form').submit();" style="cursor: pointer;">Log out</a>
    </li>
  </ul>
  <form asp-controller="Account" asp-action="Logout" method="post" id="logout_form"></form>
}
else
{
  <ul class="navbar-nav">
    <li><a asp-controller="Account" asp-action="Login">Log in</a></li>
  </ul>
}

Change the main menu in Views/Shared/_Layout.cshtml to add this in and move the main menu to the left and have the login menu on the far right. The final div that houses the menu should look like this:

<div class="navbar-collapse collapse justify-content-between">
  <ul class="navbar-nav mr-auto">
    <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>
    <li class="nav-item">
      <a class="nav-link text-dark" asp-area="" asp-controller="FavoriteBands" asp-action="Index">Favorite Bands</a>
    </li>
  </ul>
  <partial name="_LoginPartial" />
</div>

The class list for the navbar-collapse has changed to add the justify-content-between class that will keep the menus apart. The ul’s class also changed to mr-auto, which will help keep it left. Lastly, the login partial is added at the end of the menu.

Don’t just sit there, fire this thing up, and judge me for liking Nickleback!

Now you have a complete CRUD slice built in an ASP.NET Core 2.2 MVC application saving data to a SQL Server database! Now you can take the same path to add things like favorite movie, favorite food, and favorite beverage so that you can easily and completely judge people for their taste online!!!

Learn More About ASP.NET Core 2.2 and SQL Server

If you liked this post, you’ll really like some of the other content here on the Okta Developer Blog!

As always, feel free to comment below, and don’t forget to follow us on Twitter and watch us on YouTube!

Build and Understand Express Middleware through Examples

Lee Brandt — Thu, 13 Sep 2018 05:00:00 +0000

If you’ve done any significant Node development in the past seven or eight years, you’ve probably used Express to build a web server at some point. While you can create a server in Node without using a library, it doesn’t give you a lot out of the box and can be quite cumbersome to add functionality. Express is a minimalist, “unopinionated” server library and has become the defacto standard for building web apps in Node. To understand Express, you need to understand Express Middleware.

What is Express Middleware?

Middleware literally means anything you put in the middle of one layer of the software and another. Express middleware are functions that execute during the lifecycle of a request to the Express server. Each middleware has access to the HTTP request and response for each route (or path) it’s attached to. In fact, Express itself is compromised wholly of middleware functions. Additionally, middleware can either terminate the HTTP request or pass it on to another middleware function using next (more on that soon!) This “chaining” of middleware allows you to compartmentalize your code and create reusable middleware.

In this article I’ll explain what middleware is, why you would use it, how to use existing Express middleware, and how to write your own middleware for Express.

Requirements to Write Express Middleware

There are a few things you will need installed to create, use, and test Express middleware. First, you will need Node and NPM. To ensure you have them installed, you can run:

npm -v && node -v

You should see the Node and NPM versions you have installed. If you get an error, you need to install Node. I’m using the latest version of both as of the time of this article, which is Node 10.9.0 and NPM 6.4.1, but all the examples should work with Node versions 8+ and NPM versions 5+.

I will also be using Express version 4.x. This is important because major changes were made from version 3.x to 4.x.

It will also be helpful to have Postman installed to test routes using any HTTP verbs other than GET.

Express Middleware: The Basics

To get started, you’ll use the most basic of Express’ built-in middleware. This will give you the chance to see how middleware is used, and how Express middleware is structured.

Create a new project and npm init it…

npm init
npm install express --save

Create server.js and paste the following code:

const express = require('express');
const app = express();

app.get('/', (req, res, next) => {
  res.send('Welcome Home');
});

app.listen(3000);

Run the server via node server.js, access http://localhost:3000, and you should see “Welcome Home” printed in your browser.

The app.get() function is actually built-in Express middleware. You’ll notice the parameters passed to the method are req, res, and next. These are the incoming request, the response being written and a method to call once the middleware is finished. In this case, once the response is sent, the function exits so there is no need to call the next() method. You could also chain other middleware here by calling the next() method.

Let’s take a look at a few more examples of the different types of middleware.

Express Request Logging Middleware Example

In Express, you can set up middleware to be “global” middleware; meaning it will be called for every incoming request.

Change the contents of server.js to:

const express = require('express');
const app = express();

app.use((req, res, next) => {
  console.log(req);
  next();
});

app.get('/', (req, res, next) => {
  res.send('Welcome Home');
});

app.listen(3000);

This time, when you go to http://localhost:3000 you should see the same thing in your browser window, but back in the console window you will see the output of the incoming request object.

The middleware logs out the request object and then calls next(). The next middleware in the pipeline handles the get request to the root URL and sends back the text response. Using app.use() means that this is global middleware and will be called for every call.

Restrict Express Request Content Type Example

In addition to running middleware for all calls, you could also specify to only run middleware for specific calls.

Change the server.js file again to:

const express = require('express');
const app = express();

const requireJsonContent = () => {
  return (req, res, next) => {
    if (req.headers['content-type'] !== 'application/json') {
        res.status(400).send('Server requires application/json')
    } else {
      next()
    }
  }
}

app.get('/', (req, res, next) => {
  res.send('Welcome Home');
});

app.post('/', requireJsonContent(), () => {
  res.send('You sent JSON');
})

app.listen(3000);

This time, start the server by running:

node server.js

To test this, open up Postman and create a post request to http://localhost:3000. Don’t set any headers and run the request. You will get back the “Server requires application/json” message.

Now go back and add the Content-Type header with a value of application/json and run the request again. You will get the “You sent JSON” message back from the server.

This app.post() method call adds the requireJsonContent() middleware function to ensure the incoming request payload has a Content-Type header value set to application/json. If it doesn’t pass the check, an error response is sent. If it does, the request is then handed off to the next piece of middleware in the chain via the next() method.

Third-Party Express Middleware

You’ve built a couple of custom middlewares to far, but there are lots of packages already built to do the things you might normally want to do. In fact, you’ve used the simple routing middleware library by using the app.get() or app.post() middleware functions. There are thousands of middleware libraries for doing things like parsing incoming data, routing, and authorization.

Okta has an Express middleware for OIDC security that I’ll show you to demonstrate using third-party middleware libraries.

Why Okta for Express Applications

At Okta, our goal is to make identity management a lot easier, more secure, and more scalable than what you’re used to. Okta is a cloud service that allows developers to create, edit, and securely store user accounts and user account data, and connect them with one or multiple applications. Our API enables you to:

Authenticate and authorize your users
Store data about your users
Perform password-based and social login
Secure your application with multi-factor authentication
And much more! Check out our product documentation

Okta’s OIDC Express Middleware

To install Okta’s OIDC middleware for Express, run:

npm install @okta/oidc-middleware --save

Then in the server.js file, you create an instance if the middleware with some configuration options so that Okta knows how to connect to your Okta application.

const oidc = new ExpressOIDC({
  issuer: 'https://{yourOktaDomain}/oauth2/default',
  client_id: '{yourClientId}',
  client_secret: '{yourClientSecret}',
  redirect_uri: 'http://localhost:3000/authorization-code/callback',
  scope: 'openid profile'
});

You’ll also need to tell Express to use the OIDC middleware router instead of the default router.

app.use(oidc.router);

Then you use it like any other middleware:

app.get('/protected', oidc.ensureAuthenticated(), (req, res) => {
  res.send('Top Secret');
});

The oidc.ensureAuthenticated() function is a middleware in the Okta library. It runs a function to see if the current user is logged in. If they are, it calls next() to let the app.get() function continue handling the request. If they aren’t it will send back an HTTP 401 (Unauthorized) response.

Middleware Order is Important

When a request is received by Express, each middleware that matches the request is run in the order it is initialized until there is a terminating action (like a response being sent).

So if an error occurs, all middleware that is meant to handle errors will be called in order until one of them calls a terminating event like res.send() or res.end().

Learn More About Express Middleware

For detailed instructions on setting up the Okta OIDC middleware, you can follow the ExpressJS Quickstart.

There is also a list of officially supported Express middleware in this GitHub repo you can try out and dig into to learn more

Finally, if you’re interested in learning more about how to use Okta, there’s an Okta Node SDK for implementing more user management functionality in your application.

As always, I’d love to hear your thoughts and questions in the comments or on twitter @oktadev!

Build a SPA with ASP.NET Core 2.1, Stripe, and Angular 6

Lee Brandt — Wed, 08 Aug 2018 05:00:00 +0000

Buying things on the Internet has become a daily activity and is a feature many new projects require. In this tutorial, I will show you how to build an app to sell tickets using an Angular 6 single page app (SPA) using an ASP.NET Core 2.1 backend API. You’ll build both the Angular and ASP.NET Core applications and run them from within VS Code. Let’s get to it!

Upgrade to Angular 6

I love to use the latest and greatest when starting a new project. But when you use a project generator (like Angular-CLI, or the DotNetCLI), you may be at the mercy of the latest version the authors of those libraries have added. Right now, the DotNet CLI generates an Angular application with dotnet new angular gives you an Angular app at about version 4.5, which is about two versions behind the latest. Let me show you how to upgrade the templates and the generated application so that you’re using Angular 6, which is the latest as of the time of this article.

Upgrade the Angular App Template

Update the DotNet command line tools with:

dotnet new --install Microsoft.DotNet.Web.Spa.ProjectTemplates::2.1.0

Then run:

dotnet new --install Microsoft.AspNetCore.SpaTemplates::2.1.0-preview1-final

Generate the ASP.NET Angular App

Now you can scaffold a new project:

dotnet new angular -o ticket-sales-example

Upgrade the Angular App To 6

The closest that gets you is Angular v5.2.0. To update Angular to v6.0.9 (as of this writing) switch to the ClientApp directory and run:

ng update --all

This will update the package.json file; then you need to run:

npm install

If you get a message about @angular/cli you can update it by running:

ng update @angular/cli

You may now see some vulnerabilities in your NPM packages. To fix them run:

npm audit fix

You may have to run this several times as some of the fixes introduce new vulnerabilities. I was only able to get my vulnerability list down to 6. I still have one low and five moderate vulnerabilities. If you want to get to zero vulnerabilities, you would have to hunt them each down and fix them manually.

Create a Stripe Account

One of the easiest ways to take payments on the web is to use Stripe. You can create a free developer account on Stripe’s registration page.

Once you’ve registered, make sure that you go to your dashboard and on the left-hand menu, click the toggle to ensure you are viewing test data. Then click on the Developers menu item and then click API Keys. Copy down the Publishable key to use in your Angular app.

Add Stripe to Your Angular 6 App

In your index.html file, add a script tag for Stripe’s JavaScript library, right below the app-root component.

<script type="text/javascript" src="https://js.stripe.com/v2/" />

Also add your publishable key to the Stripe object:

<script type="text/javascript">
  Stripe.setPublishableKey('{yourPublishableKey}');
</script>

Make sure that your publishable key starts with pk_test_. If it doesn’t, you’re using the production key, and you don’t want to do that yet.

Create the Stripe Ticket Registration Page

You can easily scaffold the base registration component with the Angular CLI. Go to a command line and change directories into the src/app directory. Then run the command:

ng generate component registration

The shorthand for the CLI is:

ng g c registration

The generate command will generate a folder called registration, and inside that a registration.compomnent.css, registration.component.html, a registration.component.spec.ts, and a registration.component.ts file. These are all the basic files for an Angular 6 component. I won’t be covering testing in this tutorial, so you can ignore or delete the registration.component.spec.ts file.

First, add some basic HTML to your registration.component.html file for displaying tickets. So the final file contents looks like this:

<h1>Register for SuperDuperConf</h1>

<div class="ticket conf-only">
  <span class="title">Conference Only Pass</span>
  <span class="price">$295</span>
  <button (click)="selectTicket('Conference Only', 295)">Register Now!</button>
</div>

<div class="ticket full">
  <span class="title">Full Conference + Workshop Pass</span>
  <span class="price">$395</span>
  <span class="value">Best Value!</span>
  <button (click)="selectTicket('Full Conference + Workshop', 395)">Register Now!</button>
</div>

<div class="ticket work-only">
  <span class="title">Workshop Only Pass</span>
  <span class="price">$195</span>
  <button (click)="selectTicket('Workshop Only', 195)">Register Now!</button>
</div>

<div class="alert alert-success" *ngIf="model.successMessage">{{successMessage}}</div>
<div class="alert alert-danger" *ngIf="model.errorMessage">{{errorMessage}}</div>

<div *ngIf="model.ticket.price">

  <form (submit)="purchaseTicket()" class="needs-validation" novalidate #regForm="ngForm">
    <div class="form-group">
      <label for="firstName">First Name:</label>
      <input type="text" class="form-control" name="firstName" id="firstName" [(ngModel)]="model.firstName" required #firstName="ngModel">
      <div [hidden]="firstName.valid || firstName.pristine" class="text-danger">First Name is required.</div>
    </div>

    <div class="form-group">
      <label for="lastName">Last Name:</label>
      <input type="text" class="form-control" name="lastName" id="lastName" [(ngModel)]="model.lastName" required #lastName="ngModel">
      <div [hidden]="lastName.valid || lastName.pristine" class="text-danger">Last Name is required.</div>
    </div>

    <div class="form-group">
      <label for="email">Email Address:</label>
      <input type="text" class="form-control" name="email" id="email" [(ngModel)]="model.emailAddress" required #email="ngModel">
      <div [hidden]="email.valid || email.pristine" class="text-danger">Email Address is required.</div>
    </div>

    <div class="form-group">
      <label for="password">Password:</label>
      <input type="password" class="form-control" name="password" id="password" [(ngModel)]="model.password" required #password="ngModel">
      <div [hidden]="password.valid || password.pristine" class="text-danger">Password is required.</div>
    </div>

    <div class="form-group">
      <label for="cardNumber">Card Number:</label>
      <input type="text" class="form-control" name="cardNumber" id="cardNumber" [(ngModel)]="model.card.number" required>
    </div>

    <div class="form-group form-inline">
      <label for="expiry">Expiry:</label>
      <br/>
      <input type="text" class="form-control mb-1 mr-sm-1" name="expiryMonth" id="expiryMonth" [(ngModel)]="model.card.exp_month"
        required> /
      <input type="text" class="form-control" name="expiryYear" id="expiryYear" [(ngModel)]="model.card.exp_year" required>
    </div>

    <div class="form-group">
      <label for="cvc">Security Code:</label>
      <input type="text" class="form-control" name="cvc" id="cvc" [(ngModel)]="model.card.cvc" required>
    </div>
    <button type="submit" class="btn btn-success" [disabled]="!regForm.form.valid">Pay ${{model.ticket.price / 100}}</button>
  </form>
</div>

I know it seems like a lot, but there is a lot of repetition here. The first section lists three tickets that a user can buy to register for the “SuperDuperConf”. The second section is just a form that collects the information needed to register an attendee for the conference.

The important thing to take note of here is the [(ngModel)]="model.some.thing" lines of code. That weird sequence of characters around ngModel is just parentheses inside of square brackets. The parentheses tell Angular that there is an action associated with this field. You see this a lot for click event handlers. It usually looks something like (click)="someEventHandler()". It is the same, in that the ngModel is the handler of the event when the model changes.

The square brackets are used for updating the DOM when something on the model changes. It is usually seen in something like disabling a button as you did above with [disabled]="!regForm.form.valid". It watches the value on the form, and when it is not valid, the button is disabled. Once the form values become valid, the disabled property is removed from the DOM element.

Now that you have all the fields on the page, you will want to style that ticket section up a bit so that it looks like tickets.

.ticket {
  text-align: center;
  display: inline-block;
  width: 31%;
  border-radius: 1rem;
  color: #fff;
  padding: 1rem;
  margin: 1rem;
}

.ticket.conf-only,
.ticket.work-only {
  background-color: #333;
}

.ticket.full {
  background-color: #060;
}

.ticket span {
  display: block;
}

.ticket .title {
  font-size: 2rem;
}

.ticket .price {
  font-size: 2.5rem;
}

.ticket .value {
  font-style: italic;
}

.ticket button {
  border-radius: 0.5rem;
  text-align: center;
  font-weight: bold;
  color: #333;
  margin: 1rem;
}

These are just three basic ticket types I regularly see for conference registrations.

Now the meat of the registration page, the TypeScript component. You will need a few things to make the page work. You will need a model to store the values that the user enters, a way for the user to select a ticket, and a way for the user to pay for the ticket they have selected.

import { Component, ChangeDetectorRef, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-registration',
  templateUrl: './registration.component.html',
  styleUrls: ['./registration.component.css']
})
export class RegistrationComponent {
  public model: any;
  public card: any;

  public errorMessage: string;
  public successMessage: string;

  constructor(
    private http: HttpClient,
    private changeDetector: ChangeDetectorRef,
    @Inject('BASE_URL') private baseUrl: string
  ) {
    this.resetModel();
    this.successMessage = this.errorMessage = null;
  }

  resetModel(): any {
    this.model = {
      firstName: '',
      lastName: '',
      emailAddress: '',
      password: '',
      token: '',
      ticket: { ticketType: '', price: 0 }
    };
    this.card = { number: '', exp_month: '', exp_year: '', cvc: '' };
  }

  selectTicket(ticketType: string, price: number) {
    this.model.ticket = { ticketType, price: price * 100 };
  }

  purchaseTicket() {
    (<any>window).Stripe.card.createToken(
      this.card,
      (status: number, response: any) => {
        if (status === 200) {
          this.model.token = response.id;
          this.http
            .post(this.baseUrl + 'api/registration', this.model)
            .subscribe(
              result => {
                this.resetModel();
                this.successMessage = 'Thank you for purchasing a ticket!';
                console.log(this.successMessage);
                this.changeDetector.detectChanges();
              },
              error => {
                this.errorMessage = 'There was a problem registering you.';
                console.error(error);
              }
            );
        } else {
          this.errorMessage = 'There was a problem purchasing the ticket.';
          console.error(response.error.message);
        }
      }
    );
  }
}

Even if you’re familiar with Angular, some of this may look foreign. For instance, the BASE_URL value that is getting injected into the component. It comes from the main.ts file that the Angular CLI generated. If you look at that file, right below the imports, there is a function called getBaseUrl() and below that is a providers section that provides the value from the getBaseUrl() function, which is just a simple way to inject constant values into components.

The other thing that might look strange is the purchaseTicket() function. If you’ve never used Stripe before, the createToken() method creates a single-use token that you can pass to your server to use in your server-side calls, that way you don’t have to send credit card information to your server, and you can let Stripe handle the security of taking online payments!

Add the ASP.NET Registration Controller

Now that your Angular app can get a token from Stripe, you’ll want to send that token and the user’s information to the server to charge their card for the ticket. Create a controller in the Controllers folder in the server-side application root. The contents of the file should be:

using System;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Okta.Sdk;
using Stripe;
using ticket_sales_example.Models;

namespace ticket_sales_example.Controllers
{
  [Produces("application/json")]
  [Route("api/[controller]")]
  public class RegistrationController : ControllerBase
  {
    [HttpPost]
    public async Task<ActionResult<Registration>> CreateAsync([FromBody] Registration registration)
    {
      ChargeCard(registration);
      var oktaUser = await RegisterUserAsync(registration);
      registration.UserId = oktaUser.Id;
      return Ok(registration);
    }

    private async Task<User> RegisterUserAsync(Registration registration)
    {
      var client = new OktaClient();
      var user = await client.Users.CreateUserAsync(
        new CreateUserWithPasswordOptions
        {
          Profile = new UserProfile
          {
            FirstName = registration.FirstName,
            LastName = registration.LastName,
            Email = registration.EmailAddress,
            Login = registration.EmailAddress,
          },
          Password = registration.Password,
          Activate = true
        }
      );

      var groupName = "";
      if (registration.Ticket.TicketType == "Full Conference + Workshop")
      {
        groupName = "FullAttendees";
      }
      if (registration.Ticket.TicketType == "Conference Only")
      {
        groupName = "ConferenceOnlyAttendees";
      }
      if (registration.Ticket.TicketType == "Workshop Only")
      {
        groupName = "WorkshopOnlyAttendees";
      }

      var group = await client.Groups.FirstOrDefault(g => g.Profile.Name == groupName);
      if (group != null && user != null)
      {
        await client.Groups.AddUserToGroupAsync(group.Id, user.Id);
      }

      return user as User;
    }

    private StripeCharge ChargeCard(Registration registration)
    {
      StripeConfiguration.SetApiKey("sk_test_uukFqjqsYGxoHaRTOS6R7nFI");

      var options = new StripeChargeCreateOptions
      {
        Amount = registration.Ticket.Price,
        Currency = "usd",
        Description = registration.Ticket.TicketType,
        SourceTokenOrExistingSourceId = registration.Token,
        StatementDescriptor = "SuperDuperConf Ticket"
      };

      var service = new StripeChargeService();
      return service.Create(options);
    }
  }
}

It seems like there is a bit here, but there is only the HttpPost method CreateAsync() that is the API endpoint for a POST to /api/registration. The other methods are helpers to the endpoint.

The ChargeCard() method does just as the name implies, it charges the user’s credit card using the token that the Angular app got from Stripe and sent to the API. Even though I am setting the Stripe API key with a simple string here for demonstration purposes, you might want to store the key in an environment variable, in a configuration file that doesn’t get checked into source control, or in a key management service like Azure’s Key Vault. This will mitigate the chances that you will accidentally check the test key into your source control and have that end up being deployed to production!

The RegisterUserAsync() method handles registering a user with Okta and putting them into a group that corresponds to the ticket that the user is purchasing. This is done in two steps: by creating the user, then finding the group that corresponds with the ticket purchased, and adding that group’s ID to the newly created Okta user.

Set Up Okta for Your Angular and ASP.NET Core Applications

Dealing with user authentication in web apps is a massive pain for every developer. This is where Okta shines: it helps you secure your web applications with minimal effort.

Why Okta?

Authenticate and authorize your users
Store data about your users
Perform password-based and social login
Secure your application with multi-factor authentication
And much more! Check out our product documentation

Create an Okta Application

To get started, you’ll need to create an OpenID Connect application in Okta. Sign up for a forever-free developer account (or log in if you already have one).

Once you’ve logged in and landed on the dashboard page, copy down the Org URL pictured below. You will need this later.

Then create a new application by browsing to the Applications tab and clicking Add Application , and from the first page of the wizard choose Single-Page App.

On the settings page, enter the following values:

Name: TicketSalesApp
Base URIs: http://localhost:5000
Login redirect URIs: http://localhost:5000/implicit/callback

You can leave the other values unchanged, and click Done.

Now that your application has been created copy down the Client ID and Client secret values on the following page, you’ll need them soon.

Finally, create a new authentication token. This will allow your app to talk to Okta to retrieve user information, among other things. To do this, click the API tab at the top of the page followed by the Create Token button. Give your token a name, in this case, “Crud API” would be a good name, then click Create Token. Copy down this token value as you will need it soon.

Even though you have a method for registering users, you’ll need to create the groups for the tickets, set up your API to use Okta, and configure it to receive access tokens from users of the Angular app for authorization.

Start by creating a group for each of the three tickets you’ll be selling. From the Okta dashboard hover over the Users menu item until the drop-down appears and choose Groups. From the Groups page, click the Add Group button.

In the Add Group modal that pops up, add a group for each ticket type.

Now, you’ll need to add these newly created groups to the ticket sales application. Click on the Applications menu item, and choose the TicketSalesApp from the list of apps. It should open on the Assignments tab. Click on the Assign button and choose Assign to Groups from the button’s drop-down menu. From here, assign each group you just created to the Ticket Sales app.

Add Groups to the ID Token

Now you just need to add these groups to the token.

Hover over the API menu item and select Authorization Servers.
Select the default authorization server (it was created for you when you created your Okta account).
Choose the Claims tab, and click Add Claim.
The name of the claim will be “groups”,Select ID Token and Always from the Include in token type setting.
Choose Groups from the Value Type setting, and Regex from the Filter setting.
In the text box type .*.
Finally, make sure the Disable claim checkbox is unchecked and that the Any scope radio button is selected in the Include in setting.

Add Okta to Your Angular Application

To set up your Angular application to use Okta for authentication, you’ll need to install the Angular SDK and the rxjs compatibility package.

npm install @okta/okta-angular rxjs-compat@6 --save

Add the components to your app.module.ts file in src/app by first importing them:

import {
  OktaCallbackComponent,
  OktaAuthModule,
  OktaAuthGuard
} from '@okta/okta-angular';

Now add a configuration variable right below the import statements:

const config = {
  issuer: 'https://{yourOktaDomain}/oauth2/default',
  redirectUri: 'http://localhost:5000/implicit/callback',
  clientId: '{yourClientId}'
};

Add the callback route to the routes in the imports section of the @NgModule declaration:

{ path: 'implicit/callback', component: OktaCallbackComponent }

That’s all for now in the Angular application. Now let’s get the ASP.NET Core app set up.

Add Okta to Your ASP.NET Core API

Now you need to let the API know two things: how to get the user’s identity from an access token (when one is sent) and how to call Okta for user management.

Start by adding the Okta Nuget package:

dotnet add package Okta.Sdk

For the ASP.NET Core application, the best thing to do is set up a file in your home folder to store the configuration. Okta’s SDK will pick the settings up for you, and you’ll never accidentally check them into source control!

In your home directory, create a .okta folder and add a file called okta.yaml. Your home folder will depend on your operating system. For *nix variants like Linux or macOS it is:

~/.okta/okta.yaml

for Windows environments it is:

%userprofile%\.okta\okta.yaml

YAML is just a file format for configuration. The okta.yaml file looks like:

okta:
  client:
    orgUrl: "https://dev-846291.oktapreview.com/"
    token: "{yourApiToken}"

In the ConfigureServices() method before the services.AddMvc() line, add:

services.AddAuthentication(sharedOptions =>
{
  sharedOptions.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
  sharedOptions.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
})
.AddJwtBearer(options =>
{
  options.Authority = "https://{yourOktaDomain}/oauth2/default";
  options.Audience = "api://default";
});

And in the Configure() method before the app.UseMvc() line add:

app.UseAuthentication();

That’s it! Now your ASP.NET Core app will take that bearer token, get the user’s information from Okta add them to the User object so you can get the currently requesting user’s data. It will also use the API token stored in the okta.yaml file when registering users.

Show the Tickets in Your Angular App

Now that users can purchase a ticket, you’ll want them to be able to log in and see their purchased ticket. To do this, generate a profile component using Angular’s CLI. From the src/app folder of the client app, run:

ng g c profile

Again, this is just shorthand for ng generate component profile, which will generate all the base files for the profile component. The profile.component.ts file should have the following contents:

import { Component, OnInit } from '@angular/core';
import { OktaAuthService } from '@okta/okta-angular';
import 'rxjs/Rx';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css']
})
export class ProfileComponent implements OnInit {
  user: any;
  ticket: string;

  constructor(private oktaAuth: OktaAuthService) {}

  async ngOnInit() {
    this.user = await this.oktaAuth.getUser();
    if (this.user.groups.includes('FullAttendees')) {
      this.ticket = 'Full Conference + Workshop';
    } else if (this.user.groups.includes('ConferenceOnlyAttendees')) {
      this.ticket = 'Conference Only';
    } else if (this.user.groups.includes('WorkshopOnlyAttendees')) {
      this.ticket = 'Workshop Only';
    } else {
      this.ticket = 'None';
    }
  }
}

This does two things: it gets the currently logged in user and translates the group name into a displayable string representation of the ticket type purchased. The profile.component.html file is straightforward:

<h1>{{user.name}}</h1>

<p>
  Your Puchased Ticket: {{ticket}}
</p>

The last thing to do is to add a protected route to the profile page in the app.module.ts. I added mine right above the callback route:

{
  path: 'profile',
  component: ProfileComponent,
  canActivate: [OktaAuthGuard]
},

You can now sell tickets, and the users can log in and see which ticket they have once they’ve purchased one. You’re ready to hold your event!

Learn More about ASP.NET

Check out our other Angular and .NET posts on the Okta developer blog:

Ibrahim creates a CRUD app with an ASP.NET Framework 4.x API in his post
Build a basic CRUD app using Angular and ASP.NET Core
If you would like to use React instead of Angular for your CRUD app, I’ve got you covered
Get nitty-gritty on token authentication in ASP.NET Core
Get your project out into the world by deploying it to Azure, the right way

As always, if you have any comments or questions, feel free to leave a comment below. Don’t forget to follow us on Twitter @oktadev and on Facebook!

Build a Secure CRUD App with ASP.NET Core and React

Lee Brandt — Mon, 02 Jul 2018 05:00:00 +0000

These days it’s prevalent to have a “back-end” and a “front-end” allowing two (or more) teams to work on a project. Microsoft’s latest version of the ASP.NET Core framework is cross-platform and performant. Pairing it with the power and flexibility of Facebook’s React framework makes it a pretty stable platform. In this tutorial, I will show you how to build a secure CRUD (Create, Read, Update, and Delete) application using these two powerful technologies.

When conferences need speakers, they sometimes put out a public speaker “Call for Presentations” or CFP. Potential speakers then submit talks that they’d like to give at the conference, and the organizers pick from those submissions which talks they’d like to have presented at their conference.

The application you’ll be building is a speaker submission page. It will allow users to register for an account, log in and submit potential conference sessions. They will also need to be able to log in later and update their submissions or, if they then are unable to present that talk, delete the submission.

The architecture for the application will be a React front-end application fed data from an ASP.NET Core Web API. For demonstration purposes, you’ll use Entity Framework’s in-memory database option. It is an excellent option for proof-of-concept applications. You can change it to use a SQL Server or PostgreSQL database later by just changing one line of configuration code!

What You’ll Need to Get Started

There are a few tools you will need to get, develop and run the application.

A Git command line
The .NET Framework 2+
Node and NPM
Visual Studio or VS Code

I am developing the application on a Linux laptop. Most of the commands will be the same whether you are on Linux, macOS, or Windows. The only thing that will be different is the home folder where your Okta credentials are stored for the ASP.NET Core API, and I will put both paths in the examples.

Get the Base ASP.NET Core and React Application

To get the basic scaffolding for the app in place, start by cloning the basic React and ASP.NET Core application.

git clone git@github.com:oktadeveloper/dotnetcore-react-crud-example

Then create a new branch we’ll use to turn the shell into a fully CRUD application.

git checkout -b crud-app

Set Up Your Okta Application

Dealing with user authentication in web apps is a massive pain for every developer. This is where Okta shines: it helps you secure your web applications with minimal effort. To get started, you’ll need to create an OpenID Connect application in Okta. Sign up for a forever-free developer account (or log in if you already have one).

Once you’ve logged in and landed on the dashboard page, copy down the Org URL pictured below. You will need this later.

Then create a new application by browsing to the Applications tab and clicking Add Application.

From the wizard, choose the Single-Page App option for the React app.

On the settings page, enter the following values:

Name: ReactCrud
Base URIs: http://localhost:5000
Login redirect URIs: http://localhost:5000/implicit/callback

You can leave the other values unchanged.

Now that your application has been created, copy down the Client ID and Client secret values on the following page, you’ll need them soon.

Finally, create a new authentication token. This will allow your app to talk to Okta to retrieve user information, among other things. To do this, click the API tab at the top of the page followed by the Create Token button. Give your token a name, in this case “Crud API” would be a good name, then click Create Token. Copy down this token value as you will need it soon.

Once you’ve created your new Okta application, you’ll want to store the configuration information in your React and ASP.NET Core applications.

For the React application, create a file in the /ClientApp folder called app.config.js. This will export a simple JSON object with the configuration information for your React application.

export default {
  url: 'https://{yourOktaDomain}',
  issuer: 'https://{yourOktaDomain}/oauth2/default',
  redirect_uri: window.location.origin + '/implicit/callback',
  client_id: '{yourClientID}'
}

In your home directory, create an .okta folder and add a file called okta.yaml. Your home folder will depend on your operating system. For *nix variants like Linux or macOS it is:

~/.okta/okta.yaml

for Windows environments it is:

%userprofile%\.okta\okta.yaml

YAML, is just a file format for configuration. The okta.yaml file looks like:

okta:
  client:
    orgUrl: "https://{yourOktaDomain}/"
    token: "{yourApiToken}"

Now you’re ready to get the dependencies set up!

Install Your React Dependencies

To take full advantage of Okta for identity management, you’ll need Okta’s React SDK and the generic JavaScript package it depends on. To install, from the command line run:

npm install @okta/okta-react@1.0.2 --save

Now you’re ready to write some code!

Add Registration to the React Application

Start by adding a folder for the authentication components you’ll be creating. In the /ClientApp/components folder, create a folder called auth, and create a RegisterPage.js file inside it. The page will be a component that is wrapped by the withAuth higher-order component. To learn more about higher-order components, read the docs on React’s website.

The final RegisterPage.js component will look like this:

import React from 'react'; 
import { Redirect} from 'react-router-dom';
import OktaAuth from '@okta/okta-auth-js';
import { withAuth } from '@okta/okta-react';

import config from '../../app.config';

export default withAuth(class RegisterPage extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      firstName: '',
      lastName: '',
      email: '',
      password: '',
      sessionToken: null,
      registered: false
    };
    this.oktaAuth = new OktaAuth({ url: config.url });
    this.checkAuthentication = this.checkAuthentication.bind(this);
    this.checkAuthentication();

    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleFirstNameChange = this.handleFirstNameChange.bind(this);
    this.handleLastNameChange = this.handleLastNameChange.bind(this);
    this.handleEmailChange = this.handleEmailChange.bind(this);
    this.handlePasswordChange = this.handlePasswordChange.bind(this);    
  }

  async checkAuthentication() {
    const sessionToken = await this.props.auth.getIdToken();
    if (sessionToken) {
      this.setState({ sessionToken });
    }
  }

  componentDidUpdate() {
    this.checkAuthentication();
  }

  handleFirstNameChange(e){
    this.setState({firstName:e.target.value});
  }
  handleLastNameChange(e) {
    this.setState({ lastName: e.target.value });
  }
  handleEmailChange(e) {
    this.setState({ email: e.target.value });
  }
  handlePasswordChange(e) {
    this.setState({ password: e.target.value });
  }

  handleSubmit(e){
    e.preventDefault();
    fetch('/api/users', { 
      method: 'POST', 
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(this.state)
    }).then(user => {
      this.setState({ registered: true });
    })
    .catch(err => console.log);
  }

  render(){
    if (this.state.sessionToken) {
      this.props.auth.redirect({ sessionToken: this.state.sessionToken });
      return null;
    }

    if(this.state.registered === true){
      return <Redirect to="/login"/>
    }

    return(
      <form onSubmit={this.handleSubmit} className="registration">
        <div className="form-element">
          <label>Email:</label>
          <input type="email" id="email" value={this.state.email} 
          onChange={this.handleEmailChange}/>
        </div>
        <div className="form-element">
          <label>First Name:</label>
          <input type="text" id="firstName" value={this.state.firstName} 
          onChange={this.handleFirstNameChange} />
        </div>
        <div className="form-element">
          <label>Last Name:</label>
          <input type="text" id="lastName" value={this.state.lastName} 
          onChange={this.handleLastNameChange} />
        </div>
        <div className="form-element">
          <label>Password:</label>
          <input type="password" id="password" value={this.state.password} 
          onChange={this.handlePasswordChange} />
        </div>
        <div className="form-actions">
          <input type="submit" id="submit" className="btn btn-primary" value="Register"/>
        </div>
      </form>
    );
  }

});

I know this looks like a lot, but most of it is pretty simple. Let’s break it down into categories: state, handlers, and Okta stuff.

Handle User State in the React Application

The state declared in the constructor, has six properties. The firstName, lastName, email, and password are the required fields for registering an account in Okta.. The sessionToken property is there to use when checking to see if the user has mistakenly come to the page when they are already logged in. It’s checked using the checkAuthentication() method that runs from the constructor. The render() method checks the value of the sessionToken, and if a session token exists, redirects the user is redirected to the homepage.

There are many handler functions in the component: one for each property the user will edit in the form, and one for handling the submission of the registration form. The handlers for each field on the form are simple. They update the state when the fields’ values are changed by the user. The form submission handler does exactly what you’d expect; it submits the information in the form to a URL so that the API can handle creating the user in Okta.

The withAuth higher-order component wraps the RegisterPage component and adds an auth object to the props which can do things like getIdToken() for the currently logged in user. Any component that needs to get the current user or information about them will need to be wrapped by the withAuth higher-order component.

Add Registration to the ASP.NET Core API

For user registration to work, you’ll need to add that endpoint you’re calling in the registration page. This endpoint will call to Okta and add a user using the Okta .NET SDK.

In the Controllers folder add a controller called UserController.cs. Then you’ll add a POST action to the controller to handle getting the user’s registration information and creating the user in Okta.

using Microsoft.AspNetCore.Mvc;
using Okta.Sdk;
using Okta.Sdk.Configuration;
using okta_dotnetcore_react_example.Models;

namespace okta_dotnetcore_react_example.Controllers
{
  [Route("api/[controller]")]
  public class UsersController : Controller
  {
    [HttpPost]
    public async void Post([FromBody]Registration reg)
    {

      var oktaClient = new OktaClient();
      var user = await oktaClient.Users.CreateUserAsync(
          new CreateUserWithPasswordOptions
          {
            Profile = new UserProfile
            {
              FirstName = reg.FirstName,
              LastName = reg.LastName,
              Email = reg.Email,
              Login = reg.Email
            },
            Password = reg.Password,
            Activate = true
          }
      );
    }
  }
}

You’ll also need the Registration.cs file in the Models folder.

namespace okta_dotnetcore_react_example.Models
{
    public class Registration
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Email { get; set; }
        public string Password { get; set; }
    }
}

Nothing complicated here, just a set of properties for holding registration information.

Add Authentication to the React Application

Now you’ll need to add the ability for users to authenticate with their newly minted account. To do this, add a file to the /ClientApp/auth folder called LoginPage.js.

The login page willbe wrapped in the withAuth component, but will also need the OktaAuth component from the generic JavaScript library.

import React from 'react';
import OktaAuth from '@okta/okta-auth-js';
import { withAuth } from '@okta/okta-react';

export default withAuth(class LoginPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      sessionToken: null,
      error: null,
      username: '',
      password: ''
    }

    this.oktaAuth = new OktaAuth({ url: props.baseUrl });

    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleUsernameChange = this.handleUsernameChange.bind(this);
    this.handlePasswordChange = this.handlePasswordChange.bind(this);
  }

  handleSubmit(e) {
    e.preventDefault();
    this.oktaAuth.signIn({
      username: this.state.username,
      password: this.state.password
    })
      .then(res => this.setState({
        sessionToken: res.sessionToken
      }))
      .catch(err => {
        this.setState({error: err.message});
        console.log(err.statusCode + ' error', err)
      });
  }

  handleUsernameChange(e) {
    this.setState({ username: e.target.value });
  }

  handlePasswordChange(e) {
    this.setState({ password: e.target.value });
  }

  render() {
    if (this.state.sessionToken) {
      this.props.auth.redirect({ sessionToken: this.state.sessionToken });
      return null;
    }

    const errorMessage = this.state.error ? 
    <span className="error-message">{this.state.error}</span> : 
    null;

    return (
      <form onSubmit={this.handleSubmit} className="login">
        {errorMessage}
        <div className="form-element">
          <label>Username:</label>
          <input
            id="username" type="text"
            value={this.state.username}
            onChange={this.handleUsernameChange} />
        </div>

        <div className="form-element">
          <label>Password:</label>
          <input
            id="password" type="password"
            value={this.state.password}
            onChange={this.handlePasswordChange} />
        </div>
        <div className="form-actions">
        <input id="submit" type="submit" value="Submit" />
        </div>
      </form>
    );
  }
});

Now that you’ve built the registration page component, this one should be easier to understand. The state has the sessionToken again, this time for checking after the user is logged in. The username and password properties are used for the form, and the error property allows you to store authentication error messages to display to users.

The handlers are very similar to those in the registration component in that they update the form values in the state as the user updates them and the handleSubmit() function once again handles the action from the form’s submit button.

There is a little more Okta functionality here as well. In the constructor, there is a new OktaAuth object created with a base URL (from props), and the form submission handler uses it. When the form is submitted, the OktaAuth object’s signIn() method is called with the username and password that the user has entered and a response with a session token is returned via a promise. In the then of the promise, the method adds the session token to the session state. The Okta SDK will handle storing the token for you, which you will set up next.

Add a Profile Page to the React Application

Once the user is logged in, you’ll need somewhere for them to view the list of their submissions, so create a new file in the /ClientApp/components/auth folder called ProfilePage.js.

Again, you’ll need to wrap the component in the withAuth component to get that auth object passed in the props.

import React from 'react';
import { Link } from 'react-router-dom';
import { withAuth } from '@okta/okta-react';

export default withAuth(class ProfilePage extends React.Component {
  constructor(props){
    super(props);
    this.state = { 
      user: null
    };
    this.getCurrentUser = this.getCurrentUser.bind(this);
  }

  async getCurrentUser(){
    this.props.auth.getUser()
      .then(user => this.setState({user}));
  }

  componentDidMount(){
    this.getCurrentUser();
  }

  render() {
    if(!this.state.user) return null;
    return (
      <section className="user-profile">
        <h1>{this.state.user.name}'s Submitted Sessions</h1>
      </section>
    )
  }
});

Simple, right? Just a user object in the state that you can use in the component courtesy of the higher-order component withAuth! The componentDidMount lifecycle method retrieves the user, and the render() method merely checks for it before rendering the page. This allows the component to render while it is waiting for this asynchronous call to come back and update when the user object is there.

Add Routes for the Login and Registration Pages

here are a few things to add in the /ClientApp/boot.js file. First, you’ll need to import a few things from the Okta React SDK, so add this import statement:

import { Security, SecureRoute, ImplicitCallback } from '@okta/okta-react';

I’ll explain these in a moment when you add them to the render() method, but for now, you’ll also need to import the components you just created.

import config from './app.config';
import RegisterPage from './components/auth/RegisterPage';
import ProfilePage from './components/auth/ProfilePage';
import LoginPage from './components/auth/LoginPage';

Then update the render() method like this:

render(
  <BrowserRouter>
    <Security issuer={config.issuer}
      client_id={config.client_id}
      redirect_uri={config.redirect_uri}
      onAuthRequired={onAuthRequired}>
      <Layout>
        <Route exact path="/" component={HomePage} />
        <Route path="/contact" component={ContactPage} />
        <Route path="/about" component={AboutPage} />
        <Route path="/notes" component={NotesPage} />
        <Route path="/login" render={() => <LoginPage baseUrl={config.url} />} />
        <Route path="/implicit/callback" component={ImplicitCallback} />
        <Route path="/register" component={RegisterPage} />
        <SecureRoute path="/profile" component={ProfilePage} />
      </Layout>
    </Security>
  </BrowserRouter>,
  document.getElementById('app')
);

There are a couple of things of note here. First, the Security component. It takes in all your information about your Okta application and wraps all the Route components so that they can do things like signIn() and have that information available. It also has an onAuthRequired property that will be handled by a method you’ll add above the render() method:

const onAuthRequired = ({ history }) => history.push('/login');

This method redirects the user to the login page when authentication is required (like for the SecureRoute routes). The SecureRoute simply fires that onAuthRequired() handler.

The login route looks a little funny. There’s no component property to let React know what component will be handling that route. However, the render property allows you to specify a “quick component”, if you will, with just a render method. This render method outputs the LoginPage component, but it passes a baseUrl property to the props in the component.

Lastly, the route for /implicit/callback is handled by the ImplicitCallback component from Okta’s React SDK. Remember setting that up when you configured your application in Okta? This handles getting the authentication responses back from Okta and storing the user’s tokens.

Add Navigation to Your React Application

In the /ClientApp/components/common/Navigation.js file, you’ll need to add navigation links to all these new routes. You’ll want to import that withAuth component again, wrap the component in the withAuth higher-order component, and add the methods you’ll need to change the menu items based on whether or not the user is currently logged in.

import React from 'react';
import { Link } from 'react-router-dom';
import { withAuth } from '@okta/okta-react';

export default withAuth(class Navigation extends React.Component {
  constructor(props) {
    super(props);
    this.state = { authenticated: null };
    this.checkAuthentication = this.checkAuthentication.bind(this);
    this.logout = this.logout.bind(this);
    this.checkAuthentication();
  }

  async checkAuthentication() {
    const authenticated = await this.props.auth.isAuthenticated();
    if (authenticated !== this.state.authenticated) {
      this.setState({ authenticated });
    }
  }

  componentDidUpdate() {
    this.checkAuthentication();
  }

  logout(){
    this.props.auth.logout('/');
  }

  render() {
    if (this.state.authenticated === null) return null;
    const authNav = this.state.authenticated ?
      <ul className="nav navbar-nav navbar-right">
        <li><a href="javascript:void(0)" onClick={this.logout}>Logout</a></li>
        <li><Link to="/profile">Profile</Link></li>
      </ul> :
      <ul className="nav navbar-nav navbar-right">
        <li><Link to="/login">Login</Link></li>
        <li><Link to="/register">Register</Link></li>
      </ul>;

    return (
      <div className="navbar navbar-inverse navbar-fixed-top">
        <div className="container">
          <div className="navbar-header">
            <button type="button" className="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span className="sr-only">Toggle navigation</span>
              <span className="icon-bar"></span>
              <span className="icon-bar"></span>
              <span className="icon-bar"></span>
            </button>
            <Link to="/" className="navbar-brand">React App</Link>
          </div>
          <div className="navbar-collapse collapse">
            <ul className="nav navbar-nav">
              <li><Link to="/about">About</Link></li>
              <li><Link to="/contact">Contact</Link></li>
              <li><Link to="/notes">Notes</Link></li>
            </ul>
            {authNav}
          </div>
        </div>
      </div>
    )
  }
})

The only thing new here is the ternary operation inside the render() method. It simply makes some JSX menus based on whether or not the user is authenticated, and stores it in a variable. Then in the return, it adds that variable as the second, right-side menu.

With that, you should be able to run the application with F5 , register a user, and log them in.

Add a Talk Submission React Component

Now that potential speakers can log in, they’ll need a way to submit proposals to speak at the conference. To do that, create a new group of components by adding a folder in the /ClientApp/components folder called sessions. In that folder, create a SubmissionPage.js. This will handle the creation of proposals and then sending them to the API to be saved in the database.

import React from 'react';
import { withRouter } from 'react-router-dom';
import { withAuth } from '@okta/okta-react';

class SubmissionPage extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      title: '',
      abstract: '',
      submitted: false
    };

    this.handleTitleChange = this.handleTitleChange.bind(this);
    this.handleAbstractChange = this.handleAbstractChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleTitleChange(e) {
    this.setState({ title: e.target.value });
  }

  handleAbstractChange(e) {
    this.setState({ abstract: e.target.value });
  }

  async handleSubmit(e){
    e.preventDefault();
    fetch('/api/sessions', {
      body: JSON.stringify(this.state),
      cache: 'no-cache',
      headers: {
        'content-type':'application/json',
        Authorization: 'Bearer ' + await this.props.auth.getAccessToken()
      },
      method: 'POST'
    })
    .then(rsp => {
      if(rsp.status === 201){
        this.props.history.push('/profile');
      }
    })
    .catch(err => {
      console.error(err);
    });
  }

  render(){
    if(this.state.submitted === true){
      <Redirect to="/profile"/>
    }
    return(
      <form onSubmit={this.handleSubmit}>
        <div className="form-element">
          <label>Title:</label>
          <input
            id="title" type="text"
            value={this.state.title}
            onChange={this.handleTitleChange} />
        </div>
        <div className="form-element">
          <label>Abstract:</label>
          <textarea
            id="abstract"
            cols="100"
            rows="10"
            value={this.state.abstract}
            onChange={this.handleAbstractChange} />
        </div>
        <div className="form-actions">
          <input id="submit" type="submit" value="Submit Session"/>
        </div>
      </form>
    );
  }

};

export default withAuth(withRouter(SubmissionPage));

You’ll see this looks quite a bit like the login and registration pages, with some minor differences. The handlers should be very familiar by now for handling field updates and form submission. The significant difference is in the handleSubmit() function and with the higher-order components.

The form submission is doing a POST (like the registration page), but it is adding the Authorization header with a value of “Bearer {theUsersAccessToken}”. This is the reason for using the withAuth higher-order component, and it is there so that the server side will know who is making the request by sending a Bearer Token.

The form submission handler also uses this.props.history to redirect the user to back to the profile page once the submission is saved. You’ll also notice that the higher-order functions are also wrapping the submission page component at the bottom. What’s up with that? When using two wrapping function like the use of the withAuth and the withRouter higher-order components, I think it is more readable to export the component at the bottom. Either syntax for exporting components works.

To make submission easier, add a button on the user’s profile to add a new submission, so that the render() method looks like:

render() {
  if(!this.state.user) return null;
  return (
    <section className="user-profile">
      <h1>{this.state.user.name}'s Submitted Sessions</h1>
      <Link to="/submission" className="btn btn-primary">Submit A Session</Link>
    </section>
  )
}

Don’t forget to add a secure route to the new component in boot.js!

<SecureRoute path="/submission" component={SubmissionPage} />

The submission page will send the user’s input to the server, and now you need to tell the server what to do with all this awesomeness!

Add the Session Creation Route to ASP.NET Core

To save information, you’ll need a couple of things: you’ll need Entity Framework for easier interactions with the data store, and you’ll need a database context for that. In the Models folder create a ApiContext.cs file. This C# class should derive from DbContext and you’ll need to import a using for EntityFramework for that.

using Microsoft.EntityFrameworkCore;

namespace okta_dotnetcore_react_example.Data
{
  public class ApiContext : DbContext
  {
    public ApiContext(DbContextOptions<ApiContext> options)
  : base(options)
    { }

    public DbSet<Session> Sessions { get; set; }
  }
}

This merely sets up a “Sessions” table in the data store where every object of type Session will be stored.

You’ll also need a Session model, so you’ll need to create the Session.cs file in the Models folder and add:

using System.ComponentModel.DataAnnotations;

namespace okta_dotnetcore_react_example.Models
{
    public class Session
    {
        [Key]
        public int SessionId { get; set; }

        public string UserId { get; set; }
        public string Title { get; set; }
        public string Abstract { get; set; }
    }
}

The only real thing of note here is the Key data annotation that tells Entity Framework what the primary key value will be in the table. It also means that since we didn’t specify a way to make a key value, Entity Framework will use the default of incrementing from 1.

The last database context setup step is to add to the Startup.cs file in the ConfigureServices() function:

services.AddDbContext<ApiContext>(options => options.UseInMemoryDatabase("ConferenceDb"));

This lets .NET know to inject the database context into every controller that needs it.

Now you need an endpoint for the React app to send data to. You already know what the endpoint needs to look like, because the submission component is posting data to /api/session, so you’ll need a controller to handle the incoming data.

In the Controllers folder create a file called SessionsController.cs and add the content as follows:

using System.Linq;
using System.Security.Claims;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using okta_dotnetcore_react_example.Data;
using okta_dotnetcore_react_example.Models;

namespace okta_dotnetcore_react_example.Controllers
{
  [Authorize]
  [Route("/api/[controller]")]
  public class SessionsController : Controller
  {
    private readonly ApiContext context;
    public SessionsController(ApiContext context)
    {
      this.context = context;
    }

    [HttpPost]
    public IActionResult AddSession([FromBody] Session session)
    {
      session.UserId = User.Claims.SingleOrDefault(u=>u.Type == "uid")?.Value;
      context.Add<Session>(session);
      context.SaveChanges();
      return Created($"api/sessions/{session.SessionId}", session);
    }
  }
}

The AddSession action on the controller has the FromBody attribute on the argument. This lets ASP.NET’s default model binder know how to take the incoming JSON data and map it to a Session type. The action then takes the session and sets the UserId property to the authenticated user’s user id value. Then it adds the session to the Sessions collection in the context and saves those changes back to the database.

Lastly, it returns an IActionResult type. There are some “helpers” that create common action results. Here, it is returning a message with a 201 HTTP status that means there was a resource created. The first argument is the URL to retrieve that resource in the future and the second is the session. The outgoing session will now have a SessionId that data store created when it inserted the record.

The Authorize attribute on the controller class secures every action on the controller. So to call any endpoint declared here, a user must provide an access token (as a Bearer Token). To ensure that it’s there, you’ll need to add one more thing to the Startup.cs file.

In the ConfigureServices() method before the services.AddMvc() line, add:

services.AddAuthentication(sharedOptions =>
{
  sharedOptions.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
  sharedOptions.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
})
.AddJwtBearer(options =>
{
  options.Authority = "https://{yourOktaOrgUrl}/oauth2/default";
  options.Audience = "api://default";
});

And in the Configure() method before the app.UseMvc() line add:

app.UseAuthentication();

That’s it! Now your ASP.NET Core app will take that bearer token, get the user’s information from Okta add them to the User object so you can get the currently requesting user’s data.

Read The Sessions in You React Application

Even though users can now submit sessions to your conference, they’ll need to be able to see the list of their submissions so that they can see what they’ve submitted, edit, and delete them if they need to. Start by adding the submission listing to the profile page. In the /ClientApp/components/auth/ProfilePage.js component, add a component for listing a user’s submitted sessions. Change the render method to read:

render() {
  if(!this.state.user) return null;
  return (
    <section className="user-profile">
      <h1>{this.state.user.name}'s Submitted Sessions</h1>
      <Link to="/submission" className="btn btn-primary">Submit A Session</Link>
      <SessionListing userId={this.state.user.sub} />
    </section>
  )
}

This will pass the currently logged in user’s id to the SessionListing component you’ll create next.

Back in the /ClientApp/components/sessions folder create a SessionListing.js file.

import React from 'react';
import { withAuth } from '@okta/okta-react';

import './SessionListing.css';
import Session from './Session';

export default withAuth(class SessionListing extends React.Component {
  constructor(props) {
    super(props);
    this.state = { sessions: [] }
  }

  async getUsersSessions() {
    fetch('/api/sessions', {
      headers: {
        Authorization: 'Bearer ' + await this.props.auth.getAccessToken()
      }
    })
    .then(rsp => rsp.json())
    .then(sessions => {
      this.setState({ sessions });
    })
    .catch(err => {
      console.error(err);
    });
  }

  componentDidMount() {
    this.getUsersSessions();
  }

  render() {
    return (
      <ul className="session-list">
        {this.state.sessions.map(session => 
          <Session key={session.sessionId} 
            id={session.sessionId} 
            session={session} />)}
      </ul>
    )
  }

})

All of this should be familiar by now. The getUserSessions() method is called once the component is mounted, and the current user’s access token is sent in the Authorize header. The map function being called on the header will essentially loop through the sessions and pass them to the Session component for display. The render() method just needs one more thing: a Session component to pass each session to.

Hint: If you get a cannot call map on undefined error. Make sure you’ve initialized your sessions property in the state to an empty array.

Add a Session.js file to the sessions folder where your listing component lives.

import React from 'react';
import {Link} from 'react-router-dom';

const Session = (props) => {
  return (
    <li key={props.id} className="session">
      <h2>{props.session.title}</h2>
      <div>{props.session.abstract}</div>
    </li>
  );    
}

export default Session;

If you’re new to React, this is what is known as a presentational or a “dumb” component. It is not wrapped in the class type and just takes props and renders output. It is made for this kind of situation. All this component does is display the title and abstract of a session submission.

Get Sessions from Your ASP.NET Core Application

Now that the React app can request a list of all a user’s sessions, the ASP.NET Core API needs a way to respond. In the SessionsController.cs file add a new action:

[HttpGet]
public IActionResult GetAllSessions()
{
  var userId = User.Claims.SingleOrDefault(u=>u.Type == "uid")?.Value;
  var sessions = context.Sessions.Where(x=>x.UserId == userId).ToList(); 
  return Ok(sessions);
}

Since this is inside a controller that has the Authorize attribute on it, there will be a User object to interrogate. Here, the user returns their “uid”, which is their user’s unique identifier. Then the context searches all the sessions in the data store for the ones belonging to that user and returns them in a 200 OK HTTP status.

Make the Sessions Editable in React

Now that the users can see their submitted sessions, they’ll need to be able to edit them if they’ve made any mistakes, or want to update the content. To the Session component change the return so that it reads:

  return (
    <li key={props.id} className="session">
      <h2><Link to={`/submission/${props.session.sessionId}`}>{props.session.title}</Link></h2>
      <div>{props.session.abstract}</div>
    </li>
  );

That link will take the user to the submission page and pass the session’s sessionId. To handle that, you’ll need to update the route for the submission page to handle route parameters. Update the boot.js file and change the route for /submissions.

<SecureRoute path="/submission/:sessionId?" component={SubmissionPage} />

The colon after /submission/ lets React know that the value there will be put into this.props.match.params for use in the component handling the route. The question mark after the route lets know that the parameter is optional and that the SubmissionPage component will be handling routes that do and do not have the optional parameter. If the value is not passed the value in this.props.match.params.sessionId will be undefined.

Now the submission page just needs to handle loading up an existing session submission. Add a function to the component:

async loadSubmission(){
  fetch(`/api/sessions/${this.props.match.params.sessionId}`, {
    headers: {
      Authorization: 'Bearer ' + await this.props.auth.getAccessToken()
    }
  })
  .then(rsp => rsp.json())
  .then(session => {
    this.setState(Object.assign({}, this.state, session));
  })
  .catch(err => {
    console.error(err);
  });
}

Make sure that it is bound to the component’s this context in the constructor by adding:

this.loadSubmission = this.loadSubmission.bind(this);

Then make sure the loadSessions() method only runs once the component has finished rendering by adding the lifecycle method:

componentDidMount(){
  if(this.props.match.params.sessionId){
    this.loadSubmission();
  }
}

Finally, change the handleSubmit() method so that it POSTs to the add or save URL in the API depending on whether the user is updating or creating a session. You can determine that based on whether or not a sessionId was passed as a route parameter.

async handleSubmit(e){
  e.preventDefault();
  var sessionId = this.props.match.params.sessionId;
  var url = sessionId ? `/api/sessions/${sessionId}` : '/api/sessions';
  fetch(url, {
    body: JSON.stringify(this.state),
    cache: 'no-cache',
    headers: {
      'content-type':'application/json',
      Authorization: 'Bearer ' + await this.props.auth.getAccessToken()
    },
    method: 'POST'
  })
  .then(rsp => {
    if(rsp.status === 201 || rsp.status === 200){
      this.props.history.push('/profile');
    }
  })
  .catch(err => {
    console.error(err);
  });
}

This pulls the sessionId out and if it exists, changes the URL where you are posting the session data.

Update a Session in ASP.NET Core API

Now that the infrastructure is in place for the data store and the authentication, adding to the API is very simple. To the SessionsController.cs add the following action:

[HttpPost("/api/sessions/{sessionId}")]
public IActionResult UpdateSession([FromBody] Session session)
{
  var savedSession = context.Sessions.SingleOrDefault(x=>x.SessionId == session.SessionId);
  if(savedSession == null){
    return NotFound();
  }
  if(savedSession.UserId != User.Claims.SingleOrDefault(u=>u.Type == "uid")?.Value)
  {
    return Unauthorized();
  }
  savedSession.Title = session.Title;
  savedSession.Abstract = session.Abstract;
  context.SaveChanges();
  return Ok(savedSession);
}

This action has a specified URL in the HttpPost attribute. Just like the action for creating sessions, this pulls the data from the JSON data and maps it to a session object. Unlike the create action, this looks up the session by its sessionId. If it doesn’t find one, it returns a NotFound action result.

The action then checks to see if the currently logged in user is the owner of that session by checking their ID against the session’s UserId property. If it doesn’t match, it returns an Unauthorized action result.

Once all those checks have passed, the session is updated with the incoming data and saved back to the database.

Delete Submissions From React

Lastly, a potential speaker might decide that they don’t want to submit that session for consideration after all. They will need a way to delete that session submission.

Add a deleteSession() method to the session listing.

async deleteSession(session){
  fetch(`/api/sessions/${session.sessionId}`, {
    method: 'DELETE',
    headers: {
      Authorization: 'Bearer ' + await this.props.auth.getAccessToken()
    }
  })
  .then(rsp => {
    if(rsp.status === 200){
      this.getUsersSessions();
    }
  })
  .catch(err => {
    console.error(err);
  });
}

As before, you are sending the user’s access token. This time to a DELETE endpoint. The reason this is here and not in the session component is so that the list will be redisplayed once the submission has been deleted. To call it from the session component, you’ll need to pass it as an action.

You also won’t want to even give the option to someone who doesn’t own that session, so first check the userId passed in the props against the session’s userId property. In the SessionListing.js component, change the render() method, so it reads:

render() {
  return (
    <ul className="session-list">
      {this.state.sessions.map(session => 
        <Session key={session.sessionId} 
          id={session.sessionId}
          isOwner={session.userId === this.props.userId}
          delete={this.deleteSession.bind(this, session)} 
          session={session} />)}
    </ul>
  )
}

Now you can edit the Session.js file. The final version of the file will look like:

import React from 'react';
import {Link} from 'react-router-dom';

const Session = (props) => {
  const deleteButton = props.isOwner ? 
    <input type="button" title="Delete This Session" className="btn btn-sm btn-danger" value="X" onClick={props.delete}/> : 
    null;
  return (
    <li key={props.id} className="session">
      <h2><Link to={`/submission/${props.session.sessionId}`}>{props.session.title}</Link> {deleteButton}</h2>
      <div>{props.session.abstract}} />
    </li>
  );    
}

export default Session;

Now the component uses the isOwner prop to decide whether or not to show the delete button, and the delete button calls the delete() method on the session listing component.

Delete Sessions in ASP.NET Core

Now that the React application can request a delete to a specific session, add the action to handle that request in the SessionsController.cs file.

[HttpDelete("/api/sessions/{sessionId}")]
public IActionResult Delete(int sessionId){
  var session = context.Sessions.SingleOrDefault(sess => sess.SessionId == sessionId);
  if(session == null){
    return NotFound();
  }
  if(session.UserId != User.Claims.SingleOrDefault(u=>u.Type == "uid")?.Value)
  {
    return Unauthorized();
  }
  context.Remove(session);
  context.SaveChanges();
  return Ok();
}

Just like the update action, you’ll want to make sure that the session that the request intends to delete exists, and that it belongs to the user making the request. If that is the case, then the Remove() method is called on the context, and the session to be deleted is passed to it. Finally, don’t forget to call SaveChanges() to write that context back to the database and return an Ok() action result.

You should now be able to run the app and register users, login, create, read, update, and delete session submissions!

Do More Full Stack!!

If you enjoyed building this ASP.NET Core API with React, check out more full-stack CRUD posts from Okta.

As always if you have any questions, comments, or concerns about this post feel free to leave a comment below. For other great content from the Okta Dev Team, follow us on Twitter @OktaDev, Facebook, and watch us on YouTube!

Add Auth to Your PWA with Okta and Stencil

Lee Brandt — Tue, 12 Jun 2018 00:55:42 +0000

Progressive Web Applications (PWAs) are the newest technology on the web dev block and they’ve arrived just in time to solve a growing problem. Many companies are struggling to keep isolated development teams across their organization up-to-date when new features are released. Some companies are even trying to decide if it's worth the cost to develop both a web app and a mobile application. Not surprisingly, it's a headache most companies are looking to avoid. PWAs can give companies a lot of the features they need from a mobile app without the need to manage multiple teams and codebases.

A PWA performs spectacularly when on a fast connection and still performs well when offline or on Wi-Fi that's not really fast enough to be called Wi-Fi (sometimes called "Lie-Fi"). It does so via caching and a JavaScript "Service Worker" that intercepts server calls and tries to serve the data from cache first, then when the server finally responds, it will replace the cached data with possibly "fresher" data from the server.

Recently, the Ionic team released a new project called Stencil. Stencil is a compiler that generates standards-compliant web components. Unlike most JavaScript frameworks, it doesn't deliver a "framework" of code to the browser. It simply takes the code you write and uses its compiler to create vanilla components. You can also use Stencil's compiler with your favorite framework. The Stencil starter project is the easiest way to get started with Stencil and produces a base application that scores nearly a 100% score on Lighthouse's progressive web app scorecard.

To get started building a PWA using Stencil, clone the starter application and detach it from the GitHub remote.

WARNING: Stencil is not at a 1.0 release yet (as of this writing). So be aware that if you continue, you're in early-adopter territory. If you find bugs, submit an issue.

Set Up the Starter Application

git clone https://github.com/ionic-team/stencil-starter.git first-stencil
cd first-stencil
git remote rm origin

Then, install all the dependencies that your new Stencil app will need.

npm install

You may see a couple of warnings from node-pre-gyp around fsevents. There's nothing to see here. This is just to get around a nasty little npm bug.

Next, add the Okta Auth SDK (via CDN) to the bottom of the index.html page, right before the closing </body> tag.

<script src="https://ok1static.oktacdn.com/assets/js/sdk/okta-auth-js/1.8.0/okta-auth-js.min.js" type="text/javascript"></script>

While there is an npm package for Okta's Auth SDK, Stencil has a hard time compiling it. Overall it works better for now if you just use the CDN to include it.

If you’re like me, the next thing you’ll want to do is run npm start and check the site with Lighthouse. If you do, you’ll notice that the score is kind of low. In particular, it doesn’t register a service worker or return a 200 when offline, That’s because it’s a development build, and generally, you don’t want the service worker intercepting server calls and returning cached data in development.

To ensure an accurate depiction of the kind of PWA you get out of the box with Stencil, make sure to run a production build using npm run build. Once you do, you’ll see a www folder and inside that folder, you’ll see a sw.js file. That’s your service worker!

Set Up Your Okta Application

If you haven't already done so, create a free-forever developer account at https://developer.okta.com/signup/.

Once you've registered, click on Applications in the top menu. Then click Add Application.

You will then be taken to the application creation wizard. Choose Single-Page App and click Next at the bottom.

On the next screen, you’ll see the default settings provided by the single-page application template. Change the name of the application to something more descriptive, like "Stencil SPA". Also, change the base URIs and the login redirect URIs settings to use port 3333 because that’s where your application will be running. The rest of the default settings are fine.

Click Done at the bottom.

Select your newly created application from the listing, and click on the General tab to view the general settings.

At the bottom, you’ll see a Client ID setting (yours won't be blurred out, obviously). Copy this to use in your Stencil application. You will also need your Okta organization URL, which you can find at the top right of the dashboard page. It will probably look something like “https://dev-XXXXXX.oktapreview.com”.

Add the Authentication Component

In the components folder, add a new folder called app-auth. This is where your login page component will go. You can call it whatever you want, I'm just following the naming conventions set out by the starter app here. I'd definitely recommend deciding on a naming convention early and sticking with it.

Inside the newly created app-auth folder create two files: app-auth.css and app-auth.tsx. Start by creating the shell of the app-auth.tsx file.

import { Component } from '@stencil/core';

@Component({
  tag: 'app-auth',
  styleUrl: 'app-auth.css'
})
export class AppAuth {
  render() {
    return <div>Hello</div>;
  }
}

If you are like I was, you might be thinking, "What kind of Frankenstein framework is this?"

You'll notice the @Component decorator over the AppAuth class declaration like Angular, and then a render() method at the bottom like React. To me, that's the beauty of Stencil. It takes some of the best parts of both popular frameworks and uses them to compile reusable components!

Add a Login Form

Next, you'll add the JSX (that's right, I said it) to the new component. Change the render() method to:

render() {
  return (
    <form class="app-auth">
      <div class="form-item">
        <label>
          Username:
          <input type="text" name="username" autocomplete="username" />
        </label>
      </div>
      <div class="form-item">
        <label>
          Password:
          <input
            type="password"
            name="password"
            autocomplete="current-password"
          />
        </label>
      </div>
      <div class="form-actions">
        <button type="button" onClick={() => this.login()}>
          Login
        </button>
      </div>
    </form>
  );
}

This is just a regular JSX form, but the login button's onClick event is currently wired to function that doesn't exist.

Add the Login Method's Dependencies

Before you create that function, you'll need to set up the OktaAuth JavaScript object to call the Okta API for authentication. You'll add the object to the component's state, so right below the class declaration, add the following line:

@State() authClient: any;

You will also have to import the @State() decorator. This is is used for values related to the internal state of the component. In the first import statement add State to the deconstruction list.

import { Component, State } from '@stencil/core'

You'll also need to get the username and password values from the form itself, so add an @Element() to the code right below that @State() like you just created, so it read like this:

@State() authClient: any;
@Element() host: HTMLElement;

Then also add the @Element() decorator to the import so it reads:

import { Component, State, Element } from '@stencil/core';

One last thing that the login() function will need is access to the router, so you can redirect the user to their profile page if their authentication is successful. You'll need a class property, so add it right below the @Element.

@State() authClient: any;
@Element() host: HTMLElement;
@Prop() history: RouterHistory;

To import it, add the @Prop() decorator to the main import and then import the RouterHistory from @stencil/router right below the core import statement. The @Prop decorator is used to define properties that can be passed in to your component. In this case, it's not a passed in value, but it could be if need be. Your final import section should read:

import { Component, Prop, State, Element, Listen } from '@stencil/core';
import { RouterHistory } from '@stencil/router';

Finally, to use the OktaAuth JavaScript library you brought in from the CDN, add a declaration for it right below the import statements.

declare const OktaAuth: any;

Add the Login Method

Now you included everything you'll need to get the login function to authenticate users with your Okta organization. First, set up the OktaAuth object in the constructor of the AppAuth class. Right below the property for the RouterHistory object, add:

constructor() {
  this.authClient = new OktaAuth({
    clientId: '{yourClientId}',
    url: 'https://{yourOktaDomain}.com',
    issuer: 'default'
  });
}

You can get your Client ID from that general settings page of your Okta application.

You'll also need your Okta org URL, from the upper-right side of the Okta dashboard page.

Now everything is set up for the login() function, so you'll create that next. Right above the render() method, add a login() function.

login() {
  let inputs = this.host.querySelectorAll('input');
  let user = {
    username: inputs[0].value,
    password: inputs[1].value
  };

  return this.authClient.signIn(user)
    .then(res => {
      if (res.status === 'SUCCESS') {
        return this.authClient.token
          .getWithoutPrompt({
            responseType: 'id_token',
            scopes: ['openid', 'profile', 'email'],
            sessionToken: res.sessionToken,
            redirectUri: 'http://localhost:3333'
          })
          .then(token => {
            localStorage.setItem(
              'okta_id_token',
              JSON.stringify(token)
            );
            this.history.push('/profile', {});
          });
      } else {
        throw `Unable to handle ${res.status} status code`;
      }
    })
    .fail(function(err) {
      console.error(err);
    });
}

Since is really the "meat" of the component, I'll walk you through what's going on here.

The first thing, is getting all the inputs inside the form element of the component. Then a user object is created with the username and password from their respective inputs.

Next the authClient object is used to call the signIn() method with the user object that was created. It returns a promise, so you handle the then condition by getting the response and check to see if the response's status is a 200. If it is, call the authClient.token's getWithoutPrompt() method which also returns a promise. It takes a responseType property which is set to id_token, because that's what you want to get from Okta. You've also asked for three scopes that will give you the openid, profile, and email data associated with the newly authenticated user. The method need the session token returned from the signIn() method's response. Finally, you've told the function to call back to the redirectUri, which was set as a trusted redirect origin in Okta when you created your application.

In the then condition of this promise, you take the id token received and set it in local storage as okta_id_token. If all that worked, the user is redirected to the profile page.

If the response had a status of anything other than 200, it merely throws an error that says it can't handle any other statuses. Finally, the fail condition for the signIn() method call simply logs any errors to the console.

Simplify Login

While this works, there are two things that would make this component a little nicer: being able to hit enter to log in instead of having to click the login button, and not even showing the login form if the person tries to go the login page when they're already logged in.

To achieve this, add a method to take the user directly to the profile page if they're already logged in. Like React components, Stencil components have lifecycle methods. Instead of componentWillMount() for React, Stencil has a componentWillLoad() method, so that's what you'll use here.

componentWillLoad() {
  let idToken = localStorage.getItem('okta_id_token');
  if (idToken) {
    this.history.push('/profile', {});
  }
}

Simply put, all you're doing is reading the token from local storage. If one exists, you're assuming they are logged in and redirecting them to the profile page.

The last thing that will make this login form easier to use is to add the ability to submit the form with the enter key. Stencil has some built-in listeners for key presses. In this case, use the 'keydown.enter' listener. Import the @Listen() decorator in the very top import statement where you imported Component.

import { Component, Prop, State, Element, Listen } from '@stencil/core';

Then add a handler for the 'keydown.enter' event just below the componentWillLoad() function.

@Listen('keydown.enter')
handleEnter() {
  this.login();
}

Update the Profile Page

Now that you have a nice login page, update the profile page so that it shows the user's claims once they're logged in.

First, you’ll need a type to put the user’s claims in. So create a new file in the app-profile folder called AppUser.tsx. The contents are simple, but long. I simply looked at all the claims in the token stored in localStorage and created an interface that matched it. So the AppUser.tsx file is as follows:

interface AppUser {
  sub: string;
  name: string;
  locale: string;
  email: string;
  ver: number;
  iss: string;
  aud: string;
  iat: number;
  exp: number;
  jti: string;
  amr: string[];
  idp: string;
  nonce: string;
  nickname: string;
  preferred_username: string;
  given_name: string;
  family_name: string;
  zoneinfo: string;
  updated_at: number;
  email_verified: boolean;
  auth_time: number;
}

Once you have a type to declare for your profile's user object, update the app-profile.tsx file.

The imports at the top should look like:

import { Component, Prop, State } from '@stencil/core';
import { RouterHistory } from '@stencil/router';

Remove the @Prop() line for match and replace is with:

@Prop() history: RouterHistory;
@State() user: AppUser;
@Prop({ context: 'isServer' }) private isServer: boolean;

The isServer property is a special property. Because Stencil supports prerendering and localStorage may not be available during prerender, you'll need to wrap the localStorage calls in an if(!isServer){} to make sure it will build for production. This shouldn't stop it from working, it's just a work around for the build process.

For the componentWillLoad() method, just read in the user information from the 'okta_id_token' in local storage:

componentWillLoad() {
  if (!this.isServer) {
    let token = JSON.parse(localStorage.getItem('okta_id_token'));
    if (token) {
      this.user = token.claims;
    } else {
      this.history.push('/login', {});
    }
  }
}

This will be your protector for the profile page as well, it just checks if the token exists. If so, it loads the claims from it. If not, it redirects to the login page.

For the render() method, change it to display the claims in a list.

render() {
  if (this.user) {
  let keys = Object.keys(this.user);
  return <div class="app-profile">
      <h2>User Claims</h2>
      <ul>
        {keys.map(key => <li><span>{key}</span>: {this.user[key]}</li>)}
      </ul>
      <button onClick={this.logout}>
        Logout
      </button>
    </div>;
  }
}

The only thing left is to add the logout() method. This will just remove the token from local storage and reload the page, this will force the componentWillLoad() to redirect the user to the login page.

logout() {
  if (!this.isServer) {
    localStorage.removeItem('okta_id_token');
    location.reload();
  }
}

Set Up the Login Route

The only thing left is to add the route to the login component to the application so that users can get there.

In the components/my-app/my-app.tsx file add the route inside the stencil-router component so that the final section looks like this:

<stencil-router>
  <stencil-route url="/" component="app-home" exact={true} />
  <stencil-route url="/profile" component="app-profile" />
  <stencil-route url="/login" component="app-auth" />
</stencil-router>

You'll also need to update the route for the link on the home page. In components/app-home/app-home.tsx update the stencil-route-link element's url to no longer pass in the url parameter.

<stencil-route-link url="/profile">
  <button>
    Profile page
  </button>
</stencil-route-link>

That's it! You should now be able to run the app, click on the profile page, get redirected to the login page, and be redirected back to the profile page once you've logged in. The profile page should show all your claims after you've authenticated.

Congratulations, you now have a PWA with authentication in it, ready to go conquer the world!

Add Styles

As extra credit, you might want to add some styling to the login form and the profile page. Below is my style sheet for the login page that goes in app-auth.css:

.app-auth {
  width: 30%;
  margin: 2rem auto;
}
.app-auth .form-item {
  padding: .25rem;
}
.app-auth label {
  width: 100%;
  font-size: 1rem;
  color: #999;
}

.app-auth label input {
  width: 97%;
  border-radius: .25rem;
  font-size: 1.5rem;
}

.app-auth .form-actions {
  text-align: right;
}

Finally, in app-profile.css just some simple styles to bold the label of each item.

.app-profile {
  padding: 10px;
}

.app-profile ul li span {
  font-weight: bold;
}

Now when you run the app, you will see a nicely styled application, ready for the web!

Learn More

To learn more about PWAs, check out Matt Raible's ultimate guide to PWAs on the Okta developer blog.

If you want to know more about Ionic apps, check out Matt's blog post about building Ionic apps.

You can learn about building a basic CRUD app with VueJS from Brandon Parise's post.

Finally, right here you can see how to set up user registration with Node and React!

As always, if you have any questions you can comment below or hit me up on Twitter @leebrandt and don't forget to follow @OktaDev for great content from our communities + all the news about Okta's developer platform!

Build User Registration with Node, React, and Okta

Lee Brandt — Tue, 29 May 2018 22:15:40 +0000

Today's internet users expect a personalized experience. Developers must learn to develop websites that provide that personalized experience while keeping their user's information private. Modern web applications also tend to have a server-side API and a client-side user interface. it can be challenging to get make both ends aware of the currently logged in user. In this tutorial, I will walk you through setting up a Node API that feeds a React UI, and build a user registration that keeps the user's information private and personal.

In this tutorial, I won't use any state management libraries like Redux or ReduxThunk. In a more robust application, you'll probably want to do that, but it will be easy to wire up Redux and ReduxThunk and then add the fetch statements used here as your thunks. For the sake of simplicity, and to keep this article focused on adding user management, I'll be adding fetch statements into componentDidMount functions.

Install the Node and React Prerequisites

To set up the base application, make sure you have these basic tools installed:

Node (8+)
npm (5+)
create-react-app (npm package)
express-generator (npm package)

You’ll also need an Okta developer account.

To install Node and npm, you can follow the instructions for your operating system at https://nodejs.org/en/.

Then just install the two npm packages with the npm command line:

npm i -g create-react-app express-generator

Now you're ready to set up the basic application structure.

Scaffold the Base Application

Go to the folder where you want your application to live and create a new folder for it:

mkdir MembershipSample
cd MembershipSample
express api
create-react-app client

This will create two folders in the MembershipSample folder called api and client, with a NodeJS and Express application in the api folder and a base React application in the client folder. So your folder structure will look like:

MembershipSample
- api
- client

To make this next part easier, open two terminals or terminal tabs; one to the express app folder api and the other to the React app folder client.

By default, the React app and the Node app will both run on port 3000 in development, so you'll need to get the API to run on a different port and then proxy it in the client app.

In the api folder, open the /bin/www file and change the port the API will be running on to 3001.

/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3001');
app.set('port', port);

Then set up the proxy for the API in the client application so that you can still call /api/{resource} and have it proxied from port 3000 to port 3001. In the client/package.json file, add the proxy setting below name:

"name": "client",
"proxy": "http://localhost:3001"

Lastly, don’t forget to run npm install or yarn install for each subfolder (api and client) to ensure that the dependencies are installed.

You can now run both applications by running npm start or yarn start in the appropriate folders for the API and the client application.

Add an Okta Application

If you haven't already done so, create a free forever developer account at https://developer.okta.com/signup/.

Once you've registered, click on Applications in the top menu. Then click the Add Application button.

You will then be taken to the application creation wizard. Choose the Single-Page App button and click Next at the bottom.

On the next screen, you will see the default settings provided by the single-page application template. Change the name of the application to something more descriptive, like "Membership Application". Also, change the base URIs and the login redirect URIs settings to use port 3000 because that is where your application will be running. The rest of the default settings are fine.

Then click the Done button at the bottom.

Once the application has been created, select it from the applications listing, and click on the General tab to view the general settings for your application.

At the bottom, you will see a Client ID setting (yours won't be blurred out, obviously). Copy this to use in your React application. You will also need your Okta organization URL, which you can find at the top left of the dashboard page. It will probably look something like “https://dev-XXXXXX.oktapreview.com”.

Add Authentication to the ReactJS Application

Now that the application is created, add authentication using Okta by adding a couple of npm dependencies. From the client folder run:

npm install @okta/okta-react react-router-dom --save

Or, if you're using the yarn package manager:

yarn add @okta/okta-react react-router-dom

Add a file to the client/src folder called app.config.js. The contents of the file are:

export default {
  url: '{yourOktaDomain}',
  issuer: '{yourOktaOrgUrl}/oauth2/default',
  redirect_uri: window.location.origin + '/implicit/callback',
  client_id: '{yourClientID}'
}

Then, setup the index.js file to use the React Router and Okta's React SDK. When the index.js file is complete, it will look like this:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import { Security } from '@okta/okta-react';

import './index.css';
import config from './app.config';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

function onAuthRequired({ history }) {
  history.push('/login');
}

ReactDOM.render(
  <Router>
    <Security issuer={config.issuer}
      client_id={config.client_id}
      redirect_uri={config.redirect_uri}
      onAuthRequired={onAuthRequired}>
      <App />
    </Security>
  </Router>,
  document.getElementById('root')
);
registerServiceWorker();

Once complete, you will have added the BrowserRouter component (aliased as "Router") from the React Router, and the Security component from Okta's React SDK. Also that the app.config.js file is imported as "config" so that you can use the config values in the properties required by the Security component.

You will also have surrounded the App component with the Router and Security components, passing in the values specified. The onAuthRequired method, simply tells Okta's React SDK that when somebody tries to access a secure route and they are not logged in, redirect them to the login page.

Everything else will have come from the create-react-app command you ran previously.

Add Pages to the ReactJS App

Before adding any routes to the React app, create some components to handle the routes you want to add.

Add a components folder to the client/src folder. This is where all your components will live and the easiest way to organize them. Then create a home folder for your home page components. For now there will be just one, but there may be more components used only for the home page later. Add a HomePage.js file to the folder with the following contents:

import React from 'react';

export default class HomePage extends React.Component{
  render(){
    return(
      <h1>Home Page</h1>
    );
  }
}

This is all you really need for the home page at the moment. The most important point is to make the HomePage component a class type. Even though right now it only contains a single h1 tag, it is meant to be a "page", meaning it will likely contain other components, so it's important that it be a container component.

Next, create an auth folder in components. This is where all components that have to do with authentication will live. In that folder, create a LoginForm.js file.

The first thing to note is that you’ll be using the withAuth higher-order component from Okta’s React SDK to wrap the entire login form. This adds a prop to the component called auth, making it possible to access things like the isAuthenticated and redirect functions on that higher-order component.

The code for the LoginForm component is as follows:

import React from 'react';
import OktaAuth from '@okta/okta-auth-js';
import { withAuth } from '@okta/okta-react';

export default withAuth(class LoginForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      sessionToken: null,
      error: null,
      username: '',
      password: ''
    }

    this.oktaAuth = new OktaAuth({ url: props.baseUrl });

    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleUsernameChange = this.handleUsernameChange.bind(this);
    this.handlePasswordChange = this.handlePasswordChange.bind(this);
  }

  handleSubmit(e) {
    e.preventDefault();
    this.oktaAuth.signIn({
      username: this.state.username,
      password: this.state.password
    })
      .then(res => this.setState({
        sessionToken: res.sessionToken
      }))
      .catch(err => {
        this.setState({error: err.message});
        console.log(err.statusCode + ' error', err)
      });
  }

  handleUsernameChange(e) {
    this.setState({ username: e.target.value });
  }

  handlePasswordChange(e) {
    this.setState({ password: e.target.value });
  }

  render() {
    if (this.state.sessionToken) {
      this.props.auth.redirect({ sessionToken: this.state.sessionToken });
      return null;
    }

    const errorMessage = this.state.error ? 
    <span className="error-message">{this.state.error}</span> : 
    null;

    return (
      <form onSubmit={this.handleSubmit}>
        {errorMessage}
        <div className="form-element">
          <label>Username:</label>
          <input
            id="username" type="text"
            value={this.state.username}
            onChange={this.handleUsernameChange} />
        </div>

        <div className="form-element">
          <label>Password:</label>
          <input
            id="password" type="password"
            value={this.state.password}
            onChange={this.handlePasswordChange} />
        </div>
        <input id="submit" type="submit" value="Submit" />
      </form>
    );
  }
});

The other thing of note here is the OktaAuth library being imported. This is the base library for doing things like signing in using the Okta application you created previously. You'll notice an OktaAuth object being created in the constructor that gets a property of baseUrl passed to it. This is the URL for the issuer that is in your app.config.js file. The LoginForm component is meant to be contained in another component, so you'll have to create a LoginPage.js file to contain this component. You'll use the withAuth higher-order component again, to get access to the isAuthenticated function. The contents of LoginPage.js will be:

import React, { Component } from 'react';
import { Redirect } from 'react-router-dom';
import LoginForm from './LoginForm';
import { withAuth } from '@okta/okta-react';

export default withAuth(class Login extends Component {
  constructor(props) {
    super(props);
    this.state = { authenticated: null };
    this.checkAuthentication = this.checkAuthentication.bind(this);
    this.checkAuthentication();
  }

  async checkAuthentication() {
    const authenticated = await this.props.auth.isAuthenticated();
    if (authenticated !== this.state.authenticated) {
      this.setState({ authenticated });
    }
  }

  componentDidUpdate() {
    this.checkAuthentication();
  }

  render() {
    if (this.state.authenticated === null) return null;
    return this.state.authenticated ?
      <Redirect to={{ pathname: '/profile' }} /> :
      <LoginForm baseUrl={this.props.baseUrl} />;
  }
});

Although it's a bit less than what's in the login form component, there are still some important pieces to point out here.

Again, you're using the withAuth higher-order component. This will be a recurring theme for every component that needs to use Okta's authentication or authorization process. In this case, it's primarily used to get the isAuthenticated function. The checkAuthentication() method is executed in the constructor and in the componentDidUpdate lifecycle method to ensure that when the component is created it is checked and every subsequent change to the component checks again.

When isAuthenticated returns true, then it is set in the component's state. It is then checked in the render method to decide whether to show the LoginForm component, or to redirect to the user's profile page, a component you'll create next.

Now create the ProfilePage.js component inside the auth folder. The contents of the component are:

import React from 'react';
import { withAuth } from '@okta/okta-react';

export default withAuth(class ProfilePage extends React.Component {
  constructor(props){
    super(props);
    this.state = { user: null };
    this.getCurrentUser = this.getCurrentUser.bind(this);
  }

  async getCurrentUser(){
    this.props.auth.getUser()
      .then(user => this.setState({user}));
  }

  componentDidMount(){
    this.getCurrentUser();
  }

  render() {
    if(!this.state.user) return null;
    return (
      <section className="user-profile">
        <h1>User Profile</h1>
        <div>
          <label>Name:</label>
          <span>{this.state.user.name}</span>
        </div>
      </section>

    )
  }
});

The withAuth component here gives you access to the getUser function. Here, it's been called from componentDidMount which is a common place for pulling data that will be used in the render method. The only odd thing you might see is the first line of the render method that renders nothing until there is actually a user returned from the getUser asynchronous call. Once there is a user in the state, it then renders the profile content, which in this case is just displaying the currently logged in user's name.

Next, you'll add a registration component. This could be done just like the login form, where there is a LoginForm component that is contained in a LoginPage component. In order to demonstrate another way to display this, you'll just create a RegistrationForm component that will be the main container component. Create a RegistrationForm.js file in the auth folder with the following content:

import React from 'react'; 
import OktaAuth from '@okta/okta-auth-js';
import { withAuth } from '@okta/okta-react';

import config from '../../app.config';

export default withAuth(class RegistrationForm extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      firstName: '',
      lastName: '',
      email: '',
      password: '',
      sessionToken: null
    };
    this.oktaAuth = new OktaAuth({ url: config.url });
    this.checkAuthentication = this.checkAuthentication.bind(this);
    this.checkAuthentication();

    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleFirstNameChange = this.handleFirstNameChange.bind(this);
    this.handleLastNameChange = this.handleLastNameChange.bind(this);
    this.handleEmailChange = this.handleEmailChange.bind(this);
    this.handlePasswordChange = this.handlePasswordChange.bind(this);    
  }

  async checkAuthentication() {
    const sessionToken = await this.props.auth.getIdToken();
    if (sessionToken) {
      this.setState({ sessionToken });
    }
  }

  componentDidUpdate() {
    this.checkAuthentication();
  }

  handleFirstNameChange(e){
    this.setState({firstName:e.target.value});
  }
  handleLastNameChange(e) {
    this.setState({ lastName: e.target.value });
  }
  handleEmailChange(e) {
    this.setState({ email: e.target.value });
  }
  handlePasswordChange(e) {
    this.setState({ password: e.target.value });
  }

  handleSubmit(e){
    e.preventDefault();
    fetch('/api/users', { 
      method: 'POST', 
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(this.state)
    }).then(user => {
      this.oktaAuth.signIn({
        username: this.state.email,
        password: this.state.password
      })
      .then(res => this.setState({
        sessionToken: res.sessionToken
      }));
    })
    .catch(err => console.log);
  }

  render(){
    if (this.state.sessionToken) {
      this.props.auth.redirect({ sessionToken: this.state.sessionToken });
      return null;
    }

    return(
      <form onSubmit={this.handleSubmit}>
        <div className="form-element">
          <label>Email:</label>
          <input type="email" id="email" value={this.state.email} 
          onChange={this.handleEmailChange}/>
        </div>
        <div className="form-element">
          <label>First Name:</label>
          <input type="text" id="firstName" value={this.state.firstName} 
          onChange={this.handleFirstNameChange} />
        </div>
        <div className="form-element">
          <label>Last Name:</label>
          <input type="text" id="lastName" value={this.state.lastName} 
          onChange={this.handleLastNameChange} />
        </div>
        <div className="form-element">
          <label>Password:</label>
          <input type="password" id="password" value={this.state.password} 
          onChange={this.handlePasswordChange} />
        </div>
        <input type="submit" id="submit" value="Register"/>
      </form>
    );
  }

});

This component looks a lot like the LoginForm component with the exception that it calls the Node API (that you’ll build in a moment) that will handle doing the registration. Once the registration is completed by the Node API, the component logs the newly created user in, and the render method (when it sees a session token in the state) redirects the user to the home page of the application.

You may also notice the sessionToken property on the component’s state. This is set by the handleSubmit() function for the purpose of handling the login if the registration is successful. Then it is also used by the render() method to do the redirect once the login has completed, and a token has been received.

Add Routes to the React App

First, add a navigation component for the routes you’ll be adding. In the client/src/components folder, add a folder called shared. This will be the place where all components that are used in several places in the application will be located. In that new folder, add a file called Navigation.js. The file contains a basic component with links to all the pages in the app.

You’ll need to wrap the navigation component in the withAuth higher-order component. That way, you can check to see if there is an authenticated user and display the login or logout button as appropriate.

import React from 'react';
import { Link } from 'react-router-dom';
import { withAuth } from '@okta/okta-react';

export default withAuth(class Navigation extends React.Component {
  constructor(props) {
    super(props);
    this.state = { authenticated: null };
    this.checkAuthentication = this.checkAuthentication.bind(this);
    this.checkAuthentication();
  }

  async checkAuthentication() {
    const authenticated = await this.props.auth.isAuthenticated();
    if (authenticated !== this.state.authenticated) {
      this.setState({ authenticated });
    }
  }

  componentDidUpdate() {
    this.checkAuthentication();
  }

  render() {
    if (this.state.authenticated === null) return null;
    const authNav = this.state.authenticated ?
      <ul className="auth-nav">
        <li><a href="javascript:void(0)" onClick={this.props.auth.logout}>Logout</a></li>
        <li><Link to="/profile">Profile</Link></li>
      </ul> :
      <ul className="auth-nav">
        <li><a href="javascript:void(0)" onClick={this.props.auth.login}>Login</a></li>
        <li><Link to="/register">Register</Link></li>
      </ul>;
    return (
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          {authNav}
        </ul>
      </nav>
    )
  }
});

Now that you have components available to handle all the routes, create the routes to go with them. Update the App.js file so that the final version looks like:

import React, { Component } from 'react';
import { Route } from 'react-router-dom';
import { SecureRoute, ImplicitCallback } from '@okta/okta-react';

import Navigation from './components/shared/Navigation';
import HomePage from './components/home/HomePage';
import RegistrationForm from './components/auth/RegistrationForm';
import config from './app.config';
import LoginPage from './components/auth/LoginPage';
import ProfilePage from './components/auth/ProfilePage';
import './App.css';

export default class App extends Component {
  render() {
    return (
      <div className="App">
        <Navigation />
        <main>
          <Route path="/" exact component={HomePage} />
          <Route path="/login" render={() => <LoginPage baseUrl={config.url} />} />
          <Route path="/implicit/callback" component={ImplicitCallback} />
          <Route path="/register" component={RegistrationForm} />
          <SecureRoute path="/profile" component={ProfilePage} />
        </main>
      </div>
    );
  }
}

There are a couple of things of note here. The import of the SecureRoute and ImplicitCallback components from Okta's React SDK. The ImplicitCallback component handles the callback from the authentication flow to ensure there is an endpoint within the React application to catch the return call from Okta. The SecureRoute component allows you to secure any route and redirect unauthenticated users to the login page.

The Route component from React Router does exactly what you'd expect: it takes a path that the user has navigated to and sets a component to handle that route. The SecureRoute component does an extra check to ensure the user is logged in before allowing access to that route. If they are not then the onAuthRequired function in index.js will be called to force the user to the login page.

The only other really odd-looking thing here is the route for the login path. Instead of simply setting a component to handle the path, it runs a render method that renders the LoginPage component and sets the baseUrl from the configuration.

Add API Endpoints to the Node App

You may remember that the Node API is doing the registration, so you'll need to add the endpoint to the Node app to handle that call. To do that, you'll need to add Okta's Node SDK. From the ‘api’ folder run:

npm install @okta/okta-sdk-nodejs --save

Then, you'll change the users.js file in api/routes. The file will look like:

const express = require('express');
const router = express.Router();
const oktaClient = require('../lib/oktaClient');

/* Create a new User (register). */
router.post('/', (req, res, next) => {
  if (!req.body) return res.sendStatus(400);
  const newUser = {
    profile: {
      firstName: req.body.firstName,
      lastName: req.body.lastName,
      email: req.body.email,
      login: req.body.email
    },
    credentials: {
      password: {
        value: req.body.password
      }
    }
  };
  oktaClient.createUser(newUser)
    .then(user => {
      res.status(201);
      res.send(user);
    })
    .catch(err => {
      res.status(400);
      res.send(err);
    })
});

module.exports = router;

The biggest things of note here are the importing of the lib/oktaClient (which you'll add in a moment), the call to the createUser function on oktaClient, and the shape of the newUser object. The shape of the newUser object is documented in Okta's API documentation.

For your Node application to make calls to your Okta application, it will need an API token. To create one, go into your Okta developer dashboard, hover over the API menu option and click on Tokens.

From there click Create Token. Give the token a name like "Membership" and click Create Token.

Copy the token to a safe location for use later.

Create a file called oktaClient.js in a new folder called lib in the Node application. The file will configure a Client object from Okta's Node SDK using the API token you just created like this:

const okta = require('@okta/okta-sdk-nodejs');

const client = new okta.Client({
  orgUrl: '{yourOktaDomain}',
  token: '{yourApiToken}'
});

module.exports = client;

In the app.js file at the root of the Node app, update the file to have all calls route to /api/<something>. You'll see a section below the block of app.use statements. Change the route set up so that it looks like this:

app.use('/api', index);
app.use('/api/users', users);

If your Node app is still running, you will need to stop the app (with CTRL+C) and rerun it (with npm start) for the updates to take effect.

Even though the site still needs some serious style love, you will now be able to register users, log in with the newly created user and get the logged in user's profile for display on the profile page!

Learn More

If you want to learn more about the technologies used in this articles, you can check out the documentation for:

Okta's Node SDK
Okta’s React SDK.

Also, check out other articles using Okta for authentication:

Randall Degges’s article on Okta in a Simple Node Website
My article using the Okta Sign-In Widget in React
Matt Raible’s Article on Progressive Web Apps

As always, if you have questions, comments, or concerns about the article you can post a comment below, email me at lee.brandt@okta.com or post your questions to the developer forums. For more articles and tutorials, follow us on Twitter @OktaDev.