chore(nextjs): integrate organization context into Asgardeo components and update Dashboard pages

Author: brionmario

packages/nextjs/src/index.ts

@@ -19,6 +19,9 @@
 export {default as AsgardeoProvider} from './server/AsgardeoProvider';
 export * from './server/AsgardeoProvider';
 
+export {default as useAsgardeo} from './client/contexts/Asgardeo/useAsgardeo';
+export * from './client/contexts/Asgardeo/useAsgardeo';
+
 export {default as isSignedIn} from './server/actions/isSignedIn';
 
 export {default as SignedIn} from './client/components/control/SignedIn/SignedIn';

packages/react/src/contexts/Asgardeo/AsgardeoContext.ts

@@ -17,6 +17,7 @@
  */
 
 import {Context, createContext} from 'react';
+import {Organization} from '@asgardeo/browser';
 
 /**
  * Props interface of {@link AsgardeoContext}
@@ -53,6 +54,7 @@ export type AsgardeoContextProps = {
    */
   signUp: any;
   user: any;
+  organization: Organization;
 };
 
 /**
@@ -65,6 +67,7 @@ const AsgardeoContext: Context<AsgardeoContextProps | null> = createContext<null
   isInitialized: false,
   isLoading: true,
   isSignedIn: false,
+  organization: null,
   signIn: null,
   signOut: null,
   signUp: null,

packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx

@@ -237,6 +237,7 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
         isInitialized: isInitializedSync,
         isLoading: asgardeo.isLoading(),
         isSignedIn: isSignedInSync,
+        organization: currentOrganization,
         signIn,
         signOut,
         signUp,

samples/teamspace-nextjs/app/dashboard/page.tsx

@@ -7,28 +7,10 @@ import {Users, MessageSquare, Calendar, FileText, TrendingUp, Clock, CheckCircle
 import {redirect} from 'next/navigation';
 import {useEffect} from 'react';
 import {Header} from '@/components/Header/Header';
+import {useAsgardeo, User} from '@asgardeo/nextjs';
 
 export default function DashboardPage() {
-  const {user, currentOrg, isAuthenticated, isLoading} = {
-    user: null, // Replace with actual user data fetching logic
-    currentOrg: null, // Replace with actual organization data fetching logic
-    isAuthenticated: false, // Replace with actual authentication check
-    isLoading: true, // Replace with actual loading state
-  };
-
-  useEffect(() => {
-    if (!isLoading && !isAuthenticated) {
-      redirect('/');
-    }
-  }, [isAuthenticated, isLoading]);
-
-  if (isLoading) {
-    return <div className="flex items-center justify-center min-h-screen">Loading...</div>;
-  }
-
-  if (!isAuthenticated) {
-    return null;
-  }
+  const {organization, user} = useAsgardeo();
 
   const stats = [
     {
@@ -40,7 +22,7 @@ export default function DashboardPage() {
     },
     {
       name: 'Team Members',
-      value: currentOrg?.memberCount.toString() || '0',
+      value: '0',
       change: '+5.4%',
       changeType: 'positive' as const,
       icon: Users,
@@ -122,8 +104,19 @@ export default function DashboardPage() {
 
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <div className="mb-8">
-          <h1 className="text-3xl font-bold text-gray-900">Welcome back {user?.name}!</h1>
-          <p className="text-gray-600 mt-2">Here's what's happening with {currentOrg?.name} today.</p>
+          <h1 className="text-3xl font-bold text-gray-900">
+            Welcome back{' '}
+            <User>
+              {user => (
+                <span>
+                  {user?.givenName || user?.name?.givenName || user?.given_name}{' '}
+                  {user?.name?.familyName || user?.familyName || user?.family_name}
+                </span>
+              )}
+            </User>
+            !
+          </h1>
+          <p className="text-gray-600 mt-2">Here's what's happening with {organization?.orgHandle} today.</p>
         </div>
 
         {/* Stats Grid */}

samples/teamspace-react/src/pages/Dashboard.tsx

@@ -1,9 +1,8 @@
-import {User} from '@asgardeo/react';
-import {useApp} from '../App';
+import {User, useAsgardeo} from '@asgardeo/react';
 import {Users, MessageSquare, Calendar, FileText, TrendingUp, Clock, CheckCircle2, AlertCircle} from 'lucide-react';
 
 export default function Dashboard() {
-  const {currentOrg} = useApp();
+  const {organization} = useAsgardeo();
 
   const stats = [
     {
@@ -15,7 +14,7 @@ export default function Dashboard() {
     },
     {
       name: 'Team Members',
-      value: currentOrg?.memberCount.toString() || '0',
+      value: '0',
       change: '+5.4%',
       changeType: 'positive',
       icon: Users,
@@ -108,7 +107,7 @@ export default function Dashboard() {
           !
         </h1>
 
-        <p className="text-gray-600 mt-2">Here's what's happening with {currentOrg?.name} today.</p>
+        <p className="text-gray-600 mt-2">Here's what's happening with @{organization?.orgHandle} today.</p>
       </div>
 
       {/* Stats Grid */}