JavaScript
Lee Brandt, Oct 30

Build a React App with User Authentication in 15 Minutes

This article originally appeared on the OKTA blog. Thank you for supporting the partners who make SitePoint possible.

React has quickly become one of the most favored front-end web frameworks, and is second only to plain old HTML5, according to JAXenter. So it’s no surprise that developers are learning it, and employers are asking for it.

In this tutorial, you’ll start with a very simple React app with a couple of pages and some routing built in, and add authentication using Okta’s Sign-In Widget. The Sign-In Widget is an embeddable Javascript widget that allows developers to use Okta’s secure, scalable architecture with a minimum of effort from within React applications. Let’s get started!

Get the Simple React Seed Project

Start by cloning the simple React seed project.

git clone https://github.com/leebrandt/simple-react-seed.git okta-react-widget-sample
cd okta-react-widget-sample

Add the Okta Sign-In Widget

Install the Okta Sign-In Widget using npm.

npm install @okta/okta-signin-widget@2.3.0 --save

This will add the Okta Sign-In Widget code to your node_modules folder. We’ll be using version 2.3.0 of the Sign-In Widget.

Okta in node_modules

Then add the styles for the widget in your index.html file from the Okta CDN. Add these lines inside the <head> tag:

    <link
     href="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.3.0/css/okta-sign-in.min.css"
      type="text/css"
      rel="stylesheet"/>

    <!-- Theme file: Customize or replace this file if you want to override our default styles -->
    <link
      href="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.3.0/css/okta-theme.css"
      type="text/css"
      rel="stylesheet"/>

The LoginPage Component

First, create a folder called auth in the ./src/components folder, then create a file called LoginPage.js where the LoginPage component will go.

Start with the most basic of components:

import React from 'react';

export default class LoginPage extends React.Component{
  render(){
    return(
      <div>Login Page</div>
    );
  }
}

This little component doesn't do much but at least you now have a handle to add the LoginPage to your routing. So in your ./src/app.js file, you'll import the component at the top:

import LoginPage from './components/auth/LoginPage';

and then add the route inside the main route (the one with the path of "/")

<Route path="/login" component={LoginPage}/>

Add the OpenID Connect Application in Okta

In order to use Okta as your OpenID Connect provider for authentication, you’ll need to set up an application in the Okta developer console.

If you don't have an Okta developer account, go create one! Once you're logged in, click on Applications in the top navbar, then click Add Application. Select SPA as the platform and click Next. Change the redirect URI to http://localhost:3000, and click Done. The application will be created with the following settings:

OIDC Application Settings

Now that you have an application created in Okta, you can set up the widget to talk to your new app!

Add the Widget to Your Component

import React from 'react';
import OktaSignIn from '@okta/okta-signin-widget';

export default class LoginPage extends React.Component{
  constructor(){
    super();
    this.widget = new OktaSignIn({
      baseUrl: 'https://{oktaOrgUrl}',
      clientId: '{clientId}',
      redirectUri: 'http://localhost:3000',
      authParams: {
        responseType: 'id_token'
      }
    });
  }

  render(){
    return(
      <div>Login Page</div>
    );
  }
}

Copy the Client ID generated from your application's settings page and paste it over {clientId}. Make sure you also replace {oktaOrgUrl} with your Okta organization URL, which you can find by going back to the main Dashboard page in the developer console. Usually it will look like: https://dev-12345.oktapreview.com.

Thus far you've imported the OktaSignIn function from the Okta Sign-In Widget npm module you installed earlier. Next, in the constructor of the component, you initialized an instance of OktaSignIn with the configuration for the application. This way, the application code will be able to talk to Okta and Okta will recognize that this is the app you just created.

Show The Login Widget

Next, you’ll create the code to actually render the Sign-In Widget to the page! You'll need to change your render method to create an HTML element you can render the widget into. Make sure to get a reference to the element that will be rendered. Then, add a componentDidMount function to make sure you don't try to render the widget before the HTML element is on the page.

JavaScript
Kaloyan Kolev, Oct 27

Quickly Create Simple yet Powerful Angular Forms

Forms are an essential part of most web applications. Kaloyan Kolev shows how to create template-driven and reactive Angular forms along with validation.
JavaScript
Jurgen Van de Moere, Oct 19

Top 12 Productivity Tips for WebStorm and Angular - Part 1

Jurgen Van de Moere shows you how to complete your Angular projects quickly with JetBrains' WebStorm IDE.
JavaScript
Adam Roberts, Oct 18

Learning Angular: Everything You Need to Get Started

A handy collection of resources that provides you with everything you need to know to start building Angular apps.
JavaScript
Graham Cox, Oct 16

Ember.js: The Perfect Framework for Web Applications

Ember.js lets you scaffold and build complex frontend web applications quickly. Graham Cox explores this popular, batteries-included JavaScript framework.
JavaScript
Matt Raible, Oct 11

Getting Started with Angular and User Authentication

An easy step-by-step guide to show you how to get started building with Angular and to add user authentication to your app using Okta's Sign-In Widget.
JavaScript
M. David Green, Oct 10

How to Set Up Airbrake Error Monitoring for Your JavaScript App

Error monitoring can save you when things start to fall apart. Learn how to get Airbrake working with your JavaScript web apps.
JavaScript
Darren Jones, Oct 09

JavaScript Functions That Define and Rewrite Themselves

The dynamic nature of JavaScript means that a function is able to not only call itself, but define itself, and even redefine itself.
JavaScript
Darren Jones, Oct 05

Hello, World! Your First JavaScript Programs

Begin your journey of programming in JavaScript! Write your first couple of simple JavaScript programs, and begin to get to grips with the language
JavaScript
Matt Raible, Oct 04

Create an Angular App with Authentication in 20 Minutes

Matt Raible takes you through how to build angular authentication in your app in only 20 minutes, using OpenID Connect and Okta.
JavaScript
Gregg Pollack, Oct 02

6 Pro Tips from React Developers

If you’re new to React, you could benefit from learning from React developers who’ve learned valuable lessons about the framework.
JavaScript
Matt Burnett, Oct 02

An Introduction to JSX

Matt Burnett introduces JSX, explaining how it makes development easier, and why you shouldn't be worried about separation-of-concerns issues.
JavaScript
Ahmed Bouchefra, Sep 29

Using Preact as a React Alternative

Ahmed Bouchefra introduces Preact, a lightweight version of React with a growing community that's well suited to high-performance apps and slow 2G networks.
JavaScript
Ardian Haxha, Sep 29

Extracting Website Data and Creating APIs with WrapAPI

Ardian Haxha introduces WrapAPI, a tool that makes it very easy to extract data from websites and create APIs from that data.
JavaScript
Chad Campbell, Sep 28

Conditionally Applying a CSS Class in Vue.js

Chad shows how to conditionally apply a CSS class at runtime, binding to a JS object by defining a class and creating class bindings in your template.
JavaScript
Manjunath M, Sep 26

React Router v4: The Complete Guide

Manjunath introduces React Router v4, the de facto standard routing library for React, demonstrating things you can do with it.
JavaScript
Michael Wanyoike, Sep 26

Getting Started with Redux

Michael Wanyoike introduces Redux, a framework that helps build complex projects in way that's easy to scale and maintain.
JavaScript
Jonathan Saring, Sep 25

Sharing React Components Easily with Bit

Jonathan explains how to share React components with a team and across different projects --- without changing source code, file structure or tooling.
JavaScript
Jatin Shridhar, Sep 25

Writing Server-rendered React Apps with Next.js

Jatin Shridhar pushes through JS framework fatigue to introduce Next.js, a simple yet customizable solution to building production-ready SPAs.
JavaScript
Vasu K, Sep 22

To Redux or Not: the Art of Structuring State in React Apps

Vasu walks through various strategies for modeling state, explaining when each of them can be used.
JavaScript
Camilo Reyes, Sep 22

A Guide to Testing React Components

Camilo Reyes explores what it takes to unit test React components and the thought process required for making components testable.
12 COMMENTs
JavaScript
Tony Spiro, Sep 21

Building a React Universal Blog App: Implementing Flux

Tony Spiro continues his React Blog App by introducing Flux.
JavaScript
Roger Jin, Sep 21

Dealing with Asynchronous APIs in Server-rendered React

Roger Jin explains how to get data from asynchronous APIs when using server-rendered React code.
JavaScript
Prasanna Mahendiran, Sep 20

Async Operations in React Redux Applications

Prasanna Mahendiran provides tips on structuring asynchronous requests in a React-Redux application.