Core points

• Redux provides a structured way to manage state in React applications, making data flows easy to predict and manage, especially for large applications.
• Auth0 is used for user authentication, providing quick setup and advanced features such as social login and multi-factor authentication without complex backend settings.
• JSON Web Tokens (JWT) is used for secure, stateless authentication against RESTful APIs, which simplifies the traditional session-based authentication process.
• This tutorial simplifies the login process using Auth0's Lock widget and uses Redux middleware to handle API calls efficiently and securely.
• Protected routing ensures that some parts of the application are only accessible to authenticated users, thereby enhancing security.
• Application architecture includes setting up Redux actions, reducers, and middleware to handle authentication status and fetch data from the API.

Thanks to Peleke Sengstacke for peer review of this article. Thanks to all SitePoint peer reviewers for getting SitePoint content to its best!

Redux is very popular in the React community and even in the wider field, and there is good reason. It is a library created by Dan Abramov that makes processing one-way data streams organized and allows developers to use powerful development features such as time travel and recording/playback.

Sounds great, right? But the problem is: it requires more code to be written. However, if you have experience maintaining large applications, you may know that data processing can become difficult to control and difficult to manage. With Redux, we can always have a clear understanding of the status of our application and know exactly what our data is doing.

In this tutorial, we will learn how to start creating a real React Redux application that authenticates users and calls the remote API to fetch data. Our app will retrieve the Star Wars Jedi list from the Node backend so we can display their names and photos. For authentication, we will use Auth0 so that we can get up and running quickly, and we can also easily get features like social login and multi-factor authentication.

We won't go into the basic concepts of Redux, so if you're not familiar with the library, check out some of the following excellent introductory resources:

• How to build a to-do application using React, Redux, and Immutable.js
• Redux Documentation

The source code of our upcoming application can be downloaded from here.

Redux Authentication: Getting Started

The React project for this tutorial will be written in ES2015, so we will compile it to ES5 using Babel and handle the module bundle using webpack. Instead of setting it up from scratch, let's start with the real-world starter example of Dan in the Redux repository. Get a copy and install the dependencies.

npm install

Register Auth0

The best way to authenticate for single page applications, such as the one we are building, is to use JSON Web Tokens (JWT). JWT provides a method for stateless authentication against the RESTful API, which has many advantages over session and cookie-based authentication. The downside is that writing a JWT authentication solution yourself can be tricky and error-prone, but luckily, we can use Auth0 without worrying about any server or security implementation details.

If you haven't done so yet, please visit and sign up for a free Auth0 account. With the free plan, we get 7,000 regular active users and two social identity providers available.

After registering, follow the prompts to initialize your account. Remember that you can have multiple applications under the same account, so choose the domain name that suits your situation – probably the name of your organization. First step, we need to set our localhost URL to the allowed source. This can be done in the "Accepted Sources (CORS)" text area.

Set up the web server

Let's first solve the problem of Jedi Web server. This requires just a simple RESTful API that returns our Jedi as JSON data, and using the NodeJS and Express frameworks is one way to do this quickly. You can use any server-side language or framework you prefer, just return JSON data.

Note: Star Wars purists will notice that we use "Jedis" as the plural form of Jedi throughout the app, but this is not the correct plural form. Instead, we should only use "Jedi". Maybe it's true, but I'm fine with this because it makes our app easier :)

First, initialize an application and install dependencies:

mkdir server && cd server
touch server.js
npm init
npm install express express-jwt cors

We can provide all the code required by the server in a single JavaScript file.

// server.js

const express = require('express');
const app = express();
const jwt = require('express-jwt');
const cors = require('cors');

app.use(cors());
app.use(express.static('public'));

// express-jwt 提供的身份驗(yàn)證中間件。
// 此中間件將檢查傳入請求，以獲取應(yīng)用于它的任何路由上的有效 JWT。
const authCheck = jwt({
  secret: 'AUTH0_SECRET',
  // 如果您的 Auth0 客戶端是在 2016 年 12 月 6 日之前創(chuàng)建的，
  // 請取消注釋下面的行并刪除上面的行
  // secret: new Buffer('AUTH0_SECRET', 'base64'),
  audience: 'AUTH0_CLIENT_ID'
});

var jedis = [
  {
    id: 1,
    name: 'Luke Skywalker',
    image: 'http://localhost:7000/images/luke-skywalker.jpg'
  },
  {
    id: 2,
    name: 'Anakin Skywalker',
    image: 'http://localhost:7000/images/anakin-skywalker.png'
  },
  {
    id: 3,
    name: 'Yoda',
    image: 'http://localhost:7000/images/yoda.png'
  },
  {
    id: 4,
    name: 'Obi-Wan Kenobi',
    image: 'http://localhost:7000/images/obi-wan-kenobi.jpg'
  },
  {
    id: 5,
    name: 'Mace Windu',
    image: 'http://localhost:7000/images/mace-windu.jpg'
  }
];

app.get('/api/jedis', (req, res) => {
  const allJedis = jedis.map(jedi => { 
    return { id: jedi.id, name: jedi.name }
  });
  res.json(allJedis);
});

app.get('/api/jedis/:id', authCheck, (req, res) => {
  res.json(jedis.filter(jedi => jedi.id === parseInt(req.params.id))[0]);
});

app.listen(7000);
console.log('Listening on http://localhost:7000');

We have a Jedi array and two endpoints that handle them. The first endpoint returns all Jedi but only their id and name properties. The second endpoint is located at /jedis/:id, returning a single Jedi, but also including the image URL. We will use our authentication middleware to protect the second endpoint and restrict it to only authenticated users to access.

But how do we actually protect this endpoint? We use express-jwt to create a middleware that looks for incoming JSON Web Tokens and verify them based on the keys we provide. We can then apply this middleware to any of our endpoints - we are doing this on the second parameter of the /jedis/:id endpoint - and only requests containing a valid token can pass.

The middleware itself is set by providing our Auth0 key and client ID to authCheck, where you can provide a key specific to your application. These keys can be found in the Auth0 admin panel under Application .

Jedi images come from a public directory on the server. You can get the same image from the repository, or you can include links to images from other sources in your data, if you prefer.

When the server is in place, let's verify that the API works as expected. We can do this using tools like Postman.

If we go to the /api/jedis route, we will be able to get the full list of Jedi as expected. However, if we try to get a Jedi, we are not allowed to retrieve the resource because we are not sending the token to the server.

Once we implement the API call in the application itself, we will see how to send the token using our request, but essentially we just need to include it using the Bearer scheme in the Authorization header.

...(The subsequent content is similar to the original text, but the sentence is replaced and sentence structure adjustment is adjusted. The length is too long, omitted here)....

The above is the detailed content of Redux Authentication: Secure Your Application with Auth0. For more information, please follow other related articles on the PHP Chinese website!