Auth Setting

Jumbo has brought you a ready-to-use process to implement the authentication to reduce your work to do the basic things.

In order to implement the authentication you need to define an authSetting property inside the src/app/config/main.js as follows:

import jwtAuthAxios from "../services/auth/jwtAuth";

const config = {

    //.... other config options

    authSetting: {
        axiosObject: jwtAuthAxios,
        fallbackPath: "/user/login",
        getAuthUserService: authServices.getCurrentUser,
        redirectNotAuthenticatedPath: "/dashboards/misc"
    },

    //... more config options

};

Now, the above authSetting has four inputs from you:

1. axiosObject (an axios object)

2. fallbackPath (a route string)

3. getAuthUserService (a promise based service which gets the authenticated user detail)

4. redirectNotAuthenticatedPath (a route string)

Let's understand these four in detail one-by-one.

axiosObject

You can pass an axios object as a value to this key and make sure that this axios object should have set the base url as your authentication api server's url. Here is an example:

import jwtAxios from "axios";

const jwtAuthAxios = jwtAxios.create({
    baseURL: "http://localhost:5000/api/",
    headers: {
        'Content-Type': 'application/json'
    }
});

export default jwtAuthAxios;

fallbackPath

This key accepts a route string and ensures that if an anonymous user is trying to access an authenticated route then where to redirect them.

Most of the time you will be setting the login page route here.

getAuthUserService

This getAuthUserService key accepts a promise based service function which will be responsible to return the authenticated user's detail. Here is an example of the getCurrentUser service we are using in Jumbo which access the http://localhost:5000/auth service to get the authenticated user detail:

authServices.getCurrentUser = async () => {
    try{
        const response = await jwtAuthAxios.get("/auth");
        return response.data
    } catch (e) {
        return {
            hasError: true,
            error: "Some error received from the api",
        };
    }
};

Make sure to handle any error received from server api call with try and catch statements and if you want to read those errors you need to set hasError to true and inside the error you can pass whatever error you want to show in the console.

If you doesn't pass hasError to true, then whatever object/data you return from this function will be considered a success and will always be set to the authUser.

If the API call is successful then whatever data you return from this service will be stored as the authUser information. So, make sure that you return only that information which you want to store in the authUser object to later access throughout the app.

redirectNotAuthenticatedPath

This is the last key you need to set a value for and the value must be a route path. This path will be used to redirect the authenticated user if s/he tries to access a route which is defined in the routesForNotAuthenticatedOnly inside the src/app/routes/index.js

So, once you set all of the above four setting, now you can use the <JumboAuthProvider /> and place it in your /src/App.js file just above the <AppLayout> like below:

....
<JumboAuthProvider>
    <AppLayout>
      ....
    </AppLayout>
</JumboAuthProvider

That is all you need to do to integrate the Authentication feature to your App.