mirror of
https://github.com/netbirdio/docs.git
synced 2026-08-24 16:51:26 +02:00
Make sidebar nav groups with landing pages collapsible and fix mobile drawer closing on expand (#786)
* Add collapsible nav groups and delete old /docs dir * coderabbit fixes: auto-open effect, stable key, push guard
This commit is contained in:
Brandon Hopkins
@@ -1,153 +0,0 @@
|
||||
---
|
||||
id: using-netbird-with-azure-ad
|
||||
title: Using NetBird with Azure AD
|
||||
sidebar_position: 4
|
||||
tags:
|
||||
- integrations
|
||||
- idp
|
||||
- azure
|
||||
- oidc
|
||||
- how-to
|
||||
---
|
||||
|
||||
This guide is a part of the [NetBird Self-hosting Guide](/getting-started/self-hosting) and explains how to integrate **self-hosted** NetBird with [Azure AD](https://azure.microsoft.com/en-us/products/active-directory/).
|
||||
|
||||
Azure AD is a an enterprise identity service that provides single sign-on and multifactor authentication to your applications.
|
||||
It is a 3rd party managed service and can't be self-hosted.
|
||||
|
||||
:::tip self-hosted idp
|
||||
If you prefer to have full control over authentication and authorization of your NetBird network, there are good
|
||||
self-hosted alternatives to the managed Auth0 service like [Keycloak](/integrations/identity-providers/self-hosted/using-netbird-with-keycloak).
|
||||
:::
|
||||
|
||||
Before you start creating and configuring an Azure AD application, ensure that you have the following:
|
||||
- An Azure account: To create an Azure AD application, you must have an Azure account. If you don't have one, sign up for a free account at https://azure.microsoft.com/free/.
|
||||
|
||||
- User account with appropriate permissions: You must have an Azure AD user account with the appropriate permissions to create and manage Azure AD applications. If you don't have the required permissions, ask your Azure AD administrator to grant them to you.
|
||||
|
||||
|
||||
### 1. Create and configure Azure AD application
|
||||
In this step, we will create and configure Netbird application in azure AD.
|
||||
- Navigate to [Azure Active Directory](https://portal.azure.com/#view/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/~/Overview)
|
||||
- Click `App Registrations` in the left menu then click on the `+ New registration` button to create a new application.
|
||||
- Fill in the form with the following values and click Register
|
||||
- Name: `Netbird`
|
||||
- Account Types: `Accounts in this organizational directory only (Default Directory only - Single tenant)`
|
||||
- Redirect URI: select `Single-page application (SPA)` and URI as `https://<yournetbirddomain.com>/silent-auth`
|
||||
|
||||
|
||||
|
||||
### 2. Platform configurations
|
||||
- Click `Authentication` on the left side menu
|
||||
- Under the `Single-page application` Section, add another URI `https://<yournetbirddomain.com>/auth`
|
||||
|
||||
|
||||
- Scroll down and setup other options as on the screenshot below and click Save
|
||||
|
||||
|
||||
|
||||
### 3. Create a NetBird application scope
|
||||
- Click `Expose an API` on the left menu
|
||||
- Under `Application ID URI` click `Set` and then `Save`
|
||||
- Click `+ Add a Scope`
|
||||
- Fill in the form with the following values and click `Add scope`
|
||||
- Scope name: `api`
|
||||
|
||||
|
||||
|
||||
- Under `Authorized client Applications`, click on `+ add a client application` and enter the following:
|
||||
- Fill in the form with the following values and click `Add application`
|
||||
- Client ID: same as your Application ID URI minus the `api://`
|
||||
|
||||
|
||||
|
||||
|
||||
### 4. Add API permissions
|
||||
- Add `Netbird` permissions
|
||||
- Click `API permissions` on the left menu
|
||||
- Click `Add a permission`
|
||||
- Click `My APIs` tab, and select `Netbird`. Next check `api` permission checkbox and click `Add permissions`.
|
||||
|
||||
|
||||
|
||||
- Add `Delagated permissions` to Microsoft Graph
|
||||
- Click `Add a permission`
|
||||
- Click `Microsoft Graph` and then click `Delagated permissions` tab and check all permissions under the `OpenId permissions` section and click `Add permissions`
|
||||
|
||||
|
||||
|
||||
|
||||
- Add `Application permissions` to Microsoft Graph
|
||||
- Click `Add a permission`
|
||||
- Click `Microsoft Graph` and then click `Application permissions` tab
|
||||
- Search for `User.ReadWrite.All` and under `User` sections and check `User.ReadWrite.All` checkbox section
|
||||
|
||||
|
||||
|
||||
- Search for `Application.ReadWrite.All` and under `Application` sections and check `Application.ReadWrite.All` checkbox section and click `Add permissions`
|
||||
|
||||
|
||||
|
||||
- Click `Grant admin conset for Default Directory` and click `Yes`
|
||||
|
||||
|
||||
|
||||
### 4. Update token version
|
||||
- Click `Manifest` on left menu
|
||||
- Search for `requestedAccessTokenVersion` and change the value from `null` to `2`
|
||||
- Click `Save`
|
||||
|
||||
### 5. Generate client secret
|
||||
- Click `Certificates & secrets` on left menu
|
||||
- Click `New client secret`
|
||||
- Fill in the form with the following values and click `Add`
|
||||
- Description: `Netbird`
|
||||
- Copy `Value` and save it as it can be viewed only once after creation.
|
||||
|
||||
|
||||
|
||||
Your authority OIDC configuration will be available under:
|
||||
```
|
||||
https://login.microsoftonline.com/<tenant_id>/v2.0/.well-known/openid-configuration
|
||||
```
|
||||
:::caution
|
||||
Double-check if the endpoint returns a JSON response by calling it from your browser.
|
||||
:::
|
||||
|
||||
- Set properties in the `setup.env` file:
|
||||
```json
|
||||
NETBIRD_AUTH_OIDC_CONFIGURATION_ENDPOINT="https://login.microsoftonline.com/<tenant_id>/v2.0/.well-known/openid-configuration"
|
||||
NETBIRD_USE_AUTH0=false
|
||||
NETBIRD_AUTH_CLIENT_ID="<application_id>"
|
||||
NETBIRD_AUTH_AUDIENCE="<application_id>"
|
||||
NETBIRD_AUTH_DEVICE_AUTH_CLIENT_ID="<application_id>"
|
||||
NETBIRD_AUTH_REDIRECT_URI="/auth"
|
||||
NETBIRD_AUTH_SILENT_REDIRECT_URI="/silent-auth"
|
||||
NETBIRD_AUTH_USER_ID_CLAIM="oid"
|
||||
```
|
||||
|
||||
- You can now continue with the [NetBird Self-hosting Guide](/getting-started/self-hosting#step-3-configure-identity-provider).
|
||||
|
||||
- Set property `IdpManagerConfig` in the `management.json` file with:
|
||||
:::caution
|
||||
The file management.json is created automatically. Please refer [here](/getting-started/self-hosting#step-5-run-configuration-script) for more information.
|
||||
:::
|
||||
|
||||
```json
|
||||
{
|
||||
"ManagerType": "azure",
|
||||
"AzureClientCredentials": {
|
||||
"ClientID": "<application_id>",
|
||||
"ClientSecret": "<client_secret>",
|
||||
"GrantType": "client_credentials",
|
||||
"ObjectID": "<object_id>",
|
||||
"TokenEndpoint": "https://login.microsoftonline.com/<tenant_id>/oauth2/v2.0/token",
|
||||
"GraphAPIEndpoint": "https://graph.microsoft.com/v1.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
- Modify the value of the `AUTH_SUPPORTED_SCOPES` environment variable for the dashboard service in the docker-compose.yml file to `openid profile email offline_access api://<application_id>/api`.
|
||||
|
||||
- Modify `Scope` value in `DeviceAuthorizationFlow` within the `management.json` to `api://<application_id>/api`.
|
||||
|
||||
@@ -1,163 +0,0 @@
|
||||
---
|
||||
id: using-netbird-with-zitadel
|
||||
title: Using NetBird with Zitadel
|
||||
sidebar_position: 5
|
||||
tags:
|
||||
- integrations
|
||||
- idp
|
||||
- zitadel
|
||||
- oidc
|
||||
- how-to
|
||||
---
|
||||
|
||||
This guide is a part of the [NetBird Self-hosting Guide](/getting-started/self-hosting) and explains how to integrate
|
||||
**self-hosted** NetBird with [Zitadel](https://zitadel.com).
|
||||
|
||||
:::tip managed idp
|
||||
If you prefer not to self-host an Identity and Access Management solution, then you could use a managed alternative like
|
||||
[Auth0](/integrations/identity-providers/self-hosted/using-netbird-with-auth0).
|
||||
:::
|
||||
|
||||
### 1. Create and configure Zitadel application
|
||||
In this step, we will create and configure Netbird application in zitadel.
|
||||
|
||||
Create new zitadel project
|
||||
- Navigate to zitadel console
|
||||
- Click `Projects` at the top menu, then click `Create New Project` to create a new project
|
||||
- Fill in the form with the following values and click `Continue`
|
||||
- Name: `NETBIRD`
|
||||
|
||||
|
||||
|
||||
Create new zitadel application
|
||||
- Click `Projects` in the top menu and select `NETBIRD` project from the list
|
||||
- Click `New` in `APPLICATIONS` section to create a new application
|
||||
- Fill in the form with the following values and click `Continue`
|
||||
- Name: `netbird`
|
||||
- TYPE OF APPLICATION: `User Agent`
|
||||
|
||||
|
||||
|
||||
- Fill in the form with the following values and click `Continue`
|
||||
- Authentication Method: `PKCE`
|
||||
|
||||
|
||||
|
||||
- Fill in the form with the following values and click `Continue`
|
||||
- Redirect URIs: `https://<domain>/auth` and click `+`
|
||||
- Post Logout URIs: `https://<domain>/silent-auth` and click `+`
|
||||
|
||||
|
||||
|
||||
- Verify applications details and Click `Create` and then click `Close`
|
||||
- Check `Refresh Token` checkbox and click `Save`
|
||||
|
||||
|
||||
|
||||
- Copy `Client ID` will be used later in the `setup.env`
|
||||
|
||||
### Step 2: Application Token Configuration
|
||||
|
||||
To configure `netbird` application token you need to:
|
||||
|
||||
- Click `Projects` in the top menu and select `NETBIRD` project from the list
|
||||
- Select `netbird` application from `APPLICATIONS` section
|
||||
- Click `Token Settings` in the left menu
|
||||
- Fill in the form with the following values:
|
||||
- Auth Token Type: `JWT`
|
||||
- Check `Add user roles to the access token` checkbox
|
||||
- Click `Save`
|
||||
|
||||
|
||||
|
||||
### Step 3: Application Redirect Configuration
|
||||
|
||||
:::caution
|
||||
This step is intended for setup running in development mode with no SSL
|
||||
:::
|
||||
|
||||
To configure `netbird` application redirect you need to:
|
||||
|
||||
- Click `Projects` in the top menu and select `NETBIRD` project from the list
|
||||
- Select `netbird` application from `APPLICATIONS` section
|
||||
- Click `Redirect Settings` in the left menu
|
||||
- Fill in the form with the following values:
|
||||
- Toggle `Development Mode`
|
||||
- Click `Save`
|
||||
|
||||
|
||||
|
||||
### Step 4: Create a Service User
|
||||
|
||||
In this step we will create a `netbird` service user.
|
||||
|
||||
- Click `Users` in the top menu
|
||||
- Select `Service Users` tab
|
||||
- Click `New`
|
||||
- Fill in the form with the following values:
|
||||
- User Name: `netbird`
|
||||
- Name: `netbird`
|
||||
- Description: `Netbird Service User`
|
||||
- Access Token Type: `JWT`
|
||||
- Click `Create`
|
||||
|
||||
|
||||
|
||||
In this step we will generate `ClientSecret` for the `netbird` service user.
|
||||
|
||||
- Click `Actions` in the top right corner and click `Generate Client Secret`
|
||||
- Copy `ClientSecret` from the dialog will be used later to set `ClientSecret` in the `management.json`
|
||||
|
||||
|
||||
|
||||
### Step 5: Grant manage-users role to netbird service user
|
||||
|
||||
In this step we will grant `Org User Manager` role to `netbird` service user.
|
||||
|
||||
- Click `Organization` in the top menu
|
||||
- Click `+` in the top right corner
|
||||
- Search for `netbird` service user
|
||||
- Check `Org User Manager` checkbox
|
||||
- Click `Add`
|
||||
|
||||
|
||||
|
||||
|
||||
Your authority OIDC configuration will be available under:
|
||||
```
|
||||
https://<YOUR-ZITADEL-HOST-AND-PORT>/.well-known/openid-configuration
|
||||
```
|
||||
:::caution
|
||||
Double-check if the endpoint returns a JSON response by calling it from your browser.
|
||||
:::
|
||||
|
||||
- Set properties in the `setup.env` file:
|
||||
```json
|
||||
NETBIRD_AUTH_OIDC_CONFIGURATION_ENDPOINT="https://<YOUR-ZITADEL-HOST-AND-PORT>/.well-known/openid-configuration"
|
||||
NETBIRD_USE_AUTH0=false
|
||||
NETBIRD_AUTH_CLIENT_ID="<Client ID>"
|
||||
NETBIRD_AUTH_AUDIENCE="<Client ID>"
|
||||
NETBIRD_AUTH_DEVICE_AUTH_CLIENT_ID="<Client ID>"
|
||||
NETBIRD_AUTH_REDIRECT_URI="/auth"
|
||||
NETBIRD_AUTH_SILENT_REDIRECT_URI="/silent-auth"
|
||||
```
|
||||
|
||||
- You can now continue with the [NetBird Self-hosting Guide](/getting-started/self-hosting#step-3-configure-identity-provider).
|
||||
|
||||
- Set property `IdpManagerConfig` in the `management.json` file with:
|
||||
:::caution
|
||||
The file management.json is created automatically. Please refer [here](/getting-started/self-hosting#step-5-run-configuration-script) for more information.
|
||||
:::
|
||||
|
||||
```json
|
||||
{
|
||||
"ManagerType": "zitadel",
|
||||
"ZitadelClientCredentials": {
|
||||
"ClientID": "netbird",
|
||||
"ClientSecret": "<CLIENT SECRET>",
|
||||
"GrantType": "client_credentials",
|
||||
"TokenEndpoint": "https://<YOUR-ZITADEL-HOST-AND-PORT>/oauth/v2/token",
|
||||
"ManagementEndpoint": "https://<YOUR-ZITADEL-HOST-AND-PORT>/management/v1"
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -8,12 +8,13 @@ import {
|
||||
} from '@/components/NavigationAPI'
|
||||
import { AnimatePresence, motion } from 'framer-motion'
|
||||
import { Button } from '@/components/mdx'
|
||||
import { useState } from 'react'
|
||||
import { useEffect, useState } from 'react'
|
||||
import {
|
||||
NavigationStateProvider,
|
||||
useNavigationState,
|
||||
} from '@/components/NavigationState'
|
||||
import ChevronDownIcon from '@/components/icons/ChevronDownIcon'
|
||||
import { useIsInsideMobileNavigation } from '@/components/MobileNavigation'
|
||||
|
||||
export const docsNavigation = [
|
||||
{
|
||||
@@ -51,7 +52,7 @@ export const docsNavigation = [
|
||||
{ title: 'Quickstart Guide', href: '/get-started' },
|
||||
{
|
||||
title: 'Install NetBird',
|
||||
isOpen: true,
|
||||
isOpen: false,
|
||||
href: '/get-started/install',
|
||||
links: [
|
||||
{ title: 'Linux', href: '/get-started/install/linux' },
|
||||
@@ -951,11 +952,17 @@ const findActiveGroupIndex = (group, pathname) => {
|
||||
|
||||
function NavigationGroup({ group, className, hasChildren }) {
|
||||
let router = useRouter()
|
||||
let isActiveGroup = findActiveGroupIndex(group, router.pathname) !== -1
|
||||
let isActiveGroup =
|
||||
group.href === router.pathname ||
|
||||
findActiveGroupIndex(group, router.pathname) !== -1
|
||||
const [isOpen, setIsOpen] = useState(
|
||||
group.isOpen ? group.isOpen : !hasChildren
|
||||
(group.isOpen ?? !hasChildren) || isActiveGroup
|
||||
)
|
||||
useEffect(() => {
|
||||
if (isActiveGroup) setIsOpen(true)
|
||||
}, [router.pathname, isActiveGroup])
|
||||
const [, setActiveHighlight] = useNavigationState()
|
||||
const isInsideMobileNavigation = useIsInsideMobileNavigation()
|
||||
|
||||
return (
|
||||
<li className={clsx('relative', className, hasChildren ? '' : 'mt-6')}>
|
||||
@@ -965,12 +972,19 @@ function NavigationGroup({ group, className, hasChildren }) {
|
||||
'group flex items-center justify-between gap-2',
|
||||
hasChildren
|
||||
? 'cursor-pointer select-none py-1 pr-3 text-sm font-medium text-zinc-700 hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-white'
|
||||
: 'text-xs font-semibold text-zinc-900 dark:text-white'
|
||||
: 'text-xs font-semibold text-zinc-900 dark:text-white',
|
||||
group.href === router.pathname && 'text-zinc-900 dark:text-white'
|
||||
)}
|
||||
onClick={() => {
|
||||
if (group.href) {
|
||||
if (!isOpen) setIsOpen(true)
|
||||
if (group.href !== router.pathname) router.push(group.href)
|
||||
setActiveHighlight()
|
||||
return
|
||||
}
|
||||
setIsOpen(!isOpen)
|
||||
if (!isOpen) {
|
||||
if (!isActiveGroup && group.links[0]?.href)
|
||||
if (!isActiveGroup && !isInsideMobileNavigation && group.links[0]?.href)
|
||||
router.push(group.links[0].href)
|
||||
setActiveHighlight()
|
||||
} else {
|
||||
@@ -982,14 +996,28 @@ function NavigationGroup({ group, className, hasChildren }) {
|
||||
>
|
||||
{group.title}
|
||||
{hasChildren && (
|
||||
<ChevronDownIcon
|
||||
className={clsx(
|
||||
'fill-zinc-700 group-hover:fill-zinc-900 dark:fill-zinc-300 dark:group-hover:fill-white',
|
||||
'transition',
|
||||
isOpen ? 'rotate-180 transform' : ''
|
||||
)}
|
||||
size={10}
|
||||
/>
|
||||
<span
|
||||
className="-m-1 flex items-center justify-center p-1"
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
setIsOpen(!isOpen)
|
||||
if (isOpen) {
|
||||
setActiveHighlight(group.title)
|
||||
} else {
|
||||
setActiveHighlight()
|
||||
}
|
||||
}}
|
||||
>
|
||||
<ChevronDownIcon
|
||||
className={clsx(
|
||||
'fill-zinc-700 group-hover:fill-zinc-900 dark:fill-zinc-300 dark:group-hover:fill-white',
|
||||
'transition',
|
||||
isOpen ? 'rotate-180 transform' : ''
|
||||
)}
|
||||
size={10}
|
||||
/>
|
||||
</span>
|
||||
)}
|
||||
</motion.h2>
|
||||
<div className={clsx('relative', hasChildren ? '' : 'mt-3 pl-2')}>
|
||||
@@ -1031,23 +1059,22 @@ function NavigationGroup({ group, className, hasChildren }) {
|
||||
className="border-l border-transparent"
|
||||
>
|
||||
{group.links.map((link) => {
|
||||
return link.href ? (
|
||||
return link.links ? (
|
||||
<NavigationGroup
|
||||
className={'ml-4'}
|
||||
key={link.title}
|
||||
group={link}
|
||||
hasChildren={true}
|
||||
/>
|
||||
) : (
|
||||
<motion.li key={link.href} className="relative">
|
||||
<NavLink
|
||||
href={link.href}
|
||||
active={link.href === router.pathname}
|
||||
links={link.links}
|
||||
>
|
||||
{link.title}
|
||||
</NavLink>
|
||||
</motion.li>
|
||||
) : (
|
||||
<NavigationGroup
|
||||
className={'ml-4'}
|
||||
key={link.title + isOpen}
|
||||
group={link}
|
||||
hasChildren={true}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</motion.ul>
|
||||
|
||||
Reference in New Issue
Block a user