Add Login To Your App¶

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.

Zero-build path (prefer when possible)¶

<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>

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:

• Next.js Quickstart
• React SPA Quickstart
• Backend API Quickstart
• Integrate Third-Party App (agent checklist)
• SDKs And Examples (package reality table)

What You Are Building¶

Your app needs four pieces:

1. A sign-in action that sends the user to SigID.
2. A callback route where SigID sends the user back.
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 the workspace owner for values from the same environment:

Do not mix staging issuer values with production redirect URLs.

Browser SDK Path¶

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¶

Before this is ready for users, confirm:

• the Dashboard application has exact callback, logout, web-origin, and CORS values for the same environment
• the app has a callback route that completes the SDK callback
• 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¶

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