NOISSUE - Add dynamic prefix conf, and authentication when behind proxy.

README.md

@@ -45,6 +45,15 @@ To remove the installed containers and volumes, run:
 make clean
 ```
 
+## Behind a proxy
+When using authentication with proxy like Oauth2-proxy we dont need a login form. UI only needs to check if there is authenticated session by accessing `/tokens` endpoint.
+Request to `/tokens` endpoint in this use case is also handled by proxy. When UI receieves token it can be assumed that authentication is successfull, requests to backend will
+be authenticated by the means of authenticated session on proxy so `token` is not needed to authenticate requests but it may be used for restricting access to some endpoints (e.g. based on a role in token)
+To use UI in this mode where backend is behind authentication proxy you need to set envs in `.env`.
+* `MF_PROXY_AUTH=true`
+* `MF_PROXY_LOGOUT_URL=/logout (this may be optional depending on the proxy being used)`
+
+
 ## Preview
 
 ##

docker/.env

@@ -3,6 +3,9 @@
 ## UI
 MF_UI_PORT=3000
 MF_UI_MQTT_WS_URL=ws://localhost/mqtt
+MF_PROXY_AUTH=false
+MF_PROXY_LOGOUT_URL=/logout
+MF_UI_APP_PREFIX='ui'
 
 ## NginX
 MF_NGINX_HTTP_PORT=80

docker/Dockerfile

@@ -1,13 +1,17 @@
 # Stage 0, based on Node.js, to build and compile Angular
 FROM node:16.10-alpine as node
 WORKDIR /app
+RUN mkdir /app/dist
 COPY package.json /app/
 COPY package-lock.json /app/
 RUN npm install
 COPY ./ /app/
+
 RUN npm run build:prod
 
 # Stage 1, based on Nginx, to have only the compiled app, ready for production with Nginx
 FROM nginx:1.13-alpine
 COPY --from=node /app/dist/ /usr/share/nginx/html
+COPY docker/nginx/entrypoint-ui.sh /entrypoint.sh
 COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
+ENTRYPOINT [ "/entrypoint.sh" ]

docker/docker-compose.yml

@@ -27,15 +27,16 @@ services:
     image: mainflux/ui:latest
     container_name: mainflux-ui
     restart: on-failure
-    volumes:
-      - ./nginx/entrypoint-ui.sh:/entrypoint.sh
     ports:
       - ${MF_UI_PORT}:${MF_UI_PORT}
     networks:
       - mainflux-base-net
     environment:
       MF_UI_PORT: ${MF_UI_PORT}
       MF_UI_MQTT_WS_URL: ${MF_UI_MQTT_WS_URL}
+      MF_PROXY_AUTH: ${MF_PROXY_AUTH}
+      MF_PROXY_LOGOUT_URL: ${MF_PROXY_LOGOUT_URL}
+      MF_UI_APP_PREFIX: ${MF_UI_APP_PREFIX}
     command: /entrypoint.sh
 
   nginx:
@@ -134,7 +135,7 @@ services:
     image: mainflux/users:latest
     container_name: mainflux-users
     volumes:
-      - ./templates/${MF_USERS_RESET_PWD_TEMPLATE}:/${MF_EMAIL_TEMPLATE}
+      - ./templates/${MF_EMAIL_TEMPLATE}:/${MF_EMAIL_TEMPLATE}
     depends_on:
       - users-db
       - auth

docker/templates/users.tmpl

@@ -0,0 +1,9 @@
+To: {{.To}}
+From: {{.From}}
+Subject: {{.Subject}}
+{{.Header}}
+You have initiated password reset.
+Follow the link below to reset password.
+{{.Content}}
+{{.Footer}}
+

src/app/@core/core.module.ts

@@ -34,7 +34,10 @@ export const NB_CORE_PROVIDERS = [
         },
         baseEndpoint: '',
             login: {
-              endpoint: environment.loginUrl,
+              endpoint: environment.tokensUrl,
+              redirect: {
+                failure: '/',
+              },
             },
             register: {
               endpoint: environment.usersUrl,
@@ -47,8 +50,14 @@ export const NB_CORE_PROVIDERS = [
               endpoint: environment.resetPassUrl,
               method: 'put',
             },
-            logout:
-             { method: null, redirect: { success: '/', failure: '/' } },
+            logout: {
+              method: 'get',
+              endpoint: environment.logoutUrl,
+              redirect: {
+                success: '/',
+                failure: '/',
+              },
+            },
         }),
     ],
     forms: {

src/app/@theme/components/header/header.component.ts

@@ -9,6 +9,7 @@ import { Subject } from 'rxjs';
 import { User } from 'app/common/interfaces/mainflux.interface';
 import { UsersService } from 'app/common/services/users/users.service';
 import { STRINGS } from 'assets/text/strings';
+import { environment } from 'environments/environment';
 
 @Component({
   selector: 'ngx-header',
@@ -47,8 +48,8 @@ export class HeaderComponent implements OnInit, OnDestroy {
 
   // Mainflux - Menu and version
   userMenu = [
-    { title: 'Profile', link: '/pages/profile' },
-    { title: 'Log out', link: '/auth/logout' },
+    { title: 'Profile', link: this.getLink('/pages/profile') },
+    { title: 'Log out', link: this.getLink('/auth/logout') },
   ];
 
   constructor(
@@ -112,4 +113,8 @@ export class HeaderComponent implements OnInit, OnDestroy {
     this.menuService.navigateHome();
     return false;
   }
+  // Mfx - construct url with prefix
+  getLink (link: string) {
+    return environment.appPrefix === '' ? link : '/' + environment.appPrefix + '/' + link;
+  }
 }

src/app/app-routing.module.ts

@@ -2,54 +2,69 @@ import { ExtraOptions, RouterModule, Routes } from '@angular/router';
 import { NgModule } from '@angular/core';
 import {
   NbAuthComponent,
-  NbLoginComponent,
   NbRequestPasswordComponent,
   NbResetPasswordComponent,
 } from '@nebular/auth';
 
 // Mfx- Custom Logout and Register components that
 // replace NbLogoutComponent and NbRegisterComponent
-import { LogoutComponent } from 'app/pages/logout/logout.component';
-import { RegisterComponent } from 'app/pages/register/register.component';
+import { LogoutComponent } from './pages/logout/logout.component';
+import { RegisterComponent } from './pages/register/register.component';
+import { LoginComponent } from './pages/login/login.component';
+import { AuthGuard } from './auth/auth-guard.service';
+import { AppComponent } from './app.component';
+import { environment } from 'environments/environment';
+
+
 
 export const routes: Routes = [
-  {
-    path: 'pages',
-    loadChildren: () => import('./pages/pages.module')
-      .then(m => m.PagesModule),
-  },
-  {
-    path: 'auth',
-    component: NbAuthComponent,
-    children: [
-      {
-        path: '',
-        component: NbLoginComponent,
-      },
-      {
-        path: 'login',
-        component: NbLoginComponent,
-      },
-      {
-        path: 'register',
-        component: RegisterComponent,
-      },
+{
+  path: environment.appPrefix,
+  component: AppComponent,
+  children: [
       {
-        path: 'logout',
-        component: LogoutComponent,
+        path: 'pages',
+        canActivate: [AuthGuard],
+        loadChildren: () => import('./pages/pages.module')
+          .then(m => m.PagesModule),
       },
       {
-        path: 'request-password',
-        component: NbRequestPasswordComponent,
-      },
-      {
-        path: 'reset-password',
-        component: NbResetPasswordComponent,
+        path: 'auth',
+        component: NbAuthComponent,
+        children: [
+          {
+            path: '',
+            component: LoginComponent,
+          },
+          {
+            path: 'login',
+            component: LoginComponent,
+          },
+          {
+            path: 'register',
+            component: RegisterComponent,
+          },
+          {
+            path: 'logout',
+            component: LogoutComponent,
+          },
+          {
+            path: 'request-password',
+            component: NbRequestPasswordComponent,
+          },
+          {
+            path: 'reset-password',
+            component: NbResetPasswordComponent,
+          },
+        ],
       },
+      { path: '', redirectTo: 'pages', pathMatch: 'full' },
+      { path: '**', redirectTo: 'pages' },
     ],
   },
-  { path: '', redirectTo: 'pages', pathMatch: 'full' },
-  { path: '**', redirectTo: 'pages' },
+
+  { path: '', redirectTo: environment.appPrefix, pathMatch: 'full' },
+  { path: '**', redirectTo: environment.appPrefix },
 ];
 
 const config: ExtraOptions = {

src/app/app.module.ts

@@ -38,12 +38,15 @@ export const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = {
 import { LogoutComponent } from './pages/logout/logout.component';
 import { RegisterComponent } from './pages/register/register.component';
 import { ProfileComponent } from './pages/profile/profile.component';
+import { LoginComponent } from './pages/login/login.component';
+import { AuthGuard } from './auth/auth-guard.service';
 
 @NgModule({
   declarations: [
     AppComponent,
     // Mfx Componennt
     LogoutComponent,
+    LoginComponent,
     RegisterComponent,
     ProfileComponent,
   ],
@@ -75,7 +78,10 @@ import { ProfileComponent } from './pages/profile/profile.component';
   ],
   bootstrap: [AppComponent],
   // Mfx dependencies
-  providers: [MqttService],
+  providers: [
+    AuthGuard,
+    MqttService,
+  ],
 })
 export class AppModule {
 }

src/app/auth/auth-guard.service.ts

@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import { CanActivate, Router } from '@angular/router';
+import { NbAuthService } from '@nebular/auth';
+import { tap } from 'rxjs/operators';
+import { environment } from 'environments/environment';
+
+
+@Injectable()
+export class AuthGuard implements CanActivate {
+  loginUrl: String;
+
+  constructor(
+    private authService: NbAuthService,
+    private router: Router,
+  ) {
+    this.loginUrl = environment.appPrefix === ''
+                      ? environment.loginUrl
+                      : environment.appPrefix + '/' + environment.loginUrl;
+  }
+
+  canActivate() {
+    return this.authService.isAuthenticated()
+    .pipe(
+      tap(authenticated => {
+        if (!authenticated) {
+          this.router.navigate([this.loginUrl]);
+        }
+      }),
+    );
+  }
+}

src/app/auth/auth.token.interceptor.service.ts

@@ -13,17 +13,22 @@ import { tap } from 'rxjs/operators';
 import { Router } from '@angular/router';
 
 import { NbAuthJWTToken, NbAuthService } from '@nebular/auth';
-
 import { environment } from 'environments/environment';
 
 @Injectable()
 export class TokenInterceptor implements HttpInterceptor {
 
+  loginUrl: string;
+
   constructor(
     private inj: Injector,
     private authService: NbAuthService,
     private router: Router,
-  ) { }
+  ) {
+    this.loginUrl = environment.appPrefix === ''
+                      ? environment.loginUrl
+                      : environment.appPrefix + '/' + environment.loginUrl;
+  }
 
   intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
     this.authService = this.inj.get(NbAuthService);
@@ -51,7 +56,7 @@ export class TokenInterceptor implements HttpInterceptor {
               !request.url.startsWith(environment.httpAdapterUrl) &&
               !request.url.startsWith(environment.readerUrl)) {
               localStorage.removeItem('auth_app_token');
-              this.router.navigateByUrl('/auth/login');
+              this.router.navigateByUrl(this.loginUrl);
             }
           },
         ));

src/app/common/services/users/users.service.ts

@@ -12,12 +12,17 @@ const defLimit: number = 20;
 @Injectable()
 export class UsersService {
   picture = 'assets/images/mainflux-logo.png';
+  loginUrl: string;
 
   constructor(
     private http: HttpClient,
     private router: Router,
     private notificationsService: NotificationsService,
-  ) { }
+  ) {
+    this.loginUrl = environment.appPrefix === ''
+                      ? environment.loginUrl
+                      : environment.appPrefix + '/' + environment.loginUrl;
+  }
 
   addUser(user: User) {
     return this.http.post(environment.usersUrl, user, { observe: 'response' })