Configure Identity Providers in the UI

src/app/(dashboard)/settings/page.tsx

@@ -4,6 +4,7 @@ import { RestrictedAccess } from "@components/ui/RestrictedAccess";
 import { VerticalTabs } from "@components/VerticalTabs";
 import {
   AlertOctagonIcon,
+  FingerprintIcon,
   FolderGit2Icon,
   LockIcon,
   MonitorSmartphoneIcon,
@@ -19,6 +20,7 @@ import { useAccount } from "@/modules/account/useAccount";
 import AuthenticationTab from "@/modules/settings/AuthenticationTab";
 import ClientSettingsTab from "@/modules/settings/ClientSettingsTab";
 import DangerZoneTab from "@/modules/settings/DangerZoneTab";
+import IdentityProvidersTab from "@/modules/settings/IdentityProvidersTab";
 import NetworkSettingsTab from "@/modules/settings/NetworkSettingsTab";
 import PermissionsTab from "@/modules/settings/PermissionsTab";
 import GroupsSettings from "@/modules/settings/GroupsSettings";
@@ -53,6 +55,12 @@ export default function NetBirdSettings() {
                 <ShieldIcon size={14} />
                 Authentication
               </VerticalTabs.Trigger>
+              {account?.settings?.embedded_idp_enabled && (
+                <VerticalTabs.Trigger value="identity-providers">
+                  <FingerprintIcon size={14} />
+                  Identity Providers
+                </VerticalTabs.Trigger>
+              )}
               <VerticalTabs.Trigger value="groups">
                 <FolderGit2Icon size={14} />
                 Groups
@@ -80,6 +88,7 @@ export default function NetBirdSettings() {
         >
           <div className={"border-l border-nb-gray-930 w-full"}>
             {account && <AuthenticationTab account={account} />}
+            {account?.settings?.embedded_idp_enabled && <IdentityProvidersTab />}
             {account && <PermissionsTab account={account} />}
             {account && <GroupsSettings account={account} />}
             {account && <NetworkSettingsTab account={account} />}

src/app/setup/layout.tsx

@@ -0,0 +1,8 @@
+import { globalMetaTitle } from "@utils/meta";
+import type { Metadata } from "next";
+import BlankLayout from "@/layouts/BlankLayout";
+
+export const metadata: Metadata = {
+  title: `Instance Setup - ${globalMetaTitle}`,
+};
+export default BlankLayout;

src/app/setup/page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import InstanceSetupWizard from "@/modules/instance-setup/InstanceSetupWizard";
+
+export default function SetupPage() {
+  return <InstanceSetupWizard />;
+}

src/assets/icons/MicrosoftIcon.tsx

@@ -0,0 +1,16 @@
+import { iconProperties, IconProps } from "@/assets/icons/IconProperties";
+
+export default function MicrosoftIcon(props: Readonly<IconProps>) {
+  return (
+    <svg
+      viewBox="0 0 221 221"
+      xmlns="http://www.w3.org/2000/svg"
+      {...iconProperties(props)}
+    >
+      <path fill="#F1511B" d="M104.868 104.868H0V0h104.868z" />
+      <path fill="#80CC28" d="M220.654 104.868H115.788V0h104.866z" />
+      <path fill="#00ADEF" d="M104.865 220.695H0V115.828h104.865z" />
+      <path fill="#FBBC09" d="M220.654 220.695H115.788V115.828h104.866z" />
+    </svg>
+  );
+}

src/assets/icons/PocketIdIcon.tsx

@@ -0,0 +1,17 @@
+import { iconProperties, IconProps } from "@/assets/icons/IconProperties";
+
+export default function PocketIdIcon(props: Readonly<IconProps>) {
+  return (
+    <svg
+      viewBox="0 0 512 512"
+      xmlns="http://www.w3.org/2000/svg"
+      {...iconProperties(props)}
+    >
+      <circle cx="256" cy="256" r="256" fill="#fff" />
+      <path
+        d="M268.6 102.4c64.4 0 116.8 52.4 116.8 116.7 0 25.3-8 49.4-23 69.6-14.8 19.9-35 34.3-58.4 41.7l-6.5 2-15.5-76.2 4.3-2c14-6.7 23-21.1 23-36.6 0-22.4-18.2-40.6-40.6-40.6S228 195.2 228 217.6c0 15.5 9 29.8 23 36.6l4.2 2-25 153.4h-69.5V102.4z"
+        fill="#191919"
+      />
+    </svg>
+  );
+}

src/assets/icons/ZitadelIcon.tsx

@@ -0,0 +1,32 @@
+import { iconProperties, IconProps } from "@/assets/icons/IconProperties";
+
+export default function ZitadelIcon(props: Readonly<IconProps>) {
+  return (
+    <svg
+      viewBox="0 0 80 79"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...iconProperties(props)}
+    >
+      <defs>
+        <linearGradient
+          id="zitadel-grad"
+          x1="3.86"
+          x2="76.88"
+          y1="47.89"
+          y2="47.89"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#FF8F00" />
+          <stop offset="1" stopColor="#FE00FF" />
+        </linearGradient>
+      </defs>
+      <path
+        fill="url(#zitadel-grad)"
+        fillRule="evenodd"
+        d="M17.12 39.17l1.42 5.32-6.68 6.68 9.12 2.44 1.43 5.32-19.77-5.3L17.12 39.17zM58.82 22.41l-5.32-1.43-2.44-9.12-6.68 6.68-5.32-1.43 14.47-14.47 5.3 19.77zM52.65 67.11l3.89-3.89 9.12 2.44-2.44-9.12 3.9-3.9 5.29 19.77-19.76-5.3zM36.43 69.54l-1.18-12.07 8.23 2.21-7.05 9.86zM23 23.84l5.02 11.04 6.02-6.02L23 23.84zM69.32 36.2l-12.07-1.18 2.2 8.23 9.87-7.05z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}

src/auth/OIDCProvider.tsx

@@ -105,7 +105,8 @@ export default function OIDCProvider({ children }: Props) {
 
   // We bypass authentication for pages that do not require auth.
   // E.g., when we just want to show installation steps for public.
-  if (path === "/install") return children;
+  // Or the instance setup wizard for first-time setup.
+  if (path === "/install" || path === "/setup") return children;
 
   return mounted && providerConfig ? (
     <OidcProvider

src/components/Input.tsx

@@ -2,8 +2,9 @@ import FullTooltip from "@components/FullTooltip";
 import Paragraph from "@components/Paragraph";
 import { cn } from "@utils/helpers";
 import { cva, VariantProps } from "class-variance-authority";
-import { AlertCircle } from "lucide-react";
+import { AlertCircle, Eye, EyeOff } from "lucide-react";
 import * as React from "react";
+import { useState } from "react";
 
 type InputVariants = VariantProps<typeof inputVariants>;
 
@@ -18,6 +19,7 @@ export interface InputProps
   errorTooltip?: boolean;
   errorTooltipPosition?: "top" | "top-right";
   prefixClassName?: string;
+  showPasswordToggle?: boolean;
 }
 
 const inputVariants = cva("", {
@@ -61,10 +63,29 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       errorTooltipPosition = "top",
       variant = "default",
       prefixClassName,
+      showPasswordToggle = false,
       ...props
     },
     ref,
   ) => {
+    const [showPassword, setShowPassword] = useState(false);
+    const isPasswordType = type === "password";
+    const inputType = isPasswordType && showPassword ? "text" : type;
+
+    const passwordToggle =
+      isPasswordType && showPasswordToggle ? (
+        <button
+          type="button"
+          onClick={() => setShowPassword(!showPassword)}
+          className={"hover:text-white transition-all"}
+          aria-label={"Toggle password visibility"}
+        >
+          {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+        </button>
+      ) : null;
+
+    const suffix = passwordToggle || customSuffix;
+
     return (
       <>
         <div className={cn("flex relative h-[42px]", maxWidthClass)}>
@@ -94,7 +115,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           </div>
 
           <input
-            type={type}
+            type={inputType}
             ref={ref}
             {...props}
             className={cn(
@@ -103,7 +124,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
               "file:border-0",
               "focus-visible:ring-2 focus-visible:ring-offset-2",
               customPrefix && "!border-l-0 !rounded-l-none",
-              customSuffix && "!pr-16",
+              suffix && "!pr-16",
               icon && "!pl-10",
               "border",
               className,
@@ -116,7 +137,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
               props.disabled && "opacity-30",
             )}
           >
-            {customSuffix}
+            {suffix}
           </div>
           {error && errorTooltip && (
             <div

src/contexts/InstanceSetupProvider.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { usePathname, useRouter } from "next/navigation";
+import React, { createContext, useContext, useEffect, useState } from "react";
+import FullScreenLoading from "@/components/ui/FullScreenLoading";
+import { fetchInstanceStatus } from "@/utils/unauthenticatedApi";
+import { isNetBirdHosted } from "@utils/netbird";
+
+interface InstanceSetupContextType {
+  setupRequired: boolean;
+  loading: boolean;
+}
+
+const InstanceSetupContext = createContext<InstanceSetupContextType>({
+  setupRequired: false,
+  loading: true,
+});
+
+export const useInstanceSetup = () => useContext(InstanceSetupContext);
+
+// Check if we're in an OIDC callback flow (hash-based routing)
+const isOIDCCallback = () => {
+  if (typeof window === "undefined") return false;
+  const hash = window.location.hash;
+  return hash.startsWith("#callback") || hash.startsWith("#silent-callback");
+};
+
+export default function InstanceSetupProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [setupRequired, setSetupRequired] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const router = useRouter();
+  const pathname = usePathname();
+
+  // Routes that don't need setup check
+  const bypassRoutes = ["/setup", "/install"];
+  const shouldBypass =
+    bypassRoutes.includes(pathname) || isOIDCCallback();
+
+  // Skip setup check for NetBird hosted (cloud) deployments
+  const isCloud = isNetBirdHosted();
+
+  // Check instance status on mount
+  useEffect(() => {
+    // Skip check for cloud deployments or bypass routes
+    if (isCloud || shouldBypass) {
+      setLoading(false);
+      return;
+    }
+
+    // Check if instance setup is required
+    fetchInstanceStatus()
+      .then((status) => {
+        if (status.setup_required) {
+          setSetupRequired(true);
+        }
+      })
+      .catch((err) => {
+        // If API fails (e.g., endpoint doesn't exist on older versions),
+        // assume setup is not required and continue normally
+        console.warn("Instance status check failed:", err);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, [shouldBypass, isCloud]);
+
+  // Handle redirect separately to avoid setState during render conflicts
+  useEffect(() => {
+    if (setupRequired && !shouldBypass) {
+      router.replace("/setup");
+    }
+  }, [setupRequired, shouldBypass, router]);
+
+  // Show loading while checking (only for non-cloud, non-bypass routes)
+  if (loading && !shouldBypass && !isCloud) {
+    return <FullScreenLoading />;
+  }
+
+  // If setup required and not on setup page, wait for redirect
+  if (setupRequired && !shouldBypass) {
+    return <FullScreenLoading />;
+  }
+
+  return (
+    <InstanceSetupContext.Provider value={{ setupRequired, loading }}>
+      {children}
+    </InstanceSetupContext.Provider>
+  );
+}

src/interfaces/Account.ts

@@ -22,6 +22,7 @@ export interface Account {
     dns_domain: string;
     network_range?: string;
     lazy_connection_enabled: boolean;
+    embedded_idp_enabled?: boolean;
     auto_update_version: string;
   };
   onboarding?: AccountOnboarding;

src/interfaces/IdentityProvider.ts

@@ -30,3 +30,29 @@ export interface IdentityProviderLog {
   level: string;
   timestamp: Date;
 }
+
+export type SSOIdentityProviderType =
+  | "oidc"
+  | "zitadel"
+  | "entra"
+  | "google"
+  | "okta"
+  | "pocketid"
+  | "microsoft";
+
+export interface SSOIdentityProvider {
+  id: string;
+  type: SSOIdentityProviderType;
+  name: string;
+  issuer: string;
+  client_id: string;
+  redirect_url?: string;
+}
+
+export interface SSOIdentityProviderRequest {
+  type: SSOIdentityProviderType;
+  name: string;
+  issuer: string;
+  client_id: string;
+  client_secret: string;
+}

src/interfaces/Instance.ts

@@ -0,0 +1,19 @@
+export interface InstanceStatus {
+  setup_required: boolean;
+}
+
+export interface SetupRequest {
+  email: string;
+  password: string;
+  name: string;
+}
+
+export interface SetupResponse {
+  user_id: string;
+  email: string;
+}
+
+export interface ApiError {
+  code: number;
+  message: string;
+}

src/interfaces/User.ts

@@ -13,6 +13,8 @@ export interface User {
   pending_approval?: boolean;
   last_login?: Date;
   permissions: Permissions;
+  password?: string;
+  idp_id?: string;
 }
 
 export enum Role {

src/layouts/AppLayout.tsx

@@ -18,6 +18,7 @@ import AnalyticsProvider, {
 import DialogProvider from "@/contexts/DialogProvider";
 import ErrorBoundaryProvider from "@/contexts/ErrorBoundary";
 import { GlobalThemeProvider } from "@/contexts/GlobalThemeProvider";
+import InstanceSetupProvider from "@/contexts/InstanceSetupProvider";
 import { NavigationEvents } from "@/contexts/NavigationEvents";
 
 const inter = localFont({
@@ -47,11 +48,13 @@ export default function AppLayout({
             <DialogProvider>
               <GlobalThemeProvider>
                 <ErrorBoundaryProvider>
-                  <OIDCProvider>
-                    <TooltipProvider delayDuration={0}>
-                      {children}
-                    </TooltipProvider>
-                  </OIDCProvider>
+                  <InstanceSetupProvider>
+                    <OIDCProvider>
+                      <TooltipProvider delayDuration={0}>
+                        {children}
+                      </TooltipProvider>
+                    </OIDCProvider>
+                  </InstanceSetupProvider>
                 </ErrorBoundaryProvider>
               </GlobalThemeProvider>
             </DialogProvider>