SAS Authentication for ReactJS based applications

[#1]

In my series around extracting SAS data from a web application, you can discover the different techniques to read data from CAS, SAS Compute Server, SAS Viya Jobs and SAS Micro Analytic Services. When building the application, I briefly describe how you can authenticate from the external web application to access the SAS endpoints.

In this article, the focus is on one specific authentication mechanism: authorization code flow.

Authentication options

SAS Viya provides authentication through the SAS Logon Manager. Knowing that SAS Logon Manager uses OAuth policy to enforce the access token to allow access to protected resources. As soon as you are accessing SAS REST APIs, you need to be authenticated and therefore use the OAuth2 features of the SAS Logon Manager. You have different options to authenticate using SAS Logon Manager:

• Authorization Code Flow
• Resource-Owner Password Credentials
• Client Credentials

The web contains a lot of information about the different authentication options but to summarize:

Select any image to see a larger version.
Mobile users: To view the images, select the "Full" version at the bottom of the page.

In the series about extracting data from SAS, the web application uses the Resource-Owner Password Credentials option. Using that option, your application needs to contain a form to provide user name and password and passes the information to receive an access token which can then be used for subsequent requests. The process can be depicted like this:

If you prefer to have a more secured approach, you should opt for the Authorization Code Flow technique. In that case, the process is a bit more complex but it can be depicted like this:

For the remainder of this article, I will present one technique to use the Authorization Code Flow to authenticate against SAS Logon Manager in SAS Viya 2021.1.

 

Administration tasks

When building a web application which accesses SAS REST APIs, you need to register a so called "client application". The process is documented on developer.sas.com. In SAS Viya 2021.1, even though you can define the client application manually, it is also possible define the client application using the following kind of script:

The important parameters are the

• CLIENTID for the client application name
• CLIENTPW for the client application secret
• NS for the Kubernetes namespace used for your SAS Viya deployment

An important piece of information is the redirect URI. This parameter is used by SAS Logon Manager to route back the request to the defined URL of your web application. If you specify a URL that is not listed, the SAS Logon Manager will reject the request for security reasons. In this sample code, the SAS Logon Manager will redirect the response to https://localhost:3000/callback.

A last parameter can be set when defining the client application: autoapprove. When set to false,  an extra prompt is displayed by the SAS Logon Manager to define the type of access the client application will have for the session. The web application for this article does not make use of the parameter. As a result, the SAS Logon Manager will display the authorization screen.

PS: It might be better to set autoapprove to true in real life application. Selecting the correct access level might be confusing for the end-user. Enforcing autoapprove means that the developer decides for the end-user which is most of the time a better approach.

Defining the client application is clearly a task that should be performed by an administrator. Another task for the administrator is to configure the Cross-Origin Resource Sharing (CORS). Setting properly the CORS value is important without a proper configuration, nor the developers nor the end-users will be able to access the SAS Viya environment. For more information about CORS, please refer to the specific section of the  developer.sas.com website.

Development process

As soon as your client application is defined and the CORS settings are set properly, the developers can start building the application. In our case, we will use ReactJS. Any other framework can be used or even plain JavaScript. ReactJS makes it really easy to build components. In this case, we will create a Logon component. The objective of this article is not explain how to build a complete web application. It will focus on the Logon component.

Here are the basic steps to create your ReactJS application:

1. Use create-react-app to create a new ReactJS project
2. Modify the index.html to integrate fonts and icons
3. Update the App.js file to define theme of the application

The App.js file content should look like this:

As you can see in the App.js, we defined an authentication object and this object will be used to store the authentication information like the access token, the refresh token and the user ID.

The Home page is also imported. Here is the code of the Home page which only imports a Header component.

The Header component might not be interesting. It just defines the layout of the application header and import the most important component for this article: Logon.

Now comes the interesting part: the Logon component! The Logon component has different sections:

1. The import section which imports the needed modules
2. The getCode function which retrieves the authorization code from SAS Logon Manager
3. The getToken function which gets the token from SAS Logon Manager
4. The getCurrentUserInfo which collects user information from the Identities endpoint
5. The Logon function which glues the different functions together

Let's start with the import section.

Import section

This is most probably the simplest part of the code but it brings the AuthContext which is used to store the authentication information. It also imports the Instance object which is an axios instance containing the information about the server like the baseURL. It will also be used later to pass the authentication token with every request. The Instance object looks like this:

GetCode function

While the import section was the simplest, the getCode function might be the most challenging. In order to get the code from the SAS Logon Manager, we need to open another window which will display the SAS Logon Manager to authenticate. When the SAS Logon Manager sends the code back, we should intercept the code and then close the window. Here is the code of the function:

At the beginning of the function, we are defining the window that will be display the SAS Logon Manager and we open it. As we want to use the function asynchronously, it includes a Promise. The promise is in charge of checking the search parameters in the URL of the opened window. The check occurs every 1000ms. This way when the SAS Logon Manager will return the code in the URL, we can intercept it and retrieve the code. The URL generated by SAS Logon Manager looks like this: https://localhost/callback?code=pe3vyay7LJ.

 

GetToken function

As you might guess from the function name, the getToken  function will retrieve the token information. This is done by calling the "/SASLogon/oauth/token/" endpoint. As this endpoint is a SAS REST API endpoint, we will the axios instance which is a wrapper function to call the REST APIs. This getToken function will also return a promise as we want to use it asynchronously.

 

GetCurrentUserInfo function

This function will be basically be used to retrieve user information like the email address, the user name, the authentication type, etc. It is a simple function which calls the following SAS REST API endpoint: /identities/users/@currentUser. If the user is not authenticated, it will not be possible to retrieve the information. In our case the function is just used to prove that the authentication mechanism works and that we can call SAS REST APIs to collect other information.

Logon function

The Logon function will wrap all the other functions and be responsible of displaying some content. In our case, it will display a "Logon" button when the user is not authenticated and display a button with the user name as soon as we have information about the current user. If you want, you can bind a function to the UserInfoButton to logout or to display the user information. I've decided to keep it as simple as possible for this article.

As you can see, we are using the AuthContext that was defined in the App.js file. We are also providing the connection information which includes the client id and secret which were defined when creating the client application.

The Authenticate function is basically wrapping all the functions that we created earlier.

The last piece of code contains the visual objects and the conditional display.

 

Demo

At this point, we have a working application that is capable of connecting the user to SAS Viya using the Authorization Code Flow. Using the code described above, you should have the following web application.

 

More information

If you want to get more information about developing web applications to access SAS Viya, please refer to the following links:

• Building custom apps on top of SAS Viya, by Tara St. Clair

• SAS Viya REST APIs

• Develop web applications series

The code of this application can be found here.

Find more articles from SAS Global Enablement and Learning here.