chore(ui): bump oauth4webapi major version (akuity#3039)

Signed-off-by: Mayursinh Sarvaiya <[email protected]>
fykaa · Dec 20, 2024 · c70d73c · c70d73c
1 parent 1550ef0
commit c70d73c
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 48 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -75,7 +75,7 @@
     "moment": "^2.30.1",
     "monaco-editor": "^0.52.0",
     "monaco-yaml": "^5.2.2",
-    "oauth4webapi": "^2.17.0",
+    "oauth4webapi": "^3.1.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.0",

diff --git a/ui/pnpm-lock.yaml b/ui/pnpm-lock.yaml
diff --git a/ui/src/features/auth/oidc-login.tsx b/ui/src/features/auth/oidc-login.tsx
@@ -1,12 +1,24 @@
 import { useQuery } from '@tanstack/react-query';
 import { Button, notification } from 'antd';
-import * as oauth from 'oauth4webapi';
+import {
+  discoveryRequest,
+  processDiscoveryResponse,
+  generateRandomCodeVerifier,
+  calculatePKCECodeChallenge,
+  validateAuthResponse,
+  authorizationCodeGrantRequest,
+  processAuthorizationCodeResponse,
+  AuthorizationResponseError,
+  WWWAuthenticateChallengeError,
+  allowInsecureRequests
+} from 'oauth4webapi';
 import React from 'react';
 import { useLocation } from 'react-router-dom';
 
 import { OIDCConfig } from '@ui/gen/service/v1alpha1/service_pb';
 
 import { useAuthContext } from './context/use-auth-context';
+import { oidcClientAuth, shouldAllowIdpHttpRequest as shouldAllowHttpRequest } from './utils';
 
 const codeVerifierKey = 'PKCE_code_verifier';
 
@@ -44,9 +56,10 @@ export const OIDCLogin = ({ oidcConfig }: Props) => {
     queryKey: [issuerUrl],
     queryFn: () =>
       issuerUrl &&
-      oauth
-        .discoveryRequest(issuerUrl)
-        .then((response) => oauth.processDiscoveryResponse(issuerUrl, response))
+      discoveryRequest(issuerUrl, {
+        [allowInsecureRequests]: shouldAllowHttpRequest()
+      })
+        .then((response) => processDiscoveryResponse(issuerUrl, response))
         .then((response) => {
           if (response.code_challenge_methods_supported?.includes('S256') !== true) {
             throw new Error('OIDC config fetch error');
@@ -60,7 +73,7 @@ export const OIDCLogin = ({ oidcConfig }: Props) => {
   React.useEffect(() => {
     if (error) {
       const errorMessage = error instanceof Error ? error.message : 'OIDC config fetch error';
-      notification.error({ message: errorMessage, placement: 'bottomRight' });
+      notification.error({ message: `OIDC: ${errorMessage}`, placement: 'bottomRight' });
     }
   }, [error]);
 
@@ -69,10 +82,10 @@ export const OIDCLogin = ({ oidcConfig }: Props) => {
       return;
     }
 
-    const code_verifier = oauth.generateRandomCodeVerifier();
+    const code_verifier = generateRandomCodeVerifier();
     sessionStorage.setItem(codeVerifierKey, code_verifier);
 
-    const code_challenge = await oauth.calculatePKCECodeChallenge(code_verifier);
+    const code_challenge = await calculatePKCECodeChallenge(code_verifier);
     const url = new URL(as.authorization_endpoint);
     url.searchParams.set('client_id', client.client_id);
     url.searchParams.set('code_challenge', code_challenge);
@@ -106,42 +119,57 @@ export const OIDCLogin = ({ oidcConfig }: Props) => {
         searchParams.delete('state');
       }
 
-      const params = oauth.validateAuthResponse(as, client, searchParams, oauth.expectNoState);
+      try {
+        const params = validateAuthResponse(as, client, searchParams);
+
+        const response = await authorizationCodeGrantRequest(
+          as,
+          client,
+          oidcClientAuth,
+          params,
+          redirectURI,
+          code_verifier,
+          {
+            [allowInsecureRequests]: shouldAllowHttpRequest(),
+            additionalParameters: [['client_id', client.client_id]]
+          }
+        );
 
-      if (oauth.isOAuth2Error(params)) {
-        notification.error({
-          message: 'OIDC: Validation Auth Response error',
-          placement: 'bottomRight'
+        const result = await processAuthorizationCodeResponse(as, client, response, {
+          requireIdToken: true
         });
-        return;
-      }
 
-      const response = await oauth.authorizationCodeGrantRequest(
-        as,
-        client,
-        params,
-        redirectURI,
-        code_verifier
-      );
+        if (!result.id_token) {
+          notification.error({
+            message: 'OIDC: Proccess Authorization Code Grant Response error',
+            placement: 'bottomRight'
+          });
+          return;
+        }
+
+        onLogin(result.id_token, result.refresh_token);
+      } catch (err) {
+        if (err instanceof AuthorizationResponseError) {
+          notification.error({
+            message: 'OIDC: Validation Auth Response error',
+            placement: 'bottomRight'
+          });
+          return;
+        }
+
+        if (err instanceof WWWAuthenticateChallengeError) {
+          notification.error({
+            message: 'OIDC: Parsing Authenticate Challenges error',
+            placement: 'bottomRight'
+          });
+          return;
+        }
 
-      if (oauth.parseWwwAuthenticateChallenges(response)) {
         notification.error({
-          message: 'OIDC: Parsing Authenticate Challenges error',
+          message: `OIDC: ${JSON.stringify(err)}`,
           placement: 'bottomRight'
         });
-        return;
       }
-
-      const result = await oauth.processAuthorizationCodeOpenIDResponse(as, client, response);
-      if (oauth.isOAuth2Error(result) || !result.id_token) {
-        notification.error({
-          message: 'OIDC: Proccess Authorization Code Grant Response error',
-          placement: 'bottomRight'
-        });
-        return;
-      }
-
-      onLogin(result.id_token, result.refresh_token);
     })();
   }, [as, client, location]);
 

diff --git a/ui/src/features/auth/token-renew.tsx b/ui/src/features/auth/token-renew.tsx
@@ -1,7 +1,13 @@
 import { useQuery as useConnectQuery } from '@connectrpc/connect-query';
 import { useQuery } from '@tanstack/react-query';
 import { notification } from 'antd';
-import * as oauth from 'oauth4webapi';
+import {
+  allowInsecureRequests,
+  discoveryRequest,
+  processDiscoveryResponse,
+  refreshTokenGrantRequest,
+  processRefreshTokenResponse
+} from 'oauth4webapi';
 import React from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 
@@ -12,6 +18,7 @@ import { getPublicConfig } from '@ui/gen/service/v1alpha1/service-KargoService_c
 import { LoadingState } from '../common';
 
 import { useAuthContext } from './context/use-auth-context';
+import { oidcClientAuth, shouldAllowIdpHttpRequest as shouldAllowHttpRequest } from './utils';
 
 export const TokenRenew = () => {
   const navigate = useNavigate();
@@ -44,9 +51,10 @@ export const TokenRenew = () => {
     queryKey: [issuerUrl],
     queryFn: () =>
       issuerUrl &&
-      oauth
-        .discoveryRequest(issuerUrl)
-        .then((response) => oauth.processDiscoveryResponse(issuerUrl, response))
+      discoveryRequest(issuerUrl, {
+        [allowInsecureRequests]: shouldAllowHttpRequest()
+      })
+        .then((response) => processDiscoveryResponse(issuerUrl, response))
         .then((response) => {
           if (response.code_challenge_methods_supported?.includes('S256') !== true) {
             throw new Error('OIDC config fetch error');
@@ -71,10 +79,14 @@ export const TokenRenew = () => {
     }
 
     (async () => {
-      const response = await oauth.refreshTokenGrantRequest(as, client, refreshToken);
+      const response = await refreshTokenGrantRequest(as, client, oidcClientAuth, refreshToken, {
+        [allowInsecureRequests]: shouldAllowHttpRequest(),
+        additionalParameters: [['client_id', client.client_id]]
+      });
+
+      const result = await processRefreshTokenResponse(as, client, response);
 
-      const result = await oauth.processRefreshTokenResponse(as, client, response);
-      if (oauth.isOAuth2Error(result) || !result.id_token) {
+      if (!result.id_token) {
         notification.error({
           message: 'OIDC: Proccess Authorization Code Grant Response error',
           placement: 'bottomRight'

diff --git a/ui/src/features/auth/utils.ts b/ui/src/features/auth/utils.ts
@@ -1,3 +1,5 @@
+import { ClientAuth } from 'oauth4webapi';
+
 // https://openid.net/specs/openid-connect-core-1_0.html#StandardClaims
 export type JWTInfo = {
   sub: string;
@@ -38,3 +40,9 @@ export const getUserEmail = (user?: JWTInfo | null) => {
 
   return meta;
 };
+
+export const oidcClientAuth: ClientAuth = () => {
+  // equivalent function for token_endpoint_auth_method: 'none'
+};
+
+export const shouldAllowIdpHttpRequest = () => __UI_VERSION__ === 'development';