Skip to main content

IDP (Identity Provider)

Login with ChainIT — same pattern as Login with Google

IDP is how you add “Login with ChainIT” to your product—the same pattern as “Login with Google” (or Sign in with Apple): a single branded button on your site or app, a redirect to the provider for sign-in and consent, then a redirect back to your app with an authorization code you exchange for tokens.

IDP apps use OIDC/OAuth 2.0 with PKCE so that flow is secure in browsers, SPAs, and native apps.

User sign-in with ChainIT (IDP)

User login
  • What the user sees during the ChainIT-hosted login and consent screens.
  • How the browser returns to your callbackURL after a successful sign-in.
  • Where PKCE (code_challenge / code_verifier) fits in the redirect and token steps.

This clip walks through the IDP sign-in path end to end: your application opens the OIDC authorization request with PKCE, the user completes login and consent on ChainIT-hosted screens, the browser returns to your registered callback URL with an authorization code, and your backend exchanges that code together with the PKCE verifier for access, ID, and optional refresh tokens your product stores and uses for ongoing API access.

When to use IDP?

Choose IDP when you want a “Login with ChainIT” button—the same idea as “Login with Google”—and you are comfortable owning the surrounding UX (buttons, routes, session storage) while ChainIT handles the actual sign-in screens. For server-to-server API access only, use M2M instead.

IDP Properties in Developer Portal​

When creating an IDP application, you must configure the following properties:

PropertyRequiredDescription
callbackURL✅The authorized URL(s) ChainIT redirects to after a successful login.
originURLOptionalAllowed browser origins (CORS) for your SPA. Configure one origin per line under URL White Listing (CORS). See the origin whitelisting guide.
scopes✅Permissions requested (e.g., openid, profile, email, phone).

Flow Overview​

IDP apps use the Authorization Code flow with PKCE.

Integration Guide​

Pick your stack and follow the steps to wire Login with ChainIT (OAuth 2.0 / OIDC with PKCE) in your application.

What you'll achieve

By following this guide, users will be able to log into your application using ChainIt's secure authentication (QR Code + Face Authentication) through Auth0's social login flow.

Select your preferred technology and follow the steps to set up Chainit Provider.

React

Features:

  • OAuth 2.0 & PKCE Support
  • React Context Provider
  • Pre-built Authentication Components
  • Hooks: useChainIt() for Login/Logout/Profile
  • API Call Utility with Auth Headers
  • TypeScript Support
Prerequisites

Make sure you have the following before starting:

  • React 16.8+ (hooks support required)
  • Active ChainIt application credentials
  • Basic understanding of OAuth2 flow
npm install

Quick Start

1
Wrap your App with ChainItAuthProvider
1

Import ChainItAuthProvider from .

2

Wrap your main App component with it.

3

Configure with your clientId, redirectUri, and optional settings.

import { ChainItAuthProvider } from "";

function App() {
  return (
    <ChainItAuthProvider config={{
      clientId: "<<your_client_id>>",
      redirectUri: "YOUR_REDIRECT_URI",
      scope: "openid profile email",
    }}>
      <YourApp />
    </ChainItAuthProvider>
  );
}
2
Use the useChainIt Hook
1

Import useChainIt from .

2

Access authentication state, user info, and helper methods.

3

Render login/logout buttons based on authentication state.


import { useChainIt, LoginButton } from "";

export default function YourApp() {
  const { isAuthenticated, user, login, logout, isLoading } = useChainIt();

  if (isLoading) {
    return (
      <div className="flex flex-col items-center justify-center h-screen space-y-2">
        <p className="text-gray-600">Setting up session...</p>
        <div className="loader border-t-4 border-blue-500 rounded-full w-8 h-8 animate-spin"></div>
      </div>
    );
  }


  if (!isAuthenticated) {
    return (
      <div className="flex flex-col items-center justify-center h-screen space-y-4">
        <h2 className="text-xl font-semibold">Please log in to continue</h2>
        <LoginButton onSuccess={(user) => console.log("Logged in:", user)} />
      </div>
    );
  }

  return (
    <div className="flex flex-col items-center justify-center h-screen space-y-4">
      <h1 className="text-2xl font-bold">Welcome, {user?.name || "User"} 🎉</h1>
      <button
        onClick={logout}
        className="px-4 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition"
      >
        Logout
      </button>
    </div>
  );
}

Components

3
ChainItAuthProvider Props
1

Initializes the authentication context.

2

Accepts configuration and optional callbacks.

3

Handles state changes and errors.

<ChainItAuthProvider
  config={clientId: string;
  clientSecret?: string; // Optional for public clients using PKCE
  redirectUri: string;
  scope?: string;
  state?: string;
  prompt?: boolean;
  usePKCE?: boolean; // Enable PKCE flow
  codeChallengeMethod?:'S256' | 'plain';
  }
/>
4
Button Variants
1

Use pre-built button components for login and actions.

<LoginButton variant="default">Default</LoginButton>
<LoginButton variant="outline">Outline</LoginButton>
<LoginButton variant="destructive">Destructive</LoginButton>
<LoginButton variant="secondary">Secondary</LoginButton>
<LoginButton variant="ghost">Ghost</LoginButton>
<LoginButton variant="link">Link</LoginButton>
Image

Making API Calls

Use the apiCall method from useChainIt for authenticated requests:

const { apiCall } = useChainIt();
const profileData = await apiCall("/oauth/userinfo");

Environment Variables

Define these in your environment file:

VITE_AUTH_CLIENT_ID=<<your_client_id>>
VITE_AUTH_REDIRECT_URI=http://localhost:3000/callback

Handling the Response​

After a successful exchange, your application receives three tokens:

  1. id_token: Contains the user's identity claims as a JWT signed with RS256. Validate this token against the same org-scoped JWKS endpoint as the access token.
  2. access_token: Used to call the UserInfo API to fetch additional profile details.
  3. refresh_token: (Optional) Used to obtain new access tokens without re-authenticating the user. By default the OAuth app rotates refresh tokens — every successful refresh call returns a new refresh_token you must persist. See Refresh tokens for the endpoint reference, sample integrations, and how to disable rotation per application.
PKCE is Mandatory

All IDP flows must use PKCE (Proof Key for Code Exchange) with the S256 method. See Security Best Practices for implementation details.

Next steps​

Next steps