feat(docs): ✨ add introduction and components overview for react package

movinsilva · movinsilva · commit 23b2abbdcfef · 2024-05-26T09:41:51.000+05:30
diff --git a/docs/src/react/components.md b/docs/src/react/components.md
@@ -0,0 +1,35 @@
+<!--
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+-->
+
+# Components Overview
+
+## UI Components
+
+- [SignIn](./components/sign-in): A component that provides sign-in forms as configured in the login flow of asgardeo.
+
+- [SignOutButton](./components/sign-out-button): A component that provides a sign-out button. When clicked, it initiates the sign-out process.
+
+## Control Components
+
+- [SignedIn](./components/signed-in): A component that renders its children only when the user is signed in.
+
+- [SignedOut](./components/signed-out.md): A component that renders its children only when the user is not signed in.
+
+## Provider Component
+
+- [AsgardeoProvider](./components/asgardeo-provider): A context provider component that provides an Asgardeo context to all its children. It takes a `UIAuthConfig` object as a prop, which includes the configuration for the Asgardeo context.
diff --git a/docs/src/react/introduction.md b/docs/src/react/introduction.md
@@ -0,0 +1,82 @@
+<!--
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+-->
+
+# Asgardeo React SDK
+
+The Asgardeo React SDK enables to integrate login natively in a react application.
+
+This SDK assists you in creating custom login flows directly within the applications themselves, without relying on browser redirects, thereby prioritizing user experience.
+
+## Getting Started
+
+### Prerequisites
+
+- [Register to Asgardeo and create an organization if you don't already have one](https://wso2.com/asgardeo/docs/get-started/create-asgardeo-account/). The organization name you choose will be referred to as `<org_name>` throughout this document.
+- [Register a standard based application in Asgardeo to integrate your application with Asgardeo](https://wso2.com/asgardeo/docs/guides/applications/register-mobile-app/). You will obtain a `client_id` from Asgardeo for your application which will need to be embedded later for the SDK integration. Also note the redirect URI that you used to create the application, this is also required for the SDK integration.
+- In the created application, go to the **Advanced** tab and [enable the application native authentication for your application](https://is.docs.wso2.com/en/latest/guides/authentication/add-application-native-login/#enable-app-native-authentication).
+- Navigate to the **Protocol** tab in the newly created application and enable the `code` option in the [Allowed Grant Types](https://is.docs.wso2.com/en/latest/references/app-settings/oidc-settings-for-app/#allowed-grant-types) section.
+  - Upon enabling, additional fields for `Authorized Redirect URLs` and `Allowed Origins` will appear. Enter your web application's URL in both of these fields.
+- In the same same **Protocol** tab, scroll down to the **Client Authentication** section. There, you will find a checkbox for `Public Client`. Enable this checkbox.
+
+### Installation
+
+To install the Asgardeo React SDK, navigate to your project directory in your terminal and run the following command:
+
+with pnpm:
+
+```bash
+pnpm install @asgardeo/react
+```
+
+With npm:
+
+```bash
+npm install @asgardeo/react
+```
+
+With yarn:
+
+```bash
+yarn add @asgardeo/react
+```
+
+### Wrapping the Application with AsgardeoProvider
+
+After installing the Asgardeo React SDK, you need to wrap your application with the AsgardeoProvider component, which is exposed from the installed package. This component provides the Asgardeo context to all the components in your application.
+
+First, import the AsgardeoProvider from the Asgardeo React SDK:
+
+```ts
+import { AsgardeoProvider } from "@asgardeo/react";
+```
+
+Then, wrap your application with the `AsgardeoProvider` and pass the basic configuration to it:
+
+```ts
+<AsgardeoProvider
+    config={{
+      baseUrl: "https://api.asgardeo.io/t/org_name",
+      clientID: "gqtroUbA1Qsulqr*****",
+      scope: ["openid", "internal_login", "profile"],
+      signInRedirectURL: "https://domain_name:8080",
+    }}>
+    <App />
+</AsgardeoProvider>
+```
+
+For more details about `AsgardeoProvider` and its properties, you can refer to the [Asgardeo Provider](/react/components/asgardeo-provider).
