Create Auth OIDC feature (#177)

* Create oidc auth middleware * Auth user info (#178) * add docs and basic signin UI * Update README.md * Update README.md * Refactor authn config (#180) * Refactor authn config * address comments * Improve authn visuals (#181) * Improve authn visuals Co-authored-by: swyx <shawnthe1@gmail.com> * Memoize web config (#182) * Delete config.yml.example * Update README.md * Update server/config.yml * Update server/config.yml * Update README.md * Update README.md Co-authored-by: swyx <shawnthe1@gmail.com> * Integrate auth tokens into temporal server connection (#184) Co-authored-by: swyx <wanshawn@amazon.com> Co-authored-by: swyx <shawnthe1@gmail.com>
temporalio · Nov 10, 2020 · 08b6499 · 08b6499
1 parent 1bc811a
commit 08b6499
Show file tree

Hide file tree

Showing 18 changed files with 1,046 additions and 187 deletions.
diff --git a/README.md b/README.md
@@ -21,6 +21,33 @@ Set these environment variables if you need to change their defaults
 | TEMPORAL_HOT_RELOAD_TEST_PORT | HTTP port used by hot reloading in tests                          | 8082           |
 | TEMPORAL_EXTERNAL_SCRIPTS     | Addtional JavaScript tags to serve in the UI                      |                |
 
+### Configuring Authentication (optional)
+
+Since v1.2, Temporal Web offers optional Oauth SSO authentication. You can enable it by changing the `server/config.yml` file:
+
+```yaml
+auth:
+  enabled: false
+  providers:
+      - label: 'googleoidc'
+        type: oidc
+        issuer: https://accounts.google.com
+        client_id: xxxxxxxxxx-xxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com
+        client_secret: xxxxxxxxxxxxxxxxxxxxxxx
+        callback_base_uri: http://localhost:8088
+```
+
+In future, multiple Oauth providers may be supported, however for now we only read the first Oauth provider under the `auth` key above.
+
+Common Oauth Providers and their docs:
+
+- Google: https://developers.google.com/identity/protocols/oauth2/openid-connect
+- Auth0: tbc
+- Okta: tbc
+
+If you are hosting Temporal Web at `http://localhost:8088`, then you will need to tell your Oauth provider to redirect to `http://localhost:8088/auth/callback`. This is configured by `callback_base_uri` in the settings.
+
+
 ### Running locally
 
 `temporal-web` uses all the standard [npm scripts](https://docs.npmjs.com/misc/scripts) to install dependencies, run the server, and run tests. Additionally to run locally with webpack hot reloading and other conveniences, use

diff --git a/client/App.vue b/client/App.vue
@@ -52,6 +52,7 @@ export default {
         link: '',
       },
       onVersionAnnouncementClose: () => {},
+      currentUser: undefined,
     };
   },
   beforeDestroy() {
@@ -67,6 +68,14 @@ export default {
       this.onVersionAnnouncementClose = () =>
         discardVersionAnnouncement(version);
     }
+    const me = await this.$http('/api/me');
+    if (me.isAuthEnabled) {
+      if (!me.user) {
+        this.$router.push('/signin');
+      } else {
+        this.currentUser = me.user;
+      }
+    }
   },
   methods: {
     globalClick(e) {
@@ -181,6 +190,15 @@ export default {
       <div class="detail-view task-queue" v-if="$route.params.taskQueue">
         <span>{{ $route.params.taskQueue }}</span>
       </div>
+      <a v-if="currentUser" class="user" href="/signin">
+        <img
+          :src="currentUser.picture"
+          width="200"
+          alt="user pic"
+          class="avatar"
+        />
+        <span class="name">{{ currentUser.name }}</span>
+      </a>
     </header>
     <router-view @onNotification="onNotification"></router-view>
     <modals-container />
@@ -226,6 +244,17 @@ header.top-bar
       margin-right: layout-spacing-medium;
       position: relative;
     }
+  .user
+    display flex
+    margin-left auto
+    align-items center
+    color: white
+    .avatar
+      display inline-block
+      width 2rem
+      height 2rem
+      border-radius 500rem
+      margin: 0.5rem
 
   svg
     display inline-block
@@ -234,8 +263,6 @@ header.top-bar
   spacing = 1.3em
   nav-label-color = uber-white-40
   nav-label-font-size = 11px
-  & > div
-    margin-right spacing
   div.namespace
     flex 0 0 auto
     &::before

diff --git a/client/assets/logo-rounded.png b/client/assets/logo-rounded.png
diff --git a/client/main.js b/client/main.js
@@ -13,6 +13,7 @@ import copyButton from './components/copy';
 import snapscroll from './directives/snapscroll';
 
 import App from './App';
+import Signin from './routes/signin.vue';
 import Namespace from './routes/namespace/index.vue';
 import NamespaceList from './routes/namespace-list.vue';
 import NamespaceSettings from './routes/namespace/namespace-settings.vue';
@@ -47,6 +48,11 @@ const routeOpts = {
         },
       ],
     },
+    {
+      name: 'signin',
+      path: '/signin',
+      component: Signin,
+    },
     {
       name: 'namespace',
       path: '/namespaces/:namespace',

diff --git a/client/routes/index.vue b/client/routes/index.vue
@@ -14,6 +14,7 @@
         >Docs</a
       >
     </navigation-bar>
+    <router-view name="signin" />
     <router-view name="namespace-list" />
     <router-view name="help" />
   </section>

diff --git a/client/routes/signin.vue b/client/routes/signin.vue
@@ -0,0 +1,110 @@
+<template>
+  <section class="signin">
+    <div class="signin-form">
+      <img
+        :src="currentUser ? currentUser.picture : temporalLogo"
+        alt="user pic"
+        class="avatar"
+      />
+      <div>
+        <dl v-if="currentUser" class="user-details">
+          <dd>
+            <b>{{ currentUser.name }}</b>
+          </dd>
+          <dd v-if="currentUser.name !== currentUser.email">
+            {{ currentUser.email }}
+          </dd>
+        </dl>
+        <h2 v-else class="vert-space-4"><b>Sign in to Temporal</b></h2>
+      </div>
+      <div class="vert-space-4">
+        <button
+          class="close icon icon_delete"
+          @click="logout"
+          v-if="currentUser"
+        >
+          Sign Out
+        </button>
+        <button class="close icon icon_key" @click="oidc" v-else>
+          Continue to SSO
+        </button>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import temporalLogo from '../assets/logo-rounded.png';
+import { NavigationLink } from '~components';
+
+export default {
+  name: 'signin',
+  data() {
+    return { currentUser: false, temporalLogo };
+  },
+  async created() {
+    const me = await this.$http('/api/me');
+    this.currentUser = me.user;
+  },
+  methods: {
+    async logout() {
+      window.location.assign('/auth/logout');
+    },
+    async oidc() {
+      try {
+        window.location.assign('/auth/sso');
+      } catch (err) {
+        console.error(err);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="stylus">
+@require '../styles/definitions.styl';
+.vert-space-4 {
+  margin-top : 20px
+}
+.signin {
+  display: flex
+  justify-content: center
+  align-items: center
+
+  .user-details {
+    dd {
+      width: 100%;
+      text-align: center;
+    }
+  }
+
+  .signin-form {
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    border: 1px solid #d8dee2;
+    width: 380px;
+    align-items: center
+
+
+    div {
+      width: 100%;
+      display: flex
+      justify-content: center
+      align-items: center
+    }
+
+    .avatar {
+        width: 6rem
+        height : 6rem
+        border-radius : 500rem
+        padding: 1rem
+    }
+
+    button{
+      width: 100%
+      height: 40px
+    }
+  }
+}
+</style>