@logto/vue 1.1.1 → 2.0.0
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.
- package/lib/consts.cjs +7 -0
- package/lib/consts.d.ts +2 -0
- package/lib/consts.js +4 -0
- package/lib/context.cjs +48 -0
- package/lib/context.d.ts +14 -0
- package/lib/context.js +45 -0
- package/lib/index.cjs +139 -0
- package/lib/index.d.ts +5 -7
- package/lib/index.js +97 -173
- package/lib/index.test.d.ts +1 -0
- package/lib/plugin.cjs +105 -0
- package/lib/plugin.d.ts +10 -0
- package/lib/plugin.js +103 -0
- package/package.json +29 -33
- package/lib/index.d.ts.map +0 -1
- package/lib/index.js.map +0 -1
- package/lib/module.d.mts +0 -82
- package/lib/module.mjs +0 -169
- package/lib/module.mjs.map +0 -1
package/lib/consts.cjs
ADDED
package/lib/consts.d.ts
ADDED
package/lib/consts.js
ADDED
package/lib/context.cjs
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var vue = require('vue');
|
|
4
|
+
|
|
5
|
+
const createContext = (client) => {
|
|
6
|
+
const context = vue.toRefs(vue.reactive({
|
|
7
|
+
logtoClient: client,
|
|
8
|
+
isAuthenticated: false,
|
|
9
|
+
loadingCount: 1,
|
|
10
|
+
error: undefined,
|
|
11
|
+
}));
|
|
12
|
+
const { isAuthenticated, loadingCount, error } = context;
|
|
13
|
+
const isLoading = vue.computed(() => loadingCount.value > 0);
|
|
14
|
+
/* eslint-disable @silverhand/fp/no-mutation */
|
|
15
|
+
const setError = (_error, fallbackErrorMessage) => {
|
|
16
|
+
if (_error instanceof Error) {
|
|
17
|
+
error.value = _error;
|
|
18
|
+
}
|
|
19
|
+
else if (fallbackErrorMessage) {
|
|
20
|
+
error.value = new Error(fallbackErrorMessage);
|
|
21
|
+
}
|
|
22
|
+
console.error(error);
|
|
23
|
+
};
|
|
24
|
+
const setLoading = (isLoading) => {
|
|
25
|
+
if (isLoading) {
|
|
26
|
+
loadingCount.value += 1;
|
|
27
|
+
}
|
|
28
|
+
else {
|
|
29
|
+
loadingCount.value = Math.max(0, loadingCount.value - 1);
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
const setIsAuthenticated = (_isAuthenticated) => {
|
|
33
|
+
isAuthenticated.value = _isAuthenticated;
|
|
34
|
+
};
|
|
35
|
+
/* eslint-enable @silverhand/fp/no-mutation */
|
|
36
|
+
(async () => {
|
|
37
|
+
const isAuthenticated = await client.isAuthenticated();
|
|
38
|
+
setIsAuthenticated(isAuthenticated);
|
|
39
|
+
setLoading(false);
|
|
40
|
+
})();
|
|
41
|
+
return { ...context, isLoading, setError, setLoading, setIsAuthenticated };
|
|
42
|
+
};
|
|
43
|
+
const throwContextError = () => {
|
|
44
|
+
throw new Error('Must install Logto plugin first.');
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
exports.createContext = createContext;
|
|
48
|
+
exports.throwContextError = throwContextError;
|
package/lib/context.d.ts
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type LogtoClient from '@logto/browser';
|
|
2
|
+
import type { ComputedRef, Ref, UnwrapRef } from 'vue';
|
|
3
|
+
export type Context = {
|
|
4
|
+
logtoClient: Ref<UnwrapRef<LogtoClient | undefined>>;
|
|
5
|
+
isAuthenticated: Ref<boolean>;
|
|
6
|
+
loadingCount: Ref<number>;
|
|
7
|
+
error: Ref<Error | undefined>;
|
|
8
|
+
isLoading: ComputedRef<boolean>;
|
|
9
|
+
setError: (error: unknown, fallbackErrorMessage?: string | undefined) => void;
|
|
10
|
+
setIsAuthenticated: (isAuthenticated: boolean) => void;
|
|
11
|
+
setLoading: (isLoading: boolean) => void;
|
|
12
|
+
};
|
|
13
|
+
export declare const createContext: (client: LogtoClient) => Context;
|
|
14
|
+
export declare const throwContextError: () => never;
|
package/lib/context.js
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { toRefs, reactive, computed } from 'vue';
|
|
2
|
+
|
|
3
|
+
const createContext = (client) => {
|
|
4
|
+
const context = toRefs(reactive({
|
|
5
|
+
logtoClient: client,
|
|
6
|
+
isAuthenticated: false,
|
|
7
|
+
loadingCount: 1,
|
|
8
|
+
error: undefined,
|
|
9
|
+
}));
|
|
10
|
+
const { isAuthenticated, loadingCount, error } = context;
|
|
11
|
+
const isLoading = computed(() => loadingCount.value > 0);
|
|
12
|
+
/* eslint-disable @silverhand/fp/no-mutation */
|
|
13
|
+
const setError = (_error, fallbackErrorMessage) => {
|
|
14
|
+
if (_error instanceof Error) {
|
|
15
|
+
error.value = _error;
|
|
16
|
+
}
|
|
17
|
+
else if (fallbackErrorMessage) {
|
|
18
|
+
error.value = new Error(fallbackErrorMessage);
|
|
19
|
+
}
|
|
20
|
+
console.error(error);
|
|
21
|
+
};
|
|
22
|
+
const setLoading = (isLoading) => {
|
|
23
|
+
if (isLoading) {
|
|
24
|
+
loadingCount.value += 1;
|
|
25
|
+
}
|
|
26
|
+
else {
|
|
27
|
+
loadingCount.value = Math.max(0, loadingCount.value - 1);
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
const setIsAuthenticated = (_isAuthenticated) => {
|
|
31
|
+
isAuthenticated.value = _isAuthenticated;
|
|
32
|
+
};
|
|
33
|
+
/* eslint-enable @silverhand/fp/no-mutation */
|
|
34
|
+
(async () => {
|
|
35
|
+
const isAuthenticated = await client.isAuthenticated();
|
|
36
|
+
setIsAuthenticated(isAuthenticated);
|
|
37
|
+
setLoading(false);
|
|
38
|
+
})();
|
|
39
|
+
return { ...context, isLoading, setError, setLoading, setIsAuthenticated };
|
|
40
|
+
};
|
|
41
|
+
const throwContextError = () => {
|
|
42
|
+
throw new Error('Must install Logto plugin first.');
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
export { createContext, throwContextError };
|
package/lib/index.cjs
ADDED
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var LogtoClient = require('@logto/browser');
|
|
4
|
+
var vue = require('vue');
|
|
5
|
+
var consts = require('./consts.cjs');
|
|
6
|
+
var context = require('./context.cjs');
|
|
7
|
+
var plugin = require('./plugin.cjs');
|
|
8
|
+
|
|
9
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
|
+
|
|
11
|
+
var LogtoClient__default = /*#__PURE__*/_interopDefault(LogtoClient);
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* Creates the Logto Vue plugin
|
|
15
|
+
*
|
|
16
|
+
* ```ts
|
|
17
|
+
* import { createApp } from 'vue';
|
|
18
|
+
* import { createLogto } from '@logto/vue';
|
|
19
|
+
*
|
|
20
|
+
* const app = createApp(App);
|
|
21
|
+
* const app.use(createLogto, {
|
|
22
|
+
* appId: '<your-app-id>',
|
|
23
|
+
* endpoint: '<your-oidc-endpoint-domain>',
|
|
24
|
+
* });
|
|
25
|
+
*
|
|
26
|
+
* app.mount('#app');
|
|
27
|
+
* ```
|
|
28
|
+
*
|
|
29
|
+
* Use this in your Vue root component to register the plugin
|
|
30
|
+
*/
|
|
31
|
+
const createLogto = {
|
|
32
|
+
install(app, config) {
|
|
33
|
+
const client = new LogtoClient__default.default(config);
|
|
34
|
+
const context$1 = context.createContext(client);
|
|
35
|
+
const pluginMethods = plugin.createPluginMethods(context$1);
|
|
36
|
+
const { isAuthenticated, isLoading, error } = context$1;
|
|
37
|
+
app.provide(consts.contextInjectionKey, context$1);
|
|
38
|
+
app.provide(consts.logtoInjectionKey, {
|
|
39
|
+
isAuthenticated: vue.readonly(isAuthenticated),
|
|
40
|
+
isLoading: vue.readonly(isLoading),
|
|
41
|
+
error: vue.readonly(error),
|
|
42
|
+
...pluginMethods,
|
|
43
|
+
});
|
|
44
|
+
},
|
|
45
|
+
};
|
|
46
|
+
/**
|
|
47
|
+
* A Vue composable method that provides the Logto reactive refs and auth methods.
|
|
48
|
+
*
|
|
49
|
+
* ```ts
|
|
50
|
+
* import { useLogto } from '@logto/vue';
|
|
51
|
+
*
|
|
52
|
+
* export default {
|
|
53
|
+
* setup() {
|
|
54
|
+
* const { isAuthenticated, signIn } = useLogto();
|
|
55
|
+
*
|
|
56
|
+
* return {
|
|
57
|
+
* isAuthenticated,
|
|
58
|
+
* onClickSignIn: () => {
|
|
59
|
+
* signIn('<your-redirect-uri>');
|
|
60
|
+
* },
|
|
61
|
+
* }
|
|
62
|
+
* }
|
|
63
|
+
* }
|
|
64
|
+
* ```
|
|
65
|
+
*
|
|
66
|
+
* Use this composable in the setup script of your Vue component to make sure the injection works
|
|
67
|
+
*/
|
|
68
|
+
const useLogto = () => {
|
|
69
|
+
const logto = vue.inject(consts.logtoInjectionKey);
|
|
70
|
+
if (!logto) {
|
|
71
|
+
return context.throwContextError();
|
|
72
|
+
}
|
|
73
|
+
return logto;
|
|
74
|
+
};
|
|
75
|
+
/**
|
|
76
|
+
* A Vue composable method that watches browser navigation and automatically handles the sign-in callback
|
|
77
|
+
*
|
|
78
|
+
* ```ts
|
|
79
|
+
* import { useLogto } from '@logto/vue';
|
|
80
|
+
* import { useHandleSignInCallback } from '@logto/vue';
|
|
81
|
+
*
|
|
82
|
+
* export default {
|
|
83
|
+
* setup() {
|
|
84
|
+
* useHandleSignInCallback();
|
|
85
|
+
* }
|
|
86
|
+
* }
|
|
87
|
+
* ```
|
|
88
|
+
*
|
|
89
|
+
* Use this in the setup script of your Callback page to make sure the injection works
|
|
90
|
+
*/
|
|
91
|
+
const useHandleSignInCallback = (callback) => {
|
|
92
|
+
const context$1 = vue.inject(consts.contextInjectionKey);
|
|
93
|
+
if (!context$1) {
|
|
94
|
+
return context.throwContextError();
|
|
95
|
+
}
|
|
96
|
+
const { isAuthenticated, isLoading, logtoClient, error } = context$1;
|
|
97
|
+
const { handleSignInCallback } = plugin.createPluginMethods(context$1);
|
|
98
|
+
vue.watchEffect(() => {
|
|
99
|
+
const currentPageUrl = window.location.href;
|
|
100
|
+
if (!isAuthenticated.value &&
|
|
101
|
+
logtoClient.value?.isSignInRedirected(currentPageUrl) &&
|
|
102
|
+
!isLoading.value) {
|
|
103
|
+
void handleSignInCallback(currentPageUrl, callback);
|
|
104
|
+
}
|
|
105
|
+
});
|
|
106
|
+
return {
|
|
107
|
+
isLoading: vue.readonly(isLoading),
|
|
108
|
+
isAuthenticated: vue.readonly(isAuthenticated),
|
|
109
|
+
error: vue.readonly(error),
|
|
110
|
+
};
|
|
111
|
+
};
|
|
112
|
+
|
|
113
|
+
Object.defineProperty(exports, 'LogtoClientError', {
|
|
114
|
+
enumerable: true,
|
|
115
|
+
get: function () { return LogtoClient.LogtoClientError; }
|
|
116
|
+
});
|
|
117
|
+
Object.defineProperty(exports, 'LogtoError', {
|
|
118
|
+
enumerable: true,
|
|
119
|
+
get: function () { return LogtoClient.LogtoError; }
|
|
120
|
+
});
|
|
121
|
+
Object.defineProperty(exports, 'OidcError', {
|
|
122
|
+
enumerable: true,
|
|
123
|
+
get: function () { return LogtoClient.OidcError; }
|
|
124
|
+
});
|
|
125
|
+
Object.defineProperty(exports, 'Prompt', {
|
|
126
|
+
enumerable: true,
|
|
127
|
+
get: function () { return LogtoClient.Prompt; }
|
|
128
|
+
});
|
|
129
|
+
Object.defineProperty(exports, 'ReservedScope', {
|
|
130
|
+
enumerable: true,
|
|
131
|
+
get: function () { return LogtoClient.ReservedScope; }
|
|
132
|
+
});
|
|
133
|
+
Object.defineProperty(exports, 'UserScope', {
|
|
134
|
+
enumerable: true,
|
|
135
|
+
get: function () { return LogtoClient.UserScope; }
|
|
136
|
+
});
|
|
137
|
+
exports.createLogto = createLogto;
|
|
138
|
+
exports.useHandleSignInCallback = useHandleSignInCallback;
|
|
139
|
+
exports.useLogto = useLogto;
|
package/lib/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { IdTokenClaims, LogtoConfig, UserInfoResponse } from
|
|
2
|
-
import { App, Ref } from
|
|
1
|
+
import type { IdTokenClaims, LogtoConfig, UserInfoResponse } from '@logto/browser';
|
|
2
|
+
import type { App, Ref } from 'vue';
|
|
3
3
|
export type { LogtoConfig, IdTokenClaims, UserInfoResponse, LogtoErrorCode, LogtoClientErrorCode, InteractionMode, } from '@logto/browser';
|
|
4
4
|
export { LogtoError, LogtoClientError, OidcError, Prompt, ReservedScope, UserScope, } from '@logto/browser';
|
|
5
5
|
type LogtoVuePlugin = {
|
|
@@ -33,7 +33,7 @@ type Logto = {
|
|
|
33
33
|
*
|
|
34
34
|
* Use this in your Vue root component to register the plugin
|
|
35
35
|
*/
|
|
36
|
-
export const createLogto: LogtoVuePlugin;
|
|
36
|
+
export declare const createLogto: LogtoVuePlugin;
|
|
37
37
|
/**
|
|
38
38
|
* A Vue composable method that provides the Logto reactive refs and auth methods.
|
|
39
39
|
*
|
|
@@ -56,7 +56,7 @@ export const createLogto: LogtoVuePlugin;
|
|
|
56
56
|
*
|
|
57
57
|
* Use this composable in the setup script of your Vue component to make sure the injection works
|
|
58
58
|
*/
|
|
59
|
-
export const useLogto: () => Logto;
|
|
59
|
+
export declare const useLogto: () => Logto;
|
|
60
60
|
/**
|
|
61
61
|
* A Vue composable method that watches browser navigation and automatically handles the sign-in callback
|
|
62
62
|
*
|
|
@@ -73,10 +73,8 @@ export const useLogto: () => Logto;
|
|
|
73
73
|
*
|
|
74
74
|
* Use this in the setup script of your Callback page to make sure the injection works
|
|
75
75
|
*/
|
|
76
|
-
export const useHandleSignInCallback: (callback?: () => void) => {
|
|
76
|
+
export declare const useHandleSignInCallback: (callback?: () => void) => {
|
|
77
77
|
isLoading: Readonly<Ref<boolean>>;
|
|
78
78
|
isAuthenticated: Readonly<Ref<boolean>>;
|
|
79
79
|
error: Readonly<Ref<Error | undefined>>;
|
|
80
80
|
};
|
|
81
|
-
|
|
82
|
-
//# sourceMappingURL=index.d.ts.map
|
package/lib/index.js
CHANGED
|
@@ -1,184 +1,108 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import LogtoClient from '@logto/browser';
|
|
2
|
+
export { LogtoClientError, LogtoError, OidcError, Prompt, ReservedScope, UserScope } from '@logto/browser';
|
|
3
|
+
import { readonly, inject, watchEffect } from 'vue';
|
|
4
|
+
import { contextInjectionKey, logtoInjectionKey } from './consts.js';
|
|
5
|
+
import { createContext, throwContextError } from './context.js';
|
|
6
|
+
import { createPluginMethods } from './plugin.js';
|
|
3
7
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
const
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
const
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
const { isAuthenticated: isAuthenticated , loadingCount: loadingCount , error: error } = context;
|
|
35
|
-
const isLoading = (0, $Kru5Y$vue.computed)(()=>loadingCount.value > 0);
|
|
36
|
-
/* eslint-disable @silverhand/fp/no-mutation */ const setError = (_error, fallbackErrorMessage)=>{
|
|
37
|
-
if (_error instanceof Error) error.value = _error;
|
|
38
|
-
else if (fallbackErrorMessage) error.value = new Error(fallbackErrorMessage);
|
|
39
|
-
console.error(error);
|
|
40
|
-
};
|
|
41
|
-
const setLoading = (isLoading)=>{
|
|
42
|
-
if (isLoading) loadingCount.value += 1;
|
|
43
|
-
else loadingCount.value = Math.max(0, loadingCount.value - 1);
|
|
44
|
-
};
|
|
45
|
-
const setIsAuthenticated = (_isAuthenticated)=>{
|
|
46
|
-
isAuthenticated.value = _isAuthenticated;
|
|
47
|
-
};
|
|
48
|
-
/* eslint-enable @silverhand/fp/no-mutation */ (async ()=>{
|
|
49
|
-
const isAuthenticated = await client.isAuthenticated();
|
|
50
|
-
setIsAuthenticated(isAuthenticated);
|
|
51
|
-
setLoading(false);
|
|
52
|
-
})();
|
|
53
|
-
return {
|
|
54
|
-
...context,
|
|
55
|
-
isLoading: isLoading,
|
|
56
|
-
setError: setError,
|
|
57
|
-
setLoading: setLoading,
|
|
58
|
-
setIsAuthenticated: setIsAuthenticated
|
|
59
|
-
};
|
|
60
|
-
};
|
|
61
|
-
const $a89e3697ca8ff325$export$838ead842aa548e7 = ()=>{
|
|
62
|
-
throw new Error("Must install Logto plugin first.");
|
|
63
|
-
};
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
const $155c9da87af3d4e0$export$6ad57c8ed6bec4 = (context)=>{
|
|
68
|
-
const { logtoClient: logtoClient , setLoading: setLoading , setError: setError , setIsAuthenticated: setIsAuthenticated } = context;
|
|
69
|
-
const signIn = async (redirectUri, interactionMode)=>{
|
|
70
|
-
if (!logtoClient.value) return (0, $a89e3697ca8ff325$export$838ead842aa548e7)();
|
|
71
|
-
try {
|
|
72
|
-
setLoading(true);
|
|
73
|
-
await logtoClient.value.signIn(redirectUri, interactionMode);
|
|
74
|
-
} catch (error) {
|
|
75
|
-
setError(error, "Unexpected error occurred while signing in.");
|
|
76
|
-
}
|
|
77
|
-
};
|
|
78
|
-
const signOut = async (postLogoutRedirectUri)=>{
|
|
79
|
-
if (!logtoClient.value) return (0, $a89e3697ca8ff325$export$838ead842aa548e7)();
|
|
80
|
-
try {
|
|
81
|
-
setLoading(true);
|
|
82
|
-
await logtoClient.value.signOut(postLogoutRedirectUri);
|
|
83
|
-
// We deliberately do NOT set isAuthenticated to false here, because the app state may change immediately
|
|
84
|
-
// even before navigating to the oidc end session endpoint, which might cause rendering problems.
|
|
85
|
-
// Moreover, since the location will be redirected, the isAuthenticated state will not matter any more.
|
|
86
|
-
} catch (error) {
|
|
87
|
-
setError(error, "Unexpected error occurred while signing out.");
|
|
88
|
-
} finally{
|
|
89
|
-
setLoading(false);
|
|
90
|
-
}
|
|
91
|
-
};
|
|
92
|
-
const fetchUserInfo = async ()=>{
|
|
93
|
-
if (!logtoClient.value) return (0, $a89e3697ca8ff325$export$838ead842aa548e7)();
|
|
94
|
-
try {
|
|
95
|
-
setLoading(true);
|
|
96
|
-
return await logtoClient.value.fetchUserInfo();
|
|
97
|
-
} catch (error) {
|
|
98
|
-
setError(error, "Unexpected error occurred while fetching user info.");
|
|
99
|
-
} finally{
|
|
100
|
-
setLoading(false);
|
|
101
|
-
}
|
|
102
|
-
};
|
|
103
|
-
const getAccessToken = async (resource)=>{
|
|
104
|
-
if (!logtoClient.value) return (0, $a89e3697ca8ff325$export$838ead842aa548e7)();
|
|
105
|
-
try {
|
|
106
|
-
setLoading(true);
|
|
107
|
-
return await logtoClient.value.getAccessToken(resource);
|
|
108
|
-
} catch (error) {
|
|
109
|
-
setError(error, "Unexpected error occurred while getting access token.");
|
|
110
|
-
} finally{
|
|
111
|
-
setLoading(false);
|
|
112
|
-
}
|
|
113
|
-
};
|
|
114
|
-
const getIdTokenClaims = async ()=>{
|
|
115
|
-
if (!logtoClient.value) return (0, $a89e3697ca8ff325$export$838ead842aa548e7)();
|
|
116
|
-
try {
|
|
117
|
-
return await logtoClient.value.getIdTokenClaims();
|
|
118
|
-
} catch (error) {
|
|
119
|
-
setError(error, "Unexpected error occurred while getting id token claims.");
|
|
120
|
-
}
|
|
121
|
-
};
|
|
122
|
-
const handleSignInCallback = async (callbackUri, callbackFunction)=>{
|
|
123
|
-
if (!logtoClient.value) return (0, $a89e3697ca8ff325$export$838ead842aa548e7)();
|
|
124
|
-
try {
|
|
125
|
-
setLoading(true);
|
|
126
|
-
await logtoClient.value.handleSignInCallback(callbackUri);
|
|
127
|
-
setIsAuthenticated(true);
|
|
128
|
-
callbackFunction?.();
|
|
129
|
-
} catch (error) {
|
|
130
|
-
setError(error, "Unexpected error occurred while handling sign in callback.");
|
|
131
|
-
} finally{
|
|
132
|
-
setLoading(false);
|
|
133
|
-
}
|
|
134
|
-
};
|
|
135
|
-
return {
|
|
136
|
-
signIn: signIn,
|
|
137
|
-
signOut: signOut,
|
|
138
|
-
fetchUserInfo: fetchUserInfo,
|
|
139
|
-
getAccessToken: getAccessToken,
|
|
140
|
-
getIdTokenClaims: getIdTokenClaims,
|
|
141
|
-
handleSignInCallback: handleSignInCallback
|
|
142
|
-
};
|
|
143
|
-
};
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
const $b8cbe35fca4d52f8$export$d8f887f9089028d2 = {
|
|
148
|
-
install (app, config) {
|
|
149
|
-
const client = new (0, ($parcel$interopDefault($Kru5Y$logtobrowser)))(config);
|
|
150
|
-
const context = (0, $a89e3697ca8ff325$export$fd42f52fd3ae1109)(client);
|
|
151
|
-
const pluginMethods = (0, $155c9da87af3d4e0$export$6ad57c8ed6bec4)(context);
|
|
152
|
-
const { isAuthenticated: isAuthenticated , isLoading: isLoading , error: error } = context;
|
|
153
|
-
app.provide((0, $bf8f9fe4f6be54e2$export$951b969b1220de04), context);
|
|
154
|
-
app.provide((0, $bf8f9fe4f6be54e2$export$58f3af87e7a1a85a), {
|
|
155
|
-
isAuthenticated: (0, $Kru5Y$vue.readonly)(isAuthenticated),
|
|
156
|
-
isLoading: (0, $Kru5Y$vue.readonly)(isLoading),
|
|
157
|
-
error: (0, $Kru5Y$vue.readonly)(error),
|
|
158
|
-
...pluginMethods
|
|
8
|
+
/**
|
|
9
|
+
* Creates the Logto Vue plugin
|
|
10
|
+
*
|
|
11
|
+
* ```ts
|
|
12
|
+
* import { createApp } from 'vue';
|
|
13
|
+
* import { createLogto } from '@logto/vue';
|
|
14
|
+
*
|
|
15
|
+
* const app = createApp(App);
|
|
16
|
+
* const app.use(createLogto, {
|
|
17
|
+
* appId: '<your-app-id>',
|
|
18
|
+
* endpoint: '<your-oidc-endpoint-domain>',
|
|
19
|
+
* });
|
|
20
|
+
*
|
|
21
|
+
* app.mount('#app');
|
|
22
|
+
* ```
|
|
23
|
+
*
|
|
24
|
+
* Use this in your Vue root component to register the plugin
|
|
25
|
+
*/
|
|
26
|
+
const createLogto = {
|
|
27
|
+
install(app, config) {
|
|
28
|
+
const client = new LogtoClient(config);
|
|
29
|
+
const context = createContext(client);
|
|
30
|
+
const pluginMethods = createPluginMethods(context);
|
|
31
|
+
const { isAuthenticated, isLoading, error } = context;
|
|
32
|
+
app.provide(contextInjectionKey, context);
|
|
33
|
+
app.provide(logtoInjectionKey, {
|
|
34
|
+
isAuthenticated: readonly(isAuthenticated),
|
|
35
|
+
isLoading: readonly(isLoading),
|
|
36
|
+
error: readonly(error),
|
|
37
|
+
...pluginMethods,
|
|
159
38
|
});
|
|
160
|
-
}
|
|
39
|
+
},
|
|
161
40
|
};
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
41
|
+
/**
|
|
42
|
+
* A Vue composable method that provides the Logto reactive refs and auth methods.
|
|
43
|
+
*
|
|
44
|
+
* ```ts
|
|
45
|
+
* import { useLogto } from '@logto/vue';
|
|
46
|
+
*
|
|
47
|
+
* export default {
|
|
48
|
+
* setup() {
|
|
49
|
+
* const { isAuthenticated, signIn } = useLogto();
|
|
50
|
+
*
|
|
51
|
+
* return {
|
|
52
|
+
* isAuthenticated,
|
|
53
|
+
* onClickSignIn: () => {
|
|
54
|
+
* signIn('<your-redirect-uri>');
|
|
55
|
+
* },
|
|
56
|
+
* }
|
|
57
|
+
* }
|
|
58
|
+
* }
|
|
59
|
+
* ```
|
|
60
|
+
*
|
|
61
|
+
* Use this composable in the setup script of your Vue component to make sure the injection works
|
|
62
|
+
*/
|
|
63
|
+
const useLogto = () => {
|
|
64
|
+
const logto = inject(logtoInjectionKey);
|
|
65
|
+
if (!logto) {
|
|
66
|
+
return throwContextError();
|
|
67
|
+
}
|
|
165
68
|
return logto;
|
|
166
69
|
};
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
70
|
+
/**
|
|
71
|
+
* A Vue composable method that watches browser navigation and automatically handles the sign-in callback
|
|
72
|
+
*
|
|
73
|
+
* ```ts
|
|
74
|
+
* import { useLogto } from '@logto/vue';
|
|
75
|
+
* import { useHandleSignInCallback } from '@logto/vue';
|
|
76
|
+
*
|
|
77
|
+
* export default {
|
|
78
|
+
* setup() {
|
|
79
|
+
* useHandleSignInCallback();
|
|
80
|
+
* }
|
|
81
|
+
* }
|
|
82
|
+
* ```
|
|
83
|
+
*
|
|
84
|
+
* Use this in the setup script of your Callback page to make sure the injection works
|
|
85
|
+
*/
|
|
86
|
+
const useHandleSignInCallback = (callback) => {
|
|
87
|
+
const context = inject(contextInjectionKey);
|
|
88
|
+
if (!context) {
|
|
89
|
+
return throwContextError();
|
|
90
|
+
}
|
|
91
|
+
const { isAuthenticated, isLoading, logtoClient, error } = context;
|
|
92
|
+
const { handleSignInCallback } = createPluginMethods(context);
|
|
93
|
+
watchEffect(() => {
|
|
173
94
|
const currentPageUrl = window.location.href;
|
|
174
|
-
if (!isAuthenticated.value &&
|
|
95
|
+
if (!isAuthenticated.value &&
|
|
96
|
+
logtoClient.value?.isSignInRedirected(currentPageUrl) &&
|
|
97
|
+
!isLoading.value) {
|
|
98
|
+
void handleSignInCallback(currentPageUrl, callback);
|
|
99
|
+
}
|
|
175
100
|
});
|
|
176
101
|
return {
|
|
177
|
-
isLoading:
|
|
178
|
-
isAuthenticated:
|
|
179
|
-
error:
|
|
102
|
+
isLoading: readonly(isLoading),
|
|
103
|
+
isAuthenticated: readonly(isAuthenticated),
|
|
104
|
+
error: readonly(error),
|
|
180
105
|
};
|
|
181
106
|
};
|
|
182
107
|
|
|
183
|
-
|
|
184
|
-
//# sourceMappingURL=index.js.map
|
|
108
|
+
export { createLogto, useHandleSignInCallback, useLogto };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/lib/plugin.cjs
ADDED
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var context = require('./context.cjs');
|
|
4
|
+
|
|
5
|
+
const createPluginMethods = (context$1) => {
|
|
6
|
+
const { logtoClient, setLoading, setError, setIsAuthenticated } = context$1;
|
|
7
|
+
const signIn = async (redirectUri, interactionMode) => {
|
|
8
|
+
if (!logtoClient.value) {
|
|
9
|
+
return context.throwContextError();
|
|
10
|
+
}
|
|
11
|
+
try {
|
|
12
|
+
setLoading(true);
|
|
13
|
+
await logtoClient.value.signIn(redirectUri, interactionMode);
|
|
14
|
+
}
|
|
15
|
+
catch (error) {
|
|
16
|
+
setError(error, 'Unexpected error occurred while signing in.');
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
const signOut = async (postLogoutRedirectUri) => {
|
|
20
|
+
if (!logtoClient.value) {
|
|
21
|
+
return context.throwContextError();
|
|
22
|
+
}
|
|
23
|
+
try {
|
|
24
|
+
setLoading(true);
|
|
25
|
+
await logtoClient.value.signOut(postLogoutRedirectUri);
|
|
26
|
+
// We deliberately do NOT set isAuthenticated to false here, because the app state may change immediately
|
|
27
|
+
// even before navigating to the oidc end session endpoint, which might cause rendering problems.
|
|
28
|
+
// Moreover, since the location will be redirected, the isAuthenticated state will not matter any more.
|
|
29
|
+
}
|
|
30
|
+
catch (error) {
|
|
31
|
+
setError(error, 'Unexpected error occurred while signing out.');
|
|
32
|
+
}
|
|
33
|
+
finally {
|
|
34
|
+
setLoading(false);
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
const fetchUserInfo = async () => {
|
|
38
|
+
if (!logtoClient.value) {
|
|
39
|
+
return context.throwContextError();
|
|
40
|
+
}
|
|
41
|
+
try {
|
|
42
|
+
setLoading(true);
|
|
43
|
+
return await logtoClient.value.fetchUserInfo();
|
|
44
|
+
}
|
|
45
|
+
catch (error) {
|
|
46
|
+
setError(error, 'Unexpected error occurred while fetching user info.');
|
|
47
|
+
}
|
|
48
|
+
finally {
|
|
49
|
+
setLoading(false);
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
const getAccessToken = async (resource) => {
|
|
53
|
+
if (!logtoClient.value) {
|
|
54
|
+
return context.throwContextError();
|
|
55
|
+
}
|
|
56
|
+
try {
|
|
57
|
+
setLoading(true);
|
|
58
|
+
return await logtoClient.value.getAccessToken(resource);
|
|
59
|
+
}
|
|
60
|
+
catch (error) {
|
|
61
|
+
setError(error, 'Unexpected error occurred while getting access token.');
|
|
62
|
+
}
|
|
63
|
+
finally {
|
|
64
|
+
setLoading(false);
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
const getIdTokenClaims = async () => {
|
|
68
|
+
if (!logtoClient.value) {
|
|
69
|
+
return context.throwContextError();
|
|
70
|
+
}
|
|
71
|
+
try {
|
|
72
|
+
return await logtoClient.value.getIdTokenClaims();
|
|
73
|
+
}
|
|
74
|
+
catch (error) {
|
|
75
|
+
setError(error, 'Unexpected error occurred while getting id token claims.');
|
|
76
|
+
}
|
|
77
|
+
};
|
|
78
|
+
const handleSignInCallback = async (callbackUri, callbackFunction) => {
|
|
79
|
+
if (!logtoClient.value) {
|
|
80
|
+
return context.throwContextError();
|
|
81
|
+
}
|
|
82
|
+
try {
|
|
83
|
+
setLoading(true);
|
|
84
|
+
await logtoClient.value.handleSignInCallback(callbackUri);
|
|
85
|
+
setIsAuthenticated(true);
|
|
86
|
+
callbackFunction?.();
|
|
87
|
+
}
|
|
88
|
+
catch (error) {
|
|
89
|
+
setError(error, 'Unexpected error occurred while handling sign in callback.');
|
|
90
|
+
}
|
|
91
|
+
finally {
|
|
92
|
+
setLoading(false);
|
|
93
|
+
}
|
|
94
|
+
};
|
|
95
|
+
return {
|
|
96
|
+
signIn,
|
|
97
|
+
signOut,
|
|
98
|
+
fetchUserInfo,
|
|
99
|
+
getAccessToken,
|
|
100
|
+
getIdTokenClaims,
|
|
101
|
+
handleSignInCallback,
|
|
102
|
+
};
|
|
103
|
+
};
|
|
104
|
+
|
|
105
|
+
exports.createPluginMethods = createPluginMethods;
|
package/lib/plugin.d.ts
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { InteractionMode } from '@logto/browser';
|
|
2
|
+
import type { Context } from './context.js';
|
|
3
|
+
export declare const createPluginMethods: (context: Context) => {
|
|
4
|
+
signIn: (redirectUri: string, interactionMode?: InteractionMode) => Promise<undefined>;
|
|
5
|
+
signOut: (postLogoutRedirectUri?: string) => Promise<undefined>;
|
|
6
|
+
fetchUserInfo: () => Promise<import("@logto/browser").UserInfoResponse | undefined>;
|
|
7
|
+
getAccessToken: (resource?: string) => Promise<string | undefined>;
|
|
8
|
+
getIdTokenClaims: () => Promise<import("@logto/browser").IdTokenClaims | undefined>;
|
|
9
|
+
handleSignInCallback: (callbackUri: string, callbackFunction?: () => void) => Promise<undefined>;
|
|
10
|
+
};
|
package/lib/plugin.js
ADDED
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
import { throwContextError } from './context.js';
|
|
2
|
+
|
|
3
|
+
const createPluginMethods = (context) => {
|
|
4
|
+
const { logtoClient, setLoading, setError, setIsAuthenticated } = context;
|
|
5
|
+
const signIn = async (redirectUri, interactionMode) => {
|
|
6
|
+
if (!logtoClient.value) {
|
|
7
|
+
return throwContextError();
|
|
8
|
+
}
|
|
9
|
+
try {
|
|
10
|
+
setLoading(true);
|
|
11
|
+
await logtoClient.value.signIn(redirectUri, interactionMode);
|
|
12
|
+
}
|
|
13
|
+
catch (error) {
|
|
14
|
+
setError(error, 'Unexpected error occurred while signing in.');
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
const signOut = async (postLogoutRedirectUri) => {
|
|
18
|
+
if (!logtoClient.value) {
|
|
19
|
+
return throwContextError();
|
|
20
|
+
}
|
|
21
|
+
try {
|
|
22
|
+
setLoading(true);
|
|
23
|
+
await logtoClient.value.signOut(postLogoutRedirectUri);
|
|
24
|
+
// We deliberately do NOT set isAuthenticated to false here, because the app state may change immediately
|
|
25
|
+
// even before navigating to the oidc end session endpoint, which might cause rendering problems.
|
|
26
|
+
// Moreover, since the location will be redirected, the isAuthenticated state will not matter any more.
|
|
27
|
+
}
|
|
28
|
+
catch (error) {
|
|
29
|
+
setError(error, 'Unexpected error occurred while signing out.');
|
|
30
|
+
}
|
|
31
|
+
finally {
|
|
32
|
+
setLoading(false);
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
const fetchUserInfo = async () => {
|
|
36
|
+
if (!logtoClient.value) {
|
|
37
|
+
return throwContextError();
|
|
38
|
+
}
|
|
39
|
+
try {
|
|
40
|
+
setLoading(true);
|
|
41
|
+
return await logtoClient.value.fetchUserInfo();
|
|
42
|
+
}
|
|
43
|
+
catch (error) {
|
|
44
|
+
setError(error, 'Unexpected error occurred while fetching user info.');
|
|
45
|
+
}
|
|
46
|
+
finally {
|
|
47
|
+
setLoading(false);
|
|
48
|
+
}
|
|
49
|
+
};
|
|
50
|
+
const getAccessToken = async (resource) => {
|
|
51
|
+
if (!logtoClient.value) {
|
|
52
|
+
return throwContextError();
|
|
53
|
+
}
|
|
54
|
+
try {
|
|
55
|
+
setLoading(true);
|
|
56
|
+
return await logtoClient.value.getAccessToken(resource);
|
|
57
|
+
}
|
|
58
|
+
catch (error) {
|
|
59
|
+
setError(error, 'Unexpected error occurred while getting access token.');
|
|
60
|
+
}
|
|
61
|
+
finally {
|
|
62
|
+
setLoading(false);
|
|
63
|
+
}
|
|
64
|
+
};
|
|
65
|
+
const getIdTokenClaims = async () => {
|
|
66
|
+
if (!logtoClient.value) {
|
|
67
|
+
return throwContextError();
|
|
68
|
+
}
|
|
69
|
+
try {
|
|
70
|
+
return await logtoClient.value.getIdTokenClaims();
|
|
71
|
+
}
|
|
72
|
+
catch (error) {
|
|
73
|
+
setError(error, 'Unexpected error occurred while getting id token claims.');
|
|
74
|
+
}
|
|
75
|
+
};
|
|
76
|
+
const handleSignInCallback = async (callbackUri, callbackFunction) => {
|
|
77
|
+
if (!logtoClient.value) {
|
|
78
|
+
return throwContextError();
|
|
79
|
+
}
|
|
80
|
+
try {
|
|
81
|
+
setLoading(true);
|
|
82
|
+
await logtoClient.value.handleSignInCallback(callbackUri);
|
|
83
|
+
setIsAuthenticated(true);
|
|
84
|
+
callbackFunction?.();
|
|
85
|
+
}
|
|
86
|
+
catch (error) {
|
|
87
|
+
setError(error, 'Unexpected error occurred while handling sign in callback.');
|
|
88
|
+
}
|
|
89
|
+
finally {
|
|
90
|
+
setLoading(false);
|
|
91
|
+
}
|
|
92
|
+
};
|
|
93
|
+
return {
|
|
94
|
+
signIn,
|
|
95
|
+
signOut,
|
|
96
|
+
fetchUserInfo,
|
|
97
|
+
getAccessToken,
|
|
98
|
+
getIdTokenClaims,
|
|
99
|
+
handleSignInCallback,
|
|
100
|
+
};
|
|
101
|
+
};
|
|
102
|
+
|
|
103
|
+
export { createPluginMethods };
|
package/package.json
CHANGED
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@logto/vue",
|
|
3
|
-
"version": "
|
|
4
|
-
"
|
|
5
|
-
"main": "./lib/index.
|
|
3
|
+
"version": "2.0.0",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"main": "./lib/index.cjs",
|
|
6
|
+
"module": "./lib/index.js",
|
|
7
|
+
"types": "./lib/index.d.ts",
|
|
6
8
|
"exports": {
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
+
"types": "./lib/index.d.ts",
|
|
10
|
+
"require": "./lib/index.cjs",
|
|
11
|
+
"import": "./lib/index.js",
|
|
12
|
+
"default": "./lib/index.js"
|
|
9
13
|
},
|
|
10
|
-
"module": "./lib/module.mjs",
|
|
11
|
-
"types": "./lib/index.d.ts",
|
|
12
14
|
"files": [
|
|
13
15
|
"lib"
|
|
14
16
|
],
|
|
@@ -18,36 +20,22 @@
|
|
|
18
20
|
"url": "https://github.com/logto-io/js.git",
|
|
19
21
|
"directory": "packages/vue"
|
|
20
22
|
},
|
|
21
|
-
"scripts": {
|
|
22
|
-
"dev:tsc": "tsc -p tsconfig.build.json -w --preserveWatchOutput",
|
|
23
|
-
"precommit": "lint-staged",
|
|
24
|
-
"check": "tsc --noEmit",
|
|
25
|
-
"build": "rm -rf lib/ && pnpm check && parcel build && cp lib/index.d.ts lib/module.d.mts",
|
|
26
|
-
"lint": "eslint --ext .ts src",
|
|
27
|
-
"test": "jest",
|
|
28
|
-
"test:coverage": "jest --silent --coverage",
|
|
29
|
-
"prepack": "pnpm test"
|
|
30
|
-
},
|
|
31
23
|
"dependencies": {
|
|
32
|
-
"@logto/browser": "^
|
|
24
|
+
"@logto/browser": "^2.0.0"
|
|
33
25
|
},
|
|
34
26
|
"devDependencies": {
|
|
35
|
-
"@
|
|
36
|
-
"@
|
|
37
|
-
"@
|
|
38
|
-
"@
|
|
39
|
-
"@
|
|
40
|
-
"
|
|
41
|
-
"
|
|
42
|
-
"eslint": "^8.23.0",
|
|
43
|
-
"jest": "^27.5.1",
|
|
27
|
+
"@silverhand/eslint-config": "^3.0.1",
|
|
28
|
+
"@silverhand/ts-config": "^3.0.0",
|
|
29
|
+
"@swc/core": "^1.3.50",
|
|
30
|
+
"@swc/jest": "^0.2.24",
|
|
31
|
+
"@types/jest": "^29.5.0",
|
|
32
|
+
"eslint": "^8.38.0",
|
|
33
|
+
"jest": "^29.5.0",
|
|
44
34
|
"lint-staged": "^13.0.0",
|
|
45
|
-
"parcel": "^2.8.3",
|
|
46
35
|
"postcss": "^8.4.6",
|
|
47
|
-
"prettier": "^2.7
|
|
36
|
+
"prettier": "^2.8.7",
|
|
48
37
|
"stylelint": "^15.0.0",
|
|
49
|
-
"
|
|
50
|
-
"typescript": "4.9.5",
|
|
38
|
+
"typescript": "^5.0.0",
|
|
51
39
|
"vue": "^3.2.35"
|
|
52
40
|
},
|
|
53
41
|
"peerDependencies": {
|
|
@@ -70,5 +58,13 @@
|
|
|
70
58
|
"publishConfig": {
|
|
71
59
|
"access": "public"
|
|
72
60
|
},
|
|
73
|
-
"
|
|
74
|
-
|
|
61
|
+
"scripts": {
|
|
62
|
+
"dev:tsc": "tsc -p tsconfig.build.json -w --preserveWatchOutput",
|
|
63
|
+
"precommit": "lint-staged",
|
|
64
|
+
"check": "tsc --noEmit",
|
|
65
|
+
"build": "rm -rf lib/ && tsc -p tsconfig.build.json --noEmit && rollup -c",
|
|
66
|
+
"lint": "eslint --ext .ts src",
|
|
67
|
+
"test": "jest",
|
|
68
|
+
"test:coverage": "jest --silent --coverage"
|
|
69
|
+
}
|
|
70
|
+
}
|
package/lib/index.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"mappings":";;AGUA,YAAY,EACV,WAAW,EACX,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,oBAAoB,EACpB,eAAe,GAChB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EACL,UAAU,EACV,gBAAgB,EAChB,SAAS,EACT,MAAM,EACN,aAAa,EACb,SAAS,GACV,MAAM,gBAAgB,CAAC;AAExB,sBAAsB;IACpB,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CAClD,CAAC;AAEF,aAAa;IACX,eAAe,EAAE,QAAQ,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC;IACxC,SAAS,EAAE,QAAQ,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC;IAClC,KAAK,EAAE,QAAQ,CAAC,IAAI,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC;IACxC,aAAa,EAAE,MAAM,OAAO,CAAC,gBAAgB,GAAG,SAAS,CAAC,CAAC;IAC3D,cAAc,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACnE,gBAAgB,EAAE,MAAM,OAAO,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC;IAC3D,MAAM,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/C,OAAO,EAAE,CAAC,qBAAqB,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC5D,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,MAAM,aAAa,cAezB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,OAAO,MAAM,gBAAe,KAQ3B,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,OAAO,MAAM,qCAAsC,MAAM,IAAI;;;;CAuB5D,CAAC","sources":["packages/vue/src/src/consts.ts","packages/vue/src/src/context.ts","packages/vue/src/src/plugin.ts","packages/vue/src/src/index.ts","packages/vue/src/index.ts"],"sourcesContent":[null,null,null,null,"import type { IdTokenClaims, LogtoConfig, UserInfoResponse } from '@logto/browser';\nimport LogtoClient from '@logto/browser';\nimport type { App, Ref } from 'vue';\nimport { inject, readonly, watchEffect } from 'vue';\n\nimport { logtoInjectionKey, contextInjectionKey } from './consts';\nimport type { Context } from './context';\nimport { createContext, throwContextError } from './context';\nimport { createPluginMethods } from './plugin';\n\nexport type {\n LogtoConfig,\n IdTokenClaims,\n UserInfoResponse,\n LogtoErrorCode,\n LogtoClientErrorCode,\n InteractionMode,\n} from '@logto/browser';\n\nexport {\n LogtoError,\n LogtoClientError,\n OidcError,\n Prompt,\n ReservedScope,\n UserScope,\n} from '@logto/browser';\n\ntype LogtoVuePlugin = {\n install: (app: App, config: LogtoConfig) => void;\n};\n\ntype Logto = {\n isAuthenticated: Readonly<Ref<boolean>>;\n isLoading: Readonly<Ref<boolean>>;\n error: Readonly<Ref<Error | undefined>>;\n fetchUserInfo: () => Promise<UserInfoResponse | undefined>;\n getAccessToken: (resource?: string) => Promise<string | undefined>;\n getIdTokenClaims: () => Promise<IdTokenClaims | undefined>;\n signIn: (redirectUri: string) => Promise<void>;\n signOut: (postLogoutRedirectUri?: string) => Promise<void>;\n};\n\n/**\n * Creates the Logto Vue plugin\n *\n * ```ts\n * import { createApp } from 'vue';\n * import { createLogto } from '@logto/vue';\n *\n * const app = createApp(App);\n * const app.use(createLogto, {\n * appId: '<your-app-id>',\n * endpoint: '<your-oidc-endpoint-domain>',\n * });\n *\n * app.mount('#app');\n * ```\n *\n * Use this in your Vue root component to register the plugin\n */\nexport const createLogto: LogtoVuePlugin = {\n install(app: App, config: LogtoConfig) {\n const client = new LogtoClient(config);\n const context = createContext(client);\n const pluginMethods = createPluginMethods(context);\n const { isAuthenticated, isLoading, error } = context;\n\n app.provide<Context>(contextInjectionKey, context);\n app.provide<Logto>(logtoInjectionKey, {\n isAuthenticated: readonly(isAuthenticated),\n isLoading: readonly(isLoading),\n error: readonly(error),\n ...pluginMethods,\n });\n },\n};\n\n/**\n * A Vue composable method that provides the Logto reactive refs and auth methods.\n *\n * ```ts\n * import { useLogto } from '@logto/vue';\n *\n * export default {\n * setup() {\n * const { isAuthenticated, signIn } = useLogto();\n *\n * return {\n * isAuthenticated,\n * onClickSignIn: () => {\n * signIn('<your-redirect-uri>');\n * },\n * }\n * }\n * }\n * ```\n *\n * Use this composable in the setup script of your Vue component to make sure the injection works\n */\nexport const useLogto = (): Logto => {\n const logto = inject<Logto>(logtoInjectionKey);\n\n if (!logto) {\n return throwContextError();\n }\n\n return logto;\n};\n\n/**\n * A Vue composable method that watches browser navigation and automatically handles the sign-in callback\n *\n * ```ts\n * import { useLogto } from '@logto/vue';\n * import { useHandleSignInCallback } from '@logto/vue';\n *\n * export default {\n * setup() {\n * useHandleSignInCallback();\n * }\n * }\n * ```\n *\n * Use this in the setup script of your Callback page to make sure the injection works\n */\nexport const useHandleSignInCallback = (callback?: () => void) => {\n const context = inject<Context>(contextInjectionKey);\n\n if (!context) {\n return throwContextError();\n }\n\n const { isAuthenticated, isLoading, logtoClient, error } = context;\n const { handleSignInCallback } = createPluginMethods(context);\n\n watchEffect(() => {\n const currentPageUrl = window.location.href;\n\n if (!isAuthenticated.value && logtoClient.value?.isSignInRedirected(currentPageUrl)) {\n void handleSignInCallback(currentPageUrl, callback);\n }\n });\n\n return {\n isLoading: readonly(isLoading),\n isAuthenticated: readonly(isAuthenticated),\n error: readonly(error),\n };\n};\n"],"names":[],"version":3,"file":"index.d.ts.map"}
|
package/lib/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;ACAO,MAAM,4CAAoB;AAC1B,MAAM,4CAAsB;;;ACDnC;AAuBO,MAAM,4CAAgB,CAAC,SAAiC;IAC7D,MAAM,UAAU,CAAA,GAAA,iBAAK,EACnB,CAAA,GAAA,mBAAQ,AAAD,EAA0B;QAC/B,aAAa;QACb,iBAAiB,KAAK;QACtB,cAAc;QACd,OAAO;IACT;IAGF,MAAM,mBAAE,gBAAe,gBAAE,aAAY,SAAE,MAAK,EAAE,GAAG;IAEjD,MAAM,YAAY,CAAA,GAAA,mBAAO,EAAE,IAAM,aAAa,KAAK,GAAG;IAEtD,6CAA6C,GAC7C,MAAM,WAAW,CAAC,QAAiB,uBAAkC;QACnE,IAAI,kBAAkB,OACpB,MAAM,KAAK,GAAG;aACT,IAAI,sBACT,MAAM,KAAK,GAAG,IAAI,MAAM;QAE1B,QAAQ,KAAK,CAAC;IAChB;IAEA,MAAM,aAAa,CAAC,YAAuB;QACzC,IAAI,WACF,aAAa,KAAK,IAAI;aAEtB,aAAa,KAAK,GAAG,KAAK,GAAG,CAAC,GAAG,aAAa,KAAK,GAAG;IAE1D;IAEA,MAAM,qBAAqB,CAAC,mBAA8B;QACxD,gBAAgB,KAAK,GAAG;IAC1B;IACA,4CAA4C,GAE3C,CAAA,UAAY;QACX,MAAM,kBAAkB,MAAM,OAAO,eAAe;QAEpD,mBAAmB;QACnB,WAAW,KAAK;IAClB,CAAA;IAEA,OAAO;QAAE,GAAG,OAAO;mBAAE;kBAAW;oBAAU;4BAAY;IAAmB;AAC3E;AAEO,MAAM,4CAAoB,IAAa;IAC5C,MAAM,IAAI,MAAM,oCAAoC;AACtD;;;ACxEA;AAKO,MAAM,0CAAsB,CAAC,UAAqB;IACvD,MAAM,eAAE,YAAW,cAAE,WAAU,YAAE,SAAQ,sBAAE,mBAAkB,EAAE,GAAG;IAElE,MAAM,SAAS,OAAO,aAAqB,kBAAsC;QAC/E,IAAI,CAAC,YAAY,KAAK,EACpB,OAAO,CAAA,GAAA,yCAAgB;QAGzB,IAAI;YACF,WAAW,IAAI;YAEf,MAAM,YAAY,KAAK,CAAC,MAAM,CAAC,aAAa;QAC9C,EAAE,OAAO,OAAgB;YACvB,SAAS,OAAO;QAClB;IACF;IAEA,MAAM,UAAU,OAAO,wBAAmC;QACxD,IAAI,CAAC,YAAY,KAAK,EACpB,OAAO,CAAA,GAAA,yCAAgB;QAGzB,IAAI;YACF,WAAW,IAAI;YAEf,MAAM,YAAY,KAAK,CAAC,OAAO,CAAC;QAEhC,yGAAyG;QACzG,iGAAiG;QACjG,uGAAuG;QACzG,EAAE,OAAO,OAAgB;YACvB,SAAS,OAAO;QAClB,SAAU;YACR,WAAW,KAAK;QAClB;IACF;IAEA,MAAM,gBAAgB,UAAY;QAChC,IAAI,CAAC,YAAY,KAAK,EACpB,OAAO,CAAA,GAAA,yCAAgB;QAGzB,IAAI;YACF,WAAW,IAAI;YAEf,OAAO,MAAM,YAAY,KAAK,CAAC,aAAa;QAC9C,EAAE,OAAO,OAAgB;YACvB,SAAS,OAAO;QAClB,SAAU;YACR,WAAW,KAAK;QAClB;IACF;IAEA,MAAM,iBAAiB,OAAO,WAAsB;QAClD,IAAI,CAAC,YAAY,KAAK,EACpB,OAAO,CAAA,GAAA,yCAAgB;QAGzB,IAAI;YACF,WAAW,IAAI;YAEf,OAAO,MAAM,YAAY,KAAK,CAAC,cAAc,CAAC;QAChD,EAAE,OAAO,OAAgB;YACvB,SAAS,OAAO;QAClB,SAAU;YACR,WAAW,KAAK;QAClB;IACF;IAEA,MAAM,mBAAmB,UAAY;QACnC,IAAI,CAAC,YAAY,KAAK,EACpB,OAAO,CAAA,GAAA,yCAAgB;QAGzB,IAAI;YACF,OAAO,MAAM,YAAY,KAAK,CAAC,gBAAgB;QACjD,EAAE,OAAO,OAAgB;YACvB,SAAS,OAAO;QAClB;IACF;IAEA,MAAM,uBAAuB,OAAO,aAAqB,mBAAkC;QACzF,IAAI,CAAC,YAAY,KAAK,EACpB,OAAO,CAAA,GAAA,yCAAgB;QAGzB,IAAI;YACF,WAAW,IAAI;YACf,MAAM,YAAY,KAAK,CAAC,oBAAoB,CAAC;YAC7C,mBAAmB,IAAI;YACvB;QACF,EAAE,OAAO,OAAgB;YACvB,SAAS,OAAO;QAClB,SAAU;YACR,WAAW,KAAK;QAClB;IACF;IAEA,OAAO;gBACL;iBACA;uBACA;wBACA;0BACA;8BACA;IACF;AACF;;;;AHlDO,MAAM,4CAA8B;IACzC,SAAQ,GAAQ,EAAE,MAAmB,EAAE;QACrC,MAAM,SAAS,IAAI,CAAA,GAAA,6CAAU,EAAE;QAC/B,MAAM,UAAU,CAAA,GAAA,yCAAY,EAAE;QAC9B,MAAM,gBAAgB,CAAA,GAAA,uCAAkB,EAAE;QAC1C,MAAM,mBAAE,gBAAe,aAAE,UAAS,SAAE,MAAK,EAAE,GAAG;QAE9C,IAAI,OAAO,CAAU,CAAA,GAAA,yCAAkB,GAAG;QAC1C,IAAI,OAAO,CAAQ,CAAA,GAAA,yCAAgB,GAAG;YACpC,iBAAiB,CAAA,GAAA,mBAAO,EAAE;YAC1B,WAAW,CAAA,GAAA,mBAAO,EAAE;YACpB,OAAO,CAAA,GAAA,mBAAO,EAAE;YAChB,GAAG,aAAa;QAClB;IACF;AACF;AAwBO,MAAM,4CAAW,IAAa;IACnC,MAAM,QAAQ,CAAA,GAAA,iBAAK,EAAS,CAAA,GAAA,yCAAgB;IAE5C,IAAI,CAAC,OACH,OAAO,CAAA,GAAA,yCAAiB,AAAD;IAGzB,OAAO;AACT;AAkBO,MAAM,4CAA0B,CAAC,WAA0B;IAChE,MAAM,UAAU,CAAA,GAAA,iBAAK,EAAW,CAAA,GAAA,yCAAkB;IAElD,IAAI,CAAC,SACH,OAAO,CAAA,GAAA,yCAAiB,AAAD;IAGzB,MAAM,mBAAE,gBAAe,aAAE,UAAS,eAAE,YAAW,SAAE,MAAK,EAAE,GAAG;IAC3D,MAAM,wBAAE,qBAAoB,EAAE,GAAG,CAAA,GAAA,uCAAmB,AAAD,EAAE;IAErD,CAAA,GAAA,sBAAW,AAAD,EAAE,IAAM;QAChB,MAAM,iBAAiB,OAAO,QAAQ,CAAC,IAAI;QAE3C,IAAI,CAAC,gBAAgB,KAAK,IAAI,YAAY,KAAK,EAAE,mBAAmB,iBAC7D,qBAAqB,gBAAgB;IAE9C;IAEA,OAAO;QACL,WAAW,CAAA,GAAA,mBAAO,EAAE;QACpB,iBAAiB,CAAA,GAAA,mBAAO,EAAE;QAC1B,OAAO,CAAA,GAAA,mBAAO,EAAE;IAClB;AACF","sources":["packages/vue/src/index.ts","packages/vue/src/consts.ts","packages/vue/src/context.ts","packages/vue/src/plugin.ts"],"sourcesContent":["import type { IdTokenClaims, LogtoConfig, UserInfoResponse } from '@logto/browser';\nimport LogtoClient from '@logto/browser';\nimport type { App, Ref } from 'vue';\nimport { inject, readonly, watchEffect } from 'vue';\n\nimport { logtoInjectionKey, contextInjectionKey } from './consts';\nimport type { Context } from './context';\nimport { createContext, throwContextError } from './context';\nimport { createPluginMethods } from './plugin';\n\nexport type {\n LogtoConfig,\n IdTokenClaims,\n UserInfoResponse,\n LogtoErrorCode,\n LogtoClientErrorCode,\n InteractionMode,\n} from '@logto/browser';\n\nexport {\n LogtoError,\n LogtoClientError,\n OidcError,\n Prompt,\n ReservedScope,\n UserScope,\n} from '@logto/browser';\n\ntype LogtoVuePlugin = {\n install: (app: App, config: LogtoConfig) => void;\n};\n\ntype Logto = {\n isAuthenticated: Readonly<Ref<boolean>>;\n isLoading: Readonly<Ref<boolean>>;\n error: Readonly<Ref<Error | undefined>>;\n fetchUserInfo: () => Promise<UserInfoResponse | undefined>;\n getAccessToken: (resource?: string) => Promise<string | undefined>;\n getIdTokenClaims: () => Promise<IdTokenClaims | undefined>;\n signIn: (redirectUri: string) => Promise<void>;\n signOut: (postLogoutRedirectUri?: string) => Promise<void>;\n};\n\n/**\n * Creates the Logto Vue plugin\n *\n * ```ts\n * import { createApp } from 'vue';\n * import { createLogto } from '@logto/vue';\n *\n * const app = createApp(App);\n * const app.use(createLogto, {\n * appId: '<your-app-id>',\n * endpoint: '<your-oidc-endpoint-domain>',\n * });\n *\n * app.mount('#app');\n * ```\n *\n * Use this in your Vue root component to register the plugin\n */\nexport const createLogto: LogtoVuePlugin = {\n install(app: App, config: LogtoConfig) {\n const client = new LogtoClient(config);\n const context = createContext(client);\n const pluginMethods = createPluginMethods(context);\n const { isAuthenticated, isLoading, error } = context;\n\n app.provide<Context>(contextInjectionKey, context);\n app.provide<Logto>(logtoInjectionKey, {\n isAuthenticated: readonly(isAuthenticated),\n isLoading: readonly(isLoading),\n error: readonly(error),\n ...pluginMethods,\n });\n },\n};\n\n/**\n * A Vue composable method that provides the Logto reactive refs and auth methods.\n *\n * ```ts\n * import { useLogto } from '@logto/vue';\n *\n * export default {\n * setup() {\n * const { isAuthenticated, signIn } = useLogto();\n *\n * return {\n * isAuthenticated,\n * onClickSignIn: () => {\n * signIn('<your-redirect-uri>');\n * },\n * }\n * }\n * }\n * ```\n *\n * Use this composable in the setup script of your Vue component to make sure the injection works\n */\nexport const useLogto = (): Logto => {\n const logto = inject<Logto>(logtoInjectionKey);\n\n if (!logto) {\n return throwContextError();\n }\n\n return logto;\n};\n\n/**\n * A Vue composable method that watches browser navigation and automatically handles the sign-in callback\n *\n * ```ts\n * import { useLogto } from '@logto/vue';\n * import { useHandleSignInCallback } from '@logto/vue';\n *\n * export default {\n * setup() {\n * useHandleSignInCallback();\n * }\n * }\n * ```\n *\n * Use this in the setup script of your Callback page to make sure the injection works\n */\nexport const useHandleSignInCallback = (callback?: () => void) => {\n const context = inject<Context>(contextInjectionKey);\n\n if (!context) {\n return throwContextError();\n }\n\n const { isAuthenticated, isLoading, logtoClient, error } = context;\n const { handleSignInCallback } = createPluginMethods(context);\n\n watchEffect(() => {\n const currentPageUrl = window.location.href;\n\n if (!isAuthenticated.value && logtoClient.value?.isSignInRedirected(currentPageUrl)) {\n void handleSignInCallback(currentPageUrl, callback);\n }\n });\n\n return {\n isLoading: readonly(isLoading),\n isAuthenticated: readonly(isAuthenticated),\n error: readonly(error),\n };\n};\n","export const logtoInjectionKey = '@logto/vue';\nexport const contextInjectionKey = '@logto/vue:context';\n","import type LogtoClient from '@logto/browser';\nimport type { ComputedRef, Ref, UnwrapRef } from 'vue';\nimport { computed, reactive, toRefs } from 'vue';\n\ntype LogtoContextProperties = {\n logtoClient: LogtoClient | undefined;\n isAuthenticated: boolean;\n loadingCount: number;\n error: Error | undefined;\n};\n\nexport type Context = {\n // Wrong type workaround. https://github.com/vuejs/core/issues/2981\n logtoClient: Ref<UnwrapRef<LogtoClient | undefined>>;\n isAuthenticated: Ref<boolean>;\n loadingCount: Ref<number>;\n error: Ref<Error | undefined>;\n isLoading: ComputedRef<boolean>;\n setError: (error: unknown, fallbackErrorMessage?: string | undefined) => void;\n setIsAuthenticated: (isAuthenticated: boolean) => void;\n setLoading: (isLoading: boolean) => void;\n};\n\nexport const createContext = (client: LogtoClient): Context => {\n const context = toRefs(\n reactive<LogtoContextProperties>({\n logtoClient: client,\n isAuthenticated: false,\n loadingCount: 1,\n error: undefined,\n })\n );\n\n const { isAuthenticated, loadingCount, error } = context;\n\n const isLoading = computed(() => loadingCount.value > 0);\n\n /* eslint-disable @silverhand/fp/no-mutation */\n const setError = (_error: unknown, fallbackErrorMessage?: string) => {\n if (_error instanceof Error) {\n error.value = _error;\n } else if (fallbackErrorMessage) {\n error.value = new Error(fallbackErrorMessage);\n }\n console.error(error);\n };\n\n const setLoading = (isLoading: boolean) => {\n if (isLoading) {\n loadingCount.value += 1;\n } else {\n loadingCount.value = Math.max(0, loadingCount.value - 1);\n }\n };\n\n const setIsAuthenticated = (_isAuthenticated: boolean) => {\n isAuthenticated.value = _isAuthenticated;\n };\n /* eslint-enable @silverhand/fp/no-mutation */\n\n (async () => {\n const isAuthenticated = await client.isAuthenticated();\n\n setIsAuthenticated(isAuthenticated);\n setLoading(false);\n })();\n\n return { ...context, isLoading, setError, setLoading, setIsAuthenticated };\n};\n\nexport const throwContextError = (): never => {\n throw new Error('Must install Logto plugin first.');\n};\n","import type { InteractionMode } from '@logto/browser';\n\nimport type { Context } from './context';\nimport { throwContextError } from './context';\n\nexport const createPluginMethods = (context: Context) => {\n const { logtoClient, setLoading, setError, setIsAuthenticated } = context;\n\n const signIn = async (redirectUri: string, interactionMode?: InteractionMode) => {\n if (!logtoClient.value) {\n return throwContextError();\n }\n\n try {\n setLoading(true);\n\n await logtoClient.value.signIn(redirectUri, interactionMode);\n } catch (error: unknown) {\n setError(error, 'Unexpected error occurred while signing in.');\n }\n };\n\n const signOut = async (postLogoutRedirectUri?: string) => {\n if (!logtoClient.value) {\n return throwContextError();\n }\n\n try {\n setLoading(true);\n\n await logtoClient.value.signOut(postLogoutRedirectUri);\n\n // We deliberately do NOT set isAuthenticated to false here, because the app state may change immediately\n // even before navigating to the oidc end session endpoint, which might cause rendering problems.\n // Moreover, since the location will be redirected, the isAuthenticated state will not matter any more.\n } catch (error: unknown) {\n setError(error, 'Unexpected error occurred while signing out.');\n } finally {\n setLoading(false);\n }\n };\n\n const fetchUserInfo = async () => {\n if (!logtoClient.value) {\n return throwContextError();\n }\n\n try {\n setLoading(true);\n\n return await logtoClient.value.fetchUserInfo();\n } catch (error: unknown) {\n setError(error, 'Unexpected error occurred while fetching user info.');\n } finally {\n setLoading(false);\n }\n };\n\n const getAccessToken = async (resource?: string) => {\n if (!logtoClient.value) {\n return throwContextError();\n }\n\n try {\n setLoading(true);\n\n return await logtoClient.value.getAccessToken(resource);\n } catch (error: unknown) {\n setError(error, 'Unexpected error occurred while getting access token.');\n } finally {\n setLoading(false);\n }\n };\n\n const getIdTokenClaims = async () => {\n if (!logtoClient.value) {\n return throwContextError();\n }\n\n try {\n return await logtoClient.value.getIdTokenClaims();\n } catch (error: unknown) {\n setError(error, 'Unexpected error occurred while getting id token claims.');\n }\n };\n\n const handleSignInCallback = async (callbackUri: string, callbackFunction?: () => void) => {\n if (!logtoClient.value) {\n return throwContextError();\n }\n\n try {\n setLoading(true);\n await logtoClient.value.handleSignInCallback(callbackUri);\n setIsAuthenticated(true);\n callbackFunction?.();\n } catch (error: unknown) {\n setError(error, 'Unexpected error occurred while handling sign in callback.');\n } finally {\n setLoading(false);\n }\n };\n\n return {\n signIn,\n signOut,\n fetchUserInfo,\n getAccessToken,\n getIdTokenClaims,\n handleSignInCallback,\n };\n};\n"],"names":[],"version":3,"file":"index.js.map"}
|
package/lib/module.d.mts
DELETED
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
import { IdTokenClaims, LogtoConfig, UserInfoResponse } from "@logto/browser";
|
|
2
|
-
import { App, Ref } from "vue";
|
|
3
|
-
export type { LogtoConfig, IdTokenClaims, UserInfoResponse, LogtoErrorCode, LogtoClientErrorCode, InteractionMode, } from '@logto/browser';
|
|
4
|
-
export { LogtoError, LogtoClientError, OidcError, Prompt, ReservedScope, UserScope, } from '@logto/browser';
|
|
5
|
-
type LogtoVuePlugin = {
|
|
6
|
-
install: (app: App, config: LogtoConfig) => void;
|
|
7
|
-
};
|
|
8
|
-
type Logto = {
|
|
9
|
-
isAuthenticated: Readonly<Ref<boolean>>;
|
|
10
|
-
isLoading: Readonly<Ref<boolean>>;
|
|
11
|
-
error: Readonly<Ref<Error | undefined>>;
|
|
12
|
-
fetchUserInfo: () => Promise<UserInfoResponse | undefined>;
|
|
13
|
-
getAccessToken: (resource?: string) => Promise<string | undefined>;
|
|
14
|
-
getIdTokenClaims: () => Promise<IdTokenClaims | undefined>;
|
|
15
|
-
signIn: (redirectUri: string) => Promise<void>;
|
|
16
|
-
signOut: (postLogoutRedirectUri?: string) => Promise<void>;
|
|
17
|
-
};
|
|
18
|
-
/**
|
|
19
|
-
* Creates the Logto Vue plugin
|
|
20
|
-
*
|
|
21
|
-
* ```ts
|
|
22
|
-
* import { createApp } from 'vue';
|
|
23
|
-
* import { createLogto } from '@logto/vue';
|
|
24
|
-
*
|
|
25
|
-
* const app = createApp(App);
|
|
26
|
-
* const app.use(createLogto, {
|
|
27
|
-
* appId: '<your-app-id>',
|
|
28
|
-
* endpoint: '<your-oidc-endpoint-domain>',
|
|
29
|
-
* });
|
|
30
|
-
*
|
|
31
|
-
* app.mount('#app');
|
|
32
|
-
* ```
|
|
33
|
-
*
|
|
34
|
-
* Use this in your Vue root component to register the plugin
|
|
35
|
-
*/
|
|
36
|
-
export const createLogto: LogtoVuePlugin;
|
|
37
|
-
/**
|
|
38
|
-
* A Vue composable method that provides the Logto reactive refs and auth methods.
|
|
39
|
-
*
|
|
40
|
-
* ```ts
|
|
41
|
-
* import { useLogto } from '@logto/vue';
|
|
42
|
-
*
|
|
43
|
-
* export default {
|
|
44
|
-
* setup() {
|
|
45
|
-
* const { isAuthenticated, signIn } = useLogto();
|
|
46
|
-
*
|
|
47
|
-
* return {
|
|
48
|
-
* isAuthenticated,
|
|
49
|
-
* onClickSignIn: () => {
|
|
50
|
-
* signIn('<your-redirect-uri>');
|
|
51
|
-
* },
|
|
52
|
-
* }
|
|
53
|
-
* }
|
|
54
|
-
* }
|
|
55
|
-
* ```
|
|
56
|
-
*
|
|
57
|
-
* Use this composable in the setup script of your Vue component to make sure the injection works
|
|
58
|
-
*/
|
|
59
|
-
export const useLogto: () => Logto;
|
|
60
|
-
/**
|
|
61
|
-
* A Vue composable method that watches browser navigation and automatically handles the sign-in callback
|
|
62
|
-
*
|
|
63
|
-
* ```ts
|
|
64
|
-
* import { useLogto } from '@logto/vue';
|
|
65
|
-
* import { useHandleSignInCallback } from '@logto/vue';
|
|
66
|
-
*
|
|
67
|
-
* export default {
|
|
68
|
-
* setup() {
|
|
69
|
-
* useHandleSignInCallback();
|
|
70
|
-
* }
|
|
71
|
-
* }
|
|
72
|
-
* ```
|
|
73
|
-
*
|
|
74
|
-
* Use this in the setup script of your Callback page to make sure the injection works
|
|
75
|
-
*/
|
|
76
|
-
export const useHandleSignInCallback: (callback?: () => void) => {
|
|
77
|
-
isLoading: Readonly<Ref<boolean>>;
|
|
78
|
-
isAuthenticated: Readonly<Ref<boolean>>;
|
|
79
|
-
error: Readonly<Ref<Error | undefined>>;
|
|
80
|
-
};
|
|
81
|
-
|
|
82
|
-
//# sourceMappingURL=index.d.ts.map
|
package/lib/module.mjs
DELETED
|
@@ -1,169 +0,0 @@
|
|
|
1
|
-
import $jwuiT$logtobrowser, {LogtoError as $a52d863b14a9eb8e$re_export$LogtoError, LogtoClientError as $a52d863b14a9eb8e$re_export$LogtoClientError, OidcError as $a52d863b14a9eb8e$re_export$OidcError, Prompt as $a52d863b14a9eb8e$re_export$Prompt, ReservedScope as $a52d863b14a9eb8e$re_export$ReservedScope, UserScope as $a52d863b14a9eb8e$re_export$UserScope} from "@logto/browser";
|
|
2
|
-
import {readonly as $jwuiT$readonly, inject as $jwuiT$inject, watchEffect as $jwuiT$watchEffect, toRefs as $jwuiT$toRefs, reactive as $jwuiT$reactive, computed as $jwuiT$computed} from "vue";
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
const $cda0d5851de767d1$export$58f3af87e7a1a85a = "@logto/vue";
|
|
7
|
-
const $cda0d5851de767d1$export$951b969b1220de04 = "@logto/vue:context";
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
const $f63beecb5f2c2ea1$export$fd42f52fd3ae1109 = (client)=>{
|
|
12
|
-
const context = (0, $jwuiT$toRefs)((0, $jwuiT$reactive)({
|
|
13
|
-
logtoClient: client,
|
|
14
|
-
isAuthenticated: false,
|
|
15
|
-
loadingCount: 1,
|
|
16
|
-
error: undefined
|
|
17
|
-
}));
|
|
18
|
-
const { isAuthenticated: isAuthenticated , loadingCount: loadingCount , error: error } = context;
|
|
19
|
-
const isLoading = (0, $jwuiT$computed)(()=>loadingCount.value > 0);
|
|
20
|
-
/* eslint-disable @silverhand/fp/no-mutation */ const setError = (_error, fallbackErrorMessage)=>{
|
|
21
|
-
if (_error instanceof Error) error.value = _error;
|
|
22
|
-
else if (fallbackErrorMessage) error.value = new Error(fallbackErrorMessage);
|
|
23
|
-
console.error(error);
|
|
24
|
-
};
|
|
25
|
-
const setLoading = (isLoading)=>{
|
|
26
|
-
if (isLoading) loadingCount.value += 1;
|
|
27
|
-
else loadingCount.value = Math.max(0, loadingCount.value - 1);
|
|
28
|
-
};
|
|
29
|
-
const setIsAuthenticated = (_isAuthenticated)=>{
|
|
30
|
-
isAuthenticated.value = _isAuthenticated;
|
|
31
|
-
};
|
|
32
|
-
/* eslint-enable @silverhand/fp/no-mutation */ (async ()=>{
|
|
33
|
-
const isAuthenticated = await client.isAuthenticated();
|
|
34
|
-
setIsAuthenticated(isAuthenticated);
|
|
35
|
-
setLoading(false);
|
|
36
|
-
})();
|
|
37
|
-
return {
|
|
38
|
-
...context,
|
|
39
|
-
isLoading: isLoading,
|
|
40
|
-
setError: setError,
|
|
41
|
-
setLoading: setLoading,
|
|
42
|
-
setIsAuthenticated: setIsAuthenticated
|
|
43
|
-
};
|
|
44
|
-
};
|
|
45
|
-
const $f63beecb5f2c2ea1$export$838ead842aa548e7 = ()=>{
|
|
46
|
-
throw new Error("Must install Logto plugin first.");
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
const $eec30d751f04969b$export$6ad57c8ed6bec4 = (context)=>{
|
|
52
|
-
const { logtoClient: logtoClient , setLoading: setLoading , setError: setError , setIsAuthenticated: setIsAuthenticated } = context;
|
|
53
|
-
const signIn = async (redirectUri, interactionMode)=>{
|
|
54
|
-
if (!logtoClient.value) return (0, $f63beecb5f2c2ea1$export$838ead842aa548e7)();
|
|
55
|
-
try {
|
|
56
|
-
setLoading(true);
|
|
57
|
-
await logtoClient.value.signIn(redirectUri, interactionMode);
|
|
58
|
-
} catch (error) {
|
|
59
|
-
setError(error, "Unexpected error occurred while signing in.");
|
|
60
|
-
}
|
|
61
|
-
};
|
|
62
|
-
const signOut = async (postLogoutRedirectUri)=>{
|
|
63
|
-
if (!logtoClient.value) return (0, $f63beecb5f2c2ea1$export$838ead842aa548e7)();
|
|
64
|
-
try {
|
|
65
|
-
setLoading(true);
|
|
66
|
-
await logtoClient.value.signOut(postLogoutRedirectUri);
|
|
67
|
-
// We deliberately do NOT set isAuthenticated to false here, because the app state may change immediately
|
|
68
|
-
// even before navigating to the oidc end session endpoint, which might cause rendering problems.
|
|
69
|
-
// Moreover, since the location will be redirected, the isAuthenticated state will not matter any more.
|
|
70
|
-
} catch (error) {
|
|
71
|
-
setError(error, "Unexpected error occurred while signing out.");
|
|
72
|
-
} finally{
|
|
73
|
-
setLoading(false);
|
|
74
|
-
}
|
|
75
|
-
};
|
|
76
|
-
const fetchUserInfo = async ()=>{
|
|
77
|
-
if (!logtoClient.value) return (0, $f63beecb5f2c2ea1$export$838ead842aa548e7)();
|
|
78
|
-
try {
|
|
79
|
-
setLoading(true);
|
|
80
|
-
return await logtoClient.value.fetchUserInfo();
|
|
81
|
-
} catch (error) {
|
|
82
|
-
setError(error, "Unexpected error occurred while fetching user info.");
|
|
83
|
-
} finally{
|
|
84
|
-
setLoading(false);
|
|
85
|
-
}
|
|
86
|
-
};
|
|
87
|
-
const getAccessToken = async (resource)=>{
|
|
88
|
-
if (!logtoClient.value) return (0, $f63beecb5f2c2ea1$export$838ead842aa548e7)();
|
|
89
|
-
try {
|
|
90
|
-
setLoading(true);
|
|
91
|
-
return await logtoClient.value.getAccessToken(resource);
|
|
92
|
-
} catch (error) {
|
|
93
|
-
setError(error, "Unexpected error occurred while getting access token.");
|
|
94
|
-
} finally{
|
|
95
|
-
setLoading(false);
|
|
96
|
-
}
|
|
97
|
-
};
|
|
98
|
-
const getIdTokenClaims = async ()=>{
|
|
99
|
-
if (!logtoClient.value) return (0, $f63beecb5f2c2ea1$export$838ead842aa548e7)();
|
|
100
|
-
try {
|
|
101
|
-
return await logtoClient.value.getIdTokenClaims();
|
|
102
|
-
} catch (error) {
|
|
103
|
-
setError(error, "Unexpected error occurred while getting id token claims.");
|
|
104
|
-
}
|
|
105
|
-
};
|
|
106
|
-
const handleSignInCallback = async (callbackUri, callbackFunction)=>{
|
|
107
|
-
if (!logtoClient.value) return (0, $f63beecb5f2c2ea1$export$838ead842aa548e7)();
|
|
108
|
-
try {
|
|
109
|
-
setLoading(true);
|
|
110
|
-
await logtoClient.value.handleSignInCallback(callbackUri);
|
|
111
|
-
setIsAuthenticated(true);
|
|
112
|
-
callbackFunction?.();
|
|
113
|
-
} catch (error) {
|
|
114
|
-
setError(error, "Unexpected error occurred while handling sign in callback.");
|
|
115
|
-
} finally{
|
|
116
|
-
setLoading(false);
|
|
117
|
-
}
|
|
118
|
-
};
|
|
119
|
-
return {
|
|
120
|
-
signIn: signIn,
|
|
121
|
-
signOut: signOut,
|
|
122
|
-
fetchUserInfo: fetchUserInfo,
|
|
123
|
-
getAccessToken: getAccessToken,
|
|
124
|
-
getIdTokenClaims: getIdTokenClaims,
|
|
125
|
-
handleSignInCallback: handleSignInCallback
|
|
126
|
-
};
|
|
127
|
-
};
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
const $a52d863b14a9eb8e$export$d8f887f9089028d2 = {
|
|
132
|
-
install (app, config) {
|
|
133
|
-
const client = new (0, $jwuiT$logtobrowser)(config);
|
|
134
|
-
const context = (0, $f63beecb5f2c2ea1$export$fd42f52fd3ae1109)(client);
|
|
135
|
-
const pluginMethods = (0, $eec30d751f04969b$export$6ad57c8ed6bec4)(context);
|
|
136
|
-
const { isAuthenticated: isAuthenticated , isLoading: isLoading , error: error } = context;
|
|
137
|
-
app.provide((0, $cda0d5851de767d1$export$951b969b1220de04), context);
|
|
138
|
-
app.provide((0, $cda0d5851de767d1$export$58f3af87e7a1a85a), {
|
|
139
|
-
isAuthenticated: (0, $jwuiT$readonly)(isAuthenticated),
|
|
140
|
-
isLoading: (0, $jwuiT$readonly)(isLoading),
|
|
141
|
-
error: (0, $jwuiT$readonly)(error),
|
|
142
|
-
...pluginMethods
|
|
143
|
-
});
|
|
144
|
-
}
|
|
145
|
-
};
|
|
146
|
-
const $a52d863b14a9eb8e$export$44fc9df4d2a1789a = ()=>{
|
|
147
|
-
const logto = (0, $jwuiT$inject)((0, $cda0d5851de767d1$export$58f3af87e7a1a85a));
|
|
148
|
-
if (!logto) return (0, $f63beecb5f2c2ea1$export$838ead842aa548e7)();
|
|
149
|
-
return logto;
|
|
150
|
-
};
|
|
151
|
-
const $a52d863b14a9eb8e$export$84e88c4b3c082374 = (callback)=>{
|
|
152
|
-
const context = (0, $jwuiT$inject)((0, $cda0d5851de767d1$export$951b969b1220de04));
|
|
153
|
-
if (!context) return (0, $f63beecb5f2c2ea1$export$838ead842aa548e7)();
|
|
154
|
-
const { isAuthenticated: isAuthenticated , isLoading: isLoading , logtoClient: logtoClient , error: error } = context;
|
|
155
|
-
const { handleSignInCallback: handleSignInCallback } = (0, $eec30d751f04969b$export$6ad57c8ed6bec4)(context);
|
|
156
|
-
(0, $jwuiT$watchEffect)(()=>{
|
|
157
|
-
const currentPageUrl = window.location.href;
|
|
158
|
-
if (!isAuthenticated.value && logtoClient.value?.isSignInRedirected(currentPageUrl)) handleSignInCallback(currentPageUrl, callback);
|
|
159
|
-
});
|
|
160
|
-
return {
|
|
161
|
-
isLoading: (0, $jwuiT$readonly)(isLoading),
|
|
162
|
-
isAuthenticated: (0, $jwuiT$readonly)(isAuthenticated),
|
|
163
|
-
error: (0, $jwuiT$readonly)(error)
|
|
164
|
-
};
|
|
165
|
-
};
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
export {$a52d863b14a9eb8e$export$d8f887f9089028d2 as createLogto, $a52d863b14a9eb8e$export$44fc9df4d2a1789a as useLogto, $a52d863b14a9eb8e$export$84e88c4b3c082374 as useHandleSignInCallback, $a52d863b14a9eb8e$re_export$LogtoError as LogtoError, $a52d863b14a9eb8e$re_export$LogtoClientError as LogtoClientError, $a52d863b14a9eb8e$re_export$OidcError as OidcError, $a52d863b14a9eb8e$re_export$Prompt as Prompt, $a52d863b14a9eb8e$re_export$ReservedScope as ReservedScope, $a52d863b14a9eb8e$re_export$UserScope as UserScope};
|
|
169
|
-
//# sourceMappingURL=module.mjs.map
|
package/lib/module.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/vue/src/index.ts","packages/vue/src/consts.ts","packages/vue/src/context.ts","packages/vue/src/plugin.ts"],"sourcesContent":["import type { IdTokenClaims, LogtoConfig, UserInfoResponse } from '@logto/browser';\nimport LogtoClient from '@logto/browser';\nimport type { App, Ref } from 'vue';\nimport { inject, readonly, watchEffect } from 'vue';\n\nimport { logtoInjectionKey, contextInjectionKey } from './consts';\nimport type { Context } from './context';\nimport { createContext, throwContextError } from './context';\nimport { createPluginMethods } from './plugin';\n\nexport type {\n LogtoConfig,\n IdTokenClaims,\n UserInfoResponse,\n LogtoErrorCode,\n LogtoClientErrorCode,\n InteractionMode,\n} from '@logto/browser';\n\nexport {\n LogtoError,\n LogtoClientError,\n OidcError,\n Prompt,\n ReservedScope,\n UserScope,\n} from '@logto/browser';\n\ntype LogtoVuePlugin = {\n install: (app: App, config: LogtoConfig) => void;\n};\n\ntype Logto = {\n isAuthenticated: Readonly<Ref<boolean>>;\n isLoading: Readonly<Ref<boolean>>;\n error: Readonly<Ref<Error | undefined>>;\n fetchUserInfo: () => Promise<UserInfoResponse | undefined>;\n getAccessToken: (resource?: string) => Promise<string | undefined>;\n getIdTokenClaims: () => Promise<IdTokenClaims | undefined>;\n signIn: (redirectUri: string) => Promise<void>;\n signOut: (postLogoutRedirectUri?: string) => Promise<void>;\n};\n\n/**\n * Creates the Logto Vue plugin\n *\n * ```ts\n * import { createApp } from 'vue';\n * import { createLogto } from '@logto/vue';\n *\n * const app = createApp(App);\n * const app.use(createLogto, {\n * appId: '<your-app-id>',\n * endpoint: '<your-oidc-endpoint-domain>',\n * });\n *\n * app.mount('#app');\n * ```\n *\n * Use this in your Vue root component to register the plugin\n */\nexport const createLogto: LogtoVuePlugin = {\n install(app: App, config: LogtoConfig) {\n const client = new LogtoClient(config);\n const context = createContext(client);\n const pluginMethods = createPluginMethods(context);\n const { isAuthenticated, isLoading, error } = context;\n\n app.provide<Context>(contextInjectionKey, context);\n app.provide<Logto>(logtoInjectionKey, {\n isAuthenticated: readonly(isAuthenticated),\n isLoading: readonly(isLoading),\n error: readonly(error),\n ...pluginMethods,\n });\n },\n};\n\n/**\n * A Vue composable method that provides the Logto reactive refs and auth methods.\n *\n * ```ts\n * import { useLogto } from '@logto/vue';\n *\n * export default {\n * setup() {\n * const { isAuthenticated, signIn } = useLogto();\n *\n * return {\n * isAuthenticated,\n * onClickSignIn: () => {\n * signIn('<your-redirect-uri>');\n * },\n * }\n * }\n * }\n * ```\n *\n * Use this composable in the setup script of your Vue component to make sure the injection works\n */\nexport const useLogto = (): Logto => {\n const logto = inject<Logto>(logtoInjectionKey);\n\n if (!logto) {\n return throwContextError();\n }\n\n return logto;\n};\n\n/**\n * A Vue composable method that watches browser navigation and automatically handles the sign-in callback\n *\n * ```ts\n * import { useLogto } from '@logto/vue';\n * import { useHandleSignInCallback } from '@logto/vue';\n *\n * export default {\n * setup() {\n * useHandleSignInCallback();\n * }\n * }\n * ```\n *\n * Use this in the setup script of your Callback page to make sure the injection works\n */\nexport const useHandleSignInCallback = (callback?: () => void) => {\n const context = inject<Context>(contextInjectionKey);\n\n if (!context) {\n return throwContextError();\n }\n\n const { isAuthenticated, isLoading, logtoClient, error } = context;\n const { handleSignInCallback } = createPluginMethods(context);\n\n watchEffect(() => {\n const currentPageUrl = window.location.href;\n\n if (!isAuthenticated.value && logtoClient.value?.isSignInRedirected(currentPageUrl)) {\n void handleSignInCallback(currentPageUrl, callback);\n }\n });\n\n return {\n isLoading: readonly(isLoading),\n isAuthenticated: readonly(isAuthenticated),\n error: readonly(error),\n };\n};\n","export const logtoInjectionKey = '@logto/vue';\nexport const contextInjectionKey = '@logto/vue:context';\n","import type LogtoClient from '@logto/browser';\nimport type { ComputedRef, Ref, UnwrapRef } from 'vue';\nimport { computed, reactive, toRefs } from 'vue';\n\ntype LogtoContextProperties = {\n logtoClient: LogtoClient | undefined;\n isAuthenticated: boolean;\n loadingCount: number;\n error: Error | undefined;\n};\n\nexport type Context = {\n // Wrong type workaround. https://github.com/vuejs/core/issues/2981\n logtoClient: Ref<UnwrapRef<LogtoClient | undefined>>;\n isAuthenticated: Ref<boolean>;\n loadingCount: Ref<number>;\n error: Ref<Error | undefined>;\n isLoading: ComputedRef<boolean>;\n setError: (error: unknown, fallbackErrorMessage?: string | undefined) => void;\n setIsAuthenticated: (isAuthenticated: boolean) => void;\n setLoading: (isLoading: boolean) => void;\n};\n\nexport const createContext = (client: LogtoClient): Context => {\n const context = toRefs(\n reactive<LogtoContextProperties>({\n logtoClient: client,\n isAuthenticated: false,\n loadingCount: 1,\n error: undefined,\n })\n );\n\n const { isAuthenticated, loadingCount, error } = context;\n\n const isLoading = computed(() => loadingCount.value > 0);\n\n /* eslint-disable @silverhand/fp/no-mutation */\n const setError = (_error: unknown, fallbackErrorMessage?: string) => {\n if (_error instanceof Error) {\n error.value = _error;\n } else if (fallbackErrorMessage) {\n error.value = new Error(fallbackErrorMessage);\n }\n console.error(error);\n };\n\n const setLoading = (isLoading: boolean) => {\n if (isLoading) {\n loadingCount.value += 1;\n } else {\n loadingCount.value = Math.max(0, loadingCount.value - 1);\n }\n };\n\n const setIsAuthenticated = (_isAuthenticated: boolean) => {\n isAuthenticated.value = _isAuthenticated;\n };\n /* eslint-enable @silverhand/fp/no-mutation */\n\n (async () => {\n const isAuthenticated = await client.isAuthenticated();\n\n setIsAuthenticated(isAuthenticated);\n setLoading(false);\n })();\n\n return { ...context, isLoading, setError, setLoading, setIsAuthenticated };\n};\n\nexport const throwContextError = (): never => {\n throw new Error('Must install Logto plugin first.');\n};\n","import type { InteractionMode } from '@logto/browser';\n\nimport type { Context } from './context';\nimport { throwContextError } from './context';\n\nexport const createPluginMethods = (context: Context) => {\n const { logtoClient, setLoading, setError, setIsAuthenticated } = context;\n\n const signIn = async (redirectUri: string, interactionMode?: InteractionMode) => {\n if (!logtoClient.value) {\n return throwContextError();\n }\n\n try {\n setLoading(true);\n\n await logtoClient.value.signIn(redirectUri, interactionMode);\n } catch (error: unknown) {\n setError(error, 'Unexpected error occurred while signing in.');\n }\n };\n\n const signOut = async (postLogoutRedirectUri?: string) => {\n if (!logtoClient.value) {\n return throwContextError();\n }\n\n try {\n setLoading(true);\n\n await logtoClient.value.signOut(postLogoutRedirectUri);\n\n // We deliberately do NOT set isAuthenticated to false here, because the app state may change immediately\n // even before navigating to the oidc end session endpoint, which might cause rendering problems.\n // Moreover, since the location will be redirected, the isAuthenticated state will not matter any more.\n } catch (error: unknown) {\n setError(error, 'Unexpected error occurred while signing out.');\n } finally {\n setLoading(false);\n }\n };\n\n const fetchUserInfo = async () => {\n if (!logtoClient.value) {\n return throwContextError();\n }\n\n try {\n setLoading(true);\n\n return await logtoClient.value.fetchUserInfo();\n } catch (error: unknown) {\n setError(error, 'Unexpected error occurred while fetching user info.');\n } finally {\n setLoading(false);\n }\n };\n\n const getAccessToken = async (resource?: string) => {\n if (!logtoClient.value) {\n return throwContextError();\n }\n\n try {\n setLoading(true);\n\n return await logtoClient.value.getAccessToken(resource);\n } catch (error: unknown) {\n setError(error, 'Unexpected error occurred while getting access token.');\n } finally {\n setLoading(false);\n }\n };\n\n const getIdTokenClaims = async () => {\n if (!logtoClient.value) {\n return throwContextError();\n }\n\n try {\n return await logtoClient.value.getIdTokenClaims();\n } catch (error: unknown) {\n setError(error, 'Unexpected error occurred while getting id token claims.');\n }\n };\n\n const handleSignInCallback = async (callbackUri: string, callbackFunction?: () => void) => {\n if (!logtoClient.value) {\n return throwContextError();\n }\n\n try {\n setLoading(true);\n await logtoClient.value.handleSignInCallback(callbackUri);\n setIsAuthenticated(true);\n callbackFunction?.();\n } catch (error: unknown) {\n setError(error, 'Unexpected error occurred while handling sign in callback.');\n } finally {\n setLoading(false);\n }\n };\n\n return {\n signIn,\n signOut,\n fetchUserInfo,\n getAccessToken,\n getIdTokenClaims,\n handleSignInCallback,\n };\n};\n"],"names":[],"version":3,"file":"module.mjs.map"}
|