FusionAuth · JakeLo123 · Jun 25, 2024 · Jun 24, 2024
diff --git a/packages/sdk-react/CHANGES.md b/packages/sdk-react/CHANGES.md
@@ -1,5 +1,21 @@
 fusionauth-react-sdk Changes
 
+Changes in 2.3.0
+
+- `userInfo` can now be custom typed with an optional generic argument. This may be helpful for SDK users with a non-hosted backend. Below is an example of what it looks like.
+
+  ```typescript
+  interface MyUserInfo {
+    specialProperty: string;
+    // ...etc
+  }
+  const { userInfo } = useFusionAuth<MyUserInfo>();
+  userInfo.specialProperty;
+  ```
+
+- UI component inline documentation has been fleshed out and added for components that were missing it.
+- `manageAccount` function and button added. [Self service account management](https://fusionauth.io/docs/lifecycle/manage-users/account-management/) is only available in FusionAuth paid plans.
+
 Changes in 2.2.0
 
 - SDK now supports NextJS. [See further documentation for configuration with nextjs](https://github.com/FusionAuth/fusionauth-javascript-sdk/tree/main/packages/sdk-react#configuration-with-nextjs).

diff --git a/packages/sdk-react/README.md b/packages/sdk-react/README.md
@@ -176,13 +176,15 @@ const UserNameDisplay = () => {
   const { userInfo } = useFusionAuth();
 
   return (
-    <RequireAuth>
-      <p>User: {userInfo.given_name}</p> // Only displays if user is authenticated
-    </RequireAuth>
-
-    <Unauthenticated>
-      <p>Please log in to view this page</p>
-    </Unauthenticated>
+    <>
+      <RequireAuth>
+        <p>User: {userInfo.given_name}</p> // Only displays if user is authenticated
+      </RequireAuth>
+
+      <Unauthenticated>
+        <p>Please log in to view this page</p>
+      </Unauthenticated>
+    </>
   );
 };
 

diff --git a/packages/sdk-react/docs/README.md b/packages/sdk-react/docs/README.md
@@ -169,7 +169,7 @@ The `startLogin` and `startRegister` functions accept an optional string paramet
 
 ### Protecting Content
 
-The `RequireAuth` component can be used to protect information from unauthorized users. It takes an optional prop `withRole` that can be used to ensure the user has a specific role. If an array of roles is passed, the user must have at least one of the roles to be authorized.
+The `RequireAuth` component can be used to protect information from unauthorized users. It takes an optional prop `withRole` that can be used to ensure the user has a specific role. If an array of roles is passed, the user must have at least one of the roles to be authorized. The `Unauthenticated` component provides the inverse functionality.
 
 ```jsx
 import { RequireAuth, useFusionAuth } from '@fusionauth/react-sdk';
@@ -178,9 +178,15 @@ const UserNameDisplay = () => {
   const { userInfo } = useFusionAuth();
 
   return (
-    <RequireAuth>
-      <p>User: {userInfo.given_name}</p> // Only displays if user is authenticated
-    </RequireAuth>
+    <>
+      <RequireAuth>
+        <p>User: {userInfo.given_name}</p> // Only displays if user is authenticated
+      </RequireAuth>
+
+      <Unauthenticated>
+        <p>Please log in to view this page</p>
+      </Unauthenticated>
+    </>
   );
 };
 

diff --git a/.../docs/interfaces/providers_FusionAuthProviderConfig.FusionAuthProviderConfig.md b/.../docs/interfaces/providers_FusionAuthProviderConfig.FusionAuthProviderConfig.md
@@ -39,7 +39,7 @@ Only set this if you are hosting server that uses a custom name for the 'app.at_
 
 #### Defined in
 
-[packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts:93](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/546896fe40aeab4bf379a067a721414ce99ca372/packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts#L93)
+[packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts:93](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/6b00f96f26d9e2dbbacedeab842a037e53b50aa6/packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts#L93)
 
 ---
 
@@ -51,7 +51,7 @@ The number of seconds before the access token expiry when the auto refresh funct
 
 #### Defined in
 
-[packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts:45](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/546896fe40aeab4bf379a067a721414ce99ca372/packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts#L45)
+[packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts:45](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/6b00f96f26d9e2dbbacedeab842a037e53b50aa6/packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts#L45)
 
 ---
 
@@ -63,7 +63,7 @@ The client id of the application.
 
 #### Defined in
 
-[packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts:15](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/546896fe40aeab4bf379a067a721414ce99ca372/packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts#L15)
+[packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts:15](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/6b00f96f26d9e2dbbacedeab842a037e53b50aa6/packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts#L15)
 
 ---
 
@@ -75,7 +75,7 @@ The path to the login endpoint.
 
 #### Defined in
 
-[packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts:60](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/546896fe40aeab4bf379a067a721414ce99ca372/packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts#L60)
+[packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts:60](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/6b00f96f26d9e2dbbacedeab842a037e53b50aa6/packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts#L60)
 
 ---
 
@@ -87,7 +87,7 @@ The path to the logout endpoint.
 
 #### Defined in
 
-[packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts:70](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/546896fe40aeab4bf379a067a721414ce99ca372/packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts#L70)
+[packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts:70](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/6b00f96f26d9e2dbbacedeab842a037e53b50aa6/packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts#L70)
 
 ---
 
@@ -99,7 +99,7 @@ The path to the me endpoint.
 
 #### Defined in
 
-[packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts:87](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/546896fe40aeab4bf379a067a721414ce99ca372/packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts#L87)
+[packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts:87](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/6b00f96f26d9e2dbbacedeab842a037e53b50aa6/packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts#L87)
 
 ---
 
@@ -121,7 +121,7 @@ See docs for [configuration with nextjs](https://github.com/FusionAuth/fusionaut
 
 #### Defined in
 
-[packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts:82](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/546896fe40aeab4bf379a067a721414ce99ca372/packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts#L82)
+[packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts:82](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/6b00f96f26d9e2dbbacedeab842a037e53b50aa6/packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts#L82)
 
 ---
 
@@ -147,7 +147,7 @@ Callback to be invoked if a request to refresh the access token fails during aut
 
 #### Defined in
 
-[packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts:55](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/546896fe40aeab4bf379a067a721414ce99ca372/packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts#L55)
+[packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts:55](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/6b00f96f26d9e2dbbacedeab842a037e53b50aa6/packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts#L55)
 
 ---
 
@@ -173,7 +173,7 @@ Callback function to be invoked with the `state` value upon redirect from login
 
 #### Defined in
 
-[packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts:50](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/546896fe40aeab4bf379a067a721414ce99ca372/packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts#L50)
+[packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts:50](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/6b00f96f26d9e2dbbacedeab842a037e53b50aa6/packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts#L50)
 
 ---
 
@@ -185,7 +185,7 @@ The redirect URI for post-logout. Defaults the provided `redirectUri`.
 
 #### Defined in
 
-[packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts:30](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/546896fe40aeab4bf379a067a721414ce99ca372/packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts#L30)
+[packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts:30](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/6b00f96f26d9e2dbbacedeab842a037e53b50aa6/packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts#L30)
 
 ---
 
@@ -197,7 +197,7 @@ The redirect URI of the application.
 
 #### Defined in
 
-[packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts:20](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/546896fe40aeab4bf379a067a721414ce99ca372/packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts#L20)
+[packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts:20](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/6b00f96f26d9e2dbbacedeab842a037e53b50aa6/packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts#L20)
 
 ---
 
@@ -209,7 +209,7 @@ The path to the register endpoint.
 
 #### Defined in
 
-[packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts:65](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/546896fe40aeab4bf379a067a721414ce99ca372/packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts#L65)
+[packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts:65](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/6b00f96f26d9e2dbbacedeab842a037e53b50aa6/packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts#L65)
 
 ---
 
@@ -221,7 +221,7 @@ The OAuth2 scope parameter passed to the `/oauth2/authorize` endpoint. If not sp
 
 #### Defined in
 
-[packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts:25](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/546896fe40aeab4bf379a067a721414ce99ca372/packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts#L25)
+[packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts:25](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/6b00f96f26d9e2dbbacedeab842a037e53b50aa6/packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts#L25)
 
 ---
 
@@ -233,7 +233,7 @@ The URL of the server that performs the token exchange.
 
 #### Defined in
 
-[packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts:10](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/546896fe40aeab4bf379a067a721414ce99ca372/packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts#L10)
+[packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts:10](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/6b00f96f26d9e2dbbacedeab842a037e53b50aa6/packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts#L10)
 
 ---
 
@@ -245,7 +245,7 @@ Enables the SDK to automatically handle fetching user info when logged in. Defau
 
 #### Defined in
 
-[packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts:40](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/546896fe40aeab4bf379a067a721414ce99ca372/packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts#L40)
+[packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts:40](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/6b00f96f26d9e2dbbacedeab842a037e53b50aa6/packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts#L40)
 
 ---
 
@@ -257,7 +257,7 @@ Enables automatic token refreshing. Defaults to false.
 
 #### Defined in
 
-[packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts:35](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/546896fe40aeab4bf379a067a721414ce99ca372/packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts#L35)
+[packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts:35](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/6b00f96f26d9e2dbbacedeab842a037e53b50aa6/packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts#L35)
 
 ---
 
@@ -269,4 +269,4 @@ The path to the token refresh endpoint.
 
 #### Defined in
 
-[packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts:75](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/546896fe40aeab4bf379a067a721414ce99ca372/packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts#L75)
+[packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts:75](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/6b00f96f26d9e2dbbacedeab842a037e53b50aa6/packages/sdk-react/src/components/providers/FusionAuthProviderConfig.ts#L75)