Skip to content

Commit 0092eb1

Browse files
movinsilvamovinsilva
committed
feat(docs): ✨ add components
1 parent 23b2abb commit 0092eb1

File tree

5 files changed

+249
-0
lines changed

5 files changed

+249
-0
lines changed

‎docs/src/react/components/asgardeo-provider.md‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!--
2+
* Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
3+
*
4+
* WSO2 LLC. licenses this file to you under the Apache License,
5+
* Version 2.0 (the "License"); you may not use this file except
6+
* in compliance with the License.
7+
* You may obtain a copy of the License at
8+
*
9+
* http://www.apache.org/licenses/LICENSE-2.0
10+
*
11+
* Unless required by applicable law or agreed to in writing,
12+
* software distributed under the License is distributed on an
13+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14+
* KIND, either express or implied. See the License for the
15+
* specific language governing permissions and limitations
16+
* under the License.
17+
-->
18+
19+
# AsgardeoProvider
20+
21+
The `AsgardeoProvider` is a context provider component provided by the Asgardeo React SDK. It allows you to access the authentication context throughout your application. This context includes user information, authentication state, and methods to handle authentication actions such as sign-in, sign-out, and refresh tokens.
22+
23+
## Usage
24+
25+
First, import the `AsgardeoProvider` from the Asgardeo React SDK:
26+
27+
```ts
28+
import { AsgardeoProvider } from "@asgardeo/react";
29+
30+
<AsgardeoProvider config={config}>
31+
<App />
32+
</AsgardeoProvider>
33+
```
34+
35+
- To use `AsgardeoProvider`, you need to pass a `config` prop. This prop should be an object of type `UIAuthConfig`, which contains the following properties:
36+
37+
#### Required Parameters
38+
39+
- `baseURL`: The base URL of asgardeo.
40+
41+
- `signInRedirectURL`: The URL where users should be redirected after they sign in. This should be a page in your application.
42+
43+
- `clientID`: The ID of your application. You get this when you register your application with Asgardeo.
44+
45+
- `scope`: The scope of the access request. This is a list of scopes separated by spaces. Scopes allow your application to request access only to the resources it needs, and also allow users to control how much access they grant to your application.
46+
47+
#### Optional Parameters
48+
49+
- `name`: The name of your application. This is used for application specific branding.
50+
51+
- `type`: The branding preference for your application. This should be one of the values from the `BrandingPreferenceTypes` enum: "APP", "CUSTOM", or "ORG".
52+
53+
- `enablePKCE`: A boolean indicating whether to enable Proof Key for Code Exchange (PKCE). This is a security feature that helps prevent interception attacks during the authorization process.

‎docs/src/react/components/sign-in.md‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!--
2+
* Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
3+
*
4+
* WSO2 LLC. licenses this file to you under the Apache License,
5+
* Version 2.0 (the "License"); you may not use this file except
6+
* in compliance with the License.
7+
* You may obtain a copy of the License at
8+
*
9+
* http://www.apache.org/licenses/LICENSE-2.0
10+
*
11+
* Unless required by applicable law or agreed to in writing,
12+
* software distributed under the License is distributed on an
13+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14+
* KIND, either express or implied. See the License for the
15+
* specific language governing permissions and limitations
16+
* under the License.
17+
-->
18+
19+
# SignIn
20+
21+
The `SignIn` component provides sign-in forms as configured in the login flow of Asgardeo. When the `SignIn` component renders,
22+
it initiates the sign-in process.
23+
24+
## Usage
25+
26+
First, import the `SignIn` component from the Asgardeo React SDK:
27+
28+
```ts
29+
import { SignIn } from "@asgardeo/react";
30+
31+
<SignIn />
32+
```
33+
34+
## Props
35+
36+
The `SignIn` component accepts the following props:
37+
38+
- `branding`: A string that specifies the branding preference for the sign-in form.
39+
40+
- `showLogo`: A boolean that determines whether the logo should be displayed on the sign-in form. If set to `false`, the logo will not be displayed. Defaults to `true`.
41+
42+
- `showFooter`: A boolean that determines whether the footer should be displayed on the sign-in form. If set to `false`, the footer will not be displayed. Defaults to `true`.
43+
44+
- `showSignUp`: A boolean that determines whether the signup link should be displayed on the sign-in form. If set to `true`, the signup link will be displayed. Defaults to `false`.
45+
46+
Here's an example of how to use these props:
47+
48+
```ts
49+
<SignIn
50+
branding={{preference: { .. }}}
51+
showLogo={false}
52+
showFooter={false}
53+
showSignUp={true}
54+
/>
55+
```

‎docs/src/react/components/sign-out-button.md‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!--
2+
* Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
3+
*
4+
* WSO2 LLC. licenses this file to you under the Apache License,
5+
* Version 2.0 (the "License"); you may not use this file except
6+
* in compliance with the License.
7+
* You may obtain a copy of the License at
8+
*
9+
* http://www.apache.org/licenses/LICENSE-2.0
10+
*
11+
* Unless required by applicable law or agreed to in writing,
12+
* software distributed under the License is distributed on an
13+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14+
* KIND, either express or implied. See the License for the
15+
* specific language governing permissions and limitations
16+
* under the License.
17+
-->
18+
19+
# SignOutButton
20+
21+
The `SignOutButton` component renders a sign-out button that, when clicked, initiates the sign-out process.
22+
23+
## Usage
24+
25+
First, import the `SignOutButton` component from the Asgardeo React SDK:
26+
27+
```ts
28+
import { SignOutButton } from "@asgardeo/react";
29+
```
30+
31+
Then, you can use it in your component:
32+
33+
```ts
34+
<SignOutButton />
35+
```

‎docs/src/react/components/signed-in.md‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!--
2+
* Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
3+
*
4+
* WSO2 LLC. licenses this file to you under the Apache License,
5+
* Version 2.0 (the "License"); you may not use this file except
6+
* in compliance with the License.
7+
* You may obtain a copy of the License at
8+
*
9+
* http://www.apache.org/licenses/LICENSE-2.0
10+
*
11+
* Unless required by applicable law or agreed to in writing,
12+
* software distributed under the License is distributed on an
13+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14+
* KIND, either express or implied. See the License for the
15+
* specific language governing permissions and limitations
16+
* under the License.
17+
-->
18+
19+
# SignedIn
20+
21+
The `SignedIn` is a control component that renders its children only when the user is signed in.
22+
23+
## Usage
24+
25+
First, import the `SignedIn` component from the Asgardeo React SDK:
26+
27+
```javascript
28+
import { SignedIn } from "@asgardeo/react";
29+
```
30+
31+
Then you can use it in your component:
32+
33+
```javascript
34+
<SignedIn>
35+
<p>You are signed in!</p>
36+
</SignedIn>
37+
```
38+
39+
## Props
40+
41+
The `SignedIn` component accepts the following prop:
42+
43+
- `fallback`: A React element that will be rendered if the user is not signed in. If not provided, nothing will be rendered when the user is not signed in.
44+
45+
Here's an example of how to use the `fallback` prop:
46+
47+
```javascript
48+
<SignedIn fallback={<p>Please sign in.</p>}>
49+
<p>You are signed in!</p>
50+
</SignedIn>
51+
```

‎docs/src/react/components/signed-out.md‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!--
2+
* Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
3+
*
4+
* WSO2 LLC. licenses this file to you under the Apache License,
5+
* Version 2.0 (the "License"); you may not use this file except
6+
* in compliance with the License.
7+
* You may obtain a copy of the License at
8+
*
9+
* http://www.apache.org/licenses/LICENSE-2.0
10+
*
11+
* Unless required by applicable law or agreed to in writing,
12+
* software distributed under the License is distributed on an
13+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14+
* KIND, either express or implied. See the License for the
15+
* specific language governing permissions and limitations
16+
* under the License.
17+
-->
18+
19+
# SignedOut
20+
21+
The `SignedOut` is a control component that renders its children only when the user is not signed in.
22+
23+
## Usage
24+
25+
First, import the `SignedOut` component from the Asgardeo React SDK:
26+
27+
```javascript
28+
import { SignedOut } from "@asgardeo/react";
29+
```
30+
31+
Then, you can use it in your component:
32+
33+
```javascript
34+
<SignedOut>
35+
<p>You are not signed in!</p>
36+
</SignedOut>
37+
```
38+
39+
In this example, the paragraph will only be rendered if the user is not signed in.
40+
41+
## Props
42+
43+
The `SignedOut` component accepts the following prop:
44+
45+
- `fallback`: A React element that will be rendered if the user is signed in. If not provided, nothing will be rendered when the user is signed in.
46+
47+
Here's an example of how to use the `fallback` prop:
48+
49+
```javascript
50+
<SignedOut fallback={<p>You are signed in!</p>}>
51+
<p>Please sign in.</p>
52+
</SignedOut>
53+
```
54+
55+
In this example, if the user is signed in, the message "You are signed in!" will be displayed.

0 commit comments

Comments
 (0)