Set Up Google Authentication

Spiderly uses a server-side OAuth 2.0 code flow for external providers in the Angular admin panel. The backend owns the full OAuth dance — the frontend never handles client_secret; it just navigates to a challenge URL and picks up the cookie session on return.

1. Create an OAuth 2.0 Client ID in Google Cloud

1. Open the Google Cloud Console — Credentials page. Create or select a project.
2. Click Create credentials → OAuth client ID. If prompted, configure the OAuth consent screen first (User type: External, fill in app name, support email, and developer email).
3. Choose Application type: Web application and give it a name.
4. Under Authorized redirect URIs, add the backend callback URL — not the frontend origin. The redirect goes to the backend:
   • Local dev: https://localhost:7260/api/Security/ExternalLoginCallback
   • Production: https://api.example.com/api/Security/ExternalLoginCallback
5. Click Create and copy both the Client ID (ends in .apps.googleusercontent.com) and the Client Secret.

2. Configure the backend

Add (or update) the ExternalProviders array in Backend/YourAppName.WebAPI/appsettings.json under AppSettings.Spiderly.Security:

{
  "AppSettings": {
    "Spiderly.Security": {
      "ExternalProviders": [
        {
          "Code": "google",
          "ClientId": "1234567890-abc...apps.googleusercontent.com",
          "ClientSecret": "GOCSPX-..."
        }
      ]
    }
  }
}

Code: "google" is a Spiderly built-in preset — the authority (https://accounts.google.com) is filled in automatically. You only need ClientId and ClientSecret.

For local development, put the secrets in appsettings.Development.local.json (gitignored):

{
  "AppSettings": {
    "Spiderly.Security": {
      "ExternalProviders": [
        {
          "Code": "google",
          "ClientId": "1234567890-abc...apps.googleusercontent.com",
          "ClientSecret": "GOCSPX-..."
        }
      ]
    }
  }
}

For production, .NET binds array items via indexed environment variables:

See Deployment — Environment Variables for the general conventions.

3. Frontend — no configuration needed

The Angular admin fetches enabled providers from GET /api/Security/GetExternalProviders at runtime and renders a button for each one. The Google icon is bundled in the Spiderly lib as an inline SVG data URI — no asset files, no CDN, no CSP entry required.

If you want to swap the icon (e.g. self-host assets/icons/google.svg), pass a providerIcons map to the login component:

// login.component.ts — a thin wrapper around spiderly-login
@Component({
  selector: 'app-login',
  imports: [SpiderlyLoginComponent],
  template: `<spiderly-login [providerIcons]="providerIcons" />`,
})
export class LoginComponent {
  providerIcons = { google: 'assets/icons/google.svg' };
}

Route /login to this wrapper in your app.routes.ts. See Frontend Customization — Login Page for the full set of customization levels.

Adding more providers

The same ExternalProviders array accepts any OIDC-compliant provider. For providers without a built-in preset, supply Authority explicitly:

{
  "Code": "microsoft",
  "Authority": "https://login.microsoftonline.com/<tenant>/v2.0",
  "ClientId": "...",
  "ClientSecret": "..."
}

Register the corresponding backend callback URL (/api/Security/ExternalLoginCallback) as an authorized redirect URI in that provider's console, the same way you did for Google in step 1.

Video walkthrough