auth

This package offers 2 different parts, a Auth (React Functional Component) and a Client (Util Class). The Auth component places a authentication wrapper around the whole app which exposes a user state to all components of the app via the Context api. The Client could be used to wrapper you API call and return to you an object or throw an error if there is any.

Installation#

npm install @iqmetrix/auth

Props#

Auth#

NameTypeRequiredDefault
childrenReactNodeyesundefined

Default state#

const state = {
isLoading: false,
isLoaded: false,
hasLoggedIn: false,
user: null,
env: null,
envSuffix: null,
error: "",
};

Interfaces#

// The AuthState exposes the default state of the Auth component
interface AuthState {
isLoading: boolean;
isLoaded: boolean;
hasLoggedIn: boolean;
user: null | IUserModel; // Logged in user
env: null | string; // Current environment
envSuffix: null | string; // Current environment suffix
error: string;
}
// IUserModel with user information is defines as follows
interface IUserModel {
id: number | string;
parentEntityId: number;
firstName: string | null;
lastName: string | null;
userName: string;
isExternal: boolean;
picture: IUserAsset | null;
email: string | null;
}

Examples#

Auth#

You just need to wrap your component or entire application with the <Auth> tag to use the information from this component in any place through the context API.

// To use the component, wrap you app on it
import { Auth } from "@iqmetrix/auth";
<Auth>
<App />
</Auth>;

Following you can see an example of how to use the context information in your application. Remember that the context API is a react hook and you can use it only on function components.

// In your app, you can consume the context
import { AuthContext } from "@iqmetrix/auth";
const { user, env, envSuffix } = useContext(AuthContext);

Auth Client#

This client wraps API requests with the user's auth token and transforms the response. If the response is a JSON string, it will return the object generated from the JSON.

Wrapping your API Requests#

// In your app, you can wrap any api call, and it will return a Promise
import { Client } from "@iqmetrix/auth";
const endpoint = `http://apiint.iqmetrix.net/mycall/entity(21090)/call`;
Client.fetch(endpoint)
.then(r => {
// do something with the response
})
.catch(e => {
// do something with the error
});
// You can also mock your call or add additional information
import { Client } from '@iqmetrix/auth';
const endpoint = `http://apiint.iqmetrix.net/mycall/entity(21090)/call`;
const options = {
headers: {...},
mockDataResponse: {...},
method: 'PUT'
}
Client.fetch(endpoint, options).then(r => {
// do something with the response
}).catch(e => {
// do something with the error
})

Usage#

// It also works with a request object
import { AuthContext, Client } from '@iqmetrix/auth';
const { user, envSuffix } = useContext(AuthContext);
const request = new Request(`http://api${envSuffix}.iqmetrix.net/mycall/entity(${user.parentEntityId})/call`, { headers: {...}, method: 'POST' }
Client.fetch(request).then(r => {
console.log(r);
})

Error handling#

The client transforms errors, converting them to a FailedAuthClientResponseError object.

The error seen in .catch(e) is the message from the server, which can also be accessed using e.message. However, some APIs have more information in the response body. You can check the entire response from the server using e.response, a Response object.

// if you want to see the error message
Client.fecth(url).catch(e => {
console.log(e.message);
});
// if you want to see more details about the response
Client.fecth(url).catch(e => {
console.log(e.response);
});

Sources#

Last updated on by Paulo Andrade