Checking UX App Permissions by using React components?

Admin

For the following YouTube video about UX "triplat-auth-check", someone asked a question:

Is there any way to check app permissions using the Tririga React components?

IBM TRIRIGA UX Framework - 3.5.3 Authentication Check
https://www.youtube.com/watch?v=v6NiC7_jiKc&lc=UgxM1LxMtLq5ydqGteh4AaABAg

Admin

Hi @yong and @acmatson , can you take a look at Noah's question. When I looked at our React library (see link below), I found the TriAuth folder with the TriAuthChecker class. Is this what Noah needs? Let him know (by replying here) if he needs anything else. Thank you!

TRIRIGA React Components v1.1.2
https://tririga.github.io/tririga-react-components

nrichard1

@Admin thank you for taking a look at my comment. For further detail on what I would like to do...I am currently building a React app which will act as a portal containing tiles that link to apps that we have built. I am utilizing the TRIRIGA React Components and Carbon Components. We would like this application to act similarly to the out of the box perceptive app called "triview-workplace-services" which looks at user security permissions to render tiles accordingly. In Polymer there is the triplat-auth-check component where you can specify the app name to check user permissions against. However, I haven't been able to find the correct way to implement the TRIRIGA React component "TriAuthChecker" to check user permissions for other apps besides the current app, then render the appropriate tiles where the current user "hasMinimumAppPermission".

yong

@Admin and nrichard1 nrichard1, to check app permission please use getAuthCheckerForCurrentApp method. getAuthCheckerForCurrentApp returns a TriAuthChecker instance.
Example,
import {
getAuthCheckerForCurrentApp,
} from "@tririga/tririga-react-components";

const authChecker = await getAuthCheckerForCurrentApp();
if (authChecker.hasMinimumAppPermission()) {
renderApp(currentUser, appConfig);
} else {
renderUnauthorizedAccess(currentUser);
}

I would recommend using create-react-app @tririga/cra-template to build a tririga react app. The template has configuration, login, and permission logic handled.

nrichard1

yong I used the template and I have no issue checking app permission for the app I have built. I just want to know how to check permissions for other apps or models. For example in polymer there is this

<triplat-auth-check app-name="roomReservation"
auth="{{auth}}"
on-check-complete="_doSomething">
</triplat-auth-check>

How can I implement something like this in React?

yong

Currently the tririga-react-components does not handle checking permission for other apps. The way, it works right now is only check the permission of the given REACT_APP_EXPOSED_NAME value in .env.development.local. For example, if REACT_APP_EXPOSED_NAM=roomReservation, only roomReservation app get checked.

nrichard1

yong ok thanks for clarifying, it would be great to have that option in React soon!

nrichard1

This function actually does what I need it to

const response = await fetch('[(TRIRIGA URL)/p/auth?appName=roomReservation');
const data = await response.json();
console.log('roomReservation permission is: ', data.canRead);