@sassoftware/af-axios - npm Package Compare versions

Comparing version 0.3.4 to 0.4.0

package.json

 {
   "name": "@sassoftware/af-axios",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "description": "Minimal Axios HTTP client wrapper with SAS authentication support",
@@ -14,7 +14,2 @@ "author": "SAS",
   "exports": {
-    ".": {
-      "types": "./index.d.ts",
-      "import": "./index.js",
-      "require": "./bundle.js"
-    },
     "./react": {
@@ -31,11 +26,13 @@ "types": "./react/index.d.ts",
     "prettify-check": "npx prettier --check .",
-    "circular-deps": "npx madge --circular --ts-config=tsconfig.json src/index.ts",
+    "circular-deps": "npx madge --circular --ts-config=tsconfig.json src/react/index.ts",
     "prepare": "husky install"
   },
   "peerDependencies": {
-    "axios": "0.26.x - 0.27.x"
+    "axios": "0.26.x - 0.27.x",
+    "@azure/msal-browser": "^2.36.0",
+    "@azure/msal-react": "^1.5.6"
   },
   "devDependencies": {
-    "@types/react": "^17.0.48",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.0.37",
+    "@types/react-dom": "^18.0.11",
     "@typescript-eslint/eslint-plugin": "^5.33.1",
@@ -46,11 +43,11 @@ "@typescript-eslint/parser": "^5.33.1",
     "husky": "^8.0.1",
-    "madge": "^5.0.1",
+    "madge": "^6.0.0",
     "prettier": "^2.7.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "rollup": "^2.78.1",
-    "rollup-plugin-dts": "^4.2.2",
-    "rollup-plugin-esbuild": "^4.9.3",
-    "typescript": "^4.7.4"
+    "react": "^18.0.2",
+    "react-dom": "^18.0.2",
+    "rollup": "^3.20.6",
+    "rollup-plugin-dts": "^5.3.0",
+    "rollup-plugin-esbuild": "^5.0.0",
+    "typescript": "^5.0.4"
   }
 }

react/bundle.d.ts

 /*
 Copyright © 2023, SAS Institute Inc., Cary, NC, USA.  All Rights Reserved.
-SPDX-License-Identifier: Apache-2.0
+  SPDX-License-Identifier: Apache-2.0
 */
 import * as react from 'react';
+import { ReactNode } from 'react';
+import { useMsalAuthentication } from '@azure/msal-react';
+import { AuthError, RedirectRequest, SilentRequest } from '@azure/msal-browser';
+import * as axios from 'axios';
 import { AxiosInstance } from 'axios';
 
-interface UserData {
-    id: string;
-    email: string;
-    name: string;
-    authenticated: boolean;
-    authenticatedTime: number;
+interface AuthContextProviderProps {
+    children: ReactNode;
+    onAuthError?: (error: AuthError) => void;
+    authenticationRequest: RedirectRequest | SilentRequest;
+    accountIdentifiers?: Parameters<typeof useMsalAuthentication>[2];
+    loadingComponent?: ReactNode;
 }
-declare type SasAxiosInstance = AxiosInstance & {
-    /**
-     * Returns SAS user information
-     */
-    getUserData: () => Promise<UserData>;
-    /**
-     * Logs out the user
-     */
-    logout: () => Promise<void>;
-};
+declare const Auth: ({ children, onAuthError, authenticationRequest, accountIdentifiers, loadingComponent: LoadingComponent, }: AuthContextProviderProps) => JSX.Element;
 
-declare const AxiosInstanceContext: react.Context<SasAxiosInstance | undefined>;
+declare const useAxios: () => axios.AxiosInstance;
 
-export { AxiosInstanceContext };
+declare const AxiosInstanceContext: react.Context<AxiosInstance>;
+
+export { AxiosInstanceContext, Auth as MsalAuth, useAxios };

react/bundle.js

 /*
 Copyright © 2023, SAS Institute Inc., Cary, NC, USA.  All Rights Reserved.
-SPDX-License-Identifier: Apache-2.0
+  SPDX-License-Identifier: Apache-2.0
 */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
+var jsxRuntime = require('react/jsx-runtime');
+var axios = require('axios');
 var react = require('react');
+var msalReact = require('@azure/msal-react');
+var msalBrowser = require('@azure/msal-browser');
 
-const AxiosInstanceContext = react.createContext(
-  void 0
-);
+const AxiosInstanceContext = react.createContext(axios.create());
 
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+const Auth = ({
+  children,
+  onAuthError,
+  authenticationRequest,
+  accountIdentifiers,
+  loadingComponent: LoadingComponent
+}) => {
+  const { instance: msalInstance } = msalReact.useMsal();
+  const { result, error } = msalReact.useMsalAuthentication(
+    msalBrowser.InteractionType.Redirect,
+    authenticationRequest,
+    accountIdentifiers
+  );
+  const [interceptorsReady, setInterceptorsReady] = react.useState(false);
+  const axiosInstance = react.useMemo(() => axios.create(), []);
+  react.useEffect(() => {
+    if (error) {
+      onAuthError == null ? void 0 : onAuthError(error);
+    }
+  }, [error, onAuthError]);
+  react.useEffect(() => {
+    if (result == null ? void 0 : result.accessToken) {
+      const interceptor = axiosInstance.interceptors.request.use(
+        (req) => __async(void 0, null, function* () {
+          var _a;
+          (_a = req.headers) != null ? _a : req.headers = {};
+          const account = msalInstance.getActiveAccount();
+          if (!account) {
+            throw new Error(
+              "No active account! Verify a user has been signed in and setActiveAccount has been called."
+            );
+          }
+          try {
+            const response = yield msalInstance.acquireTokenSilent(__spreadProps(__spreadValues({}, authenticationRequest), {
+              account
+            }));
+            req.headers["Authorization"] = `Bearer ${response.accessToken}`;
+          } catch (err) {
+            yield msalInstance.acquireTokenRedirect(authenticationRequest);
+          }
+          return req;
+        })
+      );
+      setInterceptorsReady(true);
+      return () => {
+        axiosInstance.interceptors.request.eject(interceptor);
+      };
+    }
+  }, [axiosInstance.interceptors.request, result == null ? void 0 : result.accessToken]);
+  return /* @__PURE__ */ jsxRuntime.jsx(AxiosInstanceContext.Provider, { value: axiosInstance, children: interceptorsReady ? children : LoadingComponent });
+};
+
+const useAxios = () => react.useContext(AxiosInstanceContext);
+
 exports.AxiosInstanceContext = AxiosInstanceContext;
+exports.MsalAuth = Auth;
+exports.useAxios = useAxios;
 //# sourceMappingURL=bundle.js.map

react/index.d.ts

@@ -1,2 +0,4 @@
-export { AxiosInstanceContext } from './AxiosContext';
+export { default as MsalAuth } from './Auth';
+export { default as useAxios } from './useAxios';
+export { default as AxiosInstanceContext } from './AxiosInstanceContext';
 //# sourceMappingURL=index.d.ts.map

react/index.js

@@ -5,3 +5,5 @@ /*
 */
-export { AxiosInstanceContext } from './AxiosContext';
+export { default as MsalAuth } from './Auth';
+export { default as useAxios } from './useAxios';
+export { default as AxiosInstanceContext } from './AxiosInstanceContext';
 //# sourceMappingURL=index.js.map

README.md

@@ -6,2 +6,29 @@ # SAS® af-axios
 
+### Usage
+
+```javascript
+// Auth.js
+import { useNavigate } from 'react-router';
+import { MsalAuth } from '@sassoftware/af-axios/react';
+import { MsalProvider } from '@azure/msal-react';
+
+const Auth = ({ children }) => {
+  const navigate = useNavigate();
+  const navigationClient = new CustomNavigationClient(navigate);
+  msalInstance.setNavigationClient(navigationClient);
+
+  return (
+    <MsalProvider instance={msalInstance}>
+      <MsalAuth>{children}</MsalAuth>
+    </MsalProvider>
+  );
+};
+
+export default Auth;
+```
+
+You should be able to wrap your app (or specific routes) in `Auth` component and use `useAxios` hook to get an axios instance with Authorization header and 401 response handler.
+
+For more information on how to provide `msalInstance` and `CustomNavigationClient` please see https://www.npmjs.com/package/@azure/msal-react
+
 ## Local development
@@ -12,4 +39,4 @@
 1. Run `npm run build:release` to create a build release
-2. Run `rm -rf node_modules` to remove node modules. There might be duplication in your project you want to use this in, so you might get an error saying you have 2 React versions
-3. Run `npm install [@sassoftware/af-axios path]`. Make sure to replace `[@sassoftware/af-axios path]` with a correct local path (e.g. `../af-axios`).
+2. Run `npm pack` to create a TAR archive file (.tgz). You should see the name of newly created file at the end of the output.
+3. Run `npm install [.tgz path]`. Make sure to replace `[.tgz path]` with a correct local path of a file created by `npm pack` command.
 4. Run your project
@@ -22,3 +49,2 @@
 
-
 ## Contributions
@@ -28,2 +54,2 @@
 
-Please note that after the SAS Hackathon concludes, this notice will be removed, and we will provide updated guidelines for contributing to the project once it becomes open source. We appreciate your understanding and look forward to collaborating with you in the future.
+Please note that after the SAS Hackathon concludes, this notice will be removed, and we will provide updated guidelines for contributing to the project once it becomes open source. We appreciate your understanding and look forward to collaborating with you in the future.

src/react/index.ts

@@ -5,2 +5,4 @@ /*
 */
-export { AxiosInstanceContext } from './AxiosContext';
+export { default as MsalAuth } from './Auth';
+export { default as useAxios } from './useAxios';
+export { default as AxiosInstanceContext } from './AxiosInstanceContext';

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

39475

increased by90.88%

Lines of code

363

increased by164.96%

Number of lines in readme file

52

increased by108%

Worsened metrics

Dependency count

3

increased by200%

Number of package files

27

decreased by-3.57%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes