Authorization in Fuse React

Fuse React implements a robust authorization system using Auth.js (formerly NextAuth.js) with custom extensions to handle user roles and permissions. This system is primarily managed through the authJs.ts file and the useUser hook.

Implementing Authorization

To implement authorization in your components:

1. Use the useUser hook to access user data and roles
2. Check the user's roles to determine access to certain features or components
3. Use the isGuest flag to differentiate between authenticated and unauthenticated users

Example usage in a component:

import useUser from '@auth/useUser';

function ProtectedComponent() {
  const { data: user, isGuest } = useUser();

  if (isGuest) {
    return <p>Please sign in to access this content.</p>;
  }

  if (!user.role.includes('admin')) {
    return <p>You don't have permission to view this content.</p>;
  }

  return <p>Welcome, Admin! Here's your protected content.</p>;
}

Route-level Authorization with AuthGuardRedirect

Fuse React provides an AuthGuardRedirect component that allows you to implement route-level authorization. This component can be used in layout files to restrict access to entire sections of your application based on user roles.

Here's a basic example of how to use AuthGuardRedirect:

import AuthGuardRedirect from '@auth/AuthGuardRedirect';

function Layout({ children }) {
	return (
		<AuthGuardRedirect auth={['admin']}>
			{children}
		</AuthGuardRedirect>
	);
}

In this example, only users with the 'admin' role will be able to access the routes wrapped by this layout. Users without the required role will be redirected to a default location (usually the login page or a "not authorized" page).

For more detailed information on how to use AuthGuardRedirect in your routing configuration, please refer to the Routing Documentation.

Navigation Item Configuration:

You can control the navigation item/group/collapse visibility by adding authproperty in src/configs/NavigationConfig.tsx.

Example Usage:

import authRoles from '@auth/authRoles';

const authProtectedNavigationExamples = [
	{
		id: 'sign-in',
		title: 'Sign in (only for guest)',
		type: 'item',
		url: '/sign-in',
		auth: authRoles.onlyGuest,
		icon: 'lock'
	},
	{
		id: 'register',
		title: 'Register (only for guest)',
		type: 'item',
		url: '/register',
		auth: authRoles.onlyGuest,
		icon: 'person_add'
	},
	{
		id: 'sign-out',
		title: 'Sign out (only for user)',
		type: 'item',
		auth: authRoles.user,
		url: '/sign-out',
		icon: 'exit_to_app'
	},
	{
		id: 'auth-admin-example',
		title: 'Admin: Auth protected page (only for admin)',
		type: 'item',
		url: '/auth/admin-role-example',
		icon: 'security'
	},
	{
		id: 'only-admin-navigation-item',
		title: 'Nav item only for Admin (only for admin)',
		type: 'item',
		auth: authRoles.admin,
		url: '/auth/admin-role-example',
		icon: 'verified_user'
	},
	{
		id: 'auth-staff-example',
		title: 'Staff: Auth protected page (only for staff)',
		type: 'item',
		url: '/auth/staff-role-example',
		icon: 'security'
	},
	{
		id: 'only-staff-navigation-item',
		title: 'Nav item only for Staff (only for staff)',
		type: 'item',
		auth: authRoles.staff,
		url: '/auth/staff-role-example',
		icon: 'verified_user'
	},
	{
		id: 'auth-guest-example',
		title: 'Guest: Auth protected page (only for guest)',
		type: 'item',
		url: '/auth/guest-role-example',
		icon: 'security'
	},
	{
		id: 'only-guest-navigation-item',
		title: 'Nav item only for Guest (only for guest)',
		type: 'item',
		auth: authRoles.onlyGuest,
		url: '/auth/guest-role-example',
		icon: 'verified_user'
	}
];

export default authProtectedNavigationExamples;

Best Practices

• Always use the useUser hook to access user data and perform authorization checks
• Implement role-based access control by checking user roles before rendering sensitive components or performing protected actions
• Use the isGuest flag to differentiate between authenticated and unauthenticated users
• Combine client-side checks with server-side validation for robust security
• Use AuthGuardRedirect for route-level protection to prevent unauthorized access to entire sections of your application
• Keep your authorization logic centralized and reusable to maintain consistency across your application

By leveraging the custom Auth.js configuration and the useUser hook, Fuse React provides a flexible and powerful authorization system that can be easily integrated into your application's components and logic. Remember to always combine client-side authorization checks with server-side validation to ensure the security of your application.