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

/**
* 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

// 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

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: get it from keycloak
• appid: <client_id> get if from keycloak
• trusted_issuer: https:///auth/realms/

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