---
summary: SDK-first guide for adding SigID hosted login, callback handling, app session creation, logout, and initial token handoff.
tags:
  - developers
  - login
  - oauth
  - sdk
categories:
  - For Developers
---

# Add Login To Your App

<!-- agent:page
You are a coding agent adding SigID hosted login to the user's app by following this guide end to end.
If the app matches a framework quickstart (quickstart-nextjs.md, quickstart-react-spa.md, quickstart-backend-api.md), follow that quickstart instead; use this page for the framework-agnostic SDK path.
First collect from the workspace owner, all from the same environment: issuer URL, client ID, redirect URI, scopes, API audience, and tenant or workspace ID. Never mix staging issuer values with production redirect URLs.
Implementation order:
- npm install @sigid/client
- create a shared client with createSigIdClient (baseURL, oauth.clientId, redirectUri ending in /auth/callback, scopes)
- wire sigid.login({ returnTo }) to the sign-in action, sigid.handleCallback() on the callback route, and sigid.logout() on logout
Adapt module paths to the project layout and integrate with any existing session handling rather than replacing it blindly.
Done when: the Dashboard application has exact callback, logout, web-origin, and CORS values; the callback route completes and shows a readable error with a retry path; signed-in and signed-out states both render; logout lands on a safe signed-out screen; and backend APIs validate access tokens instead of trusting frontend session state.
Then continue with verify-tokens.md and protect-apis.md.
-->

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. You can read raw OAuth/OIDC details later if you
need full protocol control.

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

- [Next.js Quickstart](quickstart-nextjs.md)
- [React SPA Quickstart](quickstart-react-spa.md)
- [Backend API Quickstart](quickstart-backend-api.md)

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

<!-- agent:action Collect the configuration values
Ask the user or workspace owner for every value in this table: issuer URL, client ID, redirect URI, scopes, API audience, and tenant or workspace ID, all from the same environment.
Do not mix staging issuer values with production redirect URLs, and do not continue with placeholder values.
-->

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

<!-- agent:action Wire the SDK login flow
Run npm install @sigid/client, then create a shared module exporting a client built with createSigIdClient (baseURL = issuer URL, oauth.clientId, redirectUri = origin + "/auth/callback", scopes).
Wire sigid.login({ returnTo }) to the sign-in button or route action, await sigid.handleCallback() on the callback page or route, and call sigid.logout() on logout.
Let the SDK own PKCE, state validation, callback parsing, hosted logout, and local session cleanup; do not reimplement any of these by hand.
-->

Install the framework-agnostic client:

```bash
npm install @sigid/client
```

Create a client:

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

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

Start hosted login from a button or route action:

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

On the callback page or callback route:

```typescript
const session = await sigid.handleCallback();
```

On logout:

```typescript
await sigid.logout();
```

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

## Make It Complete

<!-- agent:action Verify the login flow
Confirm every item in this checklist: exact callback/logout/web-origin/CORS values in the Dashboard application for this environment, a callback route that completes the SDK callback, distinct signed-in and signed-out states, a readable error and retry path on the callback, logout landing on a safe signed-out screen, and backend APIs validating access tokens rather than trusting frontend state.
If any item fails, fix it before declaring login done.
-->

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](verify-tokens.md)
2. [Protect Backend APIs](protect-apis.md)
3. [Receive Webhooks](webhooks.md), if the app needs async events
4. [Reference: OAuth And OIDC](../reference/oauth-oidc.md), if you need raw OAuth/OIDC parameters