Authorization in Singularity React

Singularity React employs a comprehensive authorization system powered by Auth.js (formerly NextAuth.js), enhanced with custom extensions to manage user roles and permissions. This system is primarily handled through the authJs.ts file and the useUser hook.

Implementing Authorization

To apply authorization in your components:

1. Utilize the useUser hook to retrieve user data and roles
2. Verify user roles to control access to specific features or components
3. Leverage the isGuest flag to distinguish between authenticated and unauthenticated users

Sample implementation 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

Singularity React offers an AuthGuardRedirect component to enforce route-level authorization. This component can be integrated into layout files to limit access to entire sections of your application based on user roles.

Below is a simple example of using AuthGuardRedirect:

import AuthGuardRedirect from '@auth/AuthGuardRedirect';

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

In this example, only users with the 'admin' role can access routes protected by this layout. Users lacking the required role will be redirected to a default destination, such as the login page or an "access denied" page.

For detailed guidance on implementing AuthGuardRedirect in your routing setup, consult the Routing Documentation.

Navigation Item Configuration:

You can manage the visibility of navigation items, groups, or collapsible sections by adding an auth property 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: '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: '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: '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

• Consistently use the useUser hook to retrieve user data and conduct authorization checks
• Apply role-based access control by validating user roles before rendering sensitive components or executing protected actions
• Employ the isGuest flag to differentiate between authenticated and unauthenticated users
• Combine client-side checks with server-side validation to ensure robust security
• Utilize AuthGuardRedirect for route-level protection to block unauthorized access to entire application sections
• Maintain centralized and reusable authorization logic to ensure consistency across your application

By utilizing the tailored Auth.js configuration and the useUser hook, Singularity React delivers a versatile and robust authorization system that seamlessly integrates into your application’s components and logic. Always pair client-side authorization checks with server-side validation to safeguard your application’s security.