single sign on Authentik and Keycloak instructions (#320)

* single sign on Authentik and Keycloak instructions

* feedback updates

src/components/NavigationDocs.jsx

@@ -154,6 +154,11 @@ export const docsNavigation = [
                      href: '/how-to/auto-offboard-users',
                      isOpen: false,
                  },
+                 {
+                     title: 'Single Sign-On',
+                     href: '/how-to/single-sign-on',
+                     isOpen: false,
+                 },
              ]
          },
          {

src/pages/how-to/single-sign-on.mdx

@@ -0,0 +1,127 @@
+# Single Sign On
+
+Please follow the instructions below for your preferred provider. 
+
+## Authentik IdP
+
+1. You need to create a new Application and Provider.
+    - Browse to the Applications Administration menu, click on Application, and then click on Create with Provider:
+
+<p>
+    <img src="/docs-static/img/how-to-guides/single-sign-on/authentik-idp/1-create-with-provider.png" alt="create-with-provider" className="imagewrapper-big"/>
+</p>
+        - Name the Application and select a suitable explicit user flow. In the example below, we used NetBird:
+
+<p>
+    <img src="/docs-static/img/how-to-guides/single-sign-on/authentik-idp/2-new-application.png" alt="new-application" className="imagewrapper-big"/>
+</p>
+
+    - Click Next and select the OAuth2/OpenID Provider Type:
+
+<p>
+    <img src="/docs-static/img/how-to-guides/single-sign-on/authentik-idp/3-new-application-type.png" alt="new-application" className="imagewrapper-big"/>
+</p>
+
+    - Click Next and select an explicit user authorization flow, then take note of the Client ID and Client Secret:
+<p>
+    <img src="/docs-static/img/how-to-guides/single-sign-on/authentik-idp/4-new-application-client-id.png" alt="new-application" className="imagewrapper-big"/>
+</p>
+
+    - Add the following redirect URL and select a signing key: <br/>
+    URL: `https://login.netbird.io/login/callback`
+<p>
+    <img src="/docs-static/img/how-to-guides/single-sign-on/authentik-idp/5-new-application-sign.png" alt="new-application" className="imagewrapper-big"/>
+</p>
+
+    - Click on Advanced protocol settings and ensure that the email, opened, and profile scopes are selected and that Based on the User’s Hash ID is selected for Subject mode:
+
+<p>
+    <img src="/docs-static/img/how-to-guides/single-sign-on/authentik-idp/6-new-application-scopes.png" alt="new-application" className="imagewrapper-big"/>
+</p>
+
+    - Click Next on the following two screens and Submit to create the provider and application:
+
+<p>
+    <img src="/docs-static/img/how-to-guides/single-sign-on/authentik-idp/7-new-application-submit.png" alt="new-application" className="imagewrapper-big"/>
+</p>
+
+    - You should see an application listed as follow:
+
+<p>
+    <img src="/docs-static/img/how-to-guides/single-sign-on/authentik-idp/8-list-applications.png" alt="list-applications" className="imagewrapper-big"/>
+</p>
+
+2. We need to copy the OpenID Configuration URL for the new provider. You can do that by navigating to Providers in the left menu and then selecting the newly created provider. There you should see a windows similar to the following:
+
+<p>
+    <img src="/docs-static/img/how-to-guides/single-sign-on/authentik-idp/9-list-providers.png" alt="list-providers" className="imagewrapper-big"/>
+</p>
+
+    - Copy the OpenID Configuration URL.
+
+
+3. Then, share the following information with the NetBird support team at support@netbird.io:
+
+- Client ID
+- Client Secret
+- OpenID Configuration URL
+- Email domains for your users
+
+<Note>
+We recommend using a secure channel to share the Client’s secret. You can send a separate email and use a secret sharing service like: <br/>
+https://onetimesecret.com/en/ <br/>
+https://password.link/en
+</Note>
+
+## Keycloak IdP
+
+1. You need to create a new client
+
+    - Browse to the clients Administration menu and then click in Create client:
+
+<p>
+    <img src="/docs-static/img/how-to-guides/single-sign-on/keycloak-idp/1-new-client.png" alt="new-client" className="imagewrapper-big"/>
+</p>
+
+2. Create a client with the type OpenID Connect and add any client ID and name for the client:
+
+<p>
+    <img src="/docs-static/img/how-to-guides/single-sign-on/keycloak-idp/2-new-client-type.png" alt="new-client" className="imagewrapper-big"/>
+</p>
+
+3. Click Next and enable the following options for Capability config:
+
+<p>
+    <img src="/docs-static/img/how-to-guides/single-sign-on/keycloak-idp/3-new-client-capability.png" alt="new-client" className="imagewrapper-big"/>
+</p>
+
+4. Click Next and fill the following fields:
+
+    Valid redirect URIs: `https://login.netbird.io/login/callback` <br/>
+    Web origins: `+`
+
+<p>
+    <img src="/docs-static/img/how-to-guides/single-sign-on/keycloak-idp/4-new-client-callback.png" alt="new-client" className="imagewrapper-big"/>
+</p>
+
+5. Click Save.
+
+6. Next we need to retrieve the secret for the client, you can get that in the Credentials tab for the client:
+
+<p>
+    <img src="/docs-static/img/how-to-guides/single-sign-on/keycloak-idp/5-new-client-credentials.png" alt="new-client" className="imagewrapper-big"/>
+</p>
+
+7. Then, share the following information with the NetBird support team at support@netbird.io:
+
+- Client ID
+- Keycloak URL
+- Realm
+- Client Secret
+- Email domains for your users
+
+<Note>
+We recommend using a secure channel to share the Client’s secret. You can send a separate email and use a secret sharing service like: <br/>
+https://onetimesecret.com/en/ <br/>
+https://password.link/en
+</Note>