fix: logout when using Kratos (#31)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mojaloop-payment-manager-ui",
-  "version": "1.17.2",
+  "version": "1.17.3",
   "private": true,
   "proxy": "http://localhost:10000",
   "engines": {

server/index.js

@@ -10,6 +10,7 @@ app.get('/config', function (req, res) {
     CHECK_SESSION_URL: process.env.CHECK_SESSION_URL,
     LOGIN_URL: process.env.LOGIN_URL,
     LOGIN_PROVIDER: process.env.LOGIN_PROVIDER,
+    LOGOUT_URL: process.env.LOGOUT_URL,
   });
 });
 

src/App/App.tsx

@@ -34,6 +34,7 @@ const App: FC<AppProps> = ({
             userInfo ? `${userInfo.givenName || ''} ${userInfo.familyName || ''}`.trim() : ''
           }
           logoutUrl={userInfo ? userInfo.logoutUrl : undefined}
+          kratos={userInfo?.kratos}
           activeConnectionName="Modusbox & Mojaloop Labs"
           activeConnectionStatusColor="#12d670"
         />

src/App/Layout/Navbar/index.tsx

@@ -7,17 +7,29 @@ type Navbar = {
   logoutUrl?: string;
   activeConnectionName: string;
   activeConnectionStatusColor: string;
+  kratos?: boolean;
 };
 
 const Navbar: FC<Navbar> = ({
   username,
   activeConnectionName,
   activeConnectionStatusColor,
   logoutUrl,
+  kratos,
 }) => {
   const clickFunc = () => {
     if (logoutUrl) {
-      window.location.href = logoutUrl;
+      if (kratos) {
+        fetch(`${logoutUrl}?return_to=${window.location.href}`, {
+          headers: {
+            accept: 'application/json',
+          },
+        })
+          .then((response) => response.json())
+          .then(({ logout_url }) => {
+            if (logout_url) window.location.assign(logout_url);
+          });
+      } else window.location.href = logoutUrl;
     }
   };
 

src/App/types.ts

@@ -195,4 +195,5 @@ export interface User {
   familyName: string;
   email: string;
   logoutUrl: string;
+  kratos: boolean;
 }

src/index.tsx

@@ -42,7 +42,8 @@ async function bootstrap() {
       givenName: userInfo.given_name,
       familyName: userInfo.family_name,
       email: userInfo.email,
-      logoutUrl: `${config.apiBaseUrl}/logout`,
+      kratos: userInfo.kratos,
+      logoutUrl: 'logoutUrl' in userInfo ? userInfo.logoutUrl : `${config.apiBaseUrl}/logout`,
     };
 
     // only render if we got user info i.e. we are authenticated

src/utils/authentication.ts

@@ -5,6 +5,7 @@ export default async function getUserInfo(config: {
   checkSession: string;
   loginUrl: string;
   loginProvider: string;
+  logoutUrl: string;
 }) {
   try {
     if (config.checkSession && config.loginUrl) {
@@ -69,6 +70,8 @@ export default async function getUserInfo(config: {
           given_name: session.data.identity?.name,
           family_name: '',
           email: session.data.identity?.email,
+          logoutUrl: config.logoutUrl,
+          kratos: true,
         }
       );
     }

src/utils/config.ts

@@ -7,6 +7,7 @@ const getConfig = async () => {
   let checkSession;
   let loginUrl;
   let loginProvider;
+  let logoutUrl;
 
   try {
     const { headers, data } = await axios(configURL);
@@ -18,13 +19,14 @@ const getConfig = async () => {
       checkSession = data.CHECK_SESSION_URL;
       loginUrl = data.LOGIN_URL;
       loginProvider = data.LOGIN_PROVIDER;
+      logoutUrl = data.LOGOUT_URL;
     }
   } catch (err) {
     // eslint-disable-next-line
     console.info('Config not found. Falling back to default values');
   }
 
-  return { apiBaseUrl, checkSession, loginUrl, loginProvider };
+  return { apiBaseUrl, checkSession, loginUrl, loginProvider, logoutUrl };
 };
 
 export default getConfig;