implement login

Signed-off-by: Loan Laux <loan@outgrow.io>

framework/reactioncommerce/api/cart/handlers/get-cart.ts

@@ -9,16 +9,14 @@ import {
 import { normalizeCart } from '@framework/utils'
 
 // Return current cart info
-const getCart: CartHandlers['getCart'] = async ({
-  req: {
+const getCart: CartHandlers['getCart'] = async ({ req, res, config }) => {
+  const {
     cookies: {
       [REACTION_ANONYMOUS_CART_TOKEN_COOKIE]: anonymousCartToken,
       [REACTION_CART_ID_COOKIE]: cartId,
     },
-  },
-  res,
-  config,
-}) => {
+  } = req
+
   let normalizedCart
 
   console.log('get-cart API')

framework/reactioncommerce/api/checkout/index.ts

@@ -6,7 +6,7 @@ import createApiHandler, {
 import {
   REACTION_ANONYMOUS_CART_TOKEN_COOKIE,
   SHOPIFY_CHECKOUT_URL_COOKIE,
-  SHOPIFY_CUSTOMER_TOKEN_COOKIE,
+  REACTION_CUSTOMER_TOKEN_COOKIE,
 } from '../../const'
 
 import { getConfig } from '..'
@@ -25,14 +25,14 @@ const checkoutApi: ReactionCommerceApiHandler<any> = async (
 
   const { cookies } = req
   const checkoutUrl = cookies[SHOPIFY_CHECKOUT_URL_COOKIE]
-  const customerCookie = cookies[SHOPIFY_CUSTOMER_TOKEN_COOKIE]
+  const customerCookie = cookies[REACTION_CUSTOMER_TOKEN_COOKIE]
 
   if (customerCookie) {
     try {
       await config.fetch(associateCustomerWithCheckoutMutation, {
         variables: {
           checkoutId: cookies[REACTION_ANONYMOUS_CART_TOKEN_COOKIE],
-          customerAccessToken: cookies[SHOPIFY_CUSTOMER_TOKEN_COOKIE],
+          customerAccessToken: cookies[REACTION_CUSTOMER_TOKEN_COOKIE],
         },
       })
     } catch (error) {

framework/reactioncommerce/api/index.ts

@@ -5,8 +5,8 @@ import {
   REACTION_ANONYMOUS_CART_TOKEN_COOKIE,
   REACTION_CART_ID_COOKIE,
   REACTION_EMPTY_DUMMY_CART_ID,
-  SHOPIFY_CUSTOMER_TOKEN_COOKIE,
-  SHOPIFY_COOKIE_EXPIRE,
+  REACTION_CUSTOMER_TOKEN_COOKIE,
+  REACTION_COOKIE_EXPIRE,
   SHOP_ID,
 } from '../const'
 
@@ -45,9 +45,9 @@ const config = new Config({
   cartCookie: REACTION_ANONYMOUS_CART_TOKEN_COOKIE,
   cartIdCookie: REACTION_CART_ID_COOKIE,
   dummyEmptyCartId: REACTION_EMPTY_DUMMY_CART_ID,
-  cartCookieMaxAge: SHOPIFY_COOKIE_EXPIRE,
+  cartCookieMaxAge: REACTION_COOKIE_EXPIRE,
   fetch: fetchGraphqlApi,
-  customerCookie: SHOPIFY_CUSTOMER_TOKEN_COOKIE,
+  customerCookie: REACTION_CUSTOMER_TOKEN_COOKIE,
   shopId: SHOP_ID,
 })
 

framework/reactioncommerce/api/utils/fetch-graphql-api.ts

@@ -1,6 +1,5 @@
 import type { GraphQLFetcher } from '@commerce/api'
 import fetch from './fetch'
-
 import { API_URL } from '../../const'
 import { getError } from '../../utils/handle-fetch-response'
 

framework/reactioncommerce/auth/index.ts

@@ -0,0 +1,3 @@
+export { default as useLogin } from './use-login'
+export { default as useLogout } from './use-logout'
+export { default as useSignup } from './use-signup'

framework/reactioncommerce/auth/use-login.tsx

@@ -2,7 +2,7 @@ import { useCallback } from 'react'
 import type { MutationHook } from '@commerce/utils/types'
 import { CommerceError, ValidationError } from '@commerce/utils/errors'
 import useCustomer from '../customer/use-customer'
-import createCustomerAccessTokenMutation from '../utils/mutations/customer-access-token-create'
+import authenticateMutation from '../utils/mutations/authenticate'
 import {
   CustomerAccessTokenCreateInput,
   CustomerUserError,
@@ -25,7 +25,7 @@ const getErrorMessage = ({ code, message }: CustomerUserError) => {
 
 export const handler: MutationHook<null, {}, CustomerAccessTokenCreateInput> = {
   fetchOptions: {
-    query: createCustomerAccessTokenMutation,
+    query: authenticateMutation,
   },
   async fetcher({ input: { email, password }, options, fetch }) {
     if (!(email && password)) {
@@ -35,25 +35,24 @@ export const handler: MutationHook<null, {}, CustomerAccessTokenCreateInput> = {
       })
     }
 
-    const { customerAccessTokenCreate } = await fetch<
-      Mutation,
-      MutationCheckoutCreateArgs
-    >({
+    console.log('querying API')
+
+    const { authenticate } = await fetch<Mutation, MutationCheckoutCreateArgs>({
       ...options,
       variables: {
-        input: { email, password },
+        serviceName: 'password',
+        params: { user: { email }, password },
       },
     })
 
-    const errors = customerAccessTokenCreate?.customerUserErrors
+    // if (errors && errors.length) {
+    //   throw new ValidationError({
+    //     message: getErrorMessage(errors[0].message),
+    //   })
+    // }
+    const accessToken = authenticate?.tokens?.accessToken
 
-    if (errors && errors.length) {
-      throw new ValidationError({
-        message: getErrorMessage(errors[0]),
-      })
-    }
-    const customerAccessToken = customerAccessTokenCreate?.customerAccessToken
-    const accessToken = customerAccessToken?.accessToken
+    console.log('accessToken', accessToken)
 
     if (accessToken) {
       setCustomerToken(accessToken)

framework/reactioncommerce/auth/use-signup.tsx

@@ -7,7 +7,7 @@ import { CustomerCreateInput } from '../schema'
 
 import {
   customerCreateMutation,
-  customerAccessTokenCreateMutation,
+  authenticateMutation,
 } from '../utils/mutations'
 import handleLogin from '../utils/handle-login'
 
@@ -47,7 +47,7 @@ export const handler: MutationHook<
 
     try {
       const loginData = await fetch({
-        query: customerAccessTokenCreateMutation,
+        query: authenticateMutation,
         variables: {
           input: {
             email,

framework/reactioncommerce/cart/utils/checkout-create.ts

@@ -1,7 +1,7 @@
 import {
   REACTION_ANONYMOUS_CART_TOKEN_COOKIE,
   SHOPIFY_CHECKOUT_URL_COOKIE,
-  SHOPIFY_COOKIE_EXPIRE,
+  REACTION_COOKIE_EXPIRE,
 } from '../../const'
 
 import checkoutCreateMutation from '../../utils/mutations/checkout-create'
@@ -22,7 +22,7 @@ export const checkoutCreate = async (fetch: any) => {
 
   if (checkoutId) {
     const options = {
-      expires: SHOPIFY_COOKIE_EXPIRE,
+      expires: REACTION_COOKIE_EXPIRE,
     }
     Cookies.set(REACTION_ANONYMOUS_CART_TOKEN_COOKIE, checkoutId, options)
     Cookies.set(SHOPIFY_CHECKOUT_URL_COOKIE, checkout?.webUrl, options)

framework/reactioncommerce/const.ts

@@ -7,12 +7,12 @@ export const REACTION_EMPTY_DUMMY_CART_ID = 'DUMMY_EMPTY_CART_ID'
 
 export const SHOPIFY_CHECKOUT_URL_COOKIE = 'shopify_checkoutUrl'
 
-export const SHOPIFY_CUSTOMER_TOKEN_COOKIE = 'shopify_customerToken'
+export const REACTION_CUSTOMER_TOKEN_COOKIE = 'reaction_customerToken'
 
 export const STORE_DOMAIN = process.env.NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN
 
-export const SHOPIFY_COOKIE_EXPIRE = 30
+export const REACTION_COOKIE_EXPIRE = 30
 
 export const API_URL = `http://127.0.0.1:3000/graphql`
 
-export const SHOP_ID = 'cmVhY3Rpb24vc2hvcDplcnBESFlDdzc5cFRBV0FHUg=='
+export const SHOP_ID = 'cmVhY3Rpb24vc2hvcDpIZGIycnRYTWVpbVRKbzZrcg=='

framework/reactioncommerce/fetcher.ts

@@ -2,6 +2,7 @@ import { FetcherError } from '@commerce/utils/errors'
 import type { Fetcher } from '@commerce/utils/types'
 import { handleFetchResponse } from './utils'
 import { API_URL } from './const'
+import { getCustomerToken } from './utils'
 
 async function getText(res: Response) {
   try {
@@ -28,12 +29,20 @@ const fetcher: Fetcher = async ({
 }) => {
   // if no URL is passed but we have a `query` param, we assume it's GraphQL
   if (!url && query) {
+    const customerToken = getCustomerToken()
+    const authorizationHeader = {}
+
+    if (customerToken) {
+      authorizationHeader['Authorization'] = `bearer ${customerToken}`
+    }
+
     return handleFetchResponse(
       await fetch(API_URL, {
         method: 'POST',
         body: JSON.stringify({ query, variables }),
         headers: {
           'Content-Type': 'application/json',
+          ...authorizationHeader,
         },
       })
     )

framework/reactioncommerce/utils/customer-token.ts

@@ -1,20 +1,24 @@
 import Cookies, { CookieAttributes } from 'js-cookie'
-import { SHOPIFY_COOKIE_EXPIRE, SHOPIFY_CUSTOMER_TOKEN_COOKIE } from '../const'
+import {
+  REACTION_COOKIE_EXPIRE,
+  REACTION_CUSTOMER_TOKEN_COOKIE,
+} from '../const'
 
-export const getCustomerToken = () => Cookies.get(SHOPIFY_CUSTOMER_TOKEN_COOKIE)
+export const getCustomerToken = () =>
+  Cookies.get(REACTION_CUSTOMER_TOKEN_COOKIE)
 
 export const setCustomerToken = (
   token: string | null,
   options?: CookieAttributes
 ) => {
   if (!token) {
-    Cookies.remove(SHOPIFY_CUSTOMER_TOKEN_COOKIE)
+    Cookies.remove(REACTION_CUSTOMER_TOKEN_COOKIE)
   } else {
     Cookies.set(
-      SHOPIFY_CUSTOMER_TOKEN_COOKIE,
+      REACTION_CUSTOMER_TOKEN_COOKIE,
       token,
       options ?? {
-        expires: SHOPIFY_COOKIE_EXPIRE,
+        expires: REACTION_COOKIE_EXPIRE,
       }
     )
   }

framework/reactioncommerce/utils/mutations/authenticate.ts

@@ -0,0 +1,15 @@
+const authenticateMutation = /* GraphQL */ `
+  mutation authenticate(
+    $serviceName: String!
+    $params: AuthenticateParamsInput!
+  ) {
+    authenticate(serviceName: $serviceName, params: $params) {
+      sessionId
+      tokens {
+        refreshToken
+        accessToken
+      }
+    }
+  }
+`
+export default authenticateMutation

framework/reactioncommerce/utils/mutations/customer-access-token-create.ts

@@ -1,16 +0,0 @@
-const customerAccessTokenCreateMutation = /* GraphQL */ `
-  mutation customerAccessTokenCreate($input: CustomerAccessTokenCreateInput!) {
-    customerAccessTokenCreate(input: $input) {
-      customerAccessToken {
-        accessToken
-        expiresAt
-      }
-      customerUserErrors {
-        code
-        field
-        message
-      }
-    }
-  }
-`
-export default customerAccessTokenCreateMutation

framework/reactioncommerce/utils/mutations/index.ts

@@ -1,7 +1,7 @@
 export { default as addCartItemsMutation } from './add-cart-items'
 export { default as customerCreateMutation } from './customer-create'
 export { default as checkoutCreateMutation } from './checkout-create'
-export { default as customerAccessTokenCreateMutation } from './customer-access-token-create'
+export { default as authenticateMutation } from './authenticate'
 export { default as customerAccessTokenDeleteMutation } from './customer-access-token-delete'
 export { default as removeCartItemsMutation } from './remove-cart-items'
 export { default as updateCartItemsQuantityMutation } from './update-cart-items-quantity'

next.config.js

@@ -6,6 +6,9 @@ const isShopify = commerce.provider === 'shopify'
 const isRC = commerce.provider === 'reactioncommerce'
 
 module.exports = withCommerceConfig({
+  env: {
+    NEXTAUTH_URL: process.env.NEXTAUTH_URL,
+  },
   commerce,
   i18n: {
     locales: ['en-US', 'es'],