Sunday, 12 February, 2017 UTC
Summary
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:
- Expanded structure directories of React.js and Auth0:
- Expanded structure directories of Total.js:
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.
Create a .env file in the the /
client project and add client id and Auth0 domain values to REACT_APP_AUTH0_CLIENT_ID and REACT_APP_AUTH0_DOMAIN respectively.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
npm install - Install the dependencies for React.js in /client
npm install - 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
npm start - You should see information that react and total.js was started
Visit http://localhost:8000 and click on Log In link or profile. You should see Auth0 popup window Auth0 integrated with Auth0 system.