Merge pull request #24 from commercelayer/feat/update-js-auth

Update `js-auth` to `v6`

package.json

@@ -32,11 +32,15 @@
     "packages/*"
   ],
   "devDependencies": {
-    "lerna": "^6.1.0",
-    "npm-check-updates": "^16.14.6"
+    "lerna": "^8.1.2",
+    "npm-check-updates": "^16.14.18"
   },
   "packageManager": "pnpm@8.0.0",
   "resolutions": {
-    "@babel/traverse": "^7.23.2"
+    "@babel/traverse": "^7.23.2",
+    "follow-redirects": "^1.15.6",
+    "semver": "^7.5.2",
+    "socks": "^2.7.3",
+    "word-wrap": "^1.2.4"
   }
 }

packages/app/package.json

@@ -29,59 +29,52 @@
     "prepare": "touch ./public/config.local.js"
   },
   "dependencies": {
-    "@commercelayer/eslint-config-ts-react": "^1.3.0",
-    "@commercelayer/js-auth": "4.2.0",
+    "@commercelayer/eslint-config-ts-react": "^1.4.5",
+    "@commercelayer/js-auth": "6.0.0",
     "@commercelayer/react-utils": "1.0.0-beta.3",
-    "@commercelayer/sdk": "5.31.1",
+    "@commercelayer/sdk": "5.36.0",
     "@headlessui/react": "^1.7.18",
     "@hookform/resolvers": "^3.3.4",
-    "@phosphor-icons/react": "v2.1.3",
+    "@phosphor-icons/react": "v2.1.4",
     "@tailwindcss/forms": "^0.5.7",
     "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.1",
-    "@types/async-retry": "1.4.3",
+    "@testing-library/react": "^14.2.2",
     "@types/iframe-resizer": "^3.5.13",
-    "@types/lodash": "^4.14.202",
-    "@types/node": "20.11.17",
-    "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.19",
+    "@types/lodash": "^4.17.0",
+    "@types/node": "20.11.30",
+    "@types/react": "^18.2.73",
+    "@types/react-dom": "^18.2.23",
     "@types/react-helmet": "^6.1.11",
     "@types/testing-library__jest-dom": "^5.14.9",
     "@types/yup": "^0.32.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "async-retry": "1.3.3",
-    "autoprefixer": "^10.4.17",
+    "autoprefixer": "^10.4.19",
     "classnames": "^2.5.1",
-    "eslint": "^8.56.0",
-    "i18next": "^23.8.2",
-    "jsdom": "^24.0.0",
-    "jwt-decode": "^3.1.2",
+    "eslint": "^8.57.0",
+    "i18next": "^23.10.1",
     "lodash": "^4.17.21",
-    "msw": "^2.1.7",
     "only-allow": "^1.2.1",
-    "postcss": "^8.4.35",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet-async": "^2.0.4",
-    "react-hook-form": "^7.50.1",
-    "react-i18next": "^14.0.5",
-    "tailwindcss": "^3.4.1",
-    "type-fest": "^4.10.2",
-    "typescript": "5.3.3",
-    "vite": "^5.1.1",
-    "vite-tsconfig-paths": "^4.3.1",
-    "vitest": "^1.2.2",
-    "wouter": "^3.0.0",
-    "yup": "^1.3.3",
+    "react-hook-form": "^7.51.2",
+    "react-i18next": "^14.1.0",
+    "type-fest": "^4.14.0",
+    "wouter": "^3.1.0",
+    "yup": "^1.4.0",
     "zod": "3.22.4"
   },
   "devDependencies": {
-    "dotenv": "^16.4.1",
+    "dotenv": "^16.4.5",
     "eslint-plugin-tailwind": "^0.2.1",
+    "jsdom": "^24.0.0",
+    "postcss": "^8.4.38",
     "prettier": "^3.2.5",
-    "stylelint": "^14.16.1",
-    "stylelint-config-standard": "^28.0.0",
-    "stylelint-prettier": "^2.0.0"
+    "tailwindcss": "^3.4.3",
+    "typescript": "5.4.3",
+    "vitest": "^1.4.0",
+    "vite": "^5.2.7",
+    "vite-tsconfig-paths": "^4.3.2"
   },
   "engines": {
     "node": ">=18",

packages/app/src/components/forms/LoginForm.tsx

@@ -1,21 +1,21 @@
-import { authentication } from '@commercelayer/js-auth'
+import { authenticate } from '@commercelayer/js-auth'
 import { yupResolver } from '@hookform/resolvers/yup'
-import { useForm, FormProvider } from 'react-hook-form'
-import * as yup from 'yup'
+import { FormProvider, useForm } from 'react-hook-form'
 import { useRouter } from 'wouter'
+import * as yup from 'yup'
 
-import { appRoutes } from '#data/routes'
 import { A } from '#components/atoms/A'
 import { Alert } from '#components/atoms/Alert'
 import { Button } from '#components/atoms/Button'
 import { Input } from '#components/atoms/Input'
+import { appRoutes } from '#data/routes'
 import { useIdentityContext } from '#providers/provider'
 
 import { getParamFromUrl } from '#utils/getParamFromUrl'
 import { redirectToReturnUrl } from '#utils/redirectToReturnUrl'
 
-import type { UseFormReturn, UseFormProps } from 'react-hook-form'
 import type { LoginFormValues } from 'Forms'
+import type { UseFormProps, UseFormReturn } from 'react-hook-form'
 
 const validationSchema = yup.object().shape({
   customerEmail: yup
@@ -39,9 +39,8 @@ export const LoginForm = (): JSX.Element => {
 
   const isSubmitting = form.formState.isSubmitting
   const onSubmit = form.handleSubmit(async (formData) => {
-    await authentication('password', {
+    await authenticate('password', {
       clientId: settings.clientId,
-      slug: settings.companySlug,
       domain: config.domain,
       scope: settings.scope,
       username: formData.customerEmail,

packages/app/src/components/forms/SignUpForm.tsx

@@ -1,22 +1,22 @@
-import { authentication } from '@commercelayer/js-auth'
+import { authenticate } from '@commercelayer/js-auth'
 import CommerceLayer from '@commercelayer/sdk'
 import { yupResolver } from '@hookform/resolvers/yup'
-import { useForm, FormProvider } from 'react-hook-form'
-import * as yup from 'yup'
+import { FormProvider, useForm } from 'react-hook-form'
 import { useRouter } from 'wouter'
+import * as yup from 'yup'
 
-import { appRoutes } from '#data/routes'
 import { A } from '#components/atoms/A'
 import { Button } from '#components/atoms/Button'
 import { Input } from '#components/atoms/Input'
+import { appRoutes } from '#data/routes'
 import { useIdentityContext } from '#providers/provider'
 import { getParamFromUrl } from '#utils/getParamFromUrl'
 import { redirectToReturnUrl } from '#utils/redirectToReturnUrl'
 
-import type { UseFormReturn, UseFormProps } from 'react-hook-form'
 import type { SignUpFormValues } from 'Forms'
-import { ValidationApiError } from './ValidationApiError'
 import { useState } from 'react'
+import type { UseFormProps, UseFormReturn } from 'react-hook-form'
+import { ValidationApiError } from './ValidationApiError'
 
 const validationSchema = yup.object().shape({
   customerEmail: yup
@@ -62,9 +62,8 @@ export const SignUpForm = (): JSX.Element => {
       })
 
     if (createCustomerResponse?.id != null) {
-      await authentication('password', {
+      await authenticate('password', {
         clientId: settings.clientId,
-        slug: settings.companySlug,
         domain: config.domain,
         scope: settings.scope,
         username: formData.customerEmail,

packages/app/src/utils/isValidHost.ts

@@ -1,4 +1,4 @@
-import { getInfoFromJwt } from '#utils/getInfoFromJwt'
+import { jwtDecode, jwtIsSalesChannel } from '@commercelayer/js-auth'
 import { getSubdomain } from './getSubdomain'
 
 const isProduction = (forceProductionEnv?: boolean): boolean =>
@@ -26,13 +26,13 @@ export const isValidHost = ({
   forceProductionEnv?: boolean
   selfHostedSlug?: string | null
 }): boolean => {
-  const { slug, kind } = getInfoFromJwt(accessToken)
+  const decodedJWT = jwtDecode(accessToken)
 
-  const isInvalidChannel = kind !== 'sales_channel'
-  if (isInvalidChannel) {
+  if (!jwtIsSalesChannel(decodedJWT.payload)) {
     return false
   }
 
+  const slug = decodedJWT.payload.organization.slug
   const subdomain = getSubdomain({ hostname, selfHostedSlug })
 
   const isInvalidSubdomain = subdomain !== slug

packages/app/src/utils/oauthStorage.ts

@@ -1,17 +1,16 @@
-import { getSalesChannelToken } from '#utils/oauthRequests'
-import { getInfoFromJwt } from '#utils/getInfoFromJwt'
+import {
+  authenticate,
+  jwtDecode,
+  jwtIsSalesChannel
+} from '@commercelayer/js-auth'
 
-import type { OauthResponse } from '#utils/oauthRequests'
-
-type StoredOauthResponse = Pick<
-  OauthResponse,
-  | 'access_token'
-  | 'scope'
-  | 'token_type'
-  | 'refresh_token'
-  | 'error'
-  | 'error_description'
-> & {
+interface StoredOauthResponse {
+  access_token?: string
+  scope?: string
+  token_type?: string
+  refresh_token?: string
+  error?: string
+  error_description?: string
   client_id?: string
   expires?: number
 }
@@ -88,24 +87,29 @@ export const getStoredSalesChannelToken = async ({
 }: GetStoredSalesChannelTokenConfig): Promise<StoredOauthResponse | null> => {
   const tokenData = getStoredTokenData({ app, slug, scope })
   if (!isValidStoredTokenData({ tokenData, clientId })) {
-    const endpoint = `https://${slug}.${domain}`
-    const accessTokenResponse = await Promise.resolve(
-      getSalesChannelToken({ clientId, endpoint, scope })
-    )
-    if (accessTokenResponse?.access_token != null) {
+    const auth = await authenticate('client_credentials', {
+      domain,
+      clientId,
+      scope
+    })
+    if (auth.accessToken != null) {
+      const decodedJWT = jwtDecode(auth.accessToken)
+      const slug = jwtIsSalesChannel(decodedJWT.payload)
+        ? decodedJWT.payload.organization.slug
+        : ''
+
       const tokenData: StoredOauthResponse = {
         client_id: clientId,
-        access_token: accessTokenResponse?.access_token,
+        access_token: auth.accessToken,
         scope,
-        token_type: accessTokenResponse?.token_type,
-        refresh_token: accessTokenResponse?.refresh_token,
-        expires: getInfoFromJwt(accessTokenResponse?.access_token)?.exp
+        token_type: auth.tokenType,
+        expires: decodedJWT.payload.exp
       }
       const storageKey = getStoredTokenKey({ app, slug, scope })
       localStorage.setItem(storageKey, JSON.stringify(tokenData))
       return tokenData
     } else {
-      return accessTokenResponse
+      return null
     }
   } else {
     return tokenData