In the previous steps, we are using virtual host ob.lightapi.net to test the react-client for the Open Banking services. For a simple React application development, it is OK; however, if there are too many components that need to be modified and tested. By building the react application into the build folder, copy to the light-rest-config folder and restart the light-router instance, it is not efficient.
Here are the steps to get everything set up locally on a Ubuntu Linux 18.04 LTS.
Before starting any services, we need to ensure that the environment is ready.
Update/etc/hosts to add the following line so that both ob.lightapi.net and obsignin.lightapi.net will be mapped to the local IP address. You need to change this to your local IP if you want to try the tutorial on your desktop.
Add an iptables rule to allow redirect from 443 to 8443 locally as the light-router instance will be started to listen to 8443 on HTTPS. However, we want to access it with normal HTTPS port 443. For more information, please refer to this tutorial
sudo iptables -t nat -A OUTPUT -p tcp --dport 443 -o lo -j REDIRECT --to-port 8443
To start the local Consul server in docker.
docker-compose -f docker-compose-consul.yml up -d
To start the light-oauth2 instances locally and register them to the Consul.
docker-compose up -d
Open Banking Services
To start the Open Banking services and register them to the local Consul server.
docker-compose up -d
There are two different ways to start the light-router instance: standalone and docker. I would prefer to start it in standalone mode in an IDE so that I can debug it while working on the UI. If you are just a UI developer, start it with docker-compose will be the best.
docker-compose up -d
To start the light-router instance in IDE with debug configuration files, please refer to the debug tutorial.
To support requests from https://localhost:3000, we need to make the following modifications in the configuration.
# This handler is generic request handler for the OAuth 2.0 provider authorization code redirect.
# It receives the auth code and goes to the OAuth 2.0 provider to get the subject token. The jwt
# token is then sent to the browser with two cookies with splitting header/payload and signature.
# Another options is to keep the jwt in session and return sessionId to the browser. In either
# case, the csrf token will be send with a separate cookie.
# Indicate if the StatelessAuthHandler is enabled or not
# Once Authorization is done, which path the UI is redirected.
# An optional redirect uri if the user deny or cancel the authorization on the Consent page. Default to redirectUri if missing.
# Request path for the authorization code handling.
# Request path for the deny authorization handling to remove HttpOnly access-token and other cookies
# Cookie domain
# Cookie path
# Login uri, redirect to it once session is expired
# Cookie secured
Both redirectUri and denyUri are https://localhost:3000, and the cookie domain is localhost.
# the following section defines uri and parameters for authorization code grant type
# token endpoint for authorization code grant
# client_id for authorization code grant flow. client_secret is in secret.yml
# client_secret for the authorization code flow. For 2.0.x the secret can be set here.
# the web server uri that will receive the redirected authorization code
# redirect_uri: https://ob.lightapi.net/authorization
# optional scope, default scope in the client registration will be used if not defined.
# - petstore.r
# - petstore.w
# the following section defines uri and parameters for client credentials grant type
In the authorization code grant flow configuration, we have commented out the redirect_uri so that the OAuth 2.0 client registration redirect_uri https://localhost:3000 will be used. If we still have this optional configuration, the OAuth 2.0 server will try to match this redirect_uri with the client registered redirect_uri and return an error.
We need to ensure that /authorization and /logout are configured in the handler.yml
As you can see, the https://localhost:3000 is in the allowedOrigins.
The react-client application is generated with create-react-app. We need to update a little bit to make sure that it can work with backend APIs and start with HTTPS as it is required by the OAuth 2.0 specification.
After the code is generated, we need to add the following to the package.json
As you can see, we have enabled the CORS and also added all the API endpoints to the proxy. The last two endpoints are for the light-spa-4j StatelessAuthHandler.
There is another place in the react application that needs to be updated. When the react-client is redirected to the login-view application for the light-oauth2 authentication and authorization, it can pass a redirectUri optional. Since we don’t want to switch between https://localhost:3000 and https://ob.lightapi.net constantly, we need to remove the redirectUri from the redirect so that the OAuth 2.0 provider will use the redirectUri provided by the client registration.
Here is the login function without redirect URL in ResponsiveDrawer.js