Bump up Yorkie to v0.5.5 (#175)

* Bump up Yorkie to v0.5.5

* Update docs about auth webhook

* Add system status page link

.env

@@ -1,10 +1,11 @@
 # Common Environment Variables
-NEXT_PUBLIC_YORKIE_VERSION='0.5.4'
-NEXT_PUBLIC_YORKIE_JS_VERSION='0.5.4'
+NEXT_PUBLIC_YORKIE_VERSION='0.5.5'
+NEXT_PUBLIC_YORKIE_JS_VERSION='0.5.5'
 NEXT_PUBLIC_YORKIE_IOS_VERSION='0.4.24'
 NEXT_PUBLIC_YORKIE_ANDROID_VERSION='0.4.24'
 NEXT_PUBLIC_DASHBOARD_PATH='/dashboard'
-NEXT_PUBLIC_JS_SDK_URL='https://cdnjs.cloudflare.com/ajax/libs/yorkie-js-sdk/0.5.4/yorkie-js-sdk.js'
+NEXT_PUBLIC_JS_SDK_URL='https://cdnjs.cloudflare.com/ajax/libs/yorkie-js-sdk/0.5.5/yorkie-js-sdk.js'
+NEXT_PUBLIC_STATUS_URL='https://stats.uptimerobot.com/otOOggryMR'
 
 # Development Environment Variables
 NEXT_PUBLIC_SITE_URL='http://localhost:3000'

components/Layout/Footer.tsx

@@ -131,8 +131,8 @@ export function Footer({ shortFooter }: { shortFooter?: boolean }): ReactElement
           </div>
           <div className="site">
             <strong className="title">
-              <Link href="/community" className="link">
-                Community
+              <Link href="/support" className="link">
+                Support
               </Link>
             </strong>
             <ul className="site_list">
@@ -146,6 +146,11 @@ export function Footer({ shortFooter }: { shortFooter?: boolean }): ReactElement
                   GitHub
                 </Link>
               </li>
+              <li className="site_item">
+                <Link href={process.env.NEXT_PUBLIC_STATUS_URL!} className="link" target="_blank" rel="noreferrer">
+                  System Status
+                </Link>
+              </li>
             </ul>
           </div>
         </div>

docs/auth-webhook.mdx

@@ -0,0 +1,115 @@
+---
+title: 'Auth Webhook'
+order: 80
+---
+
+## Auth Webhook
+
+### Overview
+
+An Auth Webhook enables fine-grained access control for your application by validating client requests through an external authentication server.
+This mechanism allows you to implement custom authorization logic, ensuring that only authorized users can perform specific operations on Yorkie documents.
+
+```
+(5) Response            (4) Handle request
+     ┌─────────────────┐  ┌──┐
+     │                 │  │  │   (3) Response
+     ▼                 │  ▼  │    - allowed
+ ┌──────┐             ┌┴─────┤    - reason   ┌───────────────┐
+ │Client├────────────►│Server│◄──────────────┤External Server│
+ └──────┘ (1)Request  └────┬─┘               └───────────────┘
+           - token         │                      ▲
+           - dockey        └──────────────────────┘
+                               (2) Call webhook
+                                - token
+                                - dockey
+                                - verb: r or rw
+```
+
+The workflow follows these steps:
+1. Client makes a request with an authentication token
+2. Yorkie server forwards the request details to your webhook server
+3. Your webhook server validates the request and returns a response
+4. Based on the webhook response, Yorkie server either processes or rejects the original request
+
+### Setup and Configuration
+
+#### 1. Configure the Auth Webhook
+
+The simplest way to set up Auth Webhook is through the [Dashboard]({{DASHBOARD_PATH}}):
+- Navigate to the Project Settings page in the Dashboard
+- Configure the webhook URL and specify the methods to be authenticated
+
+<Image alt="setting auth-webhook" src="/assets/images/docs/auth-webhook-dashboard.png" width={1300} height={840} style={{ maxWidth: '1000px' }} />
+
+You can also use the Yorkie CLI. Refer to the [updating the project](/docs/cli#updating-the-project).
+
+<Alert status="warning">
+- Configuration changes may take up to 10 minutes to take effect.
+- If an Auth Webhook URL is set without specifying methods, authentication will be performed for ALL methods.
+- To disable authentication completely, you must remove the Auth Webhook URL.
+</Alert>
+
+#### 2. Client Configuration
+
+Use the `authTokenInjector` option when creating a client to provide authentication tokens:
+
+```javascript
+const client = new yorkie.Client('{{API_ADDR}}', {
+  authTokenInjector: async (reason) => {
+    // Handle token refresh logic based on webhook response
+    if (reason === 'token expired') {
+      return await refreshAccessToken();
+    }
+    return accessToken;
+  },
+});
+```
+
+The authTokenInjector will be called again with the webhook's response reason if a `codes.Unauthenticated` error occurs, allowing the system to refresh tokens.
+
+#### 3. Webhook Request Format
+
+When a client makes a request, the server sends the following information to your webhook server:
+
+```json
+{
+  "token": "SOME_TOKEN",          // Token from authTokenInjector
+  "method": "PushPull",           // Method being called: ActivateClient, DeactivateClient, AttachDocument, DetachDocument, WatchDocuments
+  "documentAttributes": [{
+    "key": "DOCUMENT_KEY",        // Document key
+    "verb": "r"                   // Access level: 'r' or 'rw'
+  }]
+}
+```
+
+#### 4. Webhook Response Format
+
+Your webhook server should respond with:
+
+```json
+{
+  "allowed": true,    // Authorization decision
+  "reason": "ok"      // Optional explanation
+}
+```
+
+HTTP Status Codes:
+- `200 OK`: Request is authorized
+- `401 Unauthenticated`: Token is invalid or missing
+- `403 Permission Denied`: Token is valid but lacks required permissions
+
+#### 5. Error Handling and Recovery
+
+- Successful Authorization (200 + allowed:true)
+  - Request proceeds normally
+  - No special handling required
+- Permission Denied (403 + allowed:false)
+  - Request fails with `codes.PermissionDenied`
+- Unauthenticated (401 + allowed:false)
+  - System attempts token refresh via `authTokenInjector`
+  - For `PushPull` in realtime sync mode and `WatchDocuments`: 
+    - Automatically retries after token refresh
+    - Notifies via [`document.subscribe('auth-error')`](/docs/js-sdk#documentsubscribeauth-error)
+  - For Other Methods:
+    - Requires manual retry when handling `codes.Unauthenticated` error

docs/cli.mdx

@@ -246,6 +246,13 @@ $ yorkie project update test-project --name new-test-project
 {"id":"63fdc721b48d9fd33996b38b","name":"new-test-project","owner":"","auth_webhook_url":"","auth_webhook_methods":null,"ClientDeactivateThreshold":"24h","public_key":"cfuse8a6qdop9v48o100","secret_key":"cfuse8a6qdop9v48o10g","created_at":"2023-02-28T09:19:29.269875Z","updated_at":"2023-02-28T09:27:06.0588974Z"}
 ```
 
+You can configure the project's Auth Webhook URL using the `--auth-webhook-url` flag.  
+For more details on how Auth Webhook works, please refer to the [auth-webhook](/docs/auth-webhook).
+
+```bash
+$ yorkie project update [name] --auth-webhook-url http://localhost:3000/auth-webhook
+```
+
 ### Document
 
 Document is a data structure that can be synchronized between multiple clients. With document commands, you can manage documents in the project.
@@ -342,70 +349,6 @@ Flags:
 $ yorkie document remove test-project test-document-1
 ```
 
-#### Auth Webhook
-
-A webhook is an HTTP POST that is called when something happens. If the Auth Webhook has been configured, when a Server receives a request from a Client, the Server checks if the Client has been authorized for a certain Document by asking an outside service with a REST request.
-
-This page shows how to set up an Auth Webhook. The overall flow is as follows:
-
-```
-(5) response the request  (4) handle the request
-     ┌─────────────────┐  ┌──┐
-     │                 │  │  │   (3) response
-     ▼                 │  ▼  │    - allowed
- ┌──────┐             ┌┴─────┤    - reason   ┌──────────────┐
- │Client├────────────►│Server│◄──────────────┤Outside Server│
- └──────┘ (1)request  └────┬─┘               └──────────────┘
-           - token         │                      ▲
-           - dockey        └──────────────────────┘
-                               (2) call webhook
-                                - token
-                                - dockey
-                                - verb: r or rw
-```
-
-First, We need to pass some tokens (that identify users in the service) when creating a Client:
-
-```javascript
-const client = new yorkie.Client('{{API_ADDR}}', {
-  token: SOME_TOKEN,
-});
-```
-
-This token will be sent to the Server upon every request from the Client.
-
-We can specify an Auth Webhook for the project by update command with the `--auth-webhook-url` flag:
-
-```bash
-$ yorkie project update [name] --auth-webhook-url http://localhost:3000/auth-hook
-```
-
-The Server who receives the token calls the given webhook URL before processing the requests.
-
-Here is an example of the webhook requests:
-
-```javascript
-{
-  "token": "SOME_TOKEN",          // token passed by the client
-  "method": "PushPull",           // method: ActivateClient, DeactivateClient, AttachDocument, DetachDocument, WatchDocuments
-  documentAttributes: [{
-    key: "DOCUMENT_KEY",          // document key
-    verb: "r"                     // 'r' or 'rw'
-  }]
-}
-```
-
-The outside server should respond like this:
-
-```javascript
-{
-  "allowed": true, // or false if the given token is not authorized for this document.
-  "reason": "ok"   // [optional] reason for this response.
-}
-```
-
-If the server receives a response with `allowed: true` from the outside server, it handles the request normally, otherwise it sends the `codes.Unauthenticated` error to the client.
-
 #### Client Deactivate Threshold
 
 Client Deactivate Threshold is a time duration that determines the time for client deactivation of documents in projects. Deactivating the client and detaching it from documents is needed to increase the efficiency of GC removing [CRDT tombstones](https://crdt.tech/glossary). For more information about GC, please refer to [Garbage Collection](https://github.com/yorkie-team/yorkie/blob/main/design/garbage-collection.md).

docs/glossary.mdx

@@ -1,6 +1,6 @@
 ---
 title: 'Glossary'
-order: 100
+order: 110
 ---
 
 ## Glossary
@@ -27,4 +27,4 @@ These words are used in the Yorkie project and the community. Understanding thes
 
 <br/>
 
-> If you want to add a new word or modify the description, please submit a pull request to the [Homepage](https://github.com/yorkie-team/yorkie-team.github.io/blob/main/docs/glossary.mdx).
+> If you want to add a new word or modify the description, please submit a pull request to the [Homepage](https://github.com/yorkie-team/yorkie-team.github.io/blob/main/docs/glossary.mdx).

docs/internals.mdx

@@ -1,6 +1,6 @@
 ---
 title: 'Internals'
-order: 90
+order: 100
 ---
 
 ## Internals

docs/js-sdk.mdx

@@ -26,6 +26,25 @@ await client.activate();
 
 > The API key is used to identify the project in Yorkie. You can get the API key of the project you created in the [Dashboard]({{DASHBOARD_PATH}}).
 
+##### Creating a Client with Auth Token
+
+You can configure authentication for the client by setting up an `authTokenInjector` to provide tokens for Auth Webhook verification.
+If a `codes.Unauthenticated` error occurs, the `authTokenInjector` will be called again with the webhook's response reason, enabling automatic token refresh.
+For more information about `Auth Webhook`, please refer to the [Auth Webhook](/docs/auth-webhook).
+
+```javascript
+const client = new yorkie.Client('{{API_ADDR}}', {
+  apiKey: 'xxxxxxxxxxxxxxxxxxxx',
+  authTokenInjector: async (reason) => {
+    // Handle token refresh logic based on webhook response
+    if (reason === 'token expired') {
+      return await refreshAccessToken();
+    }
+    return accessToken;
+  },
+});
+```
+
 ### Document
 
 `Document` is a primary data type in Yorkie, which provides a JSON-like updating experience that makes it easy to represent your application's model.
@@ -102,7 +121,7 @@ await client.attach(doc, {
 // }
 ```
 
-We support element types for Primitives, and [Custom CRDT types](/js-sdk/#custom-crdt-types/).
+We support element types for Primitives, and [Custom CRDT types](/docs/js-sdk/#custom-crdt-types/).
 
 <Alert status="warning">
 Elements added by `initialRoot` are not sent to the server during the `attach` process. They are applied locally to the Document after push-pull during `attach`.
@@ -405,9 +424,27 @@ For handle this, Yorkie provides one of housekeeping feature, `client-deactivate
 <br/>
 If the client is deactivated due to inactivity, the document will be detached from the client, and you will receive a `DocumentStatus.Detached` event through the `doc.subscribe('status', callback)` method.
 <br/>
-For more information about `client-deactivate-threshold`, please refer to the [Client Deactivate Threashold](/docs/cli#client-deactivate-threshold).
+For more information about `client-deactivate-threshold`, please refer to the [Client Deactivate Threshold](/docs/cli#client-deactivate-threshold).
 </Alert>
 
+##### Document.subscribe('auth-error')
+
+You can subscribe to authentication error events using `doc.subscribe('auth-error', callback)`.
+This event is triggered when an unauthenticated error occurs during `PushPull` or `WatchDocuments` operations,
+specifically when the system automatically refreshes the token and retries the operation.
+
+```javascript
+const unsubscribe = doc.subscribe('auth-error', (event) => {
+  console.log(event.value);
+  // event.value contains:
+  // - reason: string
+  // - method: 'PushPull' | 'WatchDocuments'
+});
+```
+
+This subscription allows you to monitor when token refreshes occur due to authentication errors.  
+For more information about `Auth Webhook`, please refer to the [Auth Webhook](/docs/auth-webhook).
+
 ##### Document.subscribe('all')
 
 You can subscribe to all events occurring in the document by using `document.subscribe('all', callback)`. This is used for displaying events in [Devtools extension](/docs/devtools).

docs/self-hosted-server.mdx

@@ -1,6 +1,6 @@
 ---
 title: 'Self-Hosted Server'
-order: 80
+order: 90
 ---
 
 ## Self-Hosted Server

docs/self-hosted-server/aws-eks.mdx

@@ -1,6 +1,6 @@
 ---
 title: 'AWS EKS Installation'
-order: 82
+order: 92
 ---
 
 ## AWS EKS Installation

docs/self-hosted-server/cluster-addons.mdx

@@ -1,6 +1,6 @@
 ---
 title: 'Cluster Addons Installation'
-order: 83
+order: 93
 ---
 
 ## Cluster Addons Installation

docs/self-hosted-server/minikube.mdx

@@ -1,6 +1,6 @@
 ---
 title: 'Minikube Installation'
-order: 81
+order: 91
 ---
 
 ## Minikube Installation