auth-client

Authentication client for Netuno Platform services integrations using JWT (JSON Web Token).

See more about the Netuno Platform: open source, low-code, and polyglot.

This module makes is easy to support JWT in web applications.

After the login is made, the Authorization header will be automatically loaded.

With this any _service(...) call will automatically be authenticated.

Install

npm i -S @netuno/auth-client

Import

import _auth from '@netuno/auth-client';

Remember

After the login any _service(...) call will automatically be authenticated.

Config

Defines the main events:

_auth.config({
    onLogin: () => { alert("Logged in!"); },
    onLogout: () => { alert("Logged out!"); }
});

Default config parameters:

{
    prefix: '',
    url: '_auth',
    autoLoadServiceHeaders: true,
    autoRefreshToken: true,
    login: {
        usernameKey: 'username',
        passwordKey: 'password'
    },
    refreshToken: {
        parameterKey: 'refresh_token'
    },
    token: {
        storageKey: '_auth_token',
        resultKey: 'result',
        expiresInKey: 'expires_in',
        accessTokenKey: 'access_token',
        refreshTokenKey: 'refresh_token',
        tokenTypeKey: 'token_type',
        expiresInDefault: null,
        tokenTypeDefault: null
    },
    onLogin: () => {},
    onLogout: () => {}
}

Usage

This module depends of @netuno/service-client.

So the prefix url should be defined in the _service.config({ ... }), like:

_service.config({
    prefix: 'http://localhost:9000/services/'
});

In the global configuration (_auth.config({...})) or with the object passed to the service function (_auth.login({...})), you can set or override any configuration parameters.

The token is stored in the sessionStorage with the configuration key defined in token.storageKey.

Login

With success the event _auth.config({ onLogin: ()=> ... }) will be invoked.

    _auth.login({
        username: "admin",
        password: "secret",
        success: ()=> {
            alert("Success.");
        },
        fail: ()=> {
            alert("Fail.");
        }
    });

With ReactJS:

    const inputUsername = useRef(null);
    const inputPassword = useRef(null);
    const handleLogin = () => {
        const username = inputUsername.current.value;
        const password = inputPassword.current.value;
        _auth.login({
            username,
            password,
            success: ()=> {
                alert("Success.");
            },
            fail: ()=> {
                alert("Fail.");
            }
        });
    };
    
    return (
        <div className="App">
            <h4>Login</h4>
            <p><input ref={inputUsername} type="text" placeholder="Username" /></p>
            <p><input ref={inputPassword} type="password" placeholder="Password" /></p>
            <button type="button" onClick={handleLogin}>Login</button>
        </div>
    );

Logout

To logout just call this:

    _auth.logout();

The event _auth.config({ onLogout: ()=> ... }) will be invoked.

Logged Check

if (_auth.isLogged()) {
    alert('Is logged!');
}

Refresh Token

The refresh token is made automatically.

But is possible to make it manually:

    _auth.refreshToken({
        success: ()=> {
            alert("Success.");
        },
        fail: ()=> {
            alert("Fail.");
        }
    });