Merge pull request #4854 from sagara-gunathunga/master

Fixing a couple of issues in React QSGs and CGs

.gitignore

@@ -27,3 +27,4 @@ en/asgardeo/site
 
 # Python virtula environment
 .venv
+en/asgardeo/__pycache__/

en/asgardeo/docs/complete-guides/react/add-login-and-logout.md

@@ -71,8 +71,9 @@ If the login is successful, you should be able to see the application as shown b
     **PKCE (Proof Key for Code Exchange)**  is an addition to the OAuth2 specification to make the authorization code more immune to replay attacks. It is enabled by default for public clients such as our single page React application. 
 
     If you want to disable PKCE for some reason, you can do so via following the steps below. **However, disabling PKCE for public clients such as our single page React app is highly discouraged.**  
-    - Log in to the {{product_name}} console and select the application you created.
-    - Switch to the Protocol tab.
-    - Uncheck the Mandatory checkbox under PKCE section.
+
+    1. Log in to the {{product_name}} console and select the application you created.
+    2. Switch to the Protocol tab.
+    3. Uncheck the Mandatory checkbox under PKCE section.
 
 In this section, we have added login and logout features to our React app. In the next step, we will look into how to access the user attributes of the logged in user.

en/asgardeo/docs/complete-guides/react/display-logged-in-user-details.md

@@ -18,7 +18,7 @@ const App = () => {
       {
         state.isAuthenticated
           ? <>
-            <p>Welocme {state.username}</p>
+            <p>Welcome {state.username}</p>
             <button onClick={() => signOut()}>Logout</button>
           </>
           : <button onClick={() => signIn()}>Login</button>

en/asgardeo/docs/complete-guides/react/install-asgardeo-sdk.md

@@ -8,7 +8,7 @@ read_time: 2 min
 
 The Asgardeo React SDK is a production-ready SDK that simplifies integrating {{product_name}} as an Identity Provider in your React applications. It provides essential features like user authentication, retrieving user information, and an HTTP client for sending network requests with attached tokens. Additionally, it ensures best practices by being Secure by Design and Secure by Default.
 
-!!! tip "Tip"
+!!! Info
 
     Asgardeo React SDK has been developed on open standards such as OAuth2, OpenID Connect etc, therefore you can use the Asgardeo React SDK for adding authentication to your application with any other OpenID Connect  identity provider such as [WSO2 Identity Server (WSO2 IS)](https://wso2.com/identity-server/){:target="_blank"}  and WSO2 [Private Identity Cloud (WSO2 PIC)](https://wso2.com/private-identity-cloud/){:target="_blank"} .
 
@@ -60,7 +60,7 @@ As shown above, we used `<AuthProvider />` at the root level of the application
 | baseUrl               | The base URL of the Identity Provider API. This depends on the identity provider you are using. For {{product_name}}, this can be obtained from your application settings in the {{product_name}} console. | `https://www.asgardeo.io/t/<org_name>` |
 | scope                 | Specifies the required application scopes as a list. In this guide, we need access to user details, so we will request the 'profile' scope. | `[ "profile" ]`                  |
 
-!!! note "Note"
+!!! Info
 
     If you’re familiar with OAuth2 or OIDC, you might notice that there’s no client secret involved here. This is because, according to the OAuth2 specification, our React app is classified as a public client. Since it runs on user devices and cannot securely store credentials, the Identity Provider (IdP) should not authenticate public clients before issuing access tokens. The {{product_name}} SDK addresses this by implementing the PKCE (Proof Key for Code Exchange) extension, which helps mitigate the security risks associated with public clients
 

en/asgardeo/docs/complete-guides/react/introduction.md

@@ -26,4 +26,18 @@ In this guide, you will:
 
 !!! tip "Tip"
 
-    If you want to quickly build a React app and user login, try the [React Quick Start guide.](https://wso2.com/asgardeo/docs/quick-starts/react/){:target="_blank"} It takes around 15 minutes.
+    This guide takes approximately 60 minutes to complete and covers everything required to add user login and secure your React apps. If you’re looking for a shorter guide, try the [React Quick Start guide](https://is.docs.wso2.com/en/latest/quick-starts/react/){:target="_blank"}, which takes around 15 minutes to complete.
+
+
+!!! tip "Tip"
+
+    If you are already familiar with the concepts discussed in the guide, you can use the Asgardeo React template to bootstrap your application by running the following command.  
+
+    ```bash
+
+    npx tmplr --dir my-vite-react-app asgardeo/asgardeo-vite-react-template
+
+    ```
+    The Asgardeo React template generates a ready-made React sample app with pre-configured login and logout capabilities, helping you kick-start your project in just 2 minutes. 
+
+    All you need is a `client_id`, which you can obtain by registering a **Single Page Application** in {{product_name}}.

en/asgardeo/docs/complete-guides/react/next-steps.md

@@ -3,10 +3,25 @@ template: templates/complete-guide.html
 heading: Next Steps
 read_time: 1 min
 ---
-
 This guide you just have completed, covered the adding user login for React apps by integrating with an Identity Provider (IdP) and additional use cases such making calls to an OAuth2-protected API. 
 
-Now that you are familiar with the basics of adding user logins to your React app, you can use the [Asgardeo Vite React Template](https://github.com/asgardeo/asgardeo-vite-react-template){:target="_blank"} to generate a working sample without needing to write code from scratch. After creating an application in the Asgardeo console and copying the necessary parameters, run the following command to create your working sample. 
+!!! tip "Tip"
+
+    As you are now familiar with the concepts discussed in the guide, you can use the Asgardeo React template to bootstrap your application by running the following command.  
+
+    ```bash
+
+    npx tmplr --dir my-vite-react-app asgardeo/asgardeo-vite-react-template
+
+    ```
+    The Asgardeo React template generates a ready-made React sample app with pre-configured login and logout capabilities, helping you kick-start your project in just 2 minutes. 
+
+    All you need is a `client_id`, which you can obtain by registering a **Single Page Application** in {{product_name}}.
+
+
+
+
+<!-- Now that you are familiar with the basics of adding user logins to your React app, you can use the [Asgardeo Vite React Template](https://github.com/asgardeo/asgardeo-vite-react-template){:target="_blank"} to generate a working sample without needing to write code from scratch. After creating an application in the Asgardeo console and copying the necessary parameters, run the following command to create your working sample. 
 
 ```bash
 
@@ -30,7 +45,7 @@ npm install
 
 npm run dev
 
-```
+``` -->
 
 Now that your React application is secured with authentication features integrated, It is time to explore the additional features {{product_name}} offers to make the login flow more diverse and secure.
 

en/asgardeo/docs/complete-guides/react/register-an-application.md

@@ -14,14 +14,14 @@ First unless you already have done that, you need to create an organization in {
 
 Next, complete the wizard popup by providing a suitable name and an authorized redirect URL.
 
-*Example:*
-
-* *name: is-react*
-* *Authorized redirect URL: http://localhost:5173*
+!!! Example
+    name: is-react
+    
+    Authorized redirect URL: http://localhost:5173*
 
 ![Register a new application]({{base_path}}/complete-guides/react/assets/img/image8.png){: width="600" style="display: block; margin: 0;"}
 
-!!! note "Note"
+!!! Info
 
     The authorized redirect URL determines where {{product_name}} should send users after they successfully log in. Typically, this will be the web address where your app is hosted. For this guide, we'll use [http://localhost:5173](http://localhost:5173){:target="_blank"}, as the sample app will be accessible at this URL.
 

en/asgardeo/docs/quick-starts/react.md

@@ -13,10 +13,10 @@ prerequisites:
   - Install a JS package manager
   - A favorite text editor or IDE
 source_code: <a href="https://github.com/asgardeo/asgardeo-auth-react-sdk/tree/main/samples/asgardeo-react-app" target="_blank" class="github-icon">React Vite App Sample</a>
-whats_next:
-  - Try out Asgardeo complete React guide
-  - Try out Asgardeo user onboarding complete guide for React
-  - Read Asgardeo security best practices for React app guide
+# whats_next:
+#   - Try out {{product_name}} [complete React guide](https://wso2.com/asgardeo/docs/complete-guides/react/introduction/){:target="_blank"} 
+#   - Try out {{product_name}}  user onboarding complete guide for React
+#   - Read security best practices for React app guide
 ---
 ## Configure an Application in Asgardeo
 
@@ -26,15 +26,15 @@ whats_next:
   - Name -  Asgardeo-React
   - Authorized redirect URL - `http://localhost:5173`
 
-!!! abstract
+!!! Info
 
     The authorized redirect URL determines where Asgardeo should send users after they successfully log in. Typically, this will be the web address where your app is hosted. For this guide, we'll use`http://localhost:5173`, as the sample app will be accessible at this URL.
 
 !!! note
 
-    Note down the following values : you will need them during the**Step 4**
+    Note down the following values : you will need them during the **Step 4**
 
-    -`client-id`
+    - `client-id`
     - `base-url`
     - `redirect-url`
 
@@ -80,31 +80,37 @@ Create (a.k.a scaffold) your new React app using Vite.
 
 ## Install @asgardeo/auth-react
 
-Asgardeo React SDK provides all the components and hooks you need to integrate Asgardeo into your app. To get started, simply add the Asgardeo React SDK to the project.
+Asgardeo React SDK provides all the components and hooks you need to integrate Asgardeo into your app. To get started, simply add the Asgardeo React SDK to the project. Make sure to stop the dev server started in the previous step. 
 
 === "npm"
 
-    ``bash     npm install @asgardeo/auth-react     ``
+    ``` bash
+    npm install @asgardeo/auth-react
+    ```
 
 === "yarn"
 
-    ``bash     yarn add @asgardeo/auth-react     ``
+    ``` bash
+    yarn add @asgardeo/auth-react
+    ```
 
 === "pnpm"
 
-    ``bash     pnpm add @asgardeo/auth-react     ``
+    ``` bash
+    pnpm add @asgardeo/auth-react
+    ```
 
 ## Add `<AuthProvider />` to your app
 
 The `<AuthProvider />` serves as a context provider for user login in the app. You can add the AuthProvider to your app by wrapping  the root component.
 
 Add the following changes to the `main.jsx` file.
 
-!!! note
+!!! Important
 
     Replace below placeholders with your registered organization name in Asgardeo and the generated`client-id` from the app you registered in Asgardeo.
 
-    -`<your-app-client-id>`
+    - `<your-app-client-id>`
     - `https://api.asgardeo.io/t/<your-organization-name>`
 
 ```javascript
@@ -161,9 +167,9 @@ export default App;
 
 Visit your app's homepage at [http://localhost:5173](http://localhost:5173).
 
-!!! tip
+!!! Important
 
-    You need to create a test user in Asgardeo by following this guide  to tryout login and logout features.
+    You need to create a test user in Asgardeo by following this [guide](https://is.docs.wso2.com/en/latest/guides/users/manage-users/#onboard-single-user){:target="_blank"} to tryout login and logout features.
 
 ## Display logged in user details
 
@@ -180,7 +186,7 @@ return (
     {
         state.isAuthenticated ?
         <>
-            <p>Welocme {state.username}</p>
+            <p>Welcome {state.username}</p>
             <button onClick={() => signOut()}>Logout</button>
         </>
         : <button onClick={() => signIn()}>Login</button>

en/identity-server/7.0.0/docs/complete-guides/react/accessing-protected-api.md

@@ -1,7 +1,7 @@
 ---
 template: templates/complete-guide.html
 heading: Accessing protected API from your React app
-read_time: 2 min
+read_time: 5 min
 ---
 
 In this section, we will focus on how to call a secure API from your React app using the other token—the access token.

en/identity-server/7.0.0/docs/complete-guides/react/add-login-and-logout.md

@@ -1,7 +1,7 @@
 ---
 template: templates/complete-guide.html
 heading: Add login and logout to your app
-read_time: 2 min
+read_time: 5 min
 ---
 
 Next, let’s implement login and logout for our React app. React hooks are a special type of functions that let you access state and other React features in React functional components. Asgardeo provides one such hook, `useAuthContext()`, to conveniently access user authentication data such as the logged in user’s information, etc and utility functions, such as a function to validate user’s authentication status, and retrieve access tokens.
@@ -71,8 +71,9 @@ If the login is successful, you should be able to see the application as shown b
     **PKCE (Proof Key for Code Exchange)**  is an addition to the OAuth2 specification to make the authorization code more immune to replay attacks. It is enabled by default for public clients such as our single page React application. 
 
     If you want to disable PKCE for some reason, you can do so via following the steps below. **However, disabling PKCE for public clients such as our single page React app is highly discouraged.**  
-    - Log in to the {{product_name}} console and select the application you created.
-    - Switch to the Protocol tab.
-    - Uncheck the Mandatory checkbox under PKCE section.
+
+     1. Log in to the {{product_name}} console and select the application you created.
+     2. Switch to the Protocol tab.
+     3. Uncheck the Mandatory checkbox under PKCE section.
 
 In this section, we have added login and logout features to our React app. In the next step, we will look into how to access the user attributes of the logged in user.

en/identity-server/7.0.0/docs/complete-guides/react/create-a-react-app.md

@@ -1,7 +1,7 @@
 ---
 template: templates/complete-guide.html
 heading: Create a React app
-read_time: 2 min
+read_time: 5 min
 ---
 
 For this guide, you will be creating a simple React app using [Vite](https://vitejs.dev/){:target="_blank"}, a modern, fast and lightweight tool that helps you quickly set up and develop modern JavaScript apps. 

en/identity-server/7.0.0/docs/complete-guides/react/display-logged-in-user-details.md

@@ -1,7 +1,7 @@
 ---
 template: templates/complete-guide.html
 heading: Display logged-in user details
-read_time: 2 min
+read_time: 5 min
 ---
 
 At this point, we’ve successfully implemented login and logout capabilities using the Asgardeo React SDK. The next step is to explore how to access and display logged-in user details within the app. The Asgardeo React SDK loads the basic user attribute details to the authentication state, so that you can directly access those from the state (such as `state.username`) and use them in the application. First, let’s try to display the username using state.username.Replace the code in app.jsx with the following.
@@ -62,7 +62,7 @@ const App = () => {
       {
         state.isAuthenticated
           ? <>
-            <p>Welcome, {userInfo?.username}</p>
+            <p>Welcome {userInfo?.username}</p>
             <button onClick={() => signOut()}>Logout</button>
           </>
           : <button onClick={() => signIn()}>Login</button>

en/identity-server/7.0.0/docs/complete-guides/react/install-asgardeo-sdk.md

@@ -1,19 +1,19 @@
 ---
 template: templates/complete-guide.html
 heading: Install and configure Asgardeo SDK
-read_time: 2 min
+read_time: 5 min
 ---
 
 ## Install @asgardeo/auth-react
 
 The Asgardeo React SDK is a production-ready SDK that simplifies integrating {{product_name}} as an Identity Provider in your React applications. It provides essential features like user authentication, retrieving user information, and an HTTP client for sending network requests with attached tokens. Additionally, it ensures best practices by being Secure by Design and Secure by Default.
 
 
-!!! note
+!!! Info
 
     Asgardeo-branded SDKs can be used to build apps to work with the all [WSO2 identity suite](https://wso2.com/identity-and-access-management/){:target="_blank"} of products that includes [WSO2 Identity Server (WSO2 IS)](https://wso2.com/identity-server/){:target="_blank"}, [WSO2 Private Identity Cloud (WSO2 PIC)](https://wso2.com/private-identity-cloud/){:target="_blank"} and [Asgardeo](https://wso2.com/asgardeo/){:target="_blank"}. 
 
-!!! tip "Tip"
+!!! Info
 
     Asgardeo React SDK has been developed on open standards such as OAuth2, OpenID Connect etc, therefore you can use the Asgardeo React SDK for adding authentication to your application with any other OpenID Connect  identity provider. 
 
@@ -66,7 +66,7 @@ As shown above, we used `<AuthProvider />` at the root level of the application
 | baseUrl               | The base URL of the Identity Provider API. This depends on the identity provider you are using. For {{product_name}}, this can be obtained from your application settings in the {{product_name}} console. | `https://localhost:9443` |
 | scope                 | Specifies the required application scopes as a list. In this guide, we need access to user details, so we will request the 'profile' scope. | `[ "profile" ]`                  |
 
-!!! note "Note"
+!!! Info
 
     If you’re familiar with OAuth2 or OIDC, you might notice that there’s no client secret involved here. This is because, according to the OAuth2 specification, our React app is classified as a public client. Since it runs on user devices and cannot securely store credentials, the Identity Provider (IdP) should not authenticate public clients before issuing access tokens. The Asgardeo SDK addresses this by implementing the PKCE (Proof Key for Code Exchange) extension, which helps mitigate the security risks associated with public clients
 

en/identity-server/7.0.0/docs/complete-guides/react/introduction.md

@@ -7,6 +7,10 @@ React is a widely used JavaScript library designed for creating dynamic single-p
 
 Implementing login functionality in your React app is essential for managing user access, personalizing user experiences, and securing the app. It enhances user experience, protects user data, boosts engagement, and helps ensure regulatory compliance.
 
+!!! Info
+
+    Asgardeo-branded SDKs can be used to build apps to work with the all [WSO2 identity suite](https://wso2.com/identity-and-access-management/){:target="_blank"} of products that includes [WSO2 Identity Server (WSO2 IS)](https://wso2.com/identity-server/){:target="_blank"}, WSO2 [Private Identity Cloud (WSO2 PIC)](https://wso2.com/private-identity-cloud/){:target="_blank"} and [Asgardeo](https://wso2.com/asgardeo/){:target="_blank"}. 
+
 
 ## Learning objectives 
 
@@ -26,10 +30,18 @@ In this guide, you will:
 
 !!! tip "Tip"
 
-    If you want to quickly build a React app and user login, try the [React Quick Start guide.](https://is.docs.wso2.com/en/latest/quick-starts/react/){:target="_blank"} It takes around 15 minutes.
+    This guide takes approximately 60 minutes to complete and covers everything required to add user login and secure your React apps. If you’re looking for a shorter guide, try the [React Quick Start guide](https://is.docs.wso2.com/en/latest/quick-starts/react/){:target="_blank"}, which takes around 15 minutes to complete.
 
-!!! note
 
-    Asgardeo-branded SDKs can be used to build apps to work with the all [WSO2 identity suite](https://wso2.com/identity-and-access-management/){:target="_blank"} of products that includes [WSO2 Identity Server (WSO2 IS)](https://wso2.com/identity-server/){:target="_blank"}, WSO2 [Private Identity Cloud (WSO2 PIC)](https://wso2.com/private-identity-cloud/){:target="_blank"} and [Asgardeo](https://wso2.com/asgardeo/){:target="_blank"}. 
+!!! tip "Tip"
+
+    If you are already familiar with the concepts discussed in the guide, you can use the Asgardeo React template to bootstrap your application by running the following command.  
+
+    ```bash
+
+    npx tmplr --dir my-vite-react-app asgardeo/asgardeo-vite-react-template
 
+    ```
+    The Asgardeo React template generates a ready-made React sample app with pre-configured login and logout capabilities, helping you kick-start your project in just 2 minutes. 
 
+    All you need is a `client_id`, which you can obtain by registering a **Single Page Application** in {{product_name}}.

en/identity-server/7.0.0/docs/complete-guides/react/manage-tokens-in-React-apps.md

@@ -1,7 +1,7 @@
 ---
 template: templates/complete-guide.html
 heading: Manage tokens in React apps 
-read_time: 2 min
+read_time: 5 min
 ---
 
 ## Token Validation