ZITADEL NextJS B2B Demo

https://github.com/zitadel/zitadel-nextjs-b2b
Admin
A demo showcasing ZITADEL in a B2B context, enabling companies to provide customer portals with...
Tokens:4,064
Snippets:19
Trust Score:9.5
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### 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
```
Tokens:
Raw