Auth0 (www.auth0.com) is one of the most famous and professional systems authentication. In below article will be presented consolidation Auth0 module with React on Total.js platform. In first part we will focus on integration client side: React and Auth0, and start up on Total.js platform. Next article will be regarding integration Auth0 with Total.js in authorisation process.
Assumptions and Benefits our project:
- Main objective: integration client side: React and Auth0
- Use Total.js, Auth0, React, Babel and Webpack to run client application on total.js server
Below presented skeleton/project You can find on my GitHub repository: https://github.com/maxprog/totaljs-react-auth0
Structure of directories is following:
The most important:
In case of catalogs structure:
- /client – React.js directory
- Remaining directories – Total.js
In case of configuration client side:
Grab your Client id and Auth0 domain from the Auth0 dashboard.
This variables will be used in very important file webpack config called as webpack.config.js responsible for create bundle from all files located in /client directory (React + Auth0). Webpack will copied .env defined variables to bundled files.
The last operation it is installation process all necessary modules:
- Install the total.js in project directory
- Install the dependencies for React.js in /client
- run webpack for React.js and Auth0. Bundled files will be copied to /public directory
npm run webpack
- Start the server from the root directory of project
- You should see information that react and total.js was started