React Provider & Hook

Drop-in React integration for NETWORKCOIN.ID.

NetworkCoinProvider

Wrap your app to enable authentication. Automatically handles OAuth callbacks and fetches user data on mount.

app/providers.tsx

import { NetworkCoinProvider } from '@networkcoin/sdk/react';

export function Providers({ children }) {
  return (
    <NetworkCoinProvider
      clientId="your-client-id"
      redirectUri="http://localhost:3000/callback"
      scope="openid profile email wallet"
      autoHandleCallback={true}   // Handle ?code= on mount (default: true)
      autoFetchUser={true}        // Fetch user if authenticated (default: true)
    >
      {children}
    </NetworkCoinProvider>
  );
}

Prop	Type	Default	Description
clientId	string	Required	Your app's client ID
redirectUri	string	Required	OAuth callback URL
scope	string	'openid profile email wallet'	Requested scopes
domain	string	'https://id.networkcoin.ai'	IdP domain
autoHandleCallback	boolean	true	Auto-handle ?code= in URL
autoFetchUser	boolean	true	Auto-fetch profile on mount

useNetworkCoin()

Access authentication state and methods from any component inside the provider.

Return values

const {
  user,              // NetworkCoinUser | null — current user profile
  isAuthenticated,   // boolean — has valid access token
  isLoading,         // boolean — true during initialization
  error,             // string | null — last error message
  login,             // () => Promise<void> — redirect to login
  logout,            // (redirectUri?) => Promise<void> — sign out
  getUser,           // () => Promise<NetworkCoinUser> — refresh user data
  getAccessToken,    // () => string | null — for API calls
  handleCallback,    // () => Promise<TokenResponse | null>
} = useNetworkCoin();

Full Example

app/page.tsx

'use client';
import { useNetworkCoin } from '@networkcoin/sdk/react';

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

  if (isLoading) return <p>Loading...</p>;

  if (!isAuthenticated) {
    return (
      <div>
        <h1>Welcome</h1>
        <button onClick={login}>Sign in with NetworkCoin</button>
      </div>
    );
  }

  return (
    <div>
      <img src={user?.picture} alt={user?.name} />
      <h1>Welcome, {user?.name}!</h1>
      <p>{user?.email}</p>
      <p>Wallet: {user?.wallet_address}</p>
      <button onClick={() => logout(window.location.origin)}>Sign out</button>
    </div>
  );
}

Using Access Token for API Calls

function ApiExample() {
  const { getAccessToken } = useNetworkCoin();

  const fetchData = async () => {
    const token = getAccessToken();
    const res = await fetch('https://your-api.com/protected', {
      headers: { Authorization: `Bearer ${token}` },
    });
    return res.json();
  };

  return <button onClick={fetchData}>Fetch Protected Data</button>;
}