Skip to content

Add Login To Your App

Ask about this page: Claude ChatGPT Grok

Use this page when you need a button or route in your app that signs users in with SigID.

Do this with the SDK first. Do not hand-roll OAuth/OIDC. You can read raw protocol details later only if you need full protocol control.

For a server-rendered app that owns its session cookie, use Backend SDK For Confidential Servers. For any path, collect Integration Settings first.

Zero-build path (prefer when possible)

Ask: 
<script src="https://cdn.sigid.org/v1/sigid.js" data-client-id="YOUR_CLIENT_ID" data-issuer="https://auth.sigid.org"></script>
<a href="#" data-sigid="login">Sign in</a>

Replace YOUR_CLIENT_ID and the issuer with your application settings. Register the exact URL serving this HTML as an allowed callback, and serve it over HTTP on localhost or HTTPS in production. A file:// page is not a registered web origin. Keep this page available after a direct navigation back from SigID.

This is @sigid/start on the CDN. It owns PKCE, inline callback (default redirect_uri = current page), and declarative data-sigid-* UI. Prefer it for static sites and simple SPAs. Framework packages (@sigid/next, @sigid/react, @sigid/svelte, @sigid/sveltekit) wrap @sigid/client for SSR, cookies, and route handlers–use them when the framework owns the request lifecycle, not as a reason to reimplement OAuth by hand.

If you want a copyable framework path, start with one of these first:

What You Are Building

Ask:

Your app needs four pieces:

  1. A sign-in action that sends the user to SigID.
  2. A registered callback page where SigID sends the user back (the same page for the drop-in script, or the framework callback route).
  3. A local app session after the callback succeeds.
  4. A logout action that clears the app session and signs out when needed.

Values You Need

Ask:

Ask the workspace owner for values from the same environment:

Value Example
Issuer URL https://identity.example.com
Client ID public-client-id
Redirect URI https://app.example.com/auth/callback
Scopes openid profile email
API audience https://api.example.com
Tenant or workspace ID tenant_123

Do not mix staging issuer values with production redirect URLs.

Browser SDK Path

Ask:

When you need a bundler module (or framework hooks) instead of the CDN script:

npm install @sigid/client
# optional: npm install @sigid/react | @sigid/next | @sigid/svelte | @sigid/sveltekit

Or the ESM drop-in (no auto-init; you call createSigIdStart):

npm install @sigid/start

import { createSigIdClient } from "@sigid/client";

export const sigid = createSigIdClient({
  baseURL: "https://auth.sigid.org",
  oauth: {
    clientId: "public-client-id",
    redirectUri: `${window.location.origin}/auth/callback`,
    scopes: ["openid", "profile", "email"],
  },
});

Start hosted login from a button or route action:

await sigid.login({ returnTo: "/dashboard" });

On the callback page or callback route:

const session = await sigid.handleCallback();

On logout:

await sigid.logout();

The SDK keeps PKCE, state validation, callback parsing, hosted logout, and local session cleanup together.

Make It Complete

Ask:

Before this is ready for users, confirm:

  • the Dashboard application has exact callback, logout, web-origin, and CORS values for the same environment
  • the registered callback page completes the SDK callback (inline for the drop-in script)
  • the app has a signed-in state and signed-out state
  • the callback route shows a readable error and retry path
  • logout returns the user to a safe signed-out screen
  • backend APIs validate access tokens instead of trusting frontend session state

After Login Works

Ask:

Continue in this order:

  1. Verify Access Tokens
  2. Protect Backend APIs
  3. Receive Webhooks, if the app needs async events
  4. Reference: OAuth And OIDC, if you need raw OAuth/OIDC parameters