{"id":22009719,"url":"https://github.com/zitadel/zitadel-nextjs-b2b","last_synced_at":"2025-05-06T18:29:17.753Z","repository":{"id":103222649,"uuid":"558301912","full_name":"zitadel/zitadel-nextjs-b2b","owner":"zitadel","description":"Showcase the use of personal access tokens in a B2B environment. Uses NextJS Framework.","archived":false,"fork":false,"pushed_at":"2024-07-09T16:13:22.000Z","size":1375,"stargazers_count":21,"open_issues_count":6,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-31T01:41:26.854Z","etag":null,"topics":["b2b","examples","nextjs","react","zitadel"],"latest_commit_sha":null,"homepage":"https://zitadel-b2b.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zitadel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-10-27T09:24:30.000Z","updated_at":"2025-01-31T08:06:16.000Z","dependencies_parsed_at":null,"dependency_job_id":"50b768b6-df01-430a-afae-a515acb33964","html_url":"https://github.com/zitadel/zitadel-nextjs-b2b","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zitadel%2Fzitadel-nextjs-b2b","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zitadel%2Fzitadel-nextjs-b2b/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zitadel%2Fzitadel-nextjs-b2b/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zitadel%2Fzitadel-nextjs-b2b/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zitadel","download_url":"https://codeload.github.com/zitadel/zitadel-nextjs-b2b/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252744033,"owners_count":21797532,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["b2b","examples","nextjs","react","zitadel"],"created_at":"2024-11-30T02:10:33.922Z","updated_at":"2025-05-06T18:29:17.701Z","avatar_url":"https://github.com/zitadel.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ZITADEL B2B Demo\n\nThis is a demo showcasing how you can use ZITADEL in a B2B (Business-to-Business) context, where a company is providing a customer portal to their customers:\n\n- A user of the customer should see all granted projects in the portal (\"Service discovery\")\n- A admin user of the customers sees a list of customer's users (could be expanded to make roles editable)\n\n## What does it do?\n\nUsers with `view` role can view granted projects on their organization which were granted by your organization (owning this portal application).\nUsers with `admin` role can view granted projects and list users of the selected organization who are granted to use the portal application too.\n\n![app screen](./public/screenshot.png)\n\n## Step 1: Setup Vendor application and users in ZITADEL\n\nFirst we need to create an organization that holds the Vendor's users, projects and applications.\n\n### Vendor Organization\n\nNavigate to `https://{YourDomain}.zitadel.cloud/ui/console/orgs` (replace {YourDomain}), and click on the button \"New\".\nToggle the setting \"Use your personal account as organization owner\".\n\nEnter the name `Demo-Vendor`, and click \"Create\". Then click on that organization.\n\n### Portal Web Application\n\nTo setup this sample you have to create a project and an application in the vendor organization (`Demo-Vendor`) first.\n\nOpen the Console (`https://{YourDomain}.zitadel.cloud/ui/console/projects`) and create a new project. Let's call it `Portal`.\n\nThen on the project detail page click on new application and enter a name for this app.\nLet's call this one `portal-web`.\nSelect `Web`, continue, `Code`, then enter `http://localhost:3000/api/auth/callback/zitadel` for the redirect, and `http://localhost:3000` for the post redirect. Then press on `create`.\n\nCopy the \"Secret\" and \"Resource Id\" of the project `Portal` as you will need this in your environment configuration file later.\n\nClick on the application `portal-web`.\nOn the application detail page click on the section under redirect settings and enable `Development Mode`. This will allow you application to work on `localhost:3000`.\nTo read the user data and roles from ID Token, go to the section Token Settings and make sure both checkboxes, `User roles inside ID Token` and `User Info inside ID Token` are enabled.\nMake sure to save your changes.\n\nCopy the \"Resource Id\" of the application `portal-web` as you will need this in your environment configuration file later.\n\n### Roles\n\nTo setup the needed roles for your project, navigate to your `Portal` project, and add the following roles\n\n| Key    | Display Name  | Group | Description                                                            |\n| :----- | :------------ | :---- | ---------------------------------------------------------------------- |\n| admin  | Administrator |       | The administrator, allowed to read granted projects and to user grants |\n| reader | Reader        |       | A user who is allowed to read his organizations granted projects only  |\n\nNow in the `General` section of the Portal project, make sure to enable `Assert Roles on Authentication`.\nThis makes sure that roles, which is used by the application to enable UI components, are set in your OIDC ID Token.\n\n### Service User\n\nTo make the application work you need a service user which loads granted-projects and user-grants for you.\nIn the B2B-Demo organization, navigate to `Users` in navigation of Console, click on `Service Users` and create a new user.\nLet's set its username to `nextjs` and its name to `NextJS`. Then press `create`.\n\nOn the detail page of that user, navigate to \"Personal Access Tokens\" and add a new entry, set an optional expiration date.\n\nCopy the generated Token as you will need this in your environment configuration file later.\n\nGo back to the `Portal` project and add the Service User as Manager (top right).\nMake sure to select `Project Owner Viewer` as the management role.\n\nTo show granted projects, go to the `Demo-Vendor` organization and add the Service User as `Org Project Permission Editor` Manager.\n\n## Step 2: Configuration\n\nNow clone this project and navigate to its root folder.\nCreate a file `.env.local` and copy paste the following:\n\n```text\nNEXTAUTH_URL=http://localhost:3000\nPUBLIC_NEXT_ZITADEL_API=https://{YourDomain}.zitadel.cloud\nZITADEL_API=https://{YourDomain}.zitadel.cloud\nORG_ID={YourOrgId}\nPROJECT_ID={YourProjectId}\nZITADEL_CLIENT_ID={YourClientID}\nSERVICE_ACCOUNT_ACCESS_TOKEN={YourServiceAccountSecret}\nNEXTAUTH_SECRET=randomsecret\n```\n\nReplace the values as follows\n\n`NEXTAUTH_URL`: Base url of this demo app (B2B portal); runs per default on [http://localhost:3000](http://localhost:3000)\n\n`PUBLIC_NEXT_ZITADEL_API`: The url to your zitadel instance. When using zitadel.cloud for this demo you can find the domain of your ZITADEL instance in the customer portal. You can also find this information by going to your application `portal-web` and click 'Urls' in the navigation. The variable is prefixed with `PUBLIC_NEXT` such that it can be accessed from the client.\n\n`ZITADEL_API`: URL of the Management API. The same as `PUBLIC_NEXT_ZITADEL_API`.\n\n`ORG_ID`: We will create an organization during later steps. You can find `{YourOrgId}` by selecting the `Demo-Vendor` organization in Console. `{YourOrgId}` is displayed on top of the organization detail page as \"Resource Id\".\n\n`PROJECT_ID`: You can find `{YourProjectId}` by clicking on \"Projects\" in the navigation and select the Project `Portal`. `{YourProjectId}` is displayed on the top as \"Resource Id\".\n\n`ZITADEL_CLIENT_ID`: Having the project `Portal` selected, click on the Application `portal-web`. `{YourClientID}` is displayed as a field in the OIDC configuration, labelled \"Client ID\" and has the format `12345678@portal`.\n\n`SERVICE_ACCOUNT_ACCESS_TOKEN`: Setup a service user, add a Personal Access Token and copy the secret here (see below).\n\n## Step 3: Install and Run\n\nTo run this sample locally you need to install dependencies first.\n\nType and execute:\n\n```bash\nyarn install\n```\n\nthen, to run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n```\n\nand open [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\n## Step 4: Create a customer organization\n\n### Customer organization\n\nCreate a new organization in Console. Easiest way is to use the organization dropdown on the top left.\nLet's call this new organization `Demo-Customer`.\n\n### Users\n\nNow switch back to the organization `Demo-Customer` and [create a new user](https://zitadel.com/docs/guides/manage/user/reg-create-user) in this organization.\nLet's call the first user `Alice Admin`. Create a second user called `Eric Employee`.\n\n### Manager Role\n\nWe want to enable Alice to assign roles to users in her organization in a self-service manner.\nTo make this happen, we need give Alice an [Manager Role](https://zitadel.com/docs/concepts/structure/managers) within the Organization `Demo-Customer`.\n\nStill in the organization `Demo-Customer`, navigate to Organization. Click on the plus on the top right and give `Alice Admin` the Manager Role `Org Owner`.\n\nLogin with your user on the customer organization to validate the setup.\n\n## Step 5: Create a project grant\n\n### Organization Grant\n\nSwitch to the `Demo-Vendor` organization, select Projects in the navigation, and click on `Portal` and then `Grants`.\n[Grant all roles of the Project](https://zitadel.com/docs/guides/manage/console/projects#grant-a-project) to the organization `demo-customer.{YourDomain}.zitadel.cloud`.\n\n### Authorization\n\nAs you have guessed, these two users need to be authorized.\nOn the `Demo-Customer` organization, navigate to Projects and select \"Granted Projects\" in the sub-navigation.\nSelect the project portal `Portal` and navigate to \"Authorizations\".\n\nGive `Alice Admin` the roles `reader` and `admin`.\n`Eric Employee` will get only the role `reader`.\n\n### Login\n\nYou should be able to login to the Demo Application with `Alice Admin` and see all granted projects.\n\nYou can log out and log in with `Eric Employee` and you should only have access to the granted projects, but not to the Authorizations tab.\n\n### Deploy to Vercel\n\nTo deploy your own version on Vercel, setup your instance like the description above and provide the variables in the dedicated fields for the environment.\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fzitadel%2Fzitadel-nextjs-b2b\u0026env=NEXTAUTH_SECRET,NEXTAUTH_URL,ORG_ID,PROJECT_ID,SERVICE_ACCOUNT_ACCESS_TOKEN,ZITADEL_API,PUBLIC_NEXT_ZITADEL_API,ZITADEL_CLIENT_ID,ZITADEL_CLIENT_SECRET\u0026project-name=zitadel-b2b\u0026repository-name=zitadel-b2b)\n\n## What next\n\nYou could create another project (eg, `Data Cube`) and grant that project to the customer organization. The granted project should appear after a reload automatically. This gives you an idea of how you could do Service Discovery with ZITADEL.\n\nYou could also build out the code (PRs welcome :wink:) for this application, for example:\n\n- Create a mock `datacube-web` application and show how SSO between the portal and the application works with ZITADEL.\n- Implement a feature in the Authorization tab to assign roles directly from the customer portal.\n- ...\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzitadel%2Fzitadel-nextjs-b2b","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzitadel%2Fzitadel-nextjs-b2b","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzitadel%2Fzitadel-nextjs-b2b/lists"}