Updated from pipeline

README.md

@@ -1,6 +1,6 @@
 # AccelByte Gaming Services (AGS) TypeScript SDK
 
-> **Note**: The AccelByte Gaming Service (AGS Typescript SDK is still under development. Some Extend SDK features may not be available yet.
+> **Note**: The AccelByte Gaming Service (AGS) Typescript SDK is still under development. Some Extend SDK features may not be available yet.
 
 The AGS TypeScript SDK is a versatile library for building web applications using AccelByte API services. It is platform-agnostic, making it suitable for both browser and server environments. Developed with TypeScript, the SDK emphasizes strict type safety, providing robust runtime type-checking to help you confidently work with AccelByte Gaming Service (AGS) type definitions.
 

examples/sdk-demo-example/package.json

@@ -26,6 +26,7 @@
     "@types/react-dom": "18.0.9",
     "@vitejs/plugin-react": "4.3.1",
     "autoprefixer": "10.4.20",
+    "cookie": "1.0.1",
     "postcss": "8.4.45",
     "tailwindcss": "3.4.10",
     "typescript": "5.5.4",

examples/sdk-demo-example/src/demo/AppSharedCloud.tsx

@@ -3,24 +3,20 @@
  * This is licensed software from AccelByte Inc, for limitations
  * and restrictions contact your company contract manager.
  */
-import { AccelByte } from '@accelbyte/sdk'
 import React, { useLayoutEffect, useState } from 'react'
 import { Heading } from './components/Heading'
-import { Section, SectionContent } from './components/Section'
-import { Snippet } from './components/Snippet'
+import { Section } from './components/Section'
 import { DevTools } from './DevTools'
 import { GlobalContextProvider } from './GlobalContext'
-import { BASE_SDK_CORE_CONFIG, createSdkConfig } from './helpers'
-import { LoginWithDeviceID } from './LoginWithDeviceID'
+import { Login } from './Login'
 import { MyUser } from './MyUser'
 import { PlatformItems } from './PlatformItems'
+import { SdkConfig } from './SdkConfig'
 import { UpdateMyProfile } from './UpdateMyProfile'
 
 function App() {
-  const [sdk, setSdk] = useState(AccelByte.SDK(createSdkConfig(BASE_SDK_CORE_CONFIG)))
-
   return (
-    <GlobalContextProvider sdk={sdk} setSdk={setSdk}>
+    <GlobalContextProvider>
       <main className="p-4 flex justify-center bg-slate-50">
         <div className="flex flex-col gap-y-8 lg:max-w-[768px]">
           <Heading level={1} className="text-2xl">
@@ -29,13 +25,13 @@ function App() {
 
           <div className="flex flex-col gap-y-4">
             <p>
-              Welcome to the AccelByte TypeScript SDK demo. To use this demo, you will need to disable CORS (Cross-Origin Resource Sharing)
-              because our services are same-origin only (by default).
+              Welcome to the AccelByte TypeScript SDK demo! To use this demo, you'll need to disable CORS (Cross-Origin Resource Sharing)
+              since our services are restricted to same-origin (by default).
             </p>
 
             <p>
-              Cookies will only work when the site is in the same origin as the AGS services. So, these examples will not use cookies, but
-              rather <code>access_token</code> field that we can retrieve after logging in.
+              For this demo, cookies won't be used. Instead, we'll rely on the <code>access_token</code> retrieved after login, as cookies
+              only work when the site shares the same origin as AGS services.
             </p>
           </div>
 
@@ -45,28 +41,11 @@ function App() {
 
           <hr />
 
-          <Section>
-            <Heading level={2}>SDK config</Heading>
-
-            <SectionContent>
-              <p>
-                To configure the SDK, use the "Configure SDK" button on the bottom-right part of the screen. Upon submission, the updated
-                SDK configuration will appear below.
-              </p>
-
-              <p>
-                Adjust the <code>baseURL</code>, <code>clientID</code>, <code>namespace</code>, and <code>redirectURI</code> according to
-                the IAM client that you have created. If you are using AGS Private Cloud, you can use IAM client on the Publisher/Game
-                namespace level, whereas if you are using AGS Shared Cloud, you can only use IAM client on the Game namespace level.
-              </p>
-
-              <Snippet>{JSON.stringify(sdk.assembly().coreConfig, null, 2)}</Snippet>
-            </SectionContent>
-          </Section>
+          <SdkConfig />
 
           <hr />
 
-          <LoginWithDeviceID />
+          <Login />
 
           <hr />
 
@@ -82,7 +61,7 @@ function App() {
         </div>
       </main>
 
-      <DevTools setSdk={setSdk} tier="shared" />
+      <DevTools tier="shared" />
     </GlobalContextProvider>
   )
 }
@@ -112,7 +91,7 @@ function TOC() {
     <Section>
       <Heading level={2}>Table of contents</Heading>
 
-      <ul className="list-disc pl-4">
+      <ul>
         {h2Tags.map(h2Tag => (
           <li key={h2Tag.id}>
             <a className="text-blue-500 hover:text-blue-400" href={`#${h2Tag.id}`}>

examples/sdk-demo-example/src/demo/DevTools.tsx

@@ -1,12 +1,12 @@
-import { AccelByte, AccelByteSDK } from '@accelbyte/sdk'
+import { AccelByte } from '@accelbyte/sdk'
 import React, { useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { Form, FormItem } from './components/Form'
 import { SectionContent } from './components/Section'
-import { BASE_SDK_CORE_CONFIG, createSdkConfig } from './helpers'
+import { CONFIG_STORAGE_KEY, useGlobal } from './GlobalContext'
+import { createSdkConfig } from './helpers'
 
 interface Props {
-  setSdk: React.Dispatch<React.SetStateAction<AccelByteSDK>>
   tier: 'shared' | 'private'
 }
 
@@ -17,15 +17,20 @@ interface FormValues {
   redirectURI: string
 }
 
-export function DevTools({ setSdk, tier }: Props) {
+export function DevTools({ tier }: Props) {
+  const { setSdk, setSDKCoreConfig, sdkCoreConfig } = useGlobal()
+
   const { handleSubmit, register } = useForm<FormValues>({
-    defaultValues: BASE_SDK_CORE_CONFIG
+    defaultValues: sdkCoreConfig
   })
   const [isPanelShown, setIsPanelShown] = useState(false)
 
   const onSubmit = handleSubmit(data => {
+    setSDKCoreConfig(data)
     setSdk(AccelByte.SDK(createSdkConfig(data)))
     setIsPanelShown(false)
+
+    window.sessionStorage.setItem(CONFIG_STORAGE_KEY, JSON.stringify(data))
   })
 
   return (

examples/sdk-demo-example/src/demo/GlobalContext.tsx

@@ -1,18 +1,18 @@
-import { AccelByteSDK } from '@accelbyte/sdk'
+import { AccelByte, AccelByteSDK, SdkConstructorParam } from '@accelbyte/sdk'
 import { UserResponseV3 } from '@accelbyte/sdk-iam'
 import React, { ReactNode, createContext, useContext, useState } from 'react'
+import { BASE_SDK_CORE_CONFIG, createSdkConfig } from './helpers'
 
-interface SdkRelatedFields {
+const GlobalContext = createContext<{
+  sdkCoreConfig: SdkConstructorParam['coreConfig']
+  setSDKCoreConfig: (value: SdkConstructorParam['coreConfig']) => void
   sdk: AccelByteSDK
   setSdk: (sdk: AccelByteSDK) => void
-}
-
-const GlobalContext = createContext<
-  SdkRelatedFields & {
-    user: UserResponseV3 | null
-    setUser: React.Dispatch<React.SetStateAction<UserResponseV3 | null>>
-  }
->({
+  user: UserResponseV3 | null
+  setUser: React.Dispatch<React.SetStateAction<UserResponseV3 | null>>
+}>({
+  sdkCoreConfig: null!,
+  setSDKCoreConfig: () => undefined,
   user: null,
   setUser: () => undefined,
   sdk: null!,
@@ -21,12 +21,29 @@ const GlobalContext = createContext<
 
 export const useGlobal = () => useContext(GlobalContext)
 
-interface Props extends SdkRelatedFields {
+export const CONFIG_STORAGE_KEY = 'sdkConfig'
+
+interface Props {
   children: ReactNode
 }
 
-export function GlobalContextProvider({ sdk, setSdk, children }: Props) {
+export function GlobalContextProvider({ children }: Props) {
+  const [sdkCoreConfig, setSDKCoreConfig] = useState<SdkConstructorParam['coreConfig']>(() => {
+    const storageContent = window.sessionStorage.getItem(CONFIG_STORAGE_KEY)
+    if (!storageContent) return BASE_SDK_CORE_CONFIG
+
+    const parsed = JSON.parse(storageContent)
+
+    // Ensure all keys exist.
+    const parsedKeys = Object.keys(parsed)
+    const isValidConfig = Object.keys(BASE_SDK_CORE_CONFIG).every(key => parsedKeys.includes(key))
+
+    if (!isValidConfig) return BASE_SDK_CORE_CONFIG
+
+    return parsed
+  })
   const [user, setUser] = useState<UserResponseV3 | null>(null)
+  const [sdk, setSdk] = useState(AccelByte.SDK(createSdkConfig(sdkCoreConfig)))
 
-  return <GlobalContext.Provider value={{ user, setUser, sdk, setSdk }}>{children}</GlobalContext.Provider>
+  return <GlobalContext.Provider value={{ sdkCoreConfig, setSDKCoreConfig, user, setUser, sdk, setSdk }}>{children}</GlobalContext.Provider>
 }