React Authentication Flow

Archived because Auth0 is in Strapi from v3.4.5: https://forum.strapi.io/t/new-release-strapi-v3-4-5/2446

Basic React application that shows how the authenticate users using JSON Web Tokens.

This example add Auth0 authentication with Strapi. For more information, please take a look at ./strapi-auth0-backend/extensions/users-permissions.

Setup

1 — Clone the repository.

git clone git@github.com:heziode/strapi-auth0-example.git

2 — Go to the login-react example folder and install the front-end app dependencies.

cd login-react/react-login-front-end-app
npm install

3 — Start the front-end app server.

npm start

Open the app in your browser

4 - Start the Strapi API:

cd strapi-auth0-backend
npm start

5 - Create the Admin user by registering your first user.

6 - Enable Auth0 provider

7 - (optional) Enable Discord provider

8 - (optional) Enable Facebook provider

9 - (optional) Enable GitHub provider

10 - (optional) Enable Google provider

11 - (optional) Enable Microsoft provider

12 - (optional) Enable Twitch provider

13 - (optional) Enable Twitter provider

14 - (optional) Enable Instagram provider

15 - (optional) Enable VK provider

Note you may see the Redirect URL to add in your provider's configuration is dynamic so make sure to enter the right path in your provider's app configurations.

Front-end App Architecture

We use the React boilerplate architecture to implement the authentication flow.

Routing

We have 3 containers associated with routes :

• AuthPage accessible responsible for the authentication flow.
• ConnectPage in charge of sending a request to the backend to retrieve the user's jwtToken when authenticating with a custom provider.
• HomePage which is accessible without being logged in.
• SecurePage that is accessible only if the user is logged in.
• NotFoundPage the name is explicit.

Check out the routing

Protecting a route

In the example, only logged in users can access the SecurePage container. To do so we have a React Higher Order Component ProtectedRoute that checks if the user is logged in before accessing the route and redirects him to the AuthPage container if he is not.

With this HoC it's really easy to prevent a user from accessing a protected route for example:

In your route declaration ./containers/App/index.js

import React from 'react';
import { Switch, Route } from 'react-router-dom';

// HoC that blocks the navigation if the user is not logged in
import ProtectedRoute from 'containers/ProtectedRoute';
import FooPage from 'containers/FooPage';

export default function App() {
  return (
    <Switch>
      <ProtectedRoute exact path="/foo" component={FooPage} />
    </Switch>
  );
}