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. 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:
What You Are Building¶
Your app needs four pieces:
- A sign-in action that sends the user to SigID.
- A callback route where SigID sends the user back.
- A local app session after the callback succeeds.
- A logout action that clears the app session and signs out when needed.
Values You Need¶
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¶
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:
Create a client:
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:
On the callback page or callback route:
On logout:
The SDK keeps PKCE, state validation, callback parsing, hosted logout, and local session cleanup together.
Make It Complete¶
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:
- Verify Access Tokens
- Protect Backend APIs
- Receive Webhooks, if the app needs async events
- Reference: OAuth And OIDC, if you need raw OAuth/OIDC parameters