@asgardeo/react 0.6.13 → 0.6.15
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/README.md +4 -116
- package/dist/cjs/index.js +7 -3
- package/dist/cjs/index.js.map +2 -2
- package/dist/contexts/Asgardeo/AsgardeoContext.d.ts +1 -1
- package/dist/contexts/Organization/OrganizationProvider.d.ts +2 -2
- package/dist/index.js +7 -3
- package/dist/index.js.map +2 -2
- package/package.json +7 -7
package/README.md
CHANGED
|
@@ -8,126 +8,14 @@
|
|
|
8
8
|
<a href="./LICENSE"><img src="https://img.shields.io/badge/License-Apache%202.0-blue.svg" alt="License"></a>
|
|
9
9
|
</div>
|
|
10
10
|
|
|
11
|
-
## Installation
|
|
12
|
-
|
|
13
|
-
```bash
|
|
14
|
-
# Using npm
|
|
15
|
-
npm install @asgardeo/react
|
|
16
|
-
|
|
17
|
-
# or using pnpm
|
|
18
|
-
pnpm add @asgardeo/react
|
|
19
|
-
|
|
20
|
-
# or using yarn
|
|
21
|
-
yarn add @asgardeo/react
|
|
22
|
-
```
|
|
23
|
-
|
|
24
11
|
## Quick Start
|
|
25
12
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
```tsx
|
|
29
|
-
import { StrictMode } from 'react'
|
|
30
|
-
import { createRoot } from 'react-dom/client'
|
|
31
|
-
import './index.css'
|
|
32
|
-
import App from './App.tsx'
|
|
33
|
-
import { AsgardeoProvider } from '@asgardeo/react'
|
|
34
|
-
|
|
35
|
-
createRoot(document.getElementById('root')).render(
|
|
36
|
-
<StrictMode>
|
|
37
|
-
<AsgardeoProvider
|
|
38
|
-
baseUrl: '<your-organization-name>'
|
|
39
|
-
clientId: '<your-app-client-id>'
|
|
40
|
-
>
|
|
41
|
-
<App />
|
|
42
|
-
</AsgardeoProvider>
|
|
43
|
-
</StrictMode>
|
|
44
|
-
)
|
|
45
|
-
```
|
|
46
|
-
|
|
47
|
-
2. Add signed-in and signed-out to your app
|
|
48
|
-
|
|
49
|
-
```tsx
|
|
50
|
-
import { SignedIn, SignedOut, SignInButton, SignOutButton } from '@asgardeo/react'
|
|
51
|
-
import './App.css'
|
|
52
|
-
|
|
53
|
-
function App() {
|
|
54
|
-
return (
|
|
55
|
-
<>
|
|
56
|
-
<SignedIn>
|
|
57
|
-
<SignOutButton />
|
|
58
|
-
</SignedIn>
|
|
59
|
-
<SignedOut>
|
|
60
|
-
<SignInButton />
|
|
61
|
-
</SignedOut>
|
|
62
|
-
</>
|
|
63
|
-
)
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
export default App
|
|
67
|
-
```
|
|
68
|
-
|
|
69
|
-
3. Start using other drop-in components like `User`, `UserProfile`, etc.
|
|
70
|
-
|
|
71
|
-
```tsx
|
|
72
|
-
import { User, UserProfile } from '@asgardeo/react'
|
|
73
|
-
import './App.css'
|
|
74
|
-
|
|
75
|
-
function App() {
|
|
76
|
-
return (
|
|
77
|
-
<>
|
|
78
|
-
<User>
|
|
79
|
-
{({ user }) => (
|
|
80
|
-
<div>
|
|
81
|
-
<h1>Welcome, {user.username}</h1>
|
|
82
|
-
<UserProfile />
|
|
83
|
-
</div>
|
|
84
|
-
)}
|
|
85
|
-
</User>
|
|
86
|
-
|
|
87
|
-
<UserProfile />
|
|
88
|
-
</>
|
|
89
|
-
)
|
|
90
|
-
}
|
|
91
|
-
export default App
|
|
92
|
-
```
|
|
93
|
-
|
|
94
|
-
## Using the `useAsgardeo` Hook (For Programmatic Control)
|
|
95
|
-
|
|
96
|
-
For more granular control, you can use the useAsgardeo hook. This hook provides direct access to SDK's functions and state:
|
|
97
|
-
|
|
98
|
-
```tsx
|
|
99
|
-
import { useAsgardeo } from '@asgardeo/react'
|
|
100
|
-
import './App.css'
|
|
101
|
-
|
|
102
|
-
function App() {
|
|
103
|
-
const { user, signIn, signOut, isSignedIn, isLoading } = useAsgardeo()
|
|
104
|
-
|
|
105
|
-
if (isLoading) {
|
|
106
|
-
return <div>Loading...</div>
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
return (
|
|
110
|
-
<div>
|
|
111
|
-
{isSignedIn ? (
|
|
112
|
-
<div>
|
|
113
|
-
<div>
|
|
114
|
-
<img src={user.photourl} alt={user.username} />
|
|
115
|
-
<p>Welcome back, {user.givenname}</p>
|
|
116
|
-
</div>
|
|
117
|
-
<button onClick={() => signOut()}>Sign Out</button>
|
|
118
|
-
</div>
|
|
119
|
-
) : (
|
|
120
|
-
<button onClick={() => signIn()}>Sign In</button>
|
|
121
|
-
)}
|
|
122
|
-
</div>
|
|
123
|
-
)
|
|
124
|
-
}
|
|
125
|
-
```
|
|
13
|
+
Get started with Asgardeo in your React application in minutes. Follow our [React Quick Start Guide](https://wso2.com/asgardeo/docs/quick-starts/react/) for step-by-step instructions on integrating authentication into your app.
|
|
126
14
|
|
|
127
|
-
## Documentation
|
|
15
|
+
## API Documentation
|
|
128
16
|
|
|
129
|
-
For complete API documentation including all components, hooks, and customization options, see [
|
|
17
|
+
For complete API documentation including all components, hooks, and customization options, see the [React SDK Documentation](https://wso2.com/asgardeo/docs/sdks/react/overview).
|
|
130
18
|
|
|
131
19
|
## License
|
|
132
20
|
|
|
133
|
-
Licenses this source under the Apache License, Version 2.0 [LICENSE](
|
|
21
|
+
Licenses this source under the Apache License, Version 2.0 [LICENSE](./LICENSE), You may not use this file except in compliance with the License.
|
package/dist/cjs/index.js
CHANGED
|
@@ -187,6 +187,7 @@ var AsgardeoContext = (0, import_react.createContext)({
|
|
|
187
187
|
getAccessToken: null,
|
|
188
188
|
exchangeToken: null,
|
|
189
189
|
storage: "sessionStorage",
|
|
190
|
+
switchOrganization: null,
|
|
190
191
|
reInitialize: null,
|
|
191
192
|
platform: void 0
|
|
192
193
|
});
|
|
@@ -1865,10 +1866,11 @@ var AsgardeoProvider = ({
|
|
|
1865
1866
|
try {
|
|
1866
1867
|
setIsUpdatingSession(true);
|
|
1867
1868
|
setIsLoadingSync(true);
|
|
1868
|
-
await asgardeo.switchOrganization(organization);
|
|
1869
|
+
const response = await asgardeo.switchOrganization(organization);
|
|
1869
1870
|
if (await asgardeo.isSignedIn()) {
|
|
1870
1871
|
await updateSession();
|
|
1871
1872
|
}
|
|
1873
|
+
return response;
|
|
1872
1874
|
} catch (error) {
|
|
1873
1875
|
throw new import_browser12.AsgardeoRuntimeError(
|
|
1874
1876
|
`Failed to switch organization: ${error instanceof Error ? error.message : String(JSON.stringify(error))}`,
|
|
@@ -1917,7 +1919,8 @@ var AsgardeoProvider = ({
|
|
|
1917
1919
|
getDecodedIdToken: asgardeo.getDecodedIdToken.bind(asgardeo),
|
|
1918
1920
|
exchangeToken: asgardeo.exchangeToken.bind(asgardeo),
|
|
1919
1921
|
syncSession,
|
|
1920
|
-
platform: config?.platform
|
|
1922
|
+
platform: config?.platform,
|
|
1923
|
+
switchOrganization
|
|
1921
1924
|
}),
|
|
1922
1925
|
[
|
|
1923
1926
|
applicationId,
|
|
@@ -1935,7 +1938,8 @@ var AsgardeoProvider = ({
|
|
|
1935
1938
|
user,
|
|
1936
1939
|
asgardeo,
|
|
1937
1940
|
signInOptions,
|
|
1938
|
-
syncSession
|
|
1941
|
+
syncSession,
|
|
1942
|
+
switchOrganization
|
|
1939
1943
|
]
|
|
1940
1944
|
);
|
|
1941
1945
|
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AsgardeoContext_default.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(I18nProvider_default, { preferences: preferences?.i18n, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|