diff --git a/.gitignore b/.gitignore index 9e0bf7ed4e..0d0a4c0866 100644 --- a/.gitignore +++ b/.gitignore @@ -27,3 +27,4 @@ en/asgardeo/site # Python virtula environment .venv +en/asgardeo/__pycache__/ diff --git a/en/asgardeo/docs/complete-guides/react/add-login-and-logout.md b/en/asgardeo/docs/complete-guides/react/add-login-and-logout.md index 9085cf9fee..21f9481e1a 100644 --- a/en/asgardeo/docs/complete-guides/react/add-login-and-logout.md +++ b/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. diff --git a/en/asgardeo/docs/complete-guides/react/display-logged-in-user-details.md b/en/asgardeo/docs/complete-guides/react/display-logged-in-user-details.md index de87a4ec08..1b77380ea5 100644 --- a/en/asgardeo/docs/complete-guides/react/display-logged-in-user-details.md +++ b/en/asgardeo/docs/complete-guides/react/display-logged-in-user-details.md @@ -18,7 +18,7 @@ const App = () => { { state.isAuthenticated ? <> -

Welocme {state.username}

+

Welcome {state.username}

: diff --git a/en/asgardeo/docs/complete-guides/react/install-asgardeo-sdk.md b/en/asgardeo/docs/complete-guides/react/install-asgardeo-sdk.md index 10c9bf4ee1..abd64ac518 100644 --- a/en/asgardeo/docs/complete-guides/react/install-asgardeo-sdk.md +++ b/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 `` 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/` | | 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 diff --git a/en/asgardeo/docs/complete-guides/react/introduction.md b/en/asgardeo/docs/complete-guides/react/introduction.md index 3ff673d06f..c04b09ec27 100644 --- a/en/asgardeo/docs/complete-guides/react/introduction.md +++ b/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}}. diff --git a/en/asgardeo/docs/complete-guides/react/next-steps.md b/en/asgardeo/docs/complete-guides/react/next-steps.md index 646c867832..60bb2d0f7f 100644 --- a/en/asgardeo/docs/complete-guides/react/next-steps.md +++ b/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 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. diff --git a/en/asgardeo/docs/complete-guides/react/register-an-application.md b/en/asgardeo/docs/complete-guides/react/register-an-application.md index 7ad709cb30..65b8cd7112 100644 --- a/en/asgardeo/docs/complete-guides/react/register-an-application.md +++ b/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. diff --git a/en/asgardeo/docs/quick-starts/react.md b/en/asgardeo/docs/quick-starts/react.md index 385d7e5caf..e576f52545 100644 --- a/en/asgardeo/docs/quick-starts/react.md +++ b/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: React Vite App Sample -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,19 +80,25 @@ 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 `` to your app @@ -100,11 +106,11 @@ The `` serves as a context provider for user login in the app. Y 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. - -`` + - `` - `https://api.asgardeo.io/t/` ```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 ? <> -

Welocme {state.username}

+

Welcome {state.username}

: diff --git a/en/identity-server/7.0.0/docs/complete-guides/react/accessing-protected-api.md b/en/identity-server/7.0.0/docs/complete-guides/react/accessing-protected-api.md index 22a3659307..3b32c514da 100644 --- a/en/identity-server/7.0.0/docs/complete-guides/react/accessing-protected-api.md +++ b/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. diff --git a/en/identity-server/7.0.0/docs/complete-guides/react/add-login-and-logout.md b/en/identity-server/7.0.0/docs/complete-guides/react/add-login-and-logout.md index c2c99701c2..eed5718cef 100644 --- a/en/identity-server/7.0.0/docs/complete-guides/react/add-login-and-logout.md +++ b/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. diff --git a/en/identity-server/7.0.0/docs/complete-guides/react/create-a-react-app.md b/en/identity-server/7.0.0/docs/complete-guides/react/create-a-react-app.md index 92a9d1a9d7..60b81acd38 100644 --- a/en/identity-server/7.0.0/docs/complete-guides/react/create-a-react-app.md +++ b/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. diff --git a/en/identity-server/7.0.0/docs/complete-guides/react/display-logged-in-user-details.md b/en/identity-server/7.0.0/docs/complete-guides/react/display-logged-in-user-details.md index de87a4ec08..7a23ffdaec 100644 --- a/en/identity-server/7.0.0/docs/complete-guides/react/display-logged-in-user-details.md +++ b/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 ? <> -

Welcome, {userInfo?.username}

+

Welcome {userInfo?.username}

: diff --git a/en/identity-server/7.0.0/docs/complete-guides/react/install-asgardeo-sdk.md b/en/identity-server/7.0.0/docs/complete-guides/react/install-asgardeo-sdk.md index 176ff2f653..8648119c9c 100644 --- a/en/identity-server/7.0.0/docs/complete-guides/react/install-asgardeo-sdk.md +++ b/en/identity-server/7.0.0/docs/complete-guides/react/install-asgardeo-sdk.md @@ -1,7 +1,7 @@ --- template: templates/complete-guide.html heading: Install and configure Asgardeo SDK -read_time: 2 min +read_time: 5 min --- ## Install @asgardeo/auth-react @@ -9,11 +9,11 @@ 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. -!!! 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 `` 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 diff --git a/en/identity-server/7.0.0/docs/complete-guides/react/introduction.md b/en/identity-server/7.0.0/docs/complete-guides/react/introduction.md index 9772bfe57d..b5981efa59 100644 --- a/en/identity-server/7.0.0/docs/complete-guides/react/introduction.md +++ b/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}}. \ No newline at end of file diff --git a/en/identity-server/7.0.0/docs/complete-guides/react/manage-tokens-in-React-apps.md b/en/identity-server/7.0.0/docs/complete-guides/react/manage-tokens-in-React-apps.md index 04fc592296..fbc6146d9b 100644 --- a/en/identity-server/7.0.0/docs/complete-guides/react/manage-tokens-in-React-apps.md +++ b/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 diff --git a/en/identity-server/7.0.0/docs/complete-guides/react/next-steps.md b/en/identity-server/7.0.0/docs/complete-guides/react/next-steps.md index b941f7182d..d19939338f 100644 --- a/en/identity-server/7.0.0/docs/complete-guides/react/next-steps.md +++ b/en/identity-server/7.0.0/docs/complete-guides/react/next-steps.md @@ -6,7 +6,22 @@ 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}}. + + + + - +- [Multi factor authentication](https://is.docs.wso2.com/en/latest/guides/authentication/mfa/){:target="_blank"} +- [Passwordless authentication](hhttps://is.docs.wso2.com/en/latest/guides/authentication/passwordless-login/){:target="_blank"} +- [Self registration](https://is.docs.wso2.com/en/latest/guides/account-configurations/user-onboarding/self-registration/){:target="_blank"} +- [Login UI customization](https://is.docs.wso2.com/en/latest/guides/branding/){:target="_blank"} diff --git a/en/identity-server/7.0.0/docs/complete-guides/react/prerequisite.md b/en/identity-server/7.0.0/docs/complete-guides/react/prerequisite.md index f8e84f28af..c18add16c9 100644 --- a/en/identity-server/7.0.0/docs/complete-guides/react/prerequisite.md +++ b/en/identity-server/7.0.0/docs/complete-guides/react/prerequisite.md @@ -1,7 +1,7 @@ --- template: templates/complete-guide.html heading: Prerequisite -read_time: 30 secs +read_time: 1 mins --- ## Before you start, ensure you have the following: diff --git a/en/identity-server/7.0.0/docs/complete-guides/react/register-an-application.md b/en/identity-server/7.0.0/docs/complete-guides/react/register-an-application.md index 31579f1b56..ee90c651bb 100644 --- a/en/identity-server/7.0.0/docs/complete-guides/react/register-an-application.md +++ b/en/identity-server/7.0.0/docs/complete-guides/react/register-an-application.md @@ -14,16 +14,16 @@ First unless you already have done that, you need to setup {{product_name}} and 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. diff --git a/en/identity-server/7.0.0/docs/complete-guides/react/securing-routes-within-the-app.md b/en/identity-server/7.0.0/docs/complete-guides/react/securing-routes-within-the-app.md index f4204c7607..5aa7e2304b 100644 --- a/en/identity-server/7.0.0/docs/complete-guides/react/securing-routes-within-the-app.md +++ b/en/identity-server/7.0.0/docs/complete-guides/react/securing-routes-within-the-app.md @@ -1,7 +1,7 @@ --- template: templates/complete-guide.html heading: Securing Routes within the app -read_time: 2 min +read_time: 5 min --- In a React app, routes define the paths within the application that users can navigate to, linking URLs to specific components. Securing routes is essential to protect sensitive data, prevent unauthorized access, and ensure that only authenticated users can access certain parts of the application. In this section, let’s look at how we can secure routes using Asgardeo React SDK 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 045fdf59de..cb296c7ab2 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 @@ -13,10 +13,10 @@ prerequisites: - Install a JS package manager - A favorite text editor or IDE source_code: React Vite App Sample -whats_next: - - Try out complete React guide - - Try out user onboarding complete guide for React - - Read security best practices for React app guide +# whats_next: +# - Try out {{product_name}} [complete React guide](https://is.docs.wso2.com/en/latest/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 WSO2 Identity Server @@ -26,15 +26,15 @@ whats_next: - Name - IS-React - Authorized redirect URL - `http://localhost:5173` -!!! abstract +!!! Info The authorized redirect URL determines where WSO2 Identity Server 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,22 +80,28 @@ 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 + ``` -!!! note +!!! Info Asgardeo-branded SDKs can be used to build apps to work with the all WSO2 identity suite of products that includes WSO2 Identity Server (WSO2 IS), WSO2 Private Identity Cloud (WSO2 PIC), and Asgardeo. @@ -107,11 +113,11 @@ The `` serves as a context provider for user login in the app. Y Add the following changes to the `main.jsx` file. -!!! note +!!! Important Replace below placeholders with the generated`client-id` from the app you registered in WSO2 Identity Server. - -`` + - `` ```javascript @@ -168,9 +174,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 WSO2 Identity Server by following this guide to tryout login and logout features. + You need to create a test user in WSO2 Identity Server by following this [guide](https://wso2.com/asgardeo/docs/guides/users/manage-users/#onboard-a-single-user){:target="_blank"} to tryout login and logout features. ## Display logged in user details @@ -187,7 +193,7 @@ return ( { state.isAuthenticated ? <> -

Welocme {state.username}

+

Welcome {state.username}

: