future-grid/fgp-auth

fgp-auth bases on keycloak & auth0 libs, uses typescript as dev language. It is the easy way to integrate token based auth.

Getting Started

install package via npm

npm install --save @future-grid/fgp-auth

keycloak

Add keycloak js file into "index.html". This js comes from keycloak http server.

http(s)://<domain>/auth/js/keycloak.js

Installing(React)

A step by step series of examples that tell you how to get a fgp-auth working with keycloak and react ui project

create keycloak config json and import it into App.js(the root component)

{
        "realm": "fgp-ue",  // realm name in cloak
        "auth-server-url": "http://10.153.154.40:32405/auth",  // auth server. replace with keycloak dns
        "ssl-required": "external",
        "redirect_uri": 'http://localhost:3000',       // redirect url. replace with ui dns
        "resource": "ue-ui",
        "credentials": {
          "secret": "35570e3c-54d0-44d1-936b-ea681bc4f5a9" // secret in cloak 
        },
        "confidential-port": 0,
        "clientId": "ue-ui"   // client id in keycloak
      }

then import it into root component(App.js)

import AuthConfig from './configs/authConfig.json';

create success and failed callback `javascript /**

after login successful fgp-auth will call this method to send token back. **/ const successCallback = (token, operator) => {

  localStorage.setItem("accessToken", token);
  operator.getUserInfo().success((info) => {
    this.setState({
      auth: {
        "accessToken": token,
        "op": operator,
        "user": info
      }
    });

  }).error(() => {
    // redirect to login page
    this.state.auth.op.logout();
  });

  this.setState({
      auth: true
  })
};

/**

error then logout **/ const errorCallback = () => {

  // when error happened, that's mean auth failed!
  this.state.auth.op.logout();
};

create auth operator instancer `javascript // AuthConfig imported from a json file or just replace this var with a json object const auth = new AuthFactory(Auths.KC, new AuthProps('fgp-auth-kc', AuthConfig, callbackFnc, errorCallback))

// call getAuth() send auth request to keycloak server

auth.getAuth()


After login successful keycloak will send a token back then you need to add authorization header of all your ajax requests.  
ex. interceptor
```javascript
componentWillMount(){
        axios.interceptors.request.use(
            config => {
              if (!config.headers.Authorization) {
                const token = localStorage.getItem("accessToken");
                if (token) {
                  config.headers.Authorization = `Bearer ${token}`;
                }
              }
              return config;
            },
            error => Promise.reject(error)
          );
    }

Secured API (optional)

security fgp api server with parameters

auth_type: open_id
secret: <rsa public key> get it from keycloak
appid: <client_id> get if from keycloak
trusted_issuer: <url of keycloak with realm> https://<domain>/auth/realms/<realm>

Built With

Webpack - Static module bundler for modern JavaScript applications
Keycloak - Dependency lib
Typescript - Coding language

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

Eric Wang - Initial work & Development

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Package detail