feat: handle providerId in a generic way (#109)

* refactor: repalce from next public env var to OIDC_PROVIDER_ID

* feat: pass providerId from server component to signin page

* fix: show okta icon only for okta provider id

* test: ensure the providerName format

Author: peppescg

.env.example

@@ -16,8 +16,7 @@ OIDC_CLIENT_ID=
 OIDC_CLIENT_SECRET=
 
 # OIDC Provider identifier (e.g., "okta", "auth0", "oidc")
-# Must use NEXT_PUBLIC_ prefix (required for both server and client)
-NEXT_PUBLIC_OIDC_PROVIDER_ID=
+OIDC_PROVIDER_ID=
 
 # Better Auth Configuration
 # Secret key for token encryption (generate with: openssl rand -base64 32)
@@ -49,6 +48,6 @@ API_BASE_URL=
 # OIDC_ISSUER_URL=http://localhost:3001
 # OIDC_CLIENT_ID=web-client
 # OIDC_CLIENT_SECRET=web-secret
-# NEXT_PUBLIC_OIDC_PROVIDER_ID=oidc
+# OIDC_PROVIDER_ID=oidc
 # BETTER_AUTH_URL=http://localhost:3000
 # API_BASE_URL=http://localhost:9090

AGENTS.md

@@ -330,7 +330,7 @@ pnpm generate-client  # Fetch swagger.json and regenerate
   - `OIDC_ISSUER_URL` - OIDC provider URL
   - `OIDC_CLIENT_ID` - OAuth2 client ID
   - `OIDC_CLIENT_SECRET` - OAuth2 client secret
-  - `NEXT_PUBLIC_OIDC_PROVIDER_ID` - Provider identifier (e.g., "okta", "oidc") - **Required**, must use `NEXT_PUBLIC_` prefix. Not sensitive data - it's just an identifier.
+  - `OIDC_PROVIDER_ID` - Provider identifier (e.g., "okta", "oidc") - **Required**, server-side only.
   - `BETTER_AUTH_URL` - Application base URL
   - `BETTER_AUTH_SECRET` - Secret for token encryption
 

CLAUDE.md

@@ -279,7 +279,7 @@ git push origin v0.x.x
   - `OIDC_ISSUER_URL` - OIDC provider URL
   - `OIDC_CLIENT_ID` - OAuth2 client ID
   - `OIDC_CLIENT_SECRET` - OAuth2 client secret
-  - `NEXT_PUBLIC_OIDC_PROVIDER_ID` - Provider identifier (e.g., "okta", "oidc") - Required, must use `NEXT_PUBLIC_` prefix. Not sensitive data - it's just an identifier.
+  - `OIDC_PROVIDER_ID` - Provider identifier (e.g., "okta", "oidc") - Required, server-side only.
   - `BETTER_AUTH_URL` - Application base URL
   - `BETTER_AUTH_SECRET` - Secret for token encryption
 

README.md

@@ -220,7 +220,7 @@ pnpm dev:mock-server
 OIDC_ISSUER_URL=https://your-oidc-provider.com
 OIDC_CLIENT_ID=your-client-id
 OIDC_CLIENT_SECRET=your-client-secret
-NEXT_PUBLIC_OIDC_PROVIDER_ID=okta  # or your provider
+OIDC_PROVIDER_ID=okta  # or your provider
 BETTER_AUTH_SECRET=your-secret
 BETTER_AUTH_URL=http://localhost:3000
 ```
@@ -248,7 +248,7 @@ pnpm dev:next
 OIDC_ISSUER_URL=https://your-oidc-provider.com
 OIDC_CLIENT_ID=your-client-id
 OIDC_CLIENT_SECRET=your-client-secret
-NEXT_PUBLIC_OIDC_PROVIDER_ID=okta
+OIDC_PROVIDER_ID=okta
 
 # Real backend API
 API_BASE_URL=https://your-backend-api.com
@@ -302,15 +302,15 @@ See [`docs/mocks.md`](./docs/mocks.md) for details.
 
 ### Required for Production
 
-| Variable                       | Description                  | Example                                 |
-| ------------------------------ | ---------------------------- | --------------------------------------- |
-| `OIDC_ISSUER_URL`              | OIDC provider's issuer URL   | `https://auth.example.com`              |
-| `OIDC_CLIENT_ID`               | OAuth2 client ID             | `your-client-id`                        |
-| `OIDC_CLIENT_SECRET`           | OAuth2 client secret         | `your-client-secret`                    |
-| `NEXT_PUBLIC_OIDC_PROVIDER_ID` | Provider identifier (public) | `okta`, `auth0`, `oidc`                 |
-| `BETTER_AUTH_SECRET`           | Secret for token encryption  | Generate with `openssl rand -base64 32` |
-| `BETTER_AUTH_URL`              | Application base URL         | `https://your-app.example.com`          |
-| `API_BASE_URL`                 | Backend API URL              | `https://api.example.com`               |
+| Variable             | Description                 | Example                                 |
+| -------------------- | --------------------------- | --------------------------------------- |
+| `OIDC_ISSUER_URL`    | OIDC provider's issuer URL  | `https://auth.example.com`              |
+| `OIDC_CLIENT_ID`     | OAuth2 client ID            | `your-client-id`                        |
+| `OIDC_CLIENT_SECRET` | OAuth2 client secret        | `your-client-secret`                    |
+| `OIDC_PROVIDER_ID`   | Provider identifier         | `okta`, `auth0`, `oidc`                 |
+| `BETTER_AUTH_SECRET` | Secret for token encryption | Generate with `openssl rand -base64 32` |
+| `BETTER_AUTH_URL`    | Application base URL        | `https://your-app.example.com`          |
+| `API_BASE_URL`       | Backend API URL             | `https://api.example.com`               |
 
 ### Optional
 
@@ -327,7 +327,7 @@ NODE_ENV=development
 OIDC_ISSUER_URL=http://localhost:3001
 OIDC_CLIENT_ID=web-client
 OIDC_CLIENT_SECRET=web-secret
-NEXT_PUBLIC_OIDC_PROVIDER_ID=oidc
+OIDC_PROVIDER_ID=oidc
 BETTER_AUTH_URL=http://localhost:3000
 API_BASE_URL=http://localhost:9090
 ```

dev-auth/README.md

@@ -53,6 +53,6 @@ Replace this with a real OIDC provider (Okta, Keycloak, Auth0, etc.) by updating
 - `OIDC_ISSUER_URL` - OIDC provider URL
 - `OIDC_CLIENT_ID` - OAuth2 client ID
 - `OIDC_CLIENT_SECRET` - OAuth2 client secret
-- `NEXT_PUBLIC_OIDC_PROVIDER_ID` - Provider identifier (e.g., "okta", "oidc") - **Required**, must use `NEXT_PUBLIC_` prefix. Not sensitive data - it's just an identifier.
+- `OIDC_PROVIDER_ID` - Provider identifier (e.g., "okta", "oidc") - **Required**, server-side only.
 - `BETTER_AUTH_URL` - Application base URL (e.g., `http://localhost:3000`)
 - `BETTER_AUTH_SECRET` - Secret for token encryption

src/app/signin/__tests__/signin.test.tsx

@@ -1,7 +1,10 @@
 import { cleanup, render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { toast } from "sonner";
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import SignInPage from "@/app/signin/page";
+import { SignInButton } from "@/app/signin/signin-button";
+import { authClient } from "@/lib/auth/auth-client";
 
 describe("SignInPage", () => {
   beforeEach(() => {
@@ -33,18 +36,20 @@ describe("SignInPage", () => {
       }),
     ).toBeDefined();
 
-    expect(screen.getByRole("button", { name: /Okta/i })).toBeDefined();
+    expect(screen.getByRole("button", { name: /Oidc/i })).toBeDefined();
   });
 
   test("calls authClient.signIn.oauth2 when button is clicked", async () => {
     const user = userEvent.setup();
-    const { authClient } = await import("@/lib/auth/auth-client");
-    vi.mocked(authClient.signIn.oauth2).mockResolvedValue({ error: null });
+    vi.mocked(authClient.signIn.oauth2).mockResolvedValue({
+      data: { url: "http://example.com", redirect: true },
+      error: null,
+    });
 
     render(<SignInPage />);
 
-    const oktaButton = screen.getByRole("button", { name: /Okta/i });
-    await user.click(oktaButton);
+    const signInButton = screen.getByRole("button", { name: /Oidc/i });
+    await user.click(signInButton);
 
     await waitFor(() => {
       expect(authClient.signIn.oauth2).toHaveBeenCalledWith({
@@ -56,19 +61,16 @@ describe("SignInPage", () => {
 
   test("shows error toast when signin fails with error", async () => {
     const user = userEvent.setup();
-    const { toast } = await import("sonner");
-    const { authClient } = await import("@/lib/auth/auth-client");
-
     vi.mocked(authClient.signIn.oauth2).mockResolvedValue({
       error: {
         message: "Invalid credentials",
       },
-    });
+    } as Awaited<ReturnType<typeof authClient.signIn.oauth2>>);
 
     render(<SignInPage />);
 
-    const oktaButton = screen.getByRole("button", { name: /Okta/i });
-    await user.click(oktaButton);
+    const signInButton = screen.getByRole("button", { name: /Oidc/i });
+    await user.click(signInButton);
 
     await waitFor(() => {
       expect(toast.error).toHaveBeenCalledWith("Signin failed", {
@@ -79,17 +81,14 @@ describe("SignInPage", () => {
 
   test("shows error toast when signin throws exception", async () => {
     const user = userEvent.setup();
-    const { toast } = await import("sonner");
-    const { authClient } = await import("@/lib/auth/auth-client");
-
     vi.mocked(authClient.signIn.oauth2).mockRejectedValue(
       new Error("Network error"),
     );
 
     render(<SignInPage />);
 
-    const oktaButton = screen.getByRole("button", { name: /Okta/i });
-    await user.click(oktaButton);
+    const signInButton = screen.getByRole("button", { name: /Oidc/i });
+    await user.click(signInButton);
 
     await waitFor(() => {
       expect(toast.error).toHaveBeenCalledWith("Signin error", {
@@ -100,22 +99,41 @@ describe("SignInPage", () => {
 
   test("shows generic error message for unknown errors", async () => {
     const user = userEvent.setup();
-    const { toast } = await import("sonner");
-    const { authClient } = await import("@/lib/auth/auth-client");
-
     vi.mocked(authClient.signIn.oauth2).mockRejectedValue(
       "Something went wrong",
     );
 
     render(<SignInPage />);
 
-    const oktaButton = screen.getByRole("button", { name: /Okta/i });
-    await user.click(oktaButton);
+    const signInButton = screen.getByRole("button", { name: /Oidc/i });
+    await user.click(signInButton);
 
     await waitFor(() => {
       expect(toast.error).toHaveBeenCalledWith("Signin error", {
         description: "An unexpected error occurred",
       });
     });
   });
+
+  test("signin with okta provider", async () => {
+    const user = userEvent.setup();
+    vi.mocked(authClient.signIn.oauth2).mockResolvedValue({
+      data: { url: "http://example.com", redirect: true },
+      error: null,
+    });
+
+    render(<SignInButton providerId="okta" />);
+
+    expect(screen.getByRole("button", { name: "Okta" })).toBeDefined();
+
+    const oktaButton = screen.getByRole("button", { name: /Okta/i });
+    await user.click(oktaButton);
+
+    await waitFor(() => {
+      expect(authClient.signIn.oauth2).toHaveBeenCalledWith({
+        providerId: "okta",
+        callbackURL: "/catalog",
+      });
+    });
+  });
 });

src/app/signin/page.tsx

@@ -1,4 +1,5 @@
 import { ToolHiveIcon } from "@/components/icons";
+import { OIDC_PROVIDER_ID } from "@/lib/auth/constants";
 import { SignInButton } from "./signin-button";
 
 export default function SignInPage() {
@@ -20,7 +21,7 @@ export default function SignInPage() {
             </p>
           </div>
 
-          <SignInButton />
+          <SignInButton providerId={OIDC_PROVIDER_ID} />
         </div>
       </div>
     </div>

src/app/signin/signin-button.tsx

@@ -3,12 +3,15 @@ import Image from "next/image";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { authClient } from "@/lib/auth/auth-client";
-import { OIDC_PROVIDER_ID } from "@/lib/auth/constants";
-export function SignInButton() {
+
+export function SignInButton({ providerId }: { providerId: string }) {
+  const isOktaProvider = providerId === "okta";
+  const providerName = providerId.charAt(0).toUpperCase() + providerId.slice(1);
+
   const handleOIDCSignIn = async () => {
     try {
       const { error } = await authClient.signIn.oauth2({
-        providerId: OIDC_PROVIDER_ID,
+        providerId,
         callbackURL: "/catalog",
       });
 
@@ -36,14 +39,16 @@ export function SignInButton() {
       className="w-full h-9 gap-2"
       size="default"
     >
-      <Image
-        src="/okta-icon.svg"
-        alt="Okta"
-        width={16}
-        height={16}
-        className="shrink-0"
-      />
-      <span>Okta</span>
+      {isOktaProvider && (
+        <Image
+          src="/okta-icon.svg"
+          alt={providerName}
+          width={16}
+          height={16}
+          className="shrink-0"
+        />
+      )}
+      <span>{providerName}</span>
     </Button>
   );
 }

src/lib/auth/README.md

@@ -123,7 +123,7 @@ When making an API call:
 OIDC_ISSUER_URL=https://your-okta-domain.okta.com
 OIDC_CLIENT_ID=your-client-id
 OIDC_CLIENT_SECRET=your-client-secret
-NEXT_PUBLIC_OIDC_PROVIDER_ID=okta
+OIDC_PROVIDER_ID=okta
 
 # Better Auth
 BETTER_AUTH_URL=http://localhost:3000

src/lib/auth/constants.ts

@@ -5,12 +5,9 @@
 // Environment configuration
 /**
  * OIDC Provider ID (e.g., "oidc", "okta")
- * Must use NEXT_PUBLIC_ prefix as it's needed both server-side (auth.ts) and client-side (signin page).
- * Note: This exposes the provider name to the client, which is generally acceptable
- * but does reveal infrastructure details.
+ * Server-side only - not exposed to the client.
  */
-export const OIDC_PROVIDER_ID =
-  process.env.NEXT_PUBLIC_OIDC_PROVIDER_ID || "oidc";
+export const OIDC_PROVIDER_ID = process.env.OIDC_PROVIDER_ID || "oidc";
 export const OIDC_ISSUER_URL = process.env.OIDC_ISSUER_URL || "";
 export const OIDC_CLIENT_ID = process.env.OIDC_CLIENT_ID || "";
 export const OIDC_CLIENT_SECRET = process.env.OIDC_CLIENT_SECRET || "";