refactor(core): disable userinfo endpoint (#1310)

* refactor(core): disable userinfo endpoint

* chore: upgrade @logto/react

* refactor(core): update doc link

packages/console/package.json

@@ -18,7 +18,7 @@
   "devDependencies": {
     "@fontsource/roboto-mono": "^4.5.7",
     "@logto/phrases": "^0.1.0",
-    "@logto/react": "^0.1.17",
+    "@logto/react": "^0.2.0",
     "@logto/schemas": "^0.1.0",
     "@logto/shared": "^0.1.0",
     "@mdx-js/react": "^1.6.22",

packages/console/src/components/AppContent/components/UserInfo/index.tsx

@@ -1,4 +1,4 @@
-import { useLogto, UserInfoResponse } from '@logto/react';
+import { useLogto, IdTokenClaims } from '@logto/react';
 import classNames from 'classnames';
 import React, { useEffect, useRef, useState, MouseEvent } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -18,14 +18,14 @@ const UserInfo = () => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const anchorRef = useRef<HTMLDivElement>(null);
   const [showDropDown, setShowDropdown] = useState(false);
-  const [user, setUser] = useState<UserInfoResponse>();
+  const [user, setUser] = useState<Pick<IdTokenClaims, 'sub' | 'name' | 'avatar'>>();
   const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
     (async () => {
       if (isAuthenticated) {
         const userInfo = getIdTokenClaims();
-        setUser(userInfo);
+        setUser(userInfo ?? { sub: '', name: 'N/A' }); // Provide a fallback to avoid infinite loading state
       }
     })();
   }, [api, isAuthenticated, getIdTokenClaims]);

packages/core/src/oidc/init.ts

@@ -40,13 +40,14 @@ export default async function initOidc(app: Koa): Promise<Provider> {
       keys,
     },
     features: {
-      userinfo: { enabled: true },
+      userinfo: { enabled: false },
       revocation: { enabled: true },
       devInteractions: { enabled: false },
+      // https://github.com/panva/node-oidc-provider/blob/main/docs/README.md#featuresresourceindicators
       resourceIndicators: {
         enabled: true,
+        defaultResource: () => '',
         // Disable the auto use of authorization_code granted resource feature
-        // https://github.com/panva/node-oidc-provider/blob/main/docs/README.md#usegrantedresource
         useGrantedResource: () => false,
         getResourceServerInfo: async (_, indicator) => {
           const resourceServer = await findResourceByIndicator(indicator);

packages/demo-app/package.json

@@ -17,7 +17,7 @@
   },
   "devDependencies": {
     "@logto/phrases": "^0.1.0",
-    "@logto/react": "^0.1.17",
+    "@logto/react": "^0.2.0",
     "@logto/schemas": "^0.1.0",
     "@logto/shared": "^0.1.0",
     "@parcel/core": "2.6.2",

packages/demo-app/src/App.tsx

@@ -1,4 +1,4 @@
-import { LogtoProvider, useLogto, UserInfoResponse } from '@logto/react';
+import { LogtoProvider, useLogto, IdTokenClaims } from '@logto/react';
 import { demoAppApplicationId } from '@logto/schemas/lib/seeds';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -14,7 +14,7 @@ void initI18n();
 
 const Main = () => {
   const { isAuthenticated, getIdTokenClaims, signIn, signOut } = useLogto();
-  const [user, setUser] = useState<UserInfoResponse>();
+  const [user, setUser] = useState<Pick<IdTokenClaims, 'sub' | 'username'>>();
   const { t } = useTranslation(undefined, { keyPrefix: 'demo_app' });
   const isInCallback = Boolean(new URL(window.location.href).searchParams.get('code'));
   const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
@@ -28,7 +28,7 @@ const Main = () => {
     if (isAuthenticated) {
       (async () => {
         const userInfo = getIdTokenClaims();
-        setUser(userInfo);
+        setUser(userInfo ?? { sub: 'N/A', username: 'N/A' });
       })();
     } else {
       void signIn(window.location.href);