@logto/react 2.1.2 → 2.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/lib/hooks/index.cjs +34 -79
  2. package/lib/hooks/index.d.ts +6 -7
  3. package/lib/hooks/index.js +35 -80
  4. package/lib/index.cjs +20 -0
  5. package/lib/index.d.ts +1 -1
  6. package/lib/index.js +1 -1
  7. package/package.json +8 -5
package/lib/hooks/index.cjs CHANGED
@@ -79,89 +79,44 @@ const useLogto = () => {
79
79
  const { setLoadingState } = useLoadingState();
80
80
  const { handleError } = useErrorHandler();
81
81
  const isLoading = loadingCount > 0;
82
- const signIn = react.useCallback(async (redirectUri, interactionMode) => {
83
- if (!logtoClient) {
84
- return context.throwContextError();
85
- }
86
- try {
87
- setLoadingState(true);
88
- await logtoClient.signIn(redirectUri, interactionMode);
89
- }
90
- catch (error) {
91
- handleError(error, 'Unexpected error occurred while signing in.');
92
- }
93
- }, [logtoClient, setLoadingState, handleError]);
94
- const signOut = react.useCallback(async (postLogoutRedirectUri) => {
95
- if (!logtoClient) {
96
- return context.throwContextError();
97
- }
98
- try {
99
- setLoadingState(true);
100
- await logtoClient.signOut(postLogoutRedirectUri);
101
- // We deliberately do NOT set isAuthenticated to false here, because the app state may change immediately
102
- // even before navigating to the oidc end session endpoint, which might cause rendering problems.
103
- // Moreover, since the location will be redirected, the isAuthenticated state will not matter any more.
104
- }
105
- catch (error) {
106
- handleError(error, 'Unexpected error occurred while signing out.');
107
- }
108
- finally {
109
- setLoadingState(false);
110
- }
111
- }, [logtoClient, setLoadingState, handleError]);
112
- const fetchUserInfo = react.useCallback(async () => {
113
- if (!logtoClient) {
114
- return context.throwContextError();
115
- }
116
- try {
117
- setLoadingState(true);
118
- return await logtoClient.fetchUserInfo();
119
- }
120
- catch (error) {
121
- handleError(error, 'Unexpected error occurred while fetching user info.');
122
- }
123
- finally {
124
- setLoadingState(false);
125
- }
126
- }, [logtoClient, setLoadingState, handleError]);
127
- const getAccessToken = react.useCallback(async (resource) => {
128
- if (!logtoClient) {
129
- return context.throwContextError();
130
- }
131
- try {
132
- setLoadingState(true);
133
- return await logtoClient.getAccessToken(resource);
134
- }
135
- catch (error) {
136
- handleError(error, 'Unexpected error occurred while getting access token.');
137
- }
138
- finally {
139
- setLoadingState(false);
140
- }
141
- }, [logtoClient, setLoadingState, handleError]);
142
- const getIdTokenClaims = react.useCallback(async () => {
143
- if (!logtoClient) {
144
- return context.throwContextError();
145
- }
146
- try {
147
- return await logtoClient.getIdTokenClaims();
148
- }
149
- catch {
150
- // Do nothing if any exception occurs. Caller will get undefined value.
151
- }
152
- }, [logtoClient]);
153
- if (!logtoClient) {
154
- return context.throwContextError();
155
- }
82
+ const client = logtoClient ?? context.throwContextError();
83
+ const proxy = react.useCallback((run, resetLoadingState = true) => {
84
+ return async (...args) => {
85
+ try {
86
+ setLoadingState(true);
87
+ return await run(...args);
88
+ }
89
+ catch (error) {
90
+ handleError(error, `Unexpected error occurred while calling ${run.name}.`);
91
+ }
92
+ finally {
93
+ if (resetLoadingState) {
94
+ setLoadingState(false);
95
+ }
96
+ }
97
+ };
98
+ }, [setLoadingState, handleError]);
99
+ const methods = react.useMemo(() => ({
100
+ getRefreshToken: proxy(client.getRefreshToken.bind(client)),
101
+ getAccessToken: proxy(client.getAccessToken.bind(client)),
102
+ getAccessTokenClaims: proxy(client.getAccessTokenClaims.bind(client)),
103
+ getOrganizationToken: proxy(client.getOrganizationToken.bind(client)),
104
+ getOrganizationTokenClaims: proxy(client.getOrganizationTokenClaims.bind(client)),
105
+ getIdToken: proxy(client.getIdToken.bind(client)),
106
+ getIdTokenClaims: proxy(client.getIdTokenClaims.bind(client)),
107
+ signIn: proxy(client.signIn.bind(client), false),
108
+ // We deliberately do NOT set isAuthenticated to false in the function below, because the app state
109
+ // may change immediately even before navigating to the oidc end session endpoint, which might cause
110
+ // rendering problems.
111
+ // Moreover, since the location will be redirected, the isAuthenticated state will not matter any more.
112
+ signOut: proxy(client.signOut.bind(client)),
113
+ fetchUserInfo: proxy(client.fetchUserInfo.bind(client)),
114
+ }), [client, proxy]);
156
115
  return {
157
116
  isAuthenticated,
158
117
  isLoading,
159
118
  error,
160
- signIn,
161
- signOut,
162
- fetchUserInfo,
163
- getAccessToken,
164
- getIdTokenClaims,
119
+ ...methods,
165
120
  };
166
121
  };
167
122
 
package/lib/hooks/index.d.ts CHANGED
@@ -1,14 +1,13 @@
1
- import { type IdTokenClaims, type InteractionMode, type UserInfoResponse } from '@logto/browser';
1
+ import type LogtoClient from '@logto/browser';
2
+ import type { Optional } from '@silverhand/essentials';
3
+ type OptionalPromiseReturn<T> = {
4
+ [K in keyof T]: T[K] extends (...args: infer A) => Promise<infer R> ? (...args: A) => Promise<Optional<R>> : T[K];
5
+ };
2
6
  type Logto = {
3
7
  isAuthenticated: boolean;
4
8
  isLoading: boolean;
5
9
  error?: Error;
6
- fetchUserInfo: () => Promise<UserInfoResponse | undefined>;
7
- getAccessToken: (resource?: string) => Promise<string | undefined>;
8
- getIdTokenClaims: () => Promise<IdTokenClaims | undefined>;
9
- signIn: (redirectUri: string, interactionMode?: InteractionMode) => Promise<void>;
10
- signOut: (postLogoutRedirectUri?: string) => Promise<void>;
11
- };
10
+ } & OptionalPromiseReturn<Pick<LogtoClient, 'getRefreshToken' | 'getAccessToken' | 'getAccessTokenClaims' | 'getOrganizationToken' | 'getOrganizationTokenClaims' | 'getIdToken' | 'getIdTokenClaims' | 'signIn' | 'signOut' | 'fetchUserInfo'>>;
12
11
  declare const useHandleSignInCallback: (callback?: () => void) => {
13
12
  isLoading: boolean;
14
13
  isAuthenticated: boolean;
package/lib/hooks/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { useContext, useRef, useEffect, useCallback } from 'react';
1
+ import { useContext, useRef, useEffect, useCallback, useMemo } from 'react';
2
2
  import { LogtoContext, throwContextError } from '../context.js';
3
3
 
4
4
  const useLoadingState = () => {
@@ -77,89 +77,44 @@ const useLogto = () => {
77
77
  const { setLoadingState } = useLoadingState();
78
78
  const { handleError } = useErrorHandler();
79
79
  const isLoading = loadingCount > 0;
80
- const signIn = useCallback(async (redirectUri, interactionMode) => {
81
- if (!logtoClient) {
82
- return throwContextError();
83
- }
84
- try {
85
- setLoadingState(true);
86
- await logtoClient.signIn(redirectUri, interactionMode);
87
- }
88
- catch (error) {
89
- handleError(error, 'Unexpected error occurred while signing in.');
90
- }
91
- }, [logtoClient, setLoadingState, handleError]);
92
- const signOut = useCallback(async (postLogoutRedirectUri) => {
93
- if (!logtoClient) {
94
- return throwContextError();
95
- }
96
- try {
97
- setLoadingState(true);
98
- await logtoClient.signOut(postLogoutRedirectUri);
99
- // We deliberately do NOT set isAuthenticated to false here, because the app state may change immediately
100
- // even before navigating to the oidc end session endpoint, which might cause rendering problems.
101
- // Moreover, since the location will be redirected, the isAuthenticated state will not matter any more.
102
- }
103
- catch (error) {
104
- handleError(error, 'Unexpected error occurred while signing out.');
105
- }
106
- finally {
107
- setLoadingState(false);
108
- }
109
- }, [logtoClient, setLoadingState, handleError]);
110
- const fetchUserInfo = useCallback(async () => {
111
- if (!logtoClient) {
112
- return throwContextError();
113
- }
114
- try {
115
- setLoadingState(true);
116
- return await logtoClient.fetchUserInfo();
117
- }
118
- catch (error) {
119
- handleError(error, 'Unexpected error occurred while fetching user info.');
120
- }
121
- finally {
122
- setLoadingState(false);
123
- }
124
- }, [logtoClient, setLoadingState, handleError]);
125
- const getAccessToken = useCallback(async (resource) => {
126
- if (!logtoClient) {
127
- return throwContextError();
128
- }
129
- try {
130
- setLoadingState(true);
131
- return await logtoClient.getAccessToken(resource);
132
- }
133
- catch (error) {
134
- handleError(error, 'Unexpected error occurred while getting access token.');
135
- }
136
- finally {
137
- setLoadingState(false);
138
- }
139
- }, [logtoClient, setLoadingState, handleError]);
140
- const getIdTokenClaims = useCallback(async () => {
141
- if (!logtoClient) {
142
- return throwContextError();
143
- }
144
- try {
145
- return await logtoClient.getIdTokenClaims();
146
- }
147
- catch {
148
- // Do nothing if any exception occurs. Caller will get undefined value.
149
- }
150
- }, [logtoClient]);
151
- if (!logtoClient) {
152
- return throwContextError();
153
- }
80
+ const client = logtoClient ?? throwContextError();
81
+ const proxy = useCallback((run, resetLoadingState = true) => {
82
+ return async (...args) => {
83
+ try {
84
+ setLoadingState(true);
85
+ return await run(...args);
86
+ }
87
+ catch (error) {
88
+ handleError(error, `Unexpected error occurred while calling ${run.name}.`);
89
+ }
90
+ finally {
91
+ if (resetLoadingState) {
92
+ setLoadingState(false);
93
+ }
94
+ }
95
+ };
96
+ }, [setLoadingState, handleError]);
97
+ const methods = useMemo(() => ({
98
+ getRefreshToken: proxy(client.getRefreshToken.bind(client)),
99
+ getAccessToken: proxy(client.getAccessToken.bind(client)),
100
+ getAccessTokenClaims: proxy(client.getAccessTokenClaims.bind(client)),
101
+ getOrganizationToken: proxy(client.getOrganizationToken.bind(client)),
102
+ getOrganizationTokenClaims: proxy(client.getOrganizationTokenClaims.bind(client)),
103
+ getIdToken: proxy(client.getIdToken.bind(client)),
104
+ getIdTokenClaims: proxy(client.getIdTokenClaims.bind(client)),
105
+ signIn: proxy(client.signIn.bind(client), false),
106
+ // We deliberately do NOT set isAuthenticated to false in the function below, because the app state
107
+ // may change immediately even before navigating to the oidc end session endpoint, which might cause
108
+ // rendering problems.
109
+ // Moreover, since the location will be redirected, the isAuthenticated state will not matter any more.
110
+ signOut: proxy(client.signOut.bind(client)),
111
+ fetchUserInfo: proxy(client.fetchUserInfo.bind(client)),
112
+ }), [client, proxy]);
154
113
  return {
155
114
  isAuthenticated,
156
115
  isLoading,
157
116
  error,
158
- signIn,
159
- signOut,
160
- fetchUserInfo,
161
- getAccessToken,
162
- getIdTokenClaims,
117
+ ...methods,
163
118
  };
164
119
  };
165
120
 
package/lib/index.cjs CHANGED
@@ -22,10 +22,18 @@ Object.defineProperty(exports, 'OidcError', {
22
22
  enumerable: true,
23
23
  get: function () { return LogtoClient.OidcError; }
24
24
  });
25
+ Object.defineProperty(exports, 'PersistKey', {
26
+ enumerable: true,
27
+ get: function () { return LogtoClient.PersistKey; }
28
+ });
25
29
  Object.defineProperty(exports, 'Prompt', {
26
30
  enumerable: true,
27
31
  get: function () { return LogtoClient.Prompt; }
28
32
  });
33
+ Object.defineProperty(exports, 'ReservedResource', {
34
+ enumerable: true,
35
+ get: function () { return LogtoClient.ReservedResource; }
36
+ });
29
37
  Object.defineProperty(exports, 'ReservedScope', {
30
38
  enumerable: true,
31
39
  get: function () { return LogtoClient.ReservedScope; }
@@ -34,6 +42,18 @@ Object.defineProperty(exports, 'UserScope', {
34
42
  enumerable: true,
35
43
  get: function () { return LogtoClient.UserScope; }
36
44
  });
45
+ Object.defineProperty(exports, 'buildOrganizationUrn', {
46
+ enumerable: true,
47
+ get: function () { return LogtoClient.buildOrganizationUrn; }
48
+ });
49
+ Object.defineProperty(exports, 'getOrganizationIdFromUrn', {
50
+ enumerable: true,
51
+ get: function () { return LogtoClient.getOrganizationIdFromUrn; }
52
+ });
53
+ Object.defineProperty(exports, 'organizationUrnPrefix', {
54
+ enumerable: true,
55
+ get: function () { return LogtoClient.organizationUrnPrefix; }
56
+ });
37
57
  exports.LogtoProvider = provider.LogtoProvider;
38
58
  exports.useHandleSignInCallback = index.useHandleSignInCallback;
39
59
  exports.useLogto = index.useLogto;
package/lib/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export type { LogtoContextProps } from './context.js';
2
2
  export type { LogtoConfig, IdTokenClaims, UserInfoResponse, LogtoErrorCode, LogtoClientErrorCode, InteractionMode, } from '@logto/browser';
3
- export { LogtoError, LogtoClientError, LogtoRequestError, OidcError, Prompt, ReservedScope, UserScope, } from '@logto/browser';
3
+ export { LogtoError, LogtoRequestError, LogtoClientError, OidcError, Prompt, ReservedScope, ReservedResource, UserScope, organizationUrnPrefix, buildOrganizationUrn, getOrganizationIdFromUrn, PersistKey, } from '@logto/browser';
4
4
  export * from './provider.js';
5
5
  export { useLogto, useHandleSignInCallback } from './hooks/index.js';
package/lib/index.js CHANGED
@@ -1,3 +1,3 @@
1
- export { LogtoClientError, LogtoError, LogtoRequestError, OidcError, Prompt, ReservedScope, UserScope } from '@logto/browser';
1
+ export { LogtoClientError, LogtoError, LogtoRequestError, OidcError, PersistKey, Prompt, ReservedResource, ReservedScope, UserScope, buildOrganizationUrn, getOrganizationIdFromUrn, organizationUrnPrefix } from '@logto/browser';
2
2
  export { LogtoProvider } from './provider.js';
3
3
  export { useHandleSignInCallback, useLogto } from './hooks/index.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@logto/react",
3
- "version": "2.1.2",
3
+ "version": "2.2.1",
4
4
  "type": "module",
5
5
  "main": "./lib/index.cjs",
6
6
  "module": "./lib/index.js",
@@ -21,7 +21,7 @@
21
21
  "directory": "packages/react"
22
22
  },
23
23
  "dependencies": {
24
- "@logto/browser": "^2.1.2",
24
+ "@logto/browser": "^2.2.0",
25
25
  "@silverhand/essentials": "^2.6.2"
26
26
  },
27
27
  "devDependencies": {
@@ -36,8 +36,8 @@
36
36
  "@types/react": "^18.2.0",
37
37
  "eslint": "^8.44.0",
38
38
  "jest": "^29.5.0",
39
- "lint-staged": "^14.0.0",
40
- "postcss": "^8.4.6",
39
+ "lint-staged": "^15.0.0",
40
+ "postcss": "^8.4.31",
41
41
  "prettier": "^3.0.0",
42
42
  "react": "^18.0.2",
43
43
  "stylelint": "^15.0.0",
@@ -47,7 +47,10 @@
47
47
  "react": ">=16.8.0"
48
48
  },
49
49
  "eslintConfig": {
50
- "extends": "@silverhand/react"
50
+ "extends": "@silverhand/react",
51
+ "rules": {
52
+ "react/prefer-read-only-props": "off"
53
+ }
51
54
  },
52
55
  "prettier": "@silverhand/eslint-config/.prettierrc",
53
56
  "publishConfig": {