diff --git a/examples/demo-template/customer-app-js/pom.xml b/examples/demo-template/customer-app-js/pom.xml
new file mode 100755
index 0000000..ee49a95
--- /dev/null
+++ b/examples/demo-template/customer-app-js/pom.xml
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+ xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
+ <parent>
+ <artifactId>keycloak-parent</artifactId>
+ <groupId>org.keycloak</groupId>
+ <version>1.0-alpha-2-SNAPSHOT</version>
+ <relativePath>../../../pom.xml</relativePath>
+ </parent>
+ <modelVersion>4.0.0</modelVersion>
+ <groupId>org.keycloak.example.demo</groupId>
+ <artifactId>customer-portal-js-example</artifactId>
+ <packaging>war</packaging>
+ <name>Customer Portal JS</name>
+ <description/>
+
+ <build>
+ <finalName>customer-portal-js</finalName>
+ <plugins>
+ <plugin>
+ <groupId>org.jboss.as.plugins</groupId>
+ <artifactId>jboss-as-maven-plugin</artifactId>
+ <version>7.4.Final</version>
+ </plugin>
+ <plugin>
+ <groupId>org.apache.maven.plugins</groupId>
+ <artifactId>maven-deploy-plugin</artifactId>
+ <configuration>
+ <skip>true</skip>
+ </configuration>
+ </plugin>
+ <plugin>
+ <groupId>org.apache.maven.plugins</groupId>
+ <artifactId>maven-compiler-plugin</artifactId>
+ <configuration>
+ <source>1.6</source>
+ <target>1.6</target>
+ </configuration>
+ </plugin>
+ </plugins>
+ </build>
+</project>
diff --git a/examples/demo-template/customer-app-js/src/main/webapp/customers/view.html b/examples/demo-template/customer-app-js/src/main/webapp/customers/view.html
new file mode 100755
index 0000000..2722702
--- /dev/null
+++ b/examples/demo-template/customer-app-js/src/main/webapp/customers/view.html
@@ -0,0 +1,51 @@
+<html>
+<head>
+ <title>Customer View Page</title>
+ <script src="/auth/js/keycloak.js"></script>
+</head>
+<body bgcolor="#E3F6CE">
+
+<p>Goto: <a href="#" onclick="keycloak.logout()">logout</a></p>
+User <b id="username"></b> made this request.
+<h2>Customer Listing</h2>
+<div id="customers"></div>
+
+<script>
+ var keycloak = Keycloak({
+ clientId: '<INSERT CLIENT ID>',
+ clientSecret: '<INSERT SECRET>',
+ realm: '<INSERT REALM NAME>',
+ onload: 'login-required'
+ });
+
+ keycloak.init(function() {
+ document.getElementById('username').innerText = keycloak.username;
+
+ var url = 'http://localhost:8080/database/customers';
+
+ var req = new XMLHttpRequest();
+ req.open('GET', url, true);
+ req.setRequestHeader('Accept', 'application/json');
+ req.setRequestHeader('Authorization', 'Bearer ' + keycloak.token);
+
+ req.onreadystatechange = function () {
+ if (req.readyState == 4) {
+ if (req.status == 200) {
+ var users = JSON.parse(req.responseText);
+ var html = '';
+ for (var i = 0; i < users.length; i++) {
+ html += '<p>' + users[i] + '</p>';
+ }
+ document.getElementById('customers').innerHTML = html;
+ }
+ }
+ }
+
+ req.send();
+ });
+
+</script>
+
+<br><br>
+</body>
+</html>
\ No newline at end of file
diff --git a/examples/demo-template/customer-app-js/src/main/webapp/index.html b/examples/demo-template/customer-app-js/src/main/webapp/index.html
new file mode 100755
index 0000000..6ec251a
--- /dev/null
+++ b/examples/demo-template/customer-app-js/src/main/webapp/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+ "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+ <title></title>
+</head>
+<body bgcolor="#E3F6CE">
+<h1>Customer Portal JS</h1>
+
+<p><a href="customers/view.html">Customer Listing</a></p>
+
+</body>
+</html>
\ No newline at end of file
