implemented 4 flow of authentication

.eslintrc.js

@@ -1,36 +1,22 @@
 module.exports = {
-  "env": {
-    "browser": true,
-    "es6": true,
-    "node": true,
+  env: {
+    browser: true,
+    es6: true,
+    node: true,
   },
-  "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:prettier/recommended",
-  ],
-  "parser": "babel-eslint",
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true,
+  extends: ['eslint:recommended', 'plugin:react/recommended'],
+  parser: 'babel-eslint',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
     },
-    "ecmaVersion": 7,
-    "sourceType": "module"
+    ecmaVersion: 7,
+    sourceType: 'module',
   },
-  "plugins": [
-    "react"
-  ], 
-  "rules": {
-    "linebreak-style": [
-      "error",
-      "unix"
-    ],
-    "prettier/prettier": [
-      "error",
-      {
-        "singleQuote": true,
-        "trailingComma": "es5",
-      }
-    ]
-  }
-};
+  plugins: ['react', 'react-hooks'],
+  rules: {
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn',
+    'linebreak-style': ['error', 'unix'],
+  },
+};

.gitignore

@@ -63,6 +63,8 @@ typings/
 src/bar/00_meta/00_manifest.json
 src/bar/00_meta/90_rootprops.xml
 src/assets/launch.json
+src/app/frontend/Constants/AppConstant.js
+src/app/engine/auth/acc_info.js
 
 dist
 build

.prettierrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  trailingComma: "es5",
+  tabWidth: 2,
+  semi: true,
+  singleQuote: true,
+};

README.md

@@ -2,14 +2,14 @@
 
 This repository contains a template application of Personium and deployment tools.
 
-| stuff | libraries |
-| :-- | :-- |
-| Personium template app | React.js |
+| stuff                         | libraries    |
+| :---------------------------- | :----------- |
+| Personium template app        | React.js     |
 | Personium app deployment tool | gulp, webdav |
 
 You can make `Personium App` ( not `Apps that uses Personium` ) by extending these codes.
 
-["Personium App" and "Apps that uses Personium"](https://personium.io/docs/en/app-developer/)
+["Personium App" and "Apps that uses Personium"](https://personium.io/docs/en/app-developer/Personium_Apps/)
 
 ## Preaparation for deployment
 
@@ -22,15 +22,14 @@ Rename from `config.example.js` to `config.js` and modify it as below.
 ```js
 module.exports = {
   personium: {
-    CELL_NAME: '<CELL_NAME>',             // A name of Application Cell
-    CELL_FQDN: '<CELL_FQDN>',             // FQDN of Application Cell
-    CELL_ADMIN: '<ADMIN_USERNAME>',       // Username of user with admin role.
-    CELL_ADMIN_PASS: '<ADMIN_PASSWORD>',  // Password of user with admin role.
-  // ...
-  }
+    CELL_NAME: "<CELL_NAME>", // A name of Application Cell
+    CELL_FQDN: "<CELL_FQDN>", // FQDN of Application Cell
+    // ...
+  },
 };
 ```
 
+- `<CELL_NAME>`, the application Cell's name ( like `app-template` )
 - `<CELL_FQDN>` reveals application cell's FQDN ( like `app-template.demo.personium.io` )
 
 #### Config: Application Cell
@@ -47,6 +46,19 @@ Rename from `src/assets/launch.example.json` to `src/assets/launch.json` and mod
 }
 ```
 
+#### Config: Authentication Setting
+
+Rename from `src/app/engine/auth/acc_info.example.js` to `src/app/engine/auth/acc_info.js` and modify it as below.
+
+```javascript
+  var appCellUrl = '<CELL_URL>'; // for example: https://stg-demo.personium.io/appCellName/ or https://appCellName.stg-demo.personium.io/
+  var appUserId = '***';
+  var appUserPass = '***';
+```
+
+- `<CELL_URL>` reveals URL of App Cell ( scheme + `<CELL_FQDN>` + `/` ).
+- `appUserId` and `appUserPass` are no longer used.
+
 #### Config: Box in User Cell I
 
 Rename from `src/bar/00_meta/00_manifest.example.json` to `src/bar/00_meta/00_manifest.json` and modify it as below.
@@ -67,8 +79,29 @@ Rename from `src/bar/00_meta/00_manifest.example.json` to `src/bar/00_meta/00_ma
 
 Rename from `src/bar/00_meta/90_rootprops.example.xml` to `src/bar/00_meta/90_rootprops.xml`. ( without modifing )
 
+#### Config: Application Settings
+
+Rename the file from `src/app/frontend/Constants/AppConstant.example.js` to `src/app/frontend/Constants/AppConstant.js` and modify its contents as below.
+
+```js
+export const AppConstant = {
+  cellUrl: '<CELL_URL>',
+  installBoxName: '<BOX_NAME>',
+  barFileUrl: '<BAR_FILE_URL>',
+};
+```
+
+- `<BOX_NAME>`, the default target Box name in user Cell. It is often set same as `<CELL_NAME>` typically.
+- `<BAR_FILE_URL>` , the URL of the `bar` file to be built in next step. It is often placed somewhere public in App Cell.
+
 ### Build
 
+#### Install Node.js dependencies
+
+```bash
+npm install
+```
+
 #### Building `bar` file
 
 Build `bar` file with below command.
@@ -91,6 +124,14 @@ npm run build
 
 This command build application into `build` folder.
 
+### Develop and Debug
+
+The following command will start a localhost [webpack](https://webpack.js.org/) server on port `8080` for application development.
+
+```bash
+npm run debug
+```
+
 ### Deploy
 
 #### Deploying built stuff
@@ -101,12 +142,40 @@ Upload built stuff ( Apps and static-files ) with below command.
 npm run deploy
 ```
 
+This command refers credentials in env value. Make sure below env value are set before try this code.
+
+| ValueName        | Description                                     |
+| :--------------- | :---------------------------------------------- |
+| `PERSONIUM_USER` | Username of admin user in your application cell |
+| `PERSONIUM_PASS` | Password of admin user in your application cell |
+
+You can run this command with setting env value like below command.
+
+In Linux,
+
+```bash
+PERSONIUM_USER=*** PERSONIUM_PASS=*** npm run deploy
+```
+
+In Windows,
+
+```cmd
+set PERSONIUM_USER=*** && set PERSONIUM_PASS=*** && npm run deploy
+```
+
 #### Configure ACL
 
-Configurign ACL is conducted manually.
+Configurign ACL is conducted manually in the [Unit Manager](https://github.com/personium/app-uc-unit-manager) administration page.
 
-1. Set `exec` to `all(anyone)` in `front` service.
+1. Set `exec` to `all(anyone)` in `front` and `auth` service.
 1. Set `read` to `all(anyone)` in `public` folder.
+1. Set `read` to `all(anyone)` in `locales` folder.
+
+#### Create Application authentication account
+
+`tokenAcc` account is used for application authentication.
+
+Create an account named `tokenAcc` and set password as you like.
 
 #### Make application specs public
 
@@ -128,13 +197,10 @@ In Home App of user who installs `bar` file above can launch this application by
 The entrypoint of this application is `src/app/frontend/index.js`.
 
 ```es6
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React from "react";
+import ReactDOM from "react-dom";
 
-ReactDOM.render(
-  <h1>Hello React!</h1>,
-  document.getElementById('root')
-);
+ReactDOM.render(<h1>Hello React!</h1>, document.getElementById("root"));
 ```
 
 So, you can implement SPA application with React.js by modifing this codes.

config.example.js

@@ -2,12 +2,15 @@ module.exports = {
   personium: {
     CELL_NAME: '<CELL_NAME>',
     CELL_FQDN: '<CELL_FQDN>',
-    CELL_ADMIN: '<ADMIN_USERNAME>',
-    CELL_ADMIN_PASS: '<ADMIN_PASSWORD>',
+    CELL_ADMIN: process.env.PERSONIUM_USER,
+    CELL_ADMIN_PASS: process.env.PERSONIUM_PASS,
     DIRECTORY_MAPPING: [
       {
-        filePattern: ['src/app/engine/**/*', '!src/app/engine/**/*.example.*'],
-        srcDir: 'src/app/engine',
+        filePattern: [
+          'src/app/engine/front/*',
+          '!src/app/engine/front/*.example.*',
+        ],
+        srcDir: 'src/app/engine/front',
         dstDir: 'front',
         resourceType: 'service',
         meta: {
@@ -18,6 +21,24 @@ module.exports = {
           },
         },
       },
+      {
+        filePattern: [
+          'src/app/engine/auth/*',
+          '!src/app/engine/auth/*.example.*',
+        ],
+        srcDir: 'src/app/engine/auth',
+        dstDir: 'auth',
+        resourceType: 'service',
+        meta: {
+          language: 'JavaScript',
+          subject: 'tokenAcc',
+          endPoints: {
+            start_oauth2: 'start_oauth2.js',
+            receive_redirect: 'receive_redirect.js',
+            refreshProtectedBoxAccessToken: 'refreshProtectedBoxAccessToken.js',
+          },
+        },
+      },
       {
         filePattern: [
           'src/app/public',