Auth Docs (#148)

apps/docs/pages/_meta.ts

@@ -4,6 +4,7 @@ export default {
   "core-concepts": "Core Concepts",
   integrations: "Integrations",
   "self-hosted": "Self-hosted",
+  auth: "Auth",
   "config-files": "Config Files",
   glossary: "Glossary",
   troubleshooting: "Troubleshooting",

apps/docs/pages/auth.mdx

@@ -0,0 +1,66 @@
+---
+title: Authentication
+---
+
+# Authentication
+
+Ctrlplane supports multiple authentication methods to secure your application.
+
+## Available Authentication Methods
+
+import { Cards } from "nextra/components";
+import { RiLockPasswordLine } from "react-icons/ri";
+import { SiAuth0, SiGoogle } from "react-icons/si";
+
+<Cards>
+  <Cards.Card
+    icon={<SiGoogle className="h-8 w-8" />}
+    title="Google"
+    href="/auth/google"
+  />
+  <Cards.Card
+    icon={<SiAuth0 className="h-8 w-8" />}
+    title="OIDC"
+    href="/auth/oidc"
+  />
+  <Cards.Card
+    icon={<RiLockPasswordLine className="h-8 w-8" />}
+    title="Basic Auth"
+    href="/auth/basic"
+  />
+</Cards>
+
+Please see the individual sections for detailed information on how to set up
+each authentication method, including the required environment variables and
+configuration steps.
+
+## General Configuration
+
+Regardless of the authentication method you choose, you'll need to set the
+following environment variable:
+
+- `AUTH_SECRET`: A secret key used to encrypt tokens and sign cookies.
+
+This can be generated by running:
+
+```bash
+$ openssl rand -base64 32
+```
+
+## Authentication Priority
+
+It's important to note that if Google or OIDC authentication is configured,
+basic (credentials) authentication will be disabled by default. If you want to
+enable basic authentication alongside other methods, you need to explicitly set
+`AUTH_CREDENTIALS_ENABLED` to `true`.
+
+## Next Steps
+
+Choose the authentication method that best suits your needs and follow the setup
+instructions in the respective section. Each authentication method has its own
+requirements and configuration steps, so be sure to review the documentation
+carefully.
+
+If you need help or have any questions about setting up authentication for your
+Ctrlplane application, please don't hesitate to reach out to our support team in
+Discord.

apps/docs/pages/auth/_meta.ts

@@ -0,0 +1,5 @@
+export default {
+  google: "Google",
+  oidc: "OIDC",
+  basic: "Basic",
+};

apps/docs/pages/auth/basic.mdx

@@ -0,0 +1,39 @@
+---
+title: Basic Authentication
+---
+
+# Basic Authentication
+
+This guide will help you set up basic (email/password) authentication for your
+Ctrlplane application.
+
+import { Callout } from "nextra/components";
+
+<Callout type="warning">
+  Basic authentication is not recommended for production environments. It is
+  primarily intended for testing and development purposes. For production
+  deployments, consider using more secure authentication methods like Google or
+  OIDC.
+</Callout>
+
+## Configuration
+
+To enable basic authentication, you need to set the following environment
+variables:
+
+- `AUTH_SECRET`: A secret key used to encrypt tokens and sign cookies.
+
+This can be generated by running:
+
+```bash
+$ openssl rand -base64 32
+```
+
+If Google or OIDC authentication is not configured, basic authentication will be
+enabled by default. However, if you want to use basic authentication alongside
+other methods, you must explicitly set `AUTH_CREDENTIALS_ENABLED` to `true`.
+
+## Usage
+
+With basic authentication enabled, a new "Sign up" button will be displayed in
+the `/login` page where users can sign up using their email and password.

apps/docs/pages/auth/google.mdx

@@ -0,0 +1,42 @@
+---
+title: Google Authentication
+---
+
+# Google Authentication
+
+This guide will help you set up Google authentication for your Ctrlplane
+application.
+
+## Prerequisites
+
+1. A Google Cloud Platform (GCP) account
+2. A GCP project with the Google+ API enabled
+
+## Setup Steps
+
+1. Go to the [Google Cloud Console](https://console.cloud.google.com/).
+2. Select your project or create a new one.
+3. Navigate to "APIs & Services" > "Credentials".
+4. Click "Create Credentials" and select "OAuth client ID".
+5. Choose "Web application" as the application type.
+6. Set the authorized redirect URI to
+   `https://your-domain.com/api/auth/callback/google`.
+7. Click "Create" to generate your client ID and client secret.
+
+## Configuration
+
+To enable Google authentication, you need to set the following environment
+variables:
+
+- `AUTH_GOOGLE_CLIENT_ID`: Your Google OAuth client ID
+- `AUTH_GOOGLE_CLIENT_SECRET`: Your Google OAuth client secret
+
+When these variables are set, Google authentication will be automatically
+enabled, and basic authentication will be disabled unless explicitly enabled.
+
+## Usage
+
+Once configured, users will be able to sign in to your Ctrlplane application
+using their Google accounts. The authentication flow will redirect users to
+Google's login page and then back to your application after successful
+authentication.

apps/docs/pages/auth/oidc.mdx

@@ -0,0 +1,46 @@
+---
+title: OIDC Authentication
+---
+
+# OIDC Authentication
+
+This guide will help you set up OIDC (OpenID Connect) authentication for your
+Ctrlplane application. This method can be used with various identity providers.
+
+## Prerequisites
+
+1. An account with an OIDC-compliant identity provider (e.g. Auth0, Okta, Azure
+   AD)
+2. An application or client registered with your identity provider
+
+## Setup Steps
+
+1. Log in to your identity provider's dashboard.
+2. Create a new application or client (if you haven't already).
+3. Configure the application settings:
+   - Set the allowed callback URLs to
+     `https://your-domain.com/api/auth/callback/oidc`.
+   - Note down the client ID, client secret, and issuer URL.
+
+## Configuration
+
+To enable OIDC authentication, you need to set the following environment
+variables:
+
+- `AUTH_OIDC_CLIENT_ID`: Your OIDC client ID
+- `AUTH_OIDC_CLIENT_SECRET`: Your OIDC client secret
+- `AUTH_OIDC_ISSUER`: The issuer URL for your OIDC provider
+
+When these variables are set, OIDC authentication will be automatically enabled,
+and basic authentication will be disabled unless explicitly enabled.
+
+## Usage
+
+Once configured, users will be able to sign in to your Ctrlplane application
+using the configured OIDC provider. The authentication flow will redirect users
+to the provider's login page and then back to your application after successful
+authentication.
+
+This method allows for seamless integration with various identity providers,
+giving you flexibility in choosing the authentication system that best fits your
+organization's needs.

apps/docs/pages/integrations/google-cloud/compute-scanner.mdx

@@ -9,11 +9,11 @@ Currently the compute scanner supports importing the following resources:
 
 ## Managed Compute Scanner
 
-The managed Compute Scanner is build into the Ctrlplane solution. Each workspace
-will is assigned a google service account. You need to invite this service
+The managed Compute Scanner is built into the Ctrlplane solution. Each workspace
+will be assigned a google service account. You need to invite this service
 account to your projects you would like it to scan. Then in the UI, you can add
 a new provider, select the managed install and add all the projects you will
-like it to scale. Once you hit submit you may need to wait a few mins while it
+like it to scan. Once you hit submit you may need to wait a few mins while it
 scanns and imports all compute resources.
 
 ## Unmanaged Compute Scanner

apps/webservice/src/app/(auth)/login/page.tsx

@@ -23,12 +23,16 @@ export default async function LoginPage() {
       <div className="flex items-center gap-2 p-4">
         <IconPlane className="h-10 w-10" />
         <div className="flex-grow" />
-        <Button variant="ghost" className="text-muted-foreground">
-          Contact
-        </Button>
-        <Link href="/sign-up" passHref>
-          <Button variant="outline">Sign up</Button>
+        <Link href="https://discord.gg/sUmH9NyWhp" passHref>
+          <Button variant="ghost" className="text-muted-foreground">
+            Contact
+          </Button>
         </Link>
+        {isCredentialsAuthEnabled && (
+          <Link href="/sign-up" passHref>
+            <Button variant="outline">Sign up</Button>
+          </Link>
+        )}
       </div>
       <LoginCard
         isCredentialsAuthEnabled={isCredentialsAuthEnabled}

apps/webservice/src/app/(auth)/login/workspace-invite/[workspaceInviteToken]/page.tsx

@@ -1,3 +1,5 @@
+import type { Metadata } from "next";
+import Link from "next/link";
 import { redirect } from "next/navigation";
 import { IconPlane } from "@tabler/icons-react";
 
@@ -11,6 +13,8 @@ import { Button } from "@ctrlplane/ui/button";
 
 import { LoginCard } from "../../LoginCard";
 
+export const metadata: Metadata = { title: "Ctrlplane Login" };
+
 export default async function LoginInvitePage() {
   const session = await auth();
   if (session != null) redirect("/");
@@ -20,10 +24,16 @@ export default async function LoginInvitePage() {
       <div className="flex items-center gap-2 p-4">
         <IconPlane className="h-10 w-10" />
         <div className="flex-grow" />
-        <Button variant="ghost" className="text-muted-foreground">
-          Contact
-        </Button>
-        <Button variant="outline">Sign up</Button>
+        <Link href="https://discord.gg/sUmH9NyWhp" passHref>
+          <Button variant="ghost" className="text-muted-foreground">
+            Contact
+          </Button>
+        </Link>
+        {isCredentialsAuthEnabled && (
+          <Link href="/sign-up" passHref>
+            <Button variant="outline">Sign up</Button>
+          </Link>
+        )}
       </div>
       <LoginCard
         isCredentialsAuthEnabled={isCredentialsAuthEnabled}

apps/webservice/src/app/[workspaceSlug]/settings/(settings)/workspace/integrations/(integration)/google/GoogleIntegration.tsx

@@ -86,7 +86,7 @@ export const GoogleIntegration: React.FC<{
 
             <div className="flex items-center justify-between p-4 text-sm text-neutral-200">
               <div className="flex items-center gap-2">
-                <span className="max-w-[350px] truncate font-mono text-xs">
+                <span className="truncate font-mono text-xs">
                   {workspace.googleServiceAccountEmail}
                 </span>
                 <Button variant="ghost" size="sm" onClick={handleCopy}>