How to set-up WSO2 Identity Server User Portal in an development environment

The upcoming WSO2 Identity Server (opens in a new tab) version 5.10.0 will have redesigned UIs with improved UX. The Dashboard has been deprecated and been replaced with a new User Portal. The overall appearance has also been upgraded to maintain consistency across the product.

In order to achieve the above, a centralized theming mechanism is a must. Therefore, all the front-end portals have been moved to a single mono-repo called “Identity Apps” (https://github.com/wso2/identity-apps (opens in a new tab)).

When the final version of the WSO2 Identity Server 5.10.0 is released, the user portal will be available under the following URl.

_http(s)://SERVER_HOST/t/TENANT_DOMAIN/user-portal_

If you are planning on setting up the repo in a development environment follow the steps below.

Pre-requisites

1. Install node (opens in a new tab) if you haven’t already(npm is already bundled with node).
2. Install maven (opens in a new tab) (Needed to run mvn commands).
3. A running Identity Server v 5.10. (If you want to build from the source follow the instructions listed here (opens in a new tab)).

Configuring Identity Server

Default dev origin, hostname and port set for the User Portal is https://localhost:9000. (opens in a new tab) So the following configurations will have to change accordingly if you change the port or any other configurations.

1. Allowing Cross-Origin requests to the Identity Server.

Cross-origin requests will be blocked by default as a security measure. So you have to put the following CORS filter to the following config file in the WSO2 Identity Server distribution pack.

<IS_HOME>/repository/resources/conf/templates/repository/conf/tomcat/web.xml.j2

 CORS
    com.thetransactioncompany.cors.CORSFilter
    cors.allowOrigin
        https://localhost:9000 
    cors.supportedMethods
        GET, HEAD, POST, DELETE, OPTIONS, PATCH, PUT 
    cors.exposedHeaders
        Location 
 CORS
    /*
    REQUEST
    FORWARD 

2. Add your hostname and port as a trusted FIDO2 origin.

Whitelist the dev URL in the FIDO configurations found in the following file.

<IS_HOME>/repository/resources/conf/templates/repository/conf/identity/identity.xml.j2

 {{fido.webauthn.enable}} 
    {% for origin in fido.trusted.origins %}
            {{origin}}
            {% endfor %}
            https://localhost:9000 

3. Restart the Identity Server.

4. Configure the callback URLs for the User Portal.

Log in to the management console https://SERVER_HOST/carbon (opens in a new tab)

Go to service provider listing and click on edit in User Portal portal list item.

In the edit view, expand the “Inbound Authentication Configuration” section, and further expand the “OAuth/OpenID Connect Configuration”. Click on edit under User Portal list item.

You can simple change the port to 9000 or you can add a regexp as follows.

regexp=(https://localhost:9443/user-portal/login|https://localhost:9000/user-portal/login)

Building the Identity Apps repo

You can fork the original repo or directly clone the original repo and start working on it, but I suggest you create your own fork.

git clone [https://github.com/brionmario/identity-apps](https://github.com/wso2/identity-apps)  
cd [identity-apps](https://github.com/wso2/identity-apps)  
mvn clean install or npm run build

Running the User Portal in dev mode

After the build is finished, navigate to the user portal directory and run the portal using the webpack dev server.

cd apps/user-portal  
npm start

The portal will be served from https://localhost:9000/user-portal (opens in a new tab)

Signing off… ✌️❤️