user profile widget RELEASE (#39)

* user profile widget

* CR fixes

* CR fixes

* CR fixes

README.md

@@ -360,6 +360,34 @@ import { AuditManagement } from '@descope/nextjs-sdk';
 Example:
 [Manage Audit](./examples/app-router/app/manage-audit/page.tsx)
 
+#### User Profile
+
+The `UserProfile` widget lets you embed a user profile component in your app and let the logged in user update his profile.
+
+The widget lets you:
+
+- Update user profile picture
+- Update user personal information
+- Update authentication methods
+- Logout
+
+###### Usage
+
+```js
+import { UserProfile } from '@descope/nextjs-sdk';
+...
+  <UserProfile
+    widgetId="user-profile-widget"
+    onLogout={() => {
+      // add here you own logout callback
+      window.location.href = '/login';
+    }}
+  />
+```
+
+Example:
+[User Profile](./examples/app-router/app/my-user-profile/page.tsx)
+
 ## Code Example
 
 You can find an example react app in the [examples folder](./examples). - [App Router](/examples/app-router/) - [Pages Router](/examples/pages-router/)

examples/app-router/app/my-user-profile/page.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { UserProfile } from '@descope/nextjs-sdk'; // eslint-disable-line
+
+export default () => (
+	<div
+		style={{
+			display: 'flex',
+			flexDirection: 'column',
+			alignItems: 'center',
+			justifyContent: 'center'
+		}}
+	>
+		<h1>User Profile</h1>
+		<UserProfile
+			widgetId="user-profile-widget"
+			onLogout={() => {
+				window.location.href = '/login';
+			}}
+		/>
+	</div>
+);

examples/app-router/app/page.tsx

@@ -12,7 +12,7 @@ const Page = async () => {
 			<UserDetails />
 			<p>{!sessionRes ? 'User is not logged in' : 'User is logged in'}</p>
 			{
-				// show link to Manage Users, Roles, Audit, and Access Keys if user is logged in
+				// show link to Manage Users, Roles, Audit, User-Profile and Access Keys if user is logged in
 				true && (
 					<div>
 						<Link href="/manage-users">Manage Users</Link>
@@ -22,6 +22,8 @@ const Page = async () => {
 						<Link href="/manage-access-keys">Manage Access Keys</Link>
 						<br />
 						<Link href="/manage-audit">Manage Audit</Link>
+						<br />
+						<Link href="/user-profile">User Profile</Link>
 					</div>
 				)
 			}