Integration Guide

Step-by-step guide to add "Sign in with NetworkCoin" to any application.

Step 1: Register Your App

  1. Log in to networkcoin.id/console
  2. Go to Apps and click Create App
  3. Enter your app name and redirect URI (e.g. http://localhost:3000/callback)
  4. Copy your Client ID

Step 2: Choose Integration Method

Option A: Official SDK (React)

Terminal
npm install @networkcoin/sdk
app/layout.tsx
import { NetworkCoinProvider } from '@networkcoin/sdk/react';

export default function Layout({ children }) {
  return (
    <NetworkCoinProvider
      clientId={process.env.NEXT_PUBLIC_NETWORKCOIN_CLIENT_ID}
      redirectUri={process.env.NEXT_PUBLIC_NETWORKCOIN_REDIRECT_URI}
      scope="openid profile email wallet offline_access"
    >
      {children}
    </NetworkCoinProvider>
  );
}
components/auth-button.tsx
'use client';
import { useNetworkCoin } from '@networkcoin/sdk/react';

export function AuthButton() {
  const { user, isAuthenticated, isLoading, login, logout } = useNetworkCoin();

  if (isLoading) return <span>Loading...</span>;
  if (!isAuthenticated) return <button onClick={login}>Sign in with NetworkCoin</button>;

  return (
    <div>
      <span>Welcome, {user?.name}</span>
      <button onClick={() => logout(window.location.origin)}>Sign out</button>
    </div>
  );
}

Option B: NextAuth.js / Auth.js

auth.ts
import NextAuth from 'next-auth';

export const { handlers, auth } = NextAuth({
  providers: [{
    id: 'networkcoin',
    name: 'NetworkCoin ID',
    type: 'oidc',
    issuer: 'https://id.networkcoin.ai',
    clientId: process.env.NETWORKCOIN_CLIENT_ID,
    clientSecret: process.env.NETWORKCOIN_CLIENT_SECRET,
  }],
});

Option C: Manual OAuth 2.1 Flow

For any language/framework. See Authentication Flow for the full step-by-step.

Step 3: Configure Redirect URIs

In your Console app settings, add every redirect URI your app uses. The URI in your code must exactly match a registered URI.

Development:  http://localhost:3000/callback
Staging:      https://staging.yourapp.com/callback
Production:   https://yourapp.com/callback

Step 4: Handle the Callback

If using the SDK, this is automatic. For manual implementations, exchange the authorization code:

callback handler
const res = await fetch('https://id.networkcoin.ai/oauth/token', {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body: new URLSearchParams({
    grant_type: 'authorization_code',
    code: urlParams.get('code'),
    redirect_uri: 'https://yourapp.com/callback',
    client_id: 'YOUR_CLIENT_ID',
    code_verifier: storedVerifier, // from PKCE
  }),
});

const { access_token, id_token, refresh_token } = await res.json();

Step 5: Get User Info

const user = await fetch('https://id.networkcoin.ai/oauth/userinfo', {
  headers: { Authorization: `Bearer ${access_token}` },
}).then(r => r.json());

// { sub, name, email, email_verified, picture, wallet_address }

Environment Variables

.env.local
NETWORKCOIN_CLIENT_ID=your-client-id
NETWORKCOIN_CLIENT_SECRET=your-client-secret
NEXT_PUBLIC_NETWORKCOIN_CLIENT_ID=your-client-id
NEXT_PUBLIC_NETWORKCOIN_REDIRECT_URI=http://localhost:3000/callback
Scopes & ClaimsAPI Reference