Appmixer
Search…
Managing Authentication
This little tutorial will show you how to manage Appmixer SDK authentication.

Introduction

Appmixer SDK provides a simple way to set an access token on the instance, so it can make authenticated requests to the API. Nevertheless, it is up to the implementing application to manage token persistence. The reason for this is to allow the implementing application to store the token wherever it wants - e.g. localStorage, sessionStorage, database, Amazon S3, etc.
Storing the token somewhere allows to reuse the token, instead of requesting a new one each time the Appmixer SDK instance is re-created, for example when the user reloads the page.

Token management example

For this example, we are going to use browser's sessionStorage to retrieve and store the access token. So let's imagine we have a simple login form with username and password fields and a submit button. We write a login function that is called when the login form is submitted:
1
// Method called when a login form is submitted
2
function login(username, password) {
3
// Request a token from the engine
4
appmixer.api.authenticate(username, password)
5
.then((data) => {
6
// We retrieve the token from the response data object
7
const { token } = data;
8
9
// We set the token onto our SDK instance
10
appmixer.set('accessToken', token);
11
12
// Now this is where we persist our token using the
13
// sessionStorage. Remember that you can store the token
14
// pretty much on any storage system you can access from
15
// your application
16
sessionStorage.setItem('myAccessToken', token);
17
18
// After this you can redirect to home page
19
})
20
.catch((err) => {
21
console.log('Something wrong happened');
22
console.log(err);
23
});
24
}
Copied!
As you can see, we use Appmixer API authenticate method to retrieve a token from the engine. After we get it, we do two things:
  • Set it on our SDK instance
  • Store it on browser's sessionStorage under the key myAccessToken. This will allow us to persist the token even after the SDK instance is destroyed.
Now in order to use our stored token, every time our application loads, we need to check if there is a stored token. Depending on if there is a token or not, our application would behave differently:
  • If there isn't a stored token, we redirect to our login form
  • If there's a stored token, we set it on our SDK instance and redirect to our home page
So to achieve this, your application would need to call a function like this every time it loads:
1
// Appmixer is initialized somewhere when your application starts
2
const appmixer = new Appmixer();
3
4
function initialize() {
5
6
// We look into sessionStorage using the same key we use for
7
// storing the token when we authenticate into our application
8
const token = sessionStorage.getItem('myAccessToken');
9
10
if (token){
11
// If token exists, we set it on the Appmixer instance
12
// and redirect to home page
13
appmixer.set('accessToken', token);
14
15
// Redirect to home page
16
} else {
17
// There is no token stored, redirect to login page
18
}
19
}
Copied!
This way, the cycle is closed and you are able to persist and reuse your access tokens after your SDK instances are lost.

Check token expiration

Appmixer uses expirable JWT tokens to authenticate their users. For this reason it is desirable to not only check if we have a stored token, but also if this token is still valid.
For this purpose, we need to decode the token in order to get the expiration date. You can use the jsonwebtoken library to decode JWT tokens and be able to access the information within. So now we expand the last example by also checking if the JWT token is valid as well:
1
// Appmixer is initialized somewhere when your application starts
2
const appmixer = new Appmixer();
3
4
// This is a helper function that returns if a token is expired or not
5
function tokenIsExpired(token){
6
// We assume jsonwebtoken has been imported/exposed somewhere
7
const decoded = jsonwebtoken.decode(token);
8
9
if (decoded && decoded.exp) {
10
const timeInSeconds = Math.ceil(new Date().getTime() / 1000);
11
return decoded.exp < timeInSeconds;
12
}
13
return true;
14
}
15
16
function initialize() {
17
18
// We look into sessionStorage using the same key we use for
19
// storing the token when we authenticate into our application
20
const token = sessionStorage.getItem('myAccessToken');
21
22
// Now in addition to checking if there's a stored token
23
// we also check if is still valid
24
if (token && !tokenIsExpired(token)){
25
// If token exists, we set it on the Appmixer instance
26
// and redirect to home page
27
appmixer.set('accessToken', token);
28
29
// Redirect to home page
30
} else {
31
// There is no token stored, redirect to login page
32
}
33
}
Copied!
Appmixer SDK also provides a convenient way to handle invalid tokens, specifically allowing to execute custom code whenever an invalid token is used in a request made by the SDK. The SDK instance exposes onInvalidAccessToken(callbackFn) method, which receives a single function argument which is going to be called whenever the SDK is being used with an invalid token. Usually inside this callback you normally would provide the users a way to re-authenticate themselves, like redirecting them to a login form. Now we show how to use this method to achieve the same result as the previous example:
1
// Appmixer is initialized somewhere when your application starts
2
const appmixer = new Appmixer();
3
4
appmixer.onInvalidAccessToken(function(){
5
// Inside this function we could redirect users to the login form,
6
// or if you have what's neccessary you can generate new token by
7
// calling the proper function (appmixer.api.authenticate) which
8
// will return new fresh token.
9
});
10
11
function initialize() {
12
13
// We look into sessionStorage using the same key we use for
14
// storing the token when we authenticate into our application
15
const token = sessionStorage.getItem('myAccessToken');
16
17
// Now in addition to checking if there's a stored token
18
// we also check if is still valid
19
if (token){
20
// If token exists, we set it on the Appmixer instance
21
// and redirect to home page
22
appmixer.set('accessToken', token);
23
24
// Redirect to home page
25
} else {
26
// There is no token stored, redirect to login page
27
}
28
}
Copied!

Multi-user management

In order to work with multiple SDK users at the same time, you can simply use more than one SDK instance at the time:
1
const instance1 = new Appmixer(...);
2
const instance2 = new Appmixer(...);
3
4
const persistedToken1 = sessionStorage.getItem('token1');
5
const persistedToken2 = sessionStorage.getItem('token2');
6
7
instance1.set('accessToken', persistedToken1);
8
instance2.set('accessToken', persistedToken2);
Copied!
Last modified 1yr ago