@accelbyte/sdk 1.1.2 → 1.2.0

package/examples/vite/README.md

@@ -1,13 +1,46 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# SDK Usage Example: vite
 
-## Getting Started
+This is a sample usage of SDK using [vite](https://vitejs.dev/).
 
-Run the command below:
+## How to Run
 
-```bash
-npm run dev
-# or
+This folder should be ready to run without any changes as it is pointing to the [AccelByte's demo environment](https://demo.accelbyte.io) by default.
+
+```sh
+# Install the dependencies.
+yarn install
+
+# Run the dev server.
 yarn dev
 ```
 
-And open the link http://localhost:3030/
+After that, open http://localhost:3030. There will be few requests fired on the background, which then you could inspect the response by collapsing the `<details>` element.
+
+There will be also a `<details>` element with the title `currentUser`, which will contain your user information. By default, if you aren't logged in, then you will get `401 Unauthorized` in the network response.
+
+If you want to log in, you can click on the "Log in" button and it will redirect you to the Login website. After you submit with the valid credentials, you will be redirected back to http://localhost:3030 with some query parameters in it. These query parameters will be processed by this function `exchangeAuthorizationCode`, which will exchange the code passed in the query parameters to cookies.
+
+## How to Point to Other Environments
+
+If you want to use this example folder for other environments, do these steps:
+
+1. Change the [proxy target](https://github.com/AccelByte/accelbyte-web-sdk/blob/main/packages/sdk/examples/vite/vite.config.ts#L16-L22). It is required because otherwise during local development, we will be blocked by [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS).
+2. Change the [client ID, namespace, and redirect URI](https://github.com/AccelByte/accelbyte-web-sdk/blob/main/packages/sdk/examples/vite/src/Sdk.ts#L11-L13) of the SDK options. You can get these from Admin Portal's IAM Clients page. As for the redirect URI, ensure that it is a subset of the redirect URIs listed in the IAM Client.
+
+## Production builds
+
+For production builds, please ensure that you have added conditionals to the `baseURL`. As mentioned in the section above, the default `baseURL` is the local development's origin with `/api` suffix to bypass CORS. However, we won't need it in production builds, because the default proxy server doesn't exist when we run in production mode.
+
+As such, what we can do is to have something like this:
+
+```ts
+const BASE_URL = process.env.VITE_BASE_URL
+const SDK_CONFIG = {
+  baseURL: process.env.NODE_ENV === 'production' ? BASE_URL : 'http://localhost:3030/api',
+  clientId: '77f88506b6174c3ea4d925f5b4096ce8',
+  namespace: 'accelbyte',
+  redirectURI: process.env.NODE_ENV === 'production' ? BASE_URL : 'http://localhost:3030'
+}
+```
+
+So, when we are building for production, it will use `VITE_BASE_URL` environment variable instead of the `localhost:3030` one.

package/examples/vite/package.json

@@ -6,12 +6,10 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "preview": "vite preview",
-    "link:start": "yarn link @accelbyte/sdk",
-    "link:stop": "yarn unlink @accelbyte/sdk && yarn install --force"
+    "preview": "vite preview"
   },
   "dependencies": {
-    "@accelbyte/sdk": "0.2.0-beta.20",
+    "@accelbyte/sdk": "1.1.3",
     "dotenv": "16.0.3",
     "react": "18.2.0",
     "react-dom": "18.2.0"

package/examples/vite/src/App.tsx

@@ -5,25 +5,22 @@
  */
 import React, { useEffect, useState } from 'react'
 import './App.css'
-import { getSdkTestValues } from './Sdk'
+import { exchangeAuthorizationCode, getSdkTestValues, login } from './Sdk'
 
 function App() {
   const [responses, setResponses] = useState<any>(null)
-  useEffect(() => {
-    let ignore = false
 
+  useEffect(() => {
     async function initialize() {
+      // Exchange authorization code first, so that by the time we fetch the stuff, we already have the cookie.
+      await exchangeAuthorizationCode()
+
+      // After that, fetch the stuff.
       setResponses(null)
-      if (!ignore) {
-        setResponses(await getSdkTestValues())
-      }
+      setResponses(await getSdkTestValues())
     }
 
     initialize()
-
-    return () => {
-      ignore = true
-    }
   }, [])
 
   return (
@@ -37,6 +34,12 @@ function App() {
         </div>
       </div>
 
+      {!responses?.currentUser?.response?.data && (
+        <div>
+          <button onClick={login}>Log in</button>
+        </div>
+      )}
+
       {responses === null ? (
         'No responses yet'
       ) : (

package/examples/vite/src/Sdk.ts

@@ -1,7 +1,13 @@
+/*
+ * Copyright (c) 2023 AccelByte Inc. All Rights Reserved
+ * This is licensed software from AccelByte Inc, for limitations
+ * and restrictions contact your company contract manager.
+ */
+
 import { Accelbyte } from '@accelbyte/sdk'
 
 const SDK_CONFIG = {
-  baseURL: '/api',
+  baseURL: 'http://localhost:3030/api',
   clientId: '77f88506b6174c3ea4d925f5b4096ce8',
   namespace: 'accelbyte',
   redirectURI: 'http://localhost:3030'
@@ -12,27 +18,36 @@ const sdk = Accelbyte.SDK({
 })
 
 export async function getSdkTestValues() {
-  const [listDiscoveryConfigs, listOfCurrencies, listOfItems, listOfNamespaces] = await Promise.all([
+  const [currentUser, listDiscoveryConfigs, listOfCurrencies, listOfItems] = await Promise.all([
+    sdk.IAM.User().getCurrentUser(),
     sdk.AccelbyteConfig.PublicTemplate().getDiscoveryTemplateConfigs(),
 
     sdk.Platform.Currency().getCurrencies(),
-    sdk.Platform.Item().fetchItemsByCriteria({}),
-
-    // These require authentication and we can't use it right away.
-    // Ensure that you have logged in (have cookies) or pass the access token to the `Authorization` header.
-    sdk.Basic.Namespace({
-      config: {
-        headers: {
-          Authorization: `Bearer <replace-this-with-access-token>`
-        }
-      }
-    }).getNamespaces()
+    sdk.Platform.Item().fetchItemsByCriteria({})
   ])
 
   return {
+    currentUser,
     listDiscoveryConfigs,
     listOfCurrencies,
-    listOfItems,
-    listOfNamespaces
+    listOfItems
+  }
+}
+
+export function login() {
+  const url = sdk.IAM.UserAuthorization().createLoginURL()
+  window.location.replace(url)
+}
+
+export async function exchangeAuthorizationCode() {
+  const searchParams = new URL(window.location.href).searchParams
+  const { code, error, state } = Object.fromEntries(searchParams.entries())
+  if (!code) return
+
+  try {
+    await sdk.IAM.UserAuthorization().exchangeAuthorizationCode({ code, error, state })
+    window.history.pushState({}, '', window.location.origin)
+  } catch (err) {
+    console.error(err)
   }
 }

package/examples/vite/yarn.lock

@@ -2,10 +2,10 @@
 # yarn lockfile v1
 
 
-"@accelbyte/sdk@0.2.0-beta.20":
-  version "0.2.0-beta.20"
-  resolved "https://registry.yarnpkg.com/@accelbyte/sdk/-/sdk-0.2.0-beta.20.tgz#7ae3195ee467a920422d307c142c1c2db5bd140d"
-  integrity sha512-phwB+uGHoOidD6+V/60/5oJilnpmAIk/bF9eLb6drkqzo0mfehrFi3muLJdhBtgDRrV/attzPJgMNcRf8UCWOw==
+"@accelbyte/sdk@1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@accelbyte/sdk/-/sdk-1.1.3.tgz#93de5299c99b12a79a4e04a918989d4c7ce124dd"
+  integrity sha512-DL0JXLeBL7yJs+EWATEuftSghpfOeGZMG2dGUjQD6sly+RsBi3UJVSjxAHRv/fo/nlW7yr4lTt2XQ2XbRDJeeg==
   dependencies:
     "@accelbyte/validator" "0.2.0-beta.2"
     axios "0.27.2"

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@accelbyte/sdk",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "author": "AccelByte Inc",
-  "license": "AccelByte License",
+  "license": "SEE LICENSE IN LICENSE",
   "main": "./dist/cjs/node/index.cjs",
   "types": "./dist/index.d.ts",
   "type": "module",
@@ -22,7 +22,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@accelbyte/validator": "0.2.0-beta.2",
+    "@accelbyte/validator": "0.2.0-beta.4",
     "axios": "0.27.2",
     "buffer": "6.0.3",
     "crypto-js": "4.1.1",