Monday, 3 April, 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 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:
- Expanded structure directories of Angular2 and Auth0:
- Expanded structure directories of Total.js:
The most important:
In case of catalogs structure:
- /client – Angular2 directory
- 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:
- Install the total.js in project directory
npm install - Install the dependencies for Angular2 in /client
npm install - 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 - 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.