refactor: vanilla js sdk guide

docs/quick-starts/framework/vanilla-js/README.mdx

@@ -12,11 +12,11 @@ import ApiResources from './_api-resources.mdx';
 import CheckIntegration from './_check-integration.mdx';
 import GetUserInformation from './_get-user-information.mdx';
 import GuideTip from './_guide-tip.mdx';
-import HandleAuthenticationStatus from './_handle-authentication-status.mdx';
-import ImplementSignIn from './_implement-sign-in.mdx';
-import ImplementSignOut from './_implement-sign-out.mdx';
+import ImplementSignInAndSignOut from './_implement-sign-in-and-sign-out.mdx';
 import InitClient from './_init-client.mdx';
 
+# Vanilla JS SDK guide
+
 Vanilla JS: Integrate `@logto/browser`
 
 <GuideTip />
@@ -37,17 +37,9 @@ Vanilla JS: Integrate `@logto/browser`
 
 <InitClient />
 
-### Implement sign-in
-
-<ImplementSignIn />
-
-### Implement sign-out
-
-<ImplementSignOut />
-
-### Handle authentication status
+### Implement sign-in and sign-out
 
-<HandleAuthenticationStatus />
+<ImplementSignInAndSignOut />
 
 ### Checkpoint: Test your application
 

docs/quick-starts/framework/vanilla-js/_add-sdk.mdx

@@ -21,6 +21,16 @@ yarn add @logto/browser
 
 ```bash
 pnpm add @logto/browser
+```
+
+  </TabItem>
+  <TabItem value="cdn" label="CDN">
+
+```html
+// Special thanks to jsdelivr
+<script type="module">
+  import LogtoClient from 'https://cdn.jsdelivr.net/npm/@logto/[email protected]/+esm';
+</script>
 ```
 
   </TabItem>

docs/quick-starts/framework/vanilla-js/_api-resources.mdx

@@ -37,3 +37,11 @@ import GetOrganizationAccessTokenCode from './code/_get-organization-access-toke
   getOrganizationAccessTokenCode={<GetOrganizationAccessTokenCode />}
 />
 ./code/_scopes-and-claims-code.mdx./code/_config-organization-code.mdx
+
+### Attach access token to request headers
+
+Put the token in the `Authorization` field of HTTP headers with the Bearer format (`Bearer YOUR_TOKEN`), and you are good to go.
+
+:::note
+The Bearer Token's integration flow may vary based on the framework or requester you are using. Choose your own way to apply the request `Authorization` header.
+:::

docs/quick-starts/framework/vanilla-js/_get-user-information.mdx

@@ -1,9 +1,58 @@
-import GetUserInfoApis from '../../fragments/_get-user-info-apis.mdx';
+import CodeBlock from '@theme/CodeBlock';
+
+import ClaimsNeedNetworkRequest from '../../fragments/_claims-need-network-request.mdx';
+import FindUserInfoMissing from '../../fragments/_find-user-info-missing.mdx';
 import ScopesAndClaims from '../../fragments/_scopes-and-claims.mdx';
+import ScopesAndClaimsIntroduction from '../../fragments/_scopes-claims-introduction.md';
+
+### Display user information
+
+```js title="Home.js"
+const userInfo = await logtoClient.getIdTokenClaims();
+```
+
+To display the user's information, you can use the `logtoClient.getIdTokenClaims()` method. For example, in your Home page:
+
+### Request additional claims
+
+<FindUserInfoMissing method="getIdTokenClaims()" />
+
+<ScopesAndClaimsIntroduction />
+
+To request additional scopes, you can configure the Logto configs:
+
+```js title="index.js"
+import LogtoClient, { UserScope } from '@logto/browser';
+
+const logtoClient = new LogtoClient({
+  appId: '<your-application-id>',
+  endpoint: '<your-logto-endpoint>',
+  scopes: [
+    UserScope.Email,
+    UserScope.Phone,
+    UserScope.CustomData,
+    UserScope.Identities,
+    UserScope.Organizations,
+  ],
+});
+```
+
+Then you can access the additional claims in the return value of `logtoClient.getIdTokenClaims()`:
+
+```ts
+const claims = await getIdTokenClaims();
+// Now you can access additional claims `claims.email`, `claims.phone`, etc.
+```
 
-import ScopesAndClaimsCode from './code/_scopes-and-claims-code.mdx';
+<ClaimsNeedNetworkRequest
+  type="method"
+  method="logtoClient.fetchUserInfo()"
+  codeSnippet={
+    <CodeBlock language="js">{`const userInfo = await logtoClient.fetchUserInfo();
+// Now you can access the claim \`userInfo.custom_data\``}</CodeBlock>
+  }
+/>
 
-<GetUserInfoApis getIdTokenClaimsApi="getIdTokenClaims" fetchUserInfoApi="fetchUserInfo" />
+### Scopes and claims
 
-<ScopesAndClaims configScopesCode={<ScopesAndClaimsCode package={props.package} />} />
-./code/_scopes-and-claims-code.mdx./code/_config-resources-with-shared-scopes-code.mdx./code/_config-resources-with-scopes-code.mdx./code/_config-organization-code.mdx
+<ScopesAndClaims />

docs/quick-starts/framework/vanilla-js/_implement-sign-in.mdx → docs/quick-starts/framework/vanilla-js/_implement-sign-in-and-sign-out.mdx

@@ -2,6 +2,7 @@ import redirectUriFigure from '../../assets/web-redirect-uri.png';
 import ConfigureRedirectUri from '../../fragments/_configure-redirect-uri.mdx';
 import SignInNote from '../../fragments/_sign-in-note.mdx';
 import SignInFlowSummary from '../../fragments/_web-sign-in-flow-summary.mdx';
+import SignOutNote from '../../fragments/_web-sign-out-note.md';
 
 import HandleRedirect from './_handle-redirect.mdx';
 
@@ -11,26 +12,31 @@ import HandleRedirect from './_handle-redirect.mdx';
 
 <ConfigureRedirectUri figureSrc={redirectUriFigure} redirectUri="http://localhost:3000/callback" />
 
-<SignInNote calling=".signIn()" />
-
-#### Implement a sign-in button
-
-`logtoClient` provides a `signIn` method to initiate the sign-in flow.
+#### Implement sign-in and sign-out
 
-Go back to your IDE/editor, use the following code to implement the sign-in button:
+`logtoClient` provides `signIn` and `signOut` methods to help you easily manage the authentication flow.
 
-```js
-const button = document.createElement('button');
-button.innerHTML = 'Sign In';
-button.addEventListener('click', onClickSignIn);
+<SignInNote calling=".signIn()" />
 
-document.body.appendChild(button);
+```js title="pages/Home.js"
+const isAuthenticated = await logtoClient.isAuthenticated();
 
 const onClickSignIn = () => {
   logtoClient.signIn('http://localhost:3000/callback');
 };
+const onClickSignOut = () => {
+  logtoClient.signOut('http://localhost:3000');
+};
+
+const button = document.createElement('button');
+button.innerHTML = isAuthenticated ? 'Sign Out' : 'Sign In';
+button.addEventListener('click', isAuthenticated ? onClickSignOut : onClickSignIn);
+
+document.body.appendChild(button);
 ```
 
+<SignOutNote />
+
 #### Handle redirect
 
 <HandleRedirect />

docs/quick-starts/framework/vanilla-js/_init-client.mdx

@@ -2,11 +2,11 @@ import AssumingUrl from '../../fragments/_web-assuming-url.md';
 
 Import and init a `LogtoClient` instance by passing config:
 
-```ts
+```ts title="index.js"
 import LogtoClient from '@logto/browser';
 
 const logtoClient = new LogtoClient({
-  endpoint: '<your-logto-endpoint>', // E.g. http://localhost:3001
+  endpoint: '<your-logto-endpoint>',
   appId: '<your-application-id>',
 });
 ```

tutorial/build-with-logto/_integrate-sdk-vanilla-js.mdx

@@ -1,8 +1,7 @@
 import AddSdk from '../../docs/quick-starts/framework/vanilla-js/_add-sdk.mdx';
 import GuideTip from '../../docs/quick-starts/framework/vanilla-js/_guide-tip.mdx';
 import HandleAuthenticationStatus from '../../docs/quick-starts/framework/vanilla-js/_handle-authentication-status.mdx';
-import ImplementSignIn from '../../docs/quick-starts/framework/vanilla-js/_implement-sign-in.mdx';
-import ImplementSignOut from '../../docs/quick-starts/framework/vanilla-js/_implement-sign-out.mdx';
+import ImplementSignInAndSignOut from '../../docs/quick-starts/framework/vanilla-js/_implement-sign-in-and-sign-out.mdx';
 import InitClient from '../../docs/quick-starts/framework/vanilla-js/_init-client.mdx';
 
 import TestYourIntegration from './fragments/_test-your-integration.mdx';
@@ -17,13 +16,9 @@ import TestYourIntegration from './fragments/_test-your-integration.mdx';
 
 <InitClient />
 
-### Implement a sign-in
+### Implement a sign-in and sign-out
 
-<ImplementSignIn />
-
-### Implement sign-out
-
-<ImplementSignOut />
+<ImplementSignInAndSignOut />
 
 ### Handle authentication status