This tutorial guides you through building a secure React frontend and Node.js backend application using Okta for authentication. The frontend features a homepage and a posts manager, accessible only to authenticated users. The backend enforces authentication for post creation and editing. Okta's OpenID Connect (OIDC) handles authentication, leveraging the Okta React SDK on the frontend and the Okta JWT Verifier on the backend. The backend utilizes Express.js, Sequelize for data modeling, and Epilogue for streamlined REST API creation.

Why React?

React's popularity stems from its efficient virtual DOM manipulation, enabling fast updates. Its use of JSX, a syntax allowing HTML within JavaScript, simplifies development and enhances readability compared to traditional JavaScript rendering. This example demonstrates JSX's concise syntax:

const Form = () => (
  <form>
    <label>Name</label><input value="Arthur Dent" />
    <label>Answer to life, the universe, and everything</label><input type="number" value={42} />
  </form>
);

The equivalent plain JavaScript code is significantly more verbose:

const Form = () => React.createElement(
  "form",
  null,
  React.createElement(
    "label",
    null,
    "Name",
    React.createElement("input", { value: "Arthur Dent" })
  ),
  React.createElement(
    "label",
    null,
    "Answer to life, the universe, and everything",
    React.createElement("input", { type: "number", value: 42 })
  )
);

Building the React App

Create React App streamlines React development. Install it using:

npm i -g create-react-app@1.5.2 yarn@1.7.0
create-react-app my-react-app
cd my-react-app
yarn start

This launches the default app at http://localhost:3000.

Adding Material UI and Authentication

Material UI enhances the app's appearance. Install it with:

yarn add @material-ui/core@1.3.1 @material-ui/icons@1.1.0

Include Roboto font in public/index.html:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">

Okta simplifies secure authentication. Create a free developer account and add a Single-Page App in your Okta developer console, noting your Client ID and Organization URL. Store these in .env.local:

<code>REACT_APP_OKTA_CLIENT_ID={yourClientId}
REACT_APP_OKTA_ORG_URL=https://{yourOktaDomain}</code>

Install Okta's React SDK and React Router:

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

Configure Okta in src/index.js and add routing in src/App.js to handle authentication and callbacks. Create a LoginButton component to manage login/logout functionality. Integrate this button into your app header.

Building the Node.js Backend

Install backend dependencies:

const Form = () => (
  <form>
    <label>Name</label><input value="Arthur Dent" />
    <label>Answer to life, the universe, and everything</label><input type="number" value={42} />
  </form>
);

Create a server in src/server/index.js. This sets up Express, handles JWT verification using Okta, defines a Sequelize model for posts, and uses Epilogue to create REST endpoints. Configure package.json to run both frontend and backend concurrently.

Adding the Posts Manager

Install React Final Form and related packages:

const Form = () => React.createElement(
  "form",
  null,
  React.createElement(
    "label",
    null,
    "Name",
    React.createElement("input", { value: "Arthur Dent" })
  ),
  React.createElement(
    "label",
    null,
    "Answer to life, the universe, and everything",
    React.createElement("input", { type: "number", value: 42 })
  )
);

Create a PostEditor component for managing individual posts and a PostsManager page to display and interact with the post list. Integrate these into your routing.

Testing and Further Learning

Run yarn start to test the complete application. The source code is available at http://www.miracleart.cn/link/44f455185e5ae730f5e12534aaaa5e02. Explore additional resources on the Okta developer blog for deeper dives into React, Node.js, and Okta.

The above is the detailed content of Build a Basic CRUD App with Node and React. For more information, please follow other related articles on the PHP Chinese website!