Find file History
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
assets Updated the Twitter provider admin config picture Nov 23, 2018
doc Merge branch 'master' into microsoft-example Aug 8, 2018
react-login-front-end-app update cancel submit watcher Dec 24, 2018
README.md Merge branch 'master' into microsoft-example Aug 8, 2018

README.md

React Authentication Flow

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

Setup

1 — Clone the repository.

git clone git@github.com:strapi/strapi-examples.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 - In a new terminal window start mongo to register your first user

mongod

5 - Create an API with Strapi: In a new terminal window run these commands :

npm install strapi@alpha
strapi new my-project
cd my-project && strapi start

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

7 - Enable Discord provider

8 - Enable Facebook provider

9 - Enable GitHub provider

10 - Enable Google provider

11 - Enable Microsoft provider

12 - Enable Twitch provider

13 - Enable Twitter 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>
  );
}