Total.js and Angular2 with Auth0 = Iron Gate of Security

Auth0 (www.auth0.com) is one of the most famous and professional systems authentication. In below article will be presented consolidation Auth0 module with the latest version Angular2 on Total.js platform. In first part we will focus on integration client side: Angular2 and Auth0, and next on start up on Total.js platform.

Assumptions and Benefits our project:

  • Main objective: integration client side: Angular2  and Auth0
  • Use Total.js, Auth0, Angular2 to run client application on total.js server

Below presented skeleton/project You can find on my GitHub repository: https://github.com/maxprog/totaljs-angular2-auth0.git

Structure of directories is following:

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

The most important:

In case of catalogs structure:

  1. /client – Angular2 directory
  2. Remaining directories – Total.js

In case of implementation Auth0 with Angular2 we have to do following steps:

1. Install 2 modules Auth0: angular2-jwt and auth0-lock

npm install angular2-jwt and auth0-lock --save

2. Define service to handle auth0 library – /client/share/service/auth.service.ts. The fetched profile with token will be stored in client browser on local storage

3. Place in index.html javascript auth0 module responsible for showing login window

<script src=”http://cdn.auth0.com/js/lock/10.2/lock.min.js”></script>

Mentioned script in action on below screen:

4. Import installed auth0 modules and add them to NgModule definition providers

5. Define AuthGuard component to protect selected router path

AuthGuard will be used in Routing by using in Routes parameters like canActivate: [AuthGuard]

Thanks to this operations every not authenticated user will not have access to protected path

6. The last remaining thing is implementation logic for links placed on website:

Protected links from non-logged users we hide by using instruction in tag < *ngIf=”auth.authenticated()” >

Main function to call auth0 login window is auth.login() (placed in auth.service.ts). Logout functionality support auth.logout() (placed in auth.service.ts)

7. All functionality related with Total.js was described in another articles:

Total.js + Auth0 = Iron Gate of Security – part 2/3

 

Total.js + Auth0 = Iron Gate of Security – part 3/3

 

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 Angular2  in /client
        npm install
        
      3. run build and copy bundled files of client Angular 2 and Auth0. Bundled files will be copied to /public directory
        npm run build && npm run deploy
        
      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.

April 2nd, 2017

  • A lot of thanks for each of your work on this website. My aunt takes pleasure in participating in investigation and it’s simple to grasp why. Many of us learn all regarding the compelling method you convey sensible things via the blog and boost contribution from others about this concept while my child is in fact studying a lot of things. Take advantage of the rest of the new year. You’re performing a splendid job..

  • Thank you so much for providing individuals with such a terrific opportunity to read in detail from here. It’s usually so beneficial and as well , packed with fun for me personally and my office mates to search your website no less than 3 times a week to see the fresh stuff you have. And of course, we are at all times amazed with your incredible concepts you give. Some two ideas on this page are particularly the very best I have ever had..

  • After study just a few of the blog posts in your web site now, and I really like your approach of blogging. I bookmarked it to my bookmark website record and will likely be checking back soon. Pls try my website online as well and let me know what you think..

  • Leave a Reply

    Your email address will not be published. Required fields are marked *