done

README.md

@@ -91,10 +91,18 @@ To remove the default app stores, set the "appStores" top-level key to an empty
 
 ## Protecting the Admin UI with a login page
 
-Users that belong to a special group (**GLUE42_SERVER_ADMIN**) can access administrative APIs and therefore use the administrative UI.
+In this example the Administrative UI is customized with a [custom **authenticator**](./admin-ui/src/auth.ts). The authenticator re-directs to the login page. After the user log-ins the login sends back the generated token as a query param. Then **Admin UI** then uses this token for calls to the server.
+**Note that this example is for demonstrative purposes and should not be used in production.**
 
-In this example the Administrative UI is customized with a [custom **authenticator**](./admin-ui/src/auth.ts) that always produces a token with for a user that is part of that group.
+To access **Admin UI** users must belong to a special group (**GLUE42_SERVER_ADMIN**). Check [data.ts](./server/src/data.ts) for the list of users that have that group and use one of them to login.
 
-In a real world scenario you would need to implement a real **authenticator** or define the administrative UI as an application in Glue42 and access it from there.
+To start the Admin UI follow the [instructions](./admin-ui/README.md) in the admin-ui folder.
+
+In a real world scenario you have the following options to protect admin-ui:
+
+1. Implement a custom authenticator;
+   1. Implement a custom login react based login component that will authenticate the user against an in-house service and provide the token to the custom authenticator
+   2. Re-use existing login page and extract the token in the custom authenticator once the user is authenticated
+
+2. Put the Admin UI behind a reverse proxy that would handle the authentication and pass the user info to the server
 
-To start the Admin UI follow the [instructions](./admin-ui/README.md) in the admin-ui folder.

admin-ui/src/auth.ts

@@ -7,20 +7,36 @@ export class CustomAuthProvider implements AuthProvider {
   public addCredentialsToRequest = false;
   public addUsernameToRequest = false;
   public error: any = undefined;
+  public token: string = "";
 
   public async loginIfNeeded(): Promise<void> {
-    // do nothing, we have hardcoded isAuthenticated to true, so this is never called
-    console.log(`loginIfNeeded`);
-    this.isAuthenticated = true;
+    // get token query parameter
+    const urlParams = new URLSearchParams(window.location.search);
+    const token = urlParams.get("token");
+    if (token) {
+      this.token = token;
+      this.isAuthenticated = true;
+      return Promise.resolve();
+    }
+
+    if (!this.isAuthenticated) {
+      document.location.href = `http://localhost:9123/?callback=${document.location.href}`;
+    }
+
     return Promise.resolve();
   }
+
   public async getAccessToken(): Promise<string | undefined> {
-    return "user:admin";
+    return this.token;
   }
 
   public async getUserInfo(): Promise<{ id?: string | undefined; } | undefined> {
     return {
-      id: "admin"
+      id: this.token
     };
   }
+
+  public async logOut(): Promise<void> {
+    this.token = "";
+  }
 }

login/index.js

@@ -9,7 +9,7 @@ window.addEventListener("DOMContentLoaded", (event) => {
 const login = async () => {
     const emailElement = document.getElementById(`email`);
     const isEmailValid = emailElement.reportValidity();
-    if (!isEmailValid){
+    if (!isEmailValid) {
         // show validation error
         return;
     }
@@ -18,13 +18,21 @@ const login = async () => {
     localStorage.setItem(`user`, email);
 
     const token = `user:${email}`;
-    await glue42gd.authDone({
-        token,
-        user: email
-    });
-    closeWindow();
-};
 
-const closeWindow = () => {
-    window.close();
+    // if running in interop.io desktop, try to set the token and close the window
+    if (typeof glue42gd !== "undefined") {
+        await glue42gd.authDone({
+            token,
+            user: email
+        });
+
+        window.close();
+    }
+
+    // if being used as protection of admin-ui we will redirect to the admin-ui with the token
+    const urlParams = new URLSearchParams(window.location.search);
+    const callback = urlParams.get(`callback`);
+    if (callback) {
+        window.location = callback + "?token=" + token;
+    }
 };