@accelbyte/sdk 1.1.2 → 1.2.0

package/examples/next/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: Next.js
 
-## Getting Started
+This is a sample usage of SDK using [Next.js](https://nextjs.org).
 
-First, run the development server:
+## 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 url in your browser http://localhost:3000/
+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/next/next.config.js#L8). It is required because otherwise during local development, we will be blocked by [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) for some client side requests.
+2. Change the [base URL, client ID, namespace, and redirect URI](https://github.com/AccelByte/accelbyte-web-sdk/blob/main/packages/sdk/examples/next/pages/index.tsx#L17-L20) 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.NEXT_PUBLIC_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 `NEXT_PUBLIC_BASE_URL` environment variable instead of the `localhost:3030` one.

package/examples/next/package.json

@@ -3,15 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev -p 3030",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
-    "link:start": "yarn link @accelbyte/sdk",
-    "link:stop": "yarn unlink @accelbyte/sdk && yarn install --force"
+    "lint": "next lint"
   },
   "dependencies": {
-    "@accelbyte/sdk": "0.2.0-beta.20",
+    "@accelbyte/sdk": "1.1.3",
     "@next/font": "13.0.7",
     "@types/node": "18.11.17",
     "@types/react": "18.0.26",

package/examples/next/pages/index.tsx

@@ -3,16 +3,17 @@
  * This is licensed software from AccelByte Inc, for limitations
  * and restrictions contact your company contract manager.
  */
-import React from 'react'
+import React, { useEffect } from 'react'
 import { GetServerSideProps, InferGetServerSidePropsType } from 'next'
 import Head from 'next/head'
 import Image from 'next/image'
-import styles from '../styles/Home.module.css'
+import { Accelbyte, CurrencyInfo, DiscoveryConfigData, ItemPagingSlicedResult, UserResponseV3 } from '@accelbyte/sdk'
+import { exchangeAuthorizationCode, login } from '~/sdk'
 
-import { Accelbyte, CurrencyInfo, DiscoveryConfigData, ItemPagingSlicedResult, NamespaceInfo } from '@accelbyte/sdk'
+import styles from '../styles/Home.module.css'
 
 const SDK_CONFIG = {
-  baseURL: 'https://demo.accelbyte.io',
+  baseURL: 'http://localhost:3030/api',
   clientId: '77f88506b6174c3ea4d925f5b4096ce8',
   namespace: 'accelbyte',
   redirectURI: 'http://localhost:3030'
@@ -23,39 +24,35 @@ const sdk = Accelbyte.SDK({
 })
 
 interface TestSdkReturnType {
-  loginURL: string
-  listDiscoveryConfigs: DiscoveryConfigData | undefined
-  listOfCurrencies: CurrencyInfo[] | undefined
-  listOfItems: ItemPagingSlicedResult | undefined
-  listOfNamespaces: NamespaceInfo[] | undefined
+  currentUser: UserResponseV3 | null | undefined
+  listDiscoveryConfigs: DiscoveryConfigData | null | undefined
+  listOfCurrencies: CurrencyInfo[] | null | undefined
+  listOfItems: ItemPagingSlicedResult | null | undefined
 }
 
-export const getServerSideProps: GetServerSideProps<{ data: TestSdkReturnType }> = async () => {
-  const [listDiscoveryConfigs, listOfCurrencies, listOfItems, listOfNamespaces] = await Promise.all([
-    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({
+export const getServerSideProps: GetServerSideProps<{ data: TestSdkReturnType }> = async ({ req }) => {
+  const accessToken = req.cookies.access_token
+  const [currentUser, listDiscoveryConfigs, listOfCurrencies, listOfItems] = await Promise.all([
+    sdk.IAM.User({
       config: {
         headers: {
-          Authorization: `Bearer <replace-this-with-access-token>`
+          authorization: `Bearer ${accessToken}`
         }
       }
-    }).getNamespaces()
+    }).getCurrentUser(),
+    sdk.AccelbyteConfig.PublicTemplate().getDiscoveryTemplateConfigs(),
+
+    sdk.Platform.Currency().getCurrencies(),
+    sdk.Platform.Item().fetchItemsByCriteria({})
   ])
 
   return {
     props: {
       data: {
-        loginURL: sdk.IAM.UserAuthorization().createLoginURL(),
-        listDiscoveryConfigs: listDiscoveryConfigs.response?.data,
-        listOfCurrencies: listOfCurrencies.response?.data,
-        listOfItems: listOfItems.response?.data,
-        listOfNamespaces: listOfNamespaces.response?.data || null
+        currentUser: currentUser.response?.data || null,
+        listDiscoveryConfigs: listDiscoveryConfigs.response?.data || null,
+        listOfCurrencies: listOfCurrencies.response?.data || null,
+        listOfItems: listOfItems.response?.data || null
       }
     }
   }
@@ -63,6 +60,18 @@ export const getServerSideProps: GetServerSideProps<{ data: TestSdkReturnType }>
 
 // Page.
 export default function Home({ data }: InferGetServerSidePropsType<typeof getServerSideProps>) {
+  useEffect(() => {
+    async function exchange() {
+      const result = await exchangeAuthorizationCode(sdk, window.location.href)
+      if (result) {
+        // Reload so we can re-fetch the `currentUser` from the server side.
+        window.location.reload()
+      }
+    }
+
+    exchange()
+  }, [])
+
   return (
     <>
       <Head>
@@ -87,6 +96,12 @@ export default function Home({ data }: InferGetServerSidePropsType<typeof getSer
           </div>
         </div>
 
+        {!data?.currentUser && (
+          <div>
+            <button onClick={() => login(sdk)}>Log in</button>
+          </div>
+        )}
+
         <div className={styles.responses} id="response">
           {Object.keys(data).map(key => (
             <Collapsible key={key} json={data[key as keyof TestSdkReturnType]} title={key} />

package/examples/next/src/sdk.ts

@@ -0,0 +1,32 @@
+/*
+ * 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 { AccelbyteSDK } from '@accelbyte/sdk'
+
+export function login(sdk: AccelbyteSDK) {
+  const url = sdk.IAM.UserAuthorization().createLoginURL()
+  window.location.replace(url)
+}
+
+export async function exchangeAuthorizationCode(sdk: AccelbyteSDK, url: string) {
+  const searchParams = new URL(url).searchParams
+  const { code, error, state } = Object.fromEntries(searchParams.entries())
+  if (!code) return null
+
+  try {
+    const response = await sdk.IAM.UserAuthorization().exchangeAuthorizationCode({ code, error, state })
+    window.history.pushState({}, '', window.location.origin)
+
+    return {
+      accessToken: response?.response?.data.access_token,
+      refreshToken: response?.response?.data.refresh_token
+    }
+  } catch (err) {
+    console.error(err)
+  }
+
+  return null
+}