Total.js and React with Auth0 – part 1/3

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:

  1. Expanded structure directories of React.js and Auth0:
  2. Expanded structure directories of Total.js:

The most important:

In case of catalogs structure:

  1. /client – React.js directory
  2. 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:

  1. Install the total.js  in project directory
    npm install 
    
  2. Install the dependencies for React.js  in /client
    npm install
    
  3. run webpack for React.js and Auth0. Bundled files will be copied to /public directory
    npm run webpack
    
  4. Start the server from the root directory of project
    npm start
    
  5. 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.

 

February 12th, 2017

  • Greetings fr᧐m Caⅼifornia! I’m bⲟred to death at work so
    I decided to check out your website on my iрhone
    during lunch breaҝ. I really like the info you provide
    here and can’t wait to take a look when I get home. I’m amazeԁ at
    how fast your blog loadeԀ on my mobile .. I’m not even usіng WIFI, ϳust
    3G .. Anyways, awesome sitе!.

  • Can I simply say what a aid to search out somebody who truly is aware of what theyre speaking about on the internet. You undoubtedly know how one can convey an issue to mild and make it important. Extra people need to read this and perceive this aspect of the story. I cant believe youre no more popular since you undoubtedly have the gift..

  • An impressive share, I simply given this onto a colleague who was doing a little bit analysis on this. And he the truth is purchased me breakfast because I discovered it for him.. smile. So let me reword that: Thnx for the deal with! But yeah Thnkx for spending the time to debate this, I really feel strongly about it and love studying more on this topic. If attainable, as you turn out to be expertise, would you thoughts updating your weblog with extra details? It’s highly helpful for me. Large thumb up for this blog submit!.