> ## Documentation Index > Fetch the complete documentation index at: https://docs.edgespark.dev/llms.txt > Use this file to discover all available pages before exploring further. # Add social OAuth login to your EdgeSpark app > Enable Google, GitHub, GitLab, and Discord OAuth login in EdgeSpark through configs/auth-config.yaml, vars, and secrets. EdgeSpark ships with a managed auth service that handles OAuth flows end to end. To turn on a social provider such as Google or GitHub, you register an OAuth app with the provider, store the client ID as a var and the client secret as a secret, then enable the provider in `configs/auth-config.yaml` and deploy. The managed auth UI in `@edgespark/web` reads your applied config and renders the right buttons automatically — no frontend changes are needed when you add a new provider. ## The shape of every provider setup Every OAuth provider follows the same four-step pattern: 1. Create an OAuth app with the provider and enter the EdgeSpark callback URL. 2. Store the client ID as a var: `edgespark var set _CLIENT_ID=`. 3. Store the client secret as a secret: `edgespark secret set _CLIENT_SECRET`. 4. Enable the provider in `configs/auth-config.yaml`, run `edgespark auth apply`, then `edgespark deploy`. `edgespark secret set` opens a secure EdgeSpark browser URL for the human owner to paste the secret value. Secret values never pass through terminal output, agent context, or third-party LLM APIs such as Anthropic, Google, or OpenAI. ## Callback URL When you create the OAuth app with the provider, set the authorization callback (redirect) URL to: ```text theme={null} https:///api/_es/auth/callback/ ``` Where: * `` is your deployed project URL, for example `my-app.edgespark.app`, or your [custom domain](/guides/custom-domains). * `` is one of: `google`, `github`, `gitlab`, `discord`. Most providers let you register several callback URLs, so you can add both your EdgeSpark URL and any custom domain at the same time. ## Fixed var and secret names Key names are fixed per provider — you cannot choose arbitrary names. The platform reads the values through these exact keys. | Provider | YAML key | Client ID var | Client secret | Extra config | | -------- | ----------------- | ------------------- | ----------------------- | ------------ | | Google | `providerGoogle` | `GOOGLE_CLIENT_ID` | `GOOGLE_CLIENT_SECRET` | — | | GitHub | `providerGithub` | `GITHUB_CLIENT_ID` | `GITHUB_CLIENT_SECRET` | — | | GitLab | `providerGitlab` | `GITLAB_CLIENT_ID` | `GITLAB_CLIENT_SECRET` | — | | Discord | `providerDiscord` | `DISCORD_CLIENT_ID` | `DISCORD_CLIENT_SECRET` | — | If your own server code also needs to read these values — for example, to call the provider's API directly — declare the keys in `server/src/defs/runtime.ts`. That step is optional for the auth flow itself, which is fully handled by the platform. ## Google 1. Open the [Google Cloud Console](https://console.cloud.google.com/) and select or create a project. 2. Go to **APIs & Services → Credentials** and click **Create credentials → OAuth client ID**. 3. Configure the OAuth consent screen if prompted (External user type is typical for consumer apps). 4. Choose **Web application** as the application type and give it a name. 5. Under **Authorized JavaScript origins**, add your deployed project URL: ```text theme={null} https:// ``` For example, `https://my-app.edgespark.app`. 6. Under **Authorized redirect URIs**, add: ```text theme={null} https:///api/_es/auth/callback/google ``` 7. Copy the **Client ID** and **Client secret** from the credential details page. 8. Store them with the CLI: ```bash theme={null} edgespark var set GOOGLE_CLIENT_ID= edgespark secret set GOOGLE_CLIENT_SECRET ``` 9. Enable the provider in `configs/auth-config.yaml`: ```yaml configs/auth-config.yaml theme={null} providerGoogle: enabled: true config: clientIdVarRef: GOOGLE_CLIENT_ID clientSecretRef: GOOGLE_CLIENT_SECRET ``` 10. Apply and deploy: ```bash theme={null} edgespark auth apply edgespark deploy ``` ## GitHub 1. Open GitHub **Settings → Developer settings → OAuth Apps** (either on your user account or organization) and click **New OAuth App**. 2. Set **Homepage URL** to your deployed project URL, for example `https://my-app.edgespark.app`. 3. Set **Authorization callback URL** to: ```text theme={null} https:///api/_es/auth/callback/github ``` 4. After creating the app, copy the **Client ID** and click **Generate a new client secret**. Copy the secret value immediately — GitHub shows it only once. 5. Store them with the CLI: ```bash theme={null} edgespark var set GITHUB_CLIENT_ID= edgespark secret set GITHUB_CLIENT_SECRET ``` 6. Enable the provider in `configs/auth-config.yaml`: ```yaml configs/auth-config.yaml theme={null} providerGithub: enabled: true config: clientIdVarRef: GITHUB_CLIENT_ID clientSecretRef: GITHUB_CLIENT_SECRET ``` 7. Apply and deploy: ```bash theme={null} edgespark auth apply edgespark deploy ``` ## GitLab 1. In GitLab, open **User Settings → Applications** for a personal app, or **Admin → Applications** for an instance-wide app. 2. Give the application a name and add the **Redirect URI**: ```text theme={null} https:///api/_es/auth/callback/gitlab ``` 3. Select at least the `read_user` and `openid` scopes (plus `email` and `profile` if you want the user's email and name). 4. Save the application, then copy the **Application ID** (this is the client ID) and **Secret**. 5. Store them with the CLI: ```bash theme={null} edgespark var set GITLAB_CLIENT_ID= edgespark secret set GITLAB_CLIENT_SECRET ``` 6. Enable the provider in `configs/auth-config.yaml`: ```yaml configs/auth-config.yaml theme={null} providerGitlab: enabled: true config: clientIdVarRef: GITLAB_CLIENT_ID clientSecretRef: GITLAB_CLIENT_SECRET ``` 7. Apply and deploy: ```bash theme={null} edgespark auth apply edgespark deploy ``` ## Discord 1. Open the [Discord Developer Portal](https://discord.com/developers/applications) and click **New Application**. 2. In the application, open **OAuth2 → General**. 3. Under **Redirects**, add: ```text theme={null} https:///api/_es/auth/callback/discord ``` 4. Copy the **Client ID**, then click **Reset Secret** to generate a **Client Secret**. 5. Store them with the CLI: ```bash theme={null} edgespark var set DISCORD_CLIENT_ID= edgespark secret set DISCORD_CLIENT_SECRET ``` 6. Enable the provider in `configs/auth-config.yaml`: ```yaml configs/auth-config.yaml theme={null} providerDiscord: enabled: true config: clientIdVarRef: DISCORD_CLIENT_ID clientSecretRef: DISCORD_CLIENT_SECRET ``` 7. Apply and deploy: ```bash theme={null} edgespark auth apply edgespark deploy ``` ## Use enabled providers in the UI The managed auth UI picks up every enabled provider automatically: ```tsx web/src/pages/LoginPage.tsx theme={null} import { useEffect, useRef } from "react"; import { client } from "@/lib/edgespark"; export function LoginPage() { const containerRef = useRef(null); useEffect(() => { if (!containerRef.current) return; const mounted = client.authUI.mount(containerRef.current, { redirectTo: "/dashboard", }); return () => { mounted.destroy(); }; }, []); return
; } ``` To trigger a provider from your own button instead of the managed UI, call `client.auth.signIn.social`: ```typescript web/src/lib/auth.ts theme={null} import { client } from "@/lib/edgespark"; export async function signInWithGitHub() { await client.auth.signIn.social({ provider: "github", callbackURL: "/dashboard", }); } ``` `provider` accepts any of `"google"`, `"github"`, `"gitlab"`, or `"discord"` — use the same string as in the callback URL. ## Full example: enabling multiple providers ```yaml configs/auth-config.yaml theme={null} # yaml-language-server: $schema=https://schemas.edgespark.dev/v1/auth-config.schema.json disableSignUp: false providerEmailPassword: enabled: true config: minPasswordLength: 10 requireEmailVerification: true providerGoogle: enabled: true config: clientIdVarRef: GOOGLE_CLIENT_ID clientSecretRef: GOOGLE_CLIENT_SECRET providerGithub: enabled: true config: clientIdVarRef: GITHUB_CLIENT_ID clientSecretRef: GITHUB_CLIENT_SECRET providerDiscord: enabled: true config: clientIdVarRef: DISCORD_CLIENT_ID clientSecretRef: DISCORD_CLIENT_SECRET ``` ## Troubleshooting | Symptom | Likely cause | Fix | | ------------------------------------------------------------ | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `edgespark auth apply` validation error on a provider config | A provider with `enabled: true` requires both `clientIdVarRef` and `clientSecretRef`. | Fill in both fields in `configs/auth-config.yaml`. An empty `config: {}` will fail validation. | | Login button missing in the managed UI | Config not applied or not deployed. | Run `edgespark auth apply` then `edgespark deploy`. Verify with `edgespark auth get` that the provider has `enabled: true`. | | `redirect_uri_mismatch` from the provider | The callback URL registered with the provider does not match the URL EdgeSpark sent. | Re-register `https:///api/_es/auth/callback/` exactly — `https`, exact host, lowercase provider name. | | Provider returns `invalid_client` | Wrong, missing, or expired client ID or client secret. | Confirm `edgespark var list` shows the right `_CLIENT_ID` value and `edgespark secret list` shows `_CLIENT_SECRET`. Re-run `edgespark var set` or `edgespark secret set` if needed. | | Validation mentions unknown or newer fields | CLI version is outdated for the schema. | Compare your YAML with `https://schemas.edgespark.dev/v1/auth-config.schema.json` and upgrade the CLI with `npm update -g @edgespark/cli`. | For platform-wide naming and quota limits, see [platform limits](/reference/limits). ## See also Full `configs/auth-config.yaml` reference, including sessions and email/password. Mount the managed auth UI or call headless auth methods from the browser.