From 773ae8a3bb95849fe7998a5987677c363111cf96 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Wed, 20 Nov 2024 11:14:40 +0530
Subject: [PATCH 1/6] Add Node.js as a pre-requisite

---
 en/asgardeo/docs/quick-starts/react.md              | 3 ++-
 en/identity-server/7.0.0/docs/quick-starts/react.md | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/en/asgardeo/docs/quick-starts/react.md b/en/asgardeo/docs/quick-starts/react.md
index dbb521092d..cfebf68f3f 100644
--- a/en/asgardeo/docs/quick-starts/react.md
+++ b/en/asgardeo/docs/quick-starts/react.md
@@ -10,7 +10,8 @@ what_you_will_learn:
 prerequisites:
   - About 15 minutes
   - <a href="{{ base_path }}/get-started/create-asgardeo-account/">Asgardeo account</a>
-  - Install a JS package manager
+  - Install <a href="https://nodejs.org/en/download/package-manager" target="_blank" rel="noopener noreferrer">Node.js</a> on your system.
+  - Make sure you have a JavaScript package manager like <code>npm</code>, <code>yarn</code>, or <code>pnpm</code>.
   - 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:
diff --git a/en/identity-server/7.0.0/docs/quick-starts/react.md b/en/identity-server/7.0.0/docs/quick-starts/react.md
index 0bdc5cdf45..1105fc11d3 100644
--- a/en/identity-server/7.0.0/docs/quick-starts/react.md
+++ b/en/identity-server/7.0.0/docs/quick-starts/react.md
@@ -10,7 +10,8 @@ what_you_will_learn:
 prerequisites:
   - About 15 minutes
   - <a href="{{ base_path }}/get-started/quick-set-up/">Set-up WSO2 Identity Server</a>
-  - Install a JS package manager
+  - Install <a href="https://nodejs.org/en/download/package-manager" target="_blank" rel="noopener noreferrer">Node.js</a> on your system.
+  - Make sure you have a JavaScript package manager like <code>npm</code>, <code>yarn</code>, or <code>pnpm</code>.
   - 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:

From bae5631700de15305a4ff0bc42e7f46c4323ddf6 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Wed, 20 Nov 2024 11:15:17 +0530
Subject: [PATCH 2/6] Fix typo and remove `run` from `pnpm`

---
 en/asgardeo/docs/quick-starts/react.md              | 4 ++--
 en/identity-server/7.0.0/docs/quick-starts/react.md | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/en/asgardeo/docs/quick-starts/react.md b/en/asgardeo/docs/quick-starts/react.md
index cfebf68f3f..0c4bbada00 100644
--- a/en/asgardeo/docs/quick-starts/react.md
+++ b/en/asgardeo/docs/quick-starts/react.md
@@ -62,7 +62,7 @@ Create (a.k.a scaffold) your new React app using Vite.
 
     cd asgardeo-react
 
-    yran install
+    yarn install
 
     yarn dev
     ```
@@ -76,7 +76,7 @@ Create (a.k.a scaffold) your new React app using Vite.
 
     pnpm install
 
-    pnpm run dev
+    pnpm dev
     ```
 
 ## Install @asgardeo/auth-react
diff --git a/en/identity-server/7.0.0/docs/quick-starts/react.md b/en/identity-server/7.0.0/docs/quick-starts/react.md
index 1105fc11d3..609e23d81d 100644
--- a/en/identity-server/7.0.0/docs/quick-starts/react.md
+++ b/en/identity-server/7.0.0/docs/quick-starts/react.md
@@ -62,7 +62,7 @@ Create (a.k.a scaffold) your new React app using Vite.
 
     cd is-react
 
-    yran install
+    yarn install
 
     yarn dev
     ```
@@ -76,7 +76,7 @@ Create (a.k.a scaffold) your new React app using Vite.
 
     pnpm install
 
-    pnpm run dev
+    pnpm dev
     ```
 
 ## Install @asgardeo/auth-react

From a941b5bb78bdc4f92acfbfdd20ee5d828077f0eb Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Wed, 20 Nov 2024 11:16:45 +0530
Subject: [PATCH 3/6] Update to match vite template

---
 en/asgardeo/docs/quick-starts/react.md        | 92 +++++++++----------
 .../7.0.0/docs/quick-starts/react.md          | 92 +++++++++----------
 2 files changed, 90 insertions(+), 94 deletions(-)

diff --git a/en/asgardeo/docs/quick-starts/react.md b/en/asgardeo/docs/quick-starts/react.md
index 0c4bbada00..4ee597ac62 100644
--- a/en/asgardeo/docs/quick-starts/react.md
+++ b/en/asgardeo/docs/quick-starts/react.md
@@ -115,28 +115,27 @@ Add the following changes to the `main.jsx` file.
     - `https://api.asgardeo.io/t/<your-organization-name>`
 
 ```javascript
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App.jsx';
-import { AuthProvider } from '@asgardeo/auth-react';
-import './index.css';
-
-const config = {
-    signInRedirectURL: "http://localhost:5173",
-    signOutRedirectURL: "http://localhost:5173",
-    clientID: "<your-app-client-id>",
-    baseUrl: "https://api.asgardeo.io/t/<your-organization-name>",
-    scope: [ "openid","profile" ]
-}
-
-ReactDOM.createRoot(document.getElementById('root')).render(
-    <React.StrictMode>
-        <AuthProvider config={ config }>
-            <App />
-        </AuthProvider>
-    </React.StrictMode>,
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+import { AuthProvider } from '@asgardeo/auth-react'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <AuthProvider
+      config={ {
+        signInRedirectURL: 'http://localhost:5173',
+        signOutRedirectURL: 'http://localhost:5173',
+        clientID: '<your-app-client-id>',
+        baseUrl: 'https://api.asgardeo.io/t/<your-organization-name>',
+        scope: ['openid', 'profile'],
+      } }
+    >
+      <App />
+    </AuthProvider>
+  </StrictMode>
 );
-
 ```
 
 ## Add login and logout link to your app
@@ -146,24 +145,24 @@ Asgardeo provides `useAuthContext` hook to conveniently access user authenticati
 Replace the existing content of the `App.jsx` file with following content.
 
 ```javascript
-import { useAuthContext } from "@asgardeo/auth-react";
-import './App.css';
+import { useAuthContext } from "@asgardeo/auth-react"
+import './App.css'
 
-const App = () => {
-const { state, signIn, signOut } = useAuthContext();
+function App() {
+  const { state, signIn, signOut } = useAuthContext();
 
-return (
+  return (
     <>
-        {
-            state.isAuthenticated
-            ? <button onClick={() => signOut()}>Logout</button>
-            : <button onClick={() => signIn()}>Login</button>
-        }
+      {state.isAuthenticated ? (
+        <button onClick={() => signOut()}>Logout</button>
+      ) : (
+        <button onClick={() => signIn()}>Login</button>
+      )}
     </>
-)
-};
+  );
+}
 
-export default App;
+export default App
 ```
 
 Visit your app's homepage at [http://localhost:5173](http://localhost:5173).
@@ -174,27 +173,26 @@ Visit your app's homepage at [http://localhost:5173](http://localhost:5173).
 
 ## Display logged in user details
 
-Modified the code as below to see logged in user details.
+Modify the code as below to see logged in user details.
 
 ```javascript
 ...
 
-const App = () => {
+function App() {
 ...
 
-return (
+  return (
     <>
-        {
-            state.isAuthenticated ?
-            <>
-                <p>Welcome {state.username}</p>
-                <button onClick={() => signOut()}>Logout</button>
-            </>
-            : <button onClick={() => signIn()}>Login</button>
-        }
+      {state.isAuthenticated ? (
+        <>
+          <p>Welcome {state.username}</p>
+          <button onClick={() => signOut()}>Logout</button>
+        </>
+      ) : (
+        <button onClick={() => signIn()}>Login</button>
+      )}
     </>
-)
-};
+  );
 
 ...
 ```
diff --git a/en/identity-server/7.0.0/docs/quick-starts/react.md b/en/identity-server/7.0.0/docs/quick-starts/react.md
index 609e23d81d..9dec804075 100644
--- a/en/identity-server/7.0.0/docs/quick-starts/react.md
+++ b/en/identity-server/7.0.0/docs/quick-starts/react.md
@@ -122,28 +122,27 @@ Add the following changes to the `main.jsx` file.
     
 
 ```javascript
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App.jsx';
-import { AuthProvider } from '@asgardeo/auth-react';
-import './index.css';
-
-const config = {
-    signInRedirectURL: "http://localhost:5173",
-    signOutRedirectURL: "http://localhost:5173",
-    clientID: "<your-app-client-id>",
-    baseUrl: "https://localhost:9443",
-    scope: [ "openid","profile" ]
-}
-
-ReactDOM.createRoot(document.getElementById('root')).render(
-    <React.StrictMode>
-        <AuthProvider config={ config }>
-            <App />
-        </AuthProvider>
-    </React.StrictMode>,
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+import { AuthProvider } from '@asgardeo/auth-react'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <AuthProvider
+      config={ {
+        signInRedirectURL: 'http://localhost:5173',
+        signOutRedirectURL: 'http://localhost:5173',
+        clientID: '<your-app-client-id>',
+        baseUrl: 'https://localhost:9443',
+        scope: ['openid', 'profile'],
+      } }
+    >
+      <App />
+    </AuthProvider>
+  </StrictMode>
 );
-
 ```
 
 ## Add login and logout link to your app
@@ -153,24 +152,24 @@ Asgardeo React SDK provides `useAuthContext` hook to conveniently access user au
 Replace the existing content of the `App.jsx` file with following content.
 
 ```javascript
-import { useAuthContext } from "@asgardeo/auth-react";
-import './App.css';
+import { useAuthContext } from "@asgardeo/auth-react"
+import './App.css'
 
-const App = () => {
-const { state, signIn, signOut } = useAuthContext();
+function App() {
+  const { state, signIn, signOut } = useAuthContext();
 
-return (
+  return (
     <>
-        {
-            state.isAuthenticated
-            ? <button onClick={() => signOut()}>Logout</button>
-            : <button onClick={() => signIn()}>Login</button>
-        }
+      {state.isAuthenticated ? (
+        <button onClick={() => signOut()}>Logout</button>
+      ) : (
+        <button onClick={() => signIn()}>Login</button>
+      )}
     </>
-)
-};
+  );
+}
 
-export default App;
+export default App
 ```
 
 Visit your app's homepage at [http://localhost:5173](http://localhost:5173).
@@ -181,27 +180,26 @@ Visit your app's homepage at [http://localhost:5173](http://localhost:5173).
 
 ## Display logged in user details
 
-Modified the code as below to see logged in user details.
+Modify the code as below to see logged in user details.
 
 ```javascript
 ...
 
-const App = () => {
+function App() {
 ...
 
-return (
+  return (
     <>
-        {
-            state.isAuthenticated ?
-            <>
-                <p>Welcome {state.username}</p>
-                <button onClick={() => signOut()}>Logout</button>
-            </>
-            : <button onClick={() => signIn()}>Login</button>
-        }
+      {state.isAuthenticated ? (
+        <>
+          <p>Welcome {state.username}</p>
+          <button onClick={() => signOut()}>Logout</button>
+        </>
+      ) : (
+        <button onClick={() => signIn()}>Login</button>
+      )}
     </>
-)
-};
+  );
 
 ...
 ```

From 68c6df8f925ba4460bbdcc90c214073b21fe45a8 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Wed, 20 Nov 2024 11:17:27 +0530
Subject: [PATCH 4/6] Fix `bash` showing up in the blocks

---
 en/asgardeo/docs/quick-starts/react.md              | 12 ++++++------
 en/identity-server/7.0.0/docs/quick-starts/react.md | 12 ++++++------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/en/asgardeo/docs/quick-starts/react.md b/en/asgardeo/docs/quick-starts/react.md
index 4ee597ac62..26645bcd6b 100644
--- a/en/asgardeo/docs/quick-starts/react.md
+++ b/en/asgardeo/docs/quick-starts/react.md
@@ -45,7 +45,7 @@ Create (a.k.a scaffold) your new React app using Vite.
 
 === "npm"
 
-    ``` bash
+    ```bash
     npm create vite@latest asgardeo-react -- --template react
 
     cd asgardeo-react
@@ -57,7 +57,7 @@ Create (a.k.a scaffold) your new React app using Vite.
 
 === "yarn"
 
-    ``` bash
+    ```bash
     yarn create vite@latest asgardeo-react -- --template react
 
     cd asgardeo-react
@@ -69,7 +69,7 @@ Create (a.k.a scaffold) your new React app using Vite.
 
 === "pnpm"
 
-    ``` bash
+    ```bash
     pnpm create vite@latest asgardeo-react -- --template react
 
     cd asgardeo-react
@@ -85,19 +85,19 @@ Asgardeo React SDK provides all the components and hooks you need to integrate A
 
 === "npm"
 
-    ``` bash
+    ```bash
     npm install @asgardeo/auth-react
     ```
 
 === "yarn"
 
-    ``` bash
+    ```bash
     yarn add @asgardeo/auth-react
     ```
 
 === "pnpm"
 
-    ``` bash
+    ```bash
     pnpm add @asgardeo/auth-react
     ```
 
diff --git a/en/identity-server/7.0.0/docs/quick-starts/react.md b/en/identity-server/7.0.0/docs/quick-starts/react.md
index 9dec804075..8daa67d722 100644
--- a/en/identity-server/7.0.0/docs/quick-starts/react.md
+++ b/en/identity-server/7.0.0/docs/quick-starts/react.md
@@ -45,7 +45,7 @@ Create (a.k.a scaffold) your new React app using Vite.
 
 === "npm"
 
-    ``` bash
+    ```bash
     npm create vite@latest is-react -- --template react
 
     cd is-react
@@ -57,7 +57,7 @@ Create (a.k.a scaffold) your new React app using Vite.
 
 === "yarn"
 
-    ``` bash
+    ```bash
     yarn create vite@latest is-react -- --template react
 
     cd is-react
@@ -69,7 +69,7 @@ Create (a.k.a scaffold) your new React app using Vite.
 
 === "pnpm"
 
-    ``` bash
+    ```bash
     pnpm create vite@latest is-react -- --template react
 
     cd is-react
@@ -85,19 +85,19 @@ Asgardeo React SDK provides all the components and hooks you need to integrate A
 
 === "npm"
 
-    ``` bash
+    ```bash
     npm install @asgardeo/auth-react
     ```
 
 === "yarn"
 
-    ``` bash
+    ```bash
     yarn add @asgardeo/auth-react
     ```
 
 === "pnpm"
 
-    ``` bash
+    ```bash
     pnpm add @asgardeo/auth-react
     ```
 

From d1d1cb1901af96c9f9706d9876592d0dbde97ec9 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Wed, 20 Nov 2024 11:17:46 +0530
Subject: [PATCH 5/6] Link to `@asgardeo/auth-react` npm package from `What You
 Will Learn`

---
 en/asgardeo/docs/quick-starts/react.md              | 2 +-
 en/identity-server/7.0.0/docs/quick-starts/react.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/en/asgardeo/docs/quick-starts/react.md b/en/asgardeo/docs/quick-starts/react.md
index 26645bcd6b..c35044ce8e 100644
--- a/en/asgardeo/docs/quick-starts/react.md
+++ b/en/asgardeo/docs/quick-starts/react.md
@@ -4,7 +4,7 @@ heading: React Quickstart
 description: Welcome to the React Quickstart guide! In this document, you will learn to build a React app, add user login and display user profile information using Asgardeo.
 what_you_will_learn:
   - Create new React app using Vite
-  - Install <a href="https://github.com/asgardeo/asgardeo-auth-react-sdk" target="_blank">@asgardeo/auth-react</a> package
+  - Install <a href="https://www.npmjs.com/package/@asgardeo/auth-react" target="_blank" rel="noopener noreferrer">@asgardeo/auth-react</a> package
   - Add user login and logout
   - Display user profile information
 prerequisites:
diff --git a/en/identity-server/7.0.0/docs/quick-starts/react.md b/en/identity-server/7.0.0/docs/quick-starts/react.md
index 8daa67d722..3783560de2 100644
--- a/en/identity-server/7.0.0/docs/quick-starts/react.md
+++ b/en/identity-server/7.0.0/docs/quick-starts/react.md
@@ -4,7 +4,7 @@ heading: React Quickstart
 description: Welcome to the React Quickstart guide! In this document, you will learn to build a React app, add user login and display user profile information using WSO2 Identity Server.
 what_you_will_learn:
   - Create new React app using Vite
-  - Install <a href="https://github.com/asgardeo/asgardeo-auth-react-sdk" target="_blank">@asgardeo/auth-react</a> package
+  - Install <a href="https://www.npmjs.com/package/@asgardeo/auth-react" target="_blank" rel="noopener noreferrer">@asgardeo/auth-react</a> package
   - Add user login and logout
   - Display user profile information
 prerequisites:

From 132fb54853126ca2eec88df9a2ef45b25c069fd0 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Tue, 3 Dec 2024 11:47:34 +0530
Subject: [PATCH 6/6] Update React QSG docs

---
 en/asgardeo/docs/quick-starts/react.md        | 22 ++++++++++---------
 .../7.0.0/docs/quick-starts/react.md          | 22 ++++++++++---------
 2 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/en/asgardeo/docs/quick-starts/react.md b/en/asgardeo/docs/quick-starts/react.md
index c35044ce8e..85ac959d77 100644
--- a/en/asgardeo/docs/quick-starts/react.md
+++ b/en/asgardeo/docs/quick-starts/react.md
@@ -114,7 +114,7 @@ Add the following changes to the `main.jsx` file.
     - `<your-app-client-id>`
     - `https://api.asgardeo.io/t/<your-organization-name>`
 
-```javascript
+```javascript hl_lines="5 9-17 19"
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
@@ -135,7 +135,7 @@ createRoot(document.getElementById('root')).render(
       <App />
     </AuthProvider>
   </StrictMode>
-);
+)
 ```
 
 ## Add login and logout link to your app
@@ -144,8 +144,8 @@ Asgardeo provides `useAuthContext` hook to conveniently access user authenticati
 
 Replace the existing content of the `App.jsx` file with following content.
 
-```javascript
-import { useAuthContext } from "@asgardeo/auth-react"
+```javascript hl_lines="1 5 9-13"
+import { useAuthContext } from '@asgardeo/auth-react'
 import './App.css'
 
 function App() {
@@ -159,7 +159,7 @@ function App() {
         <button onClick={() => signIn()}>Login</button>
       )}
     </>
-  );
+  )
 }
 
 export default App
@@ -175,11 +175,12 @@ Visit your app's homepage at [http://localhost:5173](http://localhost:5173).
 
 Modify the code as below to see logged in user details.
 
-```javascript
-...
+```javascript hl_lines="11"
+import { useAuthContext } from '@asgardeo/auth-react'
+import './App.css'
 
 function App() {
-...
+  const { state, signIn, signOut } = useAuthContext();
 
   return (
     <>
@@ -192,7 +193,8 @@ function App() {
         <button onClick={() => signIn()}>Login</button>
       )}
     </>
-  );
+  )
+}
 
-...
+export default App
 ```
diff --git a/en/identity-server/7.0.0/docs/quick-starts/react.md b/en/identity-server/7.0.0/docs/quick-starts/react.md
index 3783560de2..e334853495 100644
--- a/en/identity-server/7.0.0/docs/quick-starts/react.md
+++ b/en/identity-server/7.0.0/docs/quick-starts/react.md
@@ -121,7 +121,7 @@ Add the following changes to the `main.jsx` file.
     - `<your-app-client-id>`
     
 
-```javascript
+```javascript hl_lines="5 9-17 19"
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
@@ -142,7 +142,7 @@ createRoot(document.getElementById('root')).render(
       <App />
     </AuthProvider>
   </StrictMode>
-);
+)
 ```
 
 ## Add login and logout link to your app
@@ -151,8 +151,8 @@ Asgardeo React SDK provides `useAuthContext` hook to conveniently access user au
 
 Replace the existing content of the `App.jsx` file with following content.
 
-```javascript
-import { useAuthContext } from "@asgardeo/auth-react"
+```javascript hl_lines="1 5 9-13"
+import { useAuthContext } from '@asgardeo/auth-react'
 import './App.css'
 
 function App() {
@@ -166,7 +166,7 @@ function App() {
         <button onClick={() => signIn()}>Login</button>
       )}
     </>
-  );
+  )
 }
 
 export default App
@@ -182,11 +182,12 @@ Visit your app's homepage at [http://localhost:5173](http://localhost:5173).
 
 Modify the code as below to see logged in user details.
 
-```javascript
-...
+```javascript hl_lines="11"
+import { useAuthContext } from '@asgardeo/auth-react'
+import './App.css'
 
 function App() {
-...
+  const { state, signIn, signOut } = useAuthContext();
 
   return (
     <>
@@ -199,7 +200,8 @@ function App() {
         <button onClick={() => signIn()}>Login</button>
       )}
     </>
-  );
+  )
+}
 
-...
+export default App
 ```