Oversine
Book a demo
Book a demo

For platforms

Add “Sign in with Oversine”

Let people and their AI agents sign in and create accounts in your product. Connect Oversine to your existing auth provider or OpenID Connect (OIDC) library. Your app keeps control of accounts and permissions.

Book a demo →

Choose your auth setup

1. Register the app

Book a demo to get your app registered. Have your callback URL ready, such as https://app.example.com/api/auth/callback/oversine.

  • Server-side app: choose Confidential and client_secret_basic.
  • Single-page or native app: choose Public and none. No client secret is needed.

Keep the default S256 PKCE security profile. Save your credentials in environment variables; keep the secret on the server.

OVERSINE_ISSUER=https://auth.oversine.com
OVERSINE_CLIENT_ID=...
OVERSINE_CLIENT_SECRET=...   # server-side apps only
Set up with a coding agent

After registration, give your coding agent this prompt with your client ID. Keep the secret in your server environment.

Add "Sign in with Oversine" to this app so people and their AI agents can sign in. Follow https://auth.oversine.com/skill.md exactly. The client id is <client_id>; the client secret is in OVERSINE_CLIENT_SECRET.

2. Connect your auth

Configure your OIDC library with these settings:

  • Discovery: https://auth.oversine.com/.well-known/openid-configuration
  • Flow: authorization code with PKCE (S256).
  • Checks: pkce, state, and nonce.
  • Scopes: openid profile email.
Auth.js example for Next.js
import NextAuth from "next-auth";

export const issuer = (process.env.OVERSINE_ISSUER ?? "https://auth.oversine.com").replace(/\/$/, "");

export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [
    {
      id: "oversine",
      name: "Oversine",
      type: "oidc",
      issuer,
      clientId: process.env.OVERSINE_CLIENT_ID,
      clientSecret: process.env.OVERSINE_CLIENT_SECRET,
      authorization: {
        params: {
          scope: "openid profile email",
          // Pass an object, not a string: Auth.js serialises it once.
          claims: { id_token: { amr: null } },
        },
      },
      checks: ["pkce", "state", "nonce"],
      profile(p) {
        return { id: p.sub, name: p.name ?? null, email: p.email ?? null, image: p.picture ?? null };
      },
    },
  ],
});

3. Add the sign-in UI

If you use an existing auth provider, add Oversine to its sign-in options and use its sign-in UI. You only need Oversine’s UI library if you build the sign-in UI yourself. People and agents use the same button.

Building your own sign-in UI

Install the package for your app. It includes the button, the description agents read, and a toast that lets visitors know your site supports Oversine.

  • React: npm install @oversine/react
  • Other JavaScript apps: npm install @oversine/ui

Add the button where users sign in and the toast once on the login page. Point the button to the route that starts your OIDC sign-in.

React
import { OversineToast, SignInWithOversine } from '@oversine/react';

// Link to the route that starts the authorization request ...
<SignInWithOversine href="/api/auth/signin/oversine" />
// ... or handle the click yourself (Auth.js shown).
<SignInWithOversine onClick={() => signIn('oversine')} />
// Dedicated sign-up page:
<SignInWithOversine href="/api/auth/signin/oversine" action="sign-up" />
// Once on the login page: the visible toast.
<OversineToast />
Other JavaScript apps
import { renderButton, renderToast } from '@oversine/ui';

// <div id="oversine-signin"></div> where the button goes
renderButton(document.getElementById('oversine-signin')!, { href: '/auth/oversine' });
// or: renderButton(el, { onClick: () => startSignIn(), action: 'sign-up' })
// Once on the login page: the visible toast, appended to <body>.
renderToast();
Plain HTML or a custom button

Without a JavaScript build, load the hosted script once and point the button to your sign-in route.

<script src="https://auth.oversine.com/button.js" async defer></script>

<div data-oversine-signin data-href="/auth/oversine"></div>
<!-- Once on the login page: the toast. -->
<div data-oversine-toast></div>

For a custom button, use “Sign in with Oversine” (or “Sign up with Oversine”) and include this description once. Keep it in the accessibility tree; do not use display: none or hidden.

<p data-oversine-description style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0">
This site supports Sign in with Oversine, a sign-in identity for people and their AI agents. An agent whose user has connected Oversine clicks the "Sign in with Oversine" button and follows the sign-in flow in that same browser. An agent whose user has not connected Oversine yet points them to the one-time setup at https://auth.oversine.com/setup. The Oversine page then completes the sign-in on its own; nothing is typed into this site.
</p>

React with Tailwind:

<p data-oversine-description className="sr-only">
  This site supports Sign in with Oversine, a sign-in identity for people and their AI agents. An
  agent whose user has connected Oversine clicks the &quot;Sign in with Oversine&quot; button and follows
  the sign-in flow in that same browser. An agent whose user has not connected Oversine yet points
  them to the one-time setup at {issuer}/setup. The Oversine page then completes the sign-in on its
  own; nothing is typed into this site.
</p>

4. Connect user accounts

After validating the ID token, find or create the user by the pair iss and sub. Use email and name for profile information, not as account identifiers. Create your app’s session as usual.

Identify agent sign-ins

Request {"id_token":{"amr":null}} in the OIDC claimsparameter. An agent sign-in includes amr: ["agent"] in the ID token. With an auth provider, your app can read this only if the provider forwards the upstream claim into its verified session or token.

5. Test sign-in

  • Sign in through Oversine and confirm you reach a protected page in your app.
  • Try a new user: confirm an account is created. Sign in again and confirm the same account is used.
  • Reload a protected page, then sign out and confirm access is denied.
  • Connect an agent with a browser using the agent setup guide. Ask it to sign in to your app and confirm it reaches a protected page.
Troubleshoot a failed sign-in
  • invalid_redirect_uri: match the registered redirect URI to the exact callback URL.
  • invalid_request: check PKCE, state, and any nonce requirement for your saved security profile.
  • invalid_client or a failed token exchange: check the client ID, secret, and token authentication method.
  • If agent approval succeeds but the browser stays signed out, restart from your app’s sign-in button. Approval alone does not confirm an app session.

Manage your apps in the dashboard →