Login App for an nginx-based web site

Goal: Setup UM with Login App to implement a customer login in a static (nginx-based) web site.

You can download the whole Kickstarter-based sample application from our GitLab repository: um-public/tutorial-login-app-nginx

Basic Login App setup

Follow Login App for a node-based web app to setup a UM Kickstarter project including a simple Login App setup. Skip the whole node / expressjs part and continue in this tutorial.

Static HTML pages

We will setup a tiny web site with these pages:

/index.html public Start page
/public/index.html another public page
/private/index.html a protected page that requires a customer login
/login.html The login page
/p/* UM REST Proxy
/cmsbs/* UM backoffice

Download tutorial-login-app-nginx-master-um-cmsbs-work-webapps-ROOT.zip and unzip the included cmsbs-work directory into your um/ directory.

Extend your um/build.gradle file to create a symlink to the web app directory from the ZIP file:

setup.doLast {
    // ...
    
    // Static Web App
    ln('cmsbs-work/webapps/ROOT', new File(pinuts.um.cmsbsWorkDir, '/webapps'))
}

Rebuild and restart your UM:

gradle setup run

Create nginx server config file

Create an nginx config file named .nginx-proxy.conf:

server {
    listen       $PROXY_PORT;
    server_name  localhost;

    # All authentication requests will be sent here:
    location = /auth {
        internal;

        # We will need to implement this REST endpoint to answer these requests:
        proxy_pass $UM_URL/cmsbs/rest/de.pinuts.tutorial.api/auth;

        proxy_pass_request_body off;
        proxy_set_header Content-Length "";

        # Pass original URI as a custom header:
        proxy_set_header X-Original-URI $request_uri;
    }

    # Login required!
    location /private/ {
        auth_request /auth;
        proxy_pass $UM_URL/private/;
        proxy_set_header Host $http_host;
    }

    # UM REST-Proxy
    location /p/ {
        proxy_set_header x-cmsbs-urlprefix "http://localhost:$PROXY_PORT/p";
        proxy_pass $UM_URL/p/;
        proxy_set_header Host $http_host;
    }

    # Static web site
    location / {
        proxy_pass $UM_URL/;
        proxy_set_header Host $http_host;
    }

    # Redirect to login page
    error_page 401 =302 http://localhost:$PROXY_PORT/login.html?returnTo=$scheme://$http_host$request_uri;
}

See Authentication Based on Subrequest Result for more about nginx' auth_request directive.

Run nginx from a docker image

We are now ready to start a dockerized nginx to proxy our static web site and force the user to authenticate when trying to visit /private/index.html.

Download start-nginx.sh, make it executable and give it a try (from within a second console window):

Go to http://localhost:8081/ and navigate to the Protected Area. You’ll get an 500 Internal Server Error by nginx because we have not yet implemented the authentication endpoint we specified in our nginx configuration.

Implement authentication endpoint

Create a new CSE file um/cmsbs-conf/cse/plugins/de.pinuts.tutorial/rest/routes.mjs:

This new endpoint will be available at http://localhost:8080/cmsbs/rest/de.pinuts.tutorial.api/auth – just as specified in the nginx config file.

We can call getCurrentUserEntry(req) to get the current user’s Entry; null will be returned if the user has not yet authenticated.

The originally requested URI will be passed via the X-Original-Uri header.

This is where we need to fill-in project specific code to determine whether the current user should be granted or denied access to the page he or she whishes to navigate to. This decision may be based on any of the Entry’s attributes, list or segment memberships and--of course--also based on the originalUri that was requested.

Try to login

Restart your UM instance:

Now, go to http://localhost:8081/ once more and navigate to the Protected Area.You should be redireced to the login page where you can authenticate with the user credentials you created in your UM instance.