Dashboard logout should trigger OAuth logout endpoint

src/common/util/domain.ts

@@ -0,0 +1,3 @@
+export function getDomainName(hostName: string) {
+  return hostName.substring(hostName.lastIndexOf('.', hostName.lastIndexOf('.') - 1) + 1);
+}

src/common/util/index.ts

@@ -1,2 +1,3 @@
-export { isTouched } from './is-touched';
+export * from './is-touched';
-export { addParamsToLink } from './add-params-to-link';
+export * from './add-params-to-link';
+export * from './domain';

src/components/Header/Header.tsx

@@ -2,6 +2,7 @@ import React, { Fragment, useState } from 'react';
 import { Disclosure, Menu, Transition } from '@headlessui/react';
 import { MenuIcon, XIcon } from '@heroicons/react/outline';
 import { useAuth } from 'src/services/auth';
+import { getDomainName } from 'src/common/util';
 import Gravatar from 'react-gravatar';
 import { Link, useLocation } from 'react-router-dom';
 import clsx from 'clsx';
@@ -31,6 +32,24 @@ const Header: React.FC<HeaderProps> = () => {
   const [currentUserModal, setCurrentUserModal] = useState(false);
   const { logOut, currentUser, isAdmin } = useAuth();
 
+  const singOutUrl = () => {
+    const { hostname } = window.location;
+    const domain = getDomainName(window.location.hostname);
+    let url = `https://sso.${domain}/oauth2/sessions/logout`;
+
+    // This is a fix so it can work with dashboard.init.stackspin.net
+    if (hostname.includes('init')) {
+      url = `https://sso.init.${domain}/oauth2/sessions/logout`;
+    }
+
+    // This is a fix so it can work locally
+    if (hostname.includes('localhost')) {
+      url = 'https://sso.init.stackspin.net/oauth2/sessions/logout';
+    }
+
+    return url;
+  };
+
   const { pathname } = useLocation();
 
   const currentUserModalOpen = () => {
@@ -120,6 +139,7 @@ const Header: React.FC<HeaderProps> = () => {
                           {({ active }) => (
                             <a
                               onClick={() => logOut()}
+                              href={singOutUrl()}
                               className={classNames(
                                 active ? 'bg-gray-100 cursor-pointer' : '',
                                 'block px-4 py-2 text-sm text-gray-700 cursor-pointer',