### Local Environment Setup - Cloning and Installation Source: https://github.com/zitadel/zitadel-nextjs-b2b/blob/main/CONTRIBUTING.md Steps to clone the ZITADEL-nextjs repository and install project dependencies using Yarn. This is the initial setup required for local development. ```sh git clone https://github.com/zitadel/zitadel-nextjs.git cd zitadel-nextjs yarn install ``` -------------------------------- ### Local Environment Setup - Starting Development Server Source: https://github.com/zitadel/zitadel-nextjs-b2b/blob/main/CONTRIBUTING.md Command to start the local development server for the ZITADEL-nextjs application. The application will be accessible at `http://localhost:3000`. ```javascript npm run dev ``` -------------------------------- ### Install Dependencies and Run Development Server Source: https://github.com/zitadel/zitadel-nextjs-b2b/blob/main/README.md Commands to install project dependencies using Yarn and start the Next.js development server. After installation, the application can be accessed at http://localhost:3000. ```bash yarn install npm run dev # or yarn dev ``` -------------------------------- ### Local Environment Setup - Environment Variables Source: https://github.com/zitadel/zitadel-nextjs-b2b/blob/main/CONTRIBUTING.md Instructions for setting up local environment variables by copying the `.env` file to `.env.local` and populating it with instance-specific variables. This is crucial for running the application locally. ```sh cp .env .env.local ``` -------------------------------- ### ZITADEL Setup: Vendor Organization Source: https://github.com/zitadel/zitadel-nextjs-b2b/blob/main/README.md Provides instructions for setting up the initial vendor organization in ZITADEL, including navigating to the console and creating a new organization. ```APIDOC Navigate to `https://{YourDomain}.zitadel.cloud/ui/console/orgs` (replace {YourDomain}), and click on the button "New". Toggle the setting "Use your personal account as organization owner". Enter the name `Demo-Vendor`, and click "Create". Then click on that organization. ``` -------------------------------- ### Vercel Deployment Button Source: https://github.com/zitadel/zitadel-nextjs-b2b/blob/main/README.md A button to easily deploy the Zitadel Next.js B2B application to Vercel. Clicking this button will initiate the Vercel deployment process, guiding the user through setting up the necessary environment variables. ```javascript https://vercel.com/button ``` -------------------------------- ### Mobile-First Responsive Design Source: https://github.com/zitadel/zitadel-nextjs-b2b/blob/main/README.md Details the responsive design principles applied to ensure a seamless user experience across various devices, from mobile to desktop. ```javascript - **Responsive grid layouts** that adapt from single column on mobile to multi-column on larger screens - **Touch-friendly interfaces** with properly sized buttons and touch targets - **Mobile navigation menu** with integrated profile management - **Responsive typography** that scales appropriately across device sizes - **Optimized user experience** for phones, tablets, and desktop computers ``` -------------------------------- ### ZITADEL Management API - User and Grant Operations Source: https://github.com/zitadel/zitadel-nextjs-b2b/blob/main/README.md This documentation outlines key operations for managing users and their grants within the ZITADEL system. It covers fetching user grants, creating users via email invitations, and authentication methods. ```APIDOC ZITADEL Management API: ListUserGrants(projectId: string, userId: string, options?: { limit?: number, offset?: number }) - Fetches all grants for a specific user within a project. - Parameters: - projectId: The ID of the project. - userId: The ID of the user. - options: Optional parameters for pagination (limit, offset). - Returns: A list of user grants. CreateUser(projectId: string, payload: { userName: string, email: string, firstName?: string, lastName?: string, ... }) - Creates a new user, often used for email invitations. - Parameters: - projectId: The ID of the project. - payload: Object containing user details like userName, email, firstName, lastName. - Returns: Details of the created user. Authentication: - Service account authentication is used for backend operations. - API keys or OAuth tokens are typically used for authentication. Error Handling: - Implement robust error handling for API requests, providing user feedback for failures. ``` -------------------------------- ### Environment Variables Configuration (.env.local) Source: https://github.com/zitadel/zitadel-nextjs-b2b/blob/main/README.md This snippet shows the required environment variables for the Next.js B2B application. These variables configure the application's connection to Zitadel, authentication settings, and other essential parameters. Ensure you replace placeholder values with your specific Zitadel instance details. ```text NEXTAUTH_URL=http://localhost:3000 PUBLIC_NEXT_ZITADEL_API=https://{YourDomain}.zitadel.cloud ZITADEL_API=https://{YourDomain}.zitadel.cloud ORG_ID={YourOrgId} ZITADEL_CLIENT_ID={YourClientID} ZITADEL_CLIENT_SECRET={YourClientSecret} SERVICE_ACCOUNT_ACCESS_TOKEN={YourServiceAccountSecret} NEXTAUTH_SECRET=randomsecret ``` -------------------------------- ### User Management and Project Grants Source: https://github.com/zitadel/zitadel-nextjs-b2b/blob/main/README.md Details the functionalities for managing users and their project grants within the customer portal. Includes viewing grants, real-time search, adding/editing/removing grants, and inviting new users. ```javascript Users with `admin` role can view granted projects and manage users of the selected organization, including: - **View User Grants**: See all users who have access to granted projects with clear role indicators - **Real-Time Search**: Instantly find users by searching across display name, email, username, first name, last name, or preferred login name - **Add User Grants**: Grant project access to existing users with searchable user selection and role assignment - **Edit User Roles**: Modify roles assigned to users for specific projects with inline editing - **Remove User Grants**: Revoke project access from users with confirmation dialogs - **Invite New Users**: Create new users with automatic invitation emails sent via ZITADEL - **Mobile-First Design**: Fully responsive interface that works seamlessly on all device sizes - **Progressive Enhancement**: Enhanced user experience with debounced search, loading states, and optimistic updates ``` -------------------------------- ### Enhanced User Management Features Source: https://github.com/zitadel/zitadel-nextjs-b2b/blob/main/README.md Focuses on user management improvements, including searchable user selection, inline role editing, user invitation system, and visual role indicators. ```javascript - **Searchable user selection** when adding user grants (no more scrolling through long dropdown lists) - **Inline role editing** directly within the user grants table - **User invitation system** with automatic email notifications - **Batch operations** for efficient user management - **Visual role indicators** for quick identification of user permissions ``` -------------------------------- ### Responsive CSS Grid with Tailwind CSS Source: https://github.com/zitadel/zitadel-nextjs-b2b/blob/main/README.md Demonstrates the use of Tailwind CSS for creating responsive grid layouts, adapting column counts based on screen size. This pattern is crucial for a mobile-first, progressive enhancement approach. ```css .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .sm\:grid-cols-2 { @media (min-width: 640px) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .lg\:grid-cols-3 { @media (min-width: 1024px) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .xl\:grid-cols-4 { @media (min-width: 1280px) { grid-template-columns: repeat(4, minmax(0, 1fr)); } } ``` -------------------------------- ### Linting and Formatting Source: https://github.com/zitadel/zitadel-nextjs-b2b/blob/main/CONTRIBUTING.md Commands to ensure code quality and consistency using ESLint and Prettier. Running `npm run lint:fix` helps resolve linting and formatting issues, making it easier to manage code conflicts in pull requests. ```javascript npm run lint:fix ``` -------------------------------- ### Zitadel Service User Permissions Source: https://github.com/zitadel/zitadel-nextjs-b2b/blob/main/README.md Configures permissions for the 'nextjs' service user within the Zitadel project. It grants 'Project Owner Viewer' role in the 'Portal' project and 'Org Project Permission Editor' in the 'Demo-Vendor' organization, and 'Org User Manager' in the 'Demo-Customer' organization. ```APIDOC Service User: nextjs Project Permissions: - Project: Portal Role: Project Owner Viewer Organization Permissions: - Organization: Demo-Vendor Role: Org Project Permission Editor - Organization: Demo-Customer Role: Org User Manager ``` -------------------------------- ### Performance Optimizations Source: https://github.com/zitadel/zitadel-nextjs-b2b/blob/main/README.md Outlines the performance enhancements implemented, such as client-side filtering, memoized computations, optimistic updates, and efficient state management. ```javascript - **Client-side filtering** for instant search results without server round-trips - **Memoized computations** to prevent unnecessary re-renders - **Optimistic updates** for better perceived performance - **Efficient state management** with proper React patterns - **Scalable architecture** designed to handle hundreds or thousands of users ``` -------------------------------- ### Zitadel Roles Configuration Source: https://github.com/zitadel/zitadel-nextjs-b2b/blob/main/README.md Defines the roles 'admin' and 'reader' for the Zitadel project. The 'admin' role allows managing granted projects and user grants, while the 'reader' role permits reading granted projects within their organization. ```APIDOC Roles: - Key: admin Display Name: Administrator Group: Description: The administrator, allowed to read granted projects and manage user grants - Key: reader Display Name: Reader Group: Description: A user who is allowed to read his organizations granted projects only ``` -------------------------------- ### Responsive Text Sizing with Tailwind CSS Source: https://github.com/zitadel/zitadel-nextjs-b2b/blob/main/README.md Illustrates how Tailwind CSS is used to manage responsive text sizes, ensuring readability across different devices. This follows a mobile-first strategy, progressively enhancing text styles for larger screens. ```css .text-sm { font-size: 0.875rem; line-height: 1.25rem; } .sm\:text-base { @media (min-width: 640px) { font-size: 1rem; line-height: 1.5rem; } } .lg\:text-lg { @media (min-width: 1024px) { font-size: 1.125rem; line-height: 1.75rem; } } ``` -------------------------------- ### Advanced Search Functionality Source: https://github.com/zitadel/zitadel-nextjs-b2b/blob/main/README.md Highlights the advanced search capabilities for users, including real-time, multi-field search with debounced input for performance optimization. ```javascript - **Real-time user search** with instant results as you type - **Multi-field search** across display name, email, username, first name, last name, and preferred login name - **Debounced input** for optimal performance with large user bases - **Search result counters** to show filtered results - **Clear search** functionality with one-click reset ``` -------------------------------- ### Zitadel Manager Role Assignment Source: https://github.com/zitadel/zitadel-nextjs-b2b/blob/main/README.md Assigns the 'Org Owner' manager role to 'Alice Admin' within the 'Demo-Customer' organization to enable self-service role assignment. ```APIDOC Organization: Demo-Customer Users: - Name: Alice Admin Roles: - Manager Role: Org Owner ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.