Expect everything to change...

Developing Question Application with React

With your backend API up and running, you are finally ready to start developing your React application.

With the "create-react-app" tool, you can scaffold a new React application with just one command. As such, to create your React app, open a new terminal and go to the same directory where you created the qa-api Node.js app. From there, issue the following command:

# this command was introduced on npm@5.2.0
npx create-react-app qa-react

This will make NPM download and run create-react-app in a single command, passing to it qa-react as the desired directory for your new application.

# move into the new directory
cd qa-react

# start your React app
npm start

The last command issued above will start a development server that listens on port 3000 and will open the new app in your default web browser.

After seeing your app, you can stop the server by hitting

Ctrl + c 

Configuring the React Router in Your App

React Router is a very complete solution and, in your first React app, you will touch only the tip of the iceberg. If you do want to learn more about React Router, please, head to the official documentation.

Configuring Bootstrap in Your React App

To make your React app more appealing from the User Interface (UI) point of view, you are going to configure Bootstrap on it.

Creating a Navigation Bar in Your React App

create a component called NavBar (which stands for Navigation Bar), and you will add it to your React app.

Creating a Class Component with React

create a stateful component (a class component) to fetch questions from your backend and to show it to your users. To fetch these questions, you will need the help of another library, Axios. In a few words, Axios is a promise-based HTTP client for the browser and for Node.js. Note: This component is touching a topic that was not addressed in this article, the Lifecycle of React Components. In this case, you are just using one of the extension points provided by React, the componentDidMount method.

Routing Users with React Router

import React, { Component } from 'react';
import {Route} from 'react-router-dom';
import NavBar from './NavBar/NavBar';
import Question from './Question/Question';
import Questions from './Questions/Questions';

class App extends Component {
  render() {
    return (
      

        
        
        
      
    );
  }
}

export default App;

In the new version of your App component, you are using two Route elements (provide by react-router-dom) to tell React when you want the Questions component rendered and when you want the Question component rendered.
More specifically, you are telling React that if your users navigate to / (exact path='/') you want them to see Questions and, if they navigate to /question/:questionId, you want them to see the details of a specific question.

Configuring an Auth0 Account

If you do not have one, now is a good time to sign up for a free Auth0 account. With your free account, you will have access to the following features:

• Passwordless authentication
• Lock for Web, iOS & Android
• Up to 2 social identity providers (like Twitter and Facebook)
• Unlimited Serverless Rules
• Community Support

Create Application
Set Allowed Callback URLs field

Securing your Backend API with Auth0

To secure your Node.js API with Auth0, you will have to install and configure only two libraries:

• express-jwt: A middleware that validates a JSON Web Token (JWT) and set the req.user with its attributes.
• jwks-rsa: A library to retrieve RSA public keys from a JWKS (JSON Web Key Set) endpoint.

both of them declare that they want to use checkJwt, which makes them unavailable to unauthenticated users. Second, both add a new property called author on questions and answers. These new properties receive the name (req.user.name) of the users issuing requests.

Securing your React App with Auth0

install only one library: auth0-js. This is the official library provided by Auth0 to secure SPAs like yours.

refactor your NavBar component to allow users to authenticate. So, open the NavBar.js file and replace its code

After refactoring the NavBar component, you will have to create a component to handle the callback. This componet will be responsible for 2 things:
First, it calls the handleAuthentication method to fetch the user information sent by Auth0.
Second, it redirects your users to the home page (history.replace('/')) after it finishes the handleAuthentication process. In the meantime, this component shows the following message: "Loading profile".

Adding Features to Authenticated Users

First, you will enable authenticated users to create new questions. Then, you will refactor the Question (singular) component to show a form so authenticated users can answer these questions.

Keeping Users Signed In after a Refresh

if you refresh your browser, you will notice that you will be signed out. Because you are saving you tokens in memory (as you should do) and because the memory is wiped out when you hit refresh.

Luckily, solving this problem is easy. You will have to take advantage of the Silent Authentication provided by Auth0. That is, whenever your application is loaded, it will send a silent request to Auth0 to check if the current user (actually the browser) has a valid session.

You will have to change a few configurations in your Auth0 account.
Add your url http://localhost:3000 to Allowed Web Origins, as your app is going to issue an AJAX request to Auth0.
Add your url http://localhost:3000 to Allowed Logout URLs, To enable users to end their session at Auth0, you will have to call the logout endpoint. Similarly to the authorization endpoint, the log out endpoint only redirects users to whitelisted URLs after the process.

Now update the src/Auth.js file to implement silent login when component has loaded

There are a lot of links on the original article that should be used to investigate further and delve deeper into the technologies used.

my thanks to this great blog post:
https://auth0.com/blog/react-tutorial-building-and-securing-your-first-app/