Integration Guides

// app/providers.tsx — wrap your app
import { TokenForgeProvider } from '@opensyber/tokenforge/react';

export function Providers({ children }) {
  return (
    <TokenForgeProvider config={{
      apiBase: '/api',
      getSessionId: () => document.cookie.match(/session=([^;]+)/)?.[1],
    }}>
      {children}
    </TokenForgeProvider>
  );
}

// app.config.ts — add the HTTP interceptor
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { tokenForgeInterceptor } from './tokenforge.interceptor';

export const appConfig = {
  providers: [provideHttpClient(withInterceptors([tokenForgeInterceptor]))]
};

// tokenforge.interceptor.ts
export const tokenForgeInterceptor: HttpInterceptorFn = (req, next) => {
  // The script tag handles signing automatically.
  // This interceptor is only needed if you want to read tf status.
  return next(req);
};

// index.html — add the script tag
// <script src="https://tokenforge-api.opensyber.cloud/sdk.js"
//   data-api-key="tf_your_api_key"></script>

// main.ts — Vue 3
// Just add the script tag to index.html. That's it.
// The SDK intercepts all fetch() calls globally.

// If you want reactive trust status:
// composables/useTokenForge.ts
import { ref, onMounted } from 'vue';

export function useTokenForge() {
  const bound = ref(false);
  const deviceId = ref<string | null>(null);

  onMounted(() => {
    const tf = (window as any).__tokenforge;
    if (tf) {
      bound.value = tf.isBound();
      deviceId.value = tf.getDeviceId();
    }
  });

  return { bound, deviceId };
}

<!-- Works automatically with Clerk -->
<!-- The script tag detects Clerk's __clerk_db_jwt cookie -->
<script
  src="https://tokenforge-api.opensyber.cloud/sdk.js"
  data-api-key="tf_your_api_key"
></script>

<!-- Server: Express + Clerk + TokenForge -->
import { ClerkExpressWithAuth } from '@clerk/clerk-sdk-node';
import { tokenForgeMiddleware } from '@opensyber/tokenforge/express';

app.use(ClerkExpressWithAuth());    // Clerk handles auth
app.use(tokenForgeMiddleware({      // TokenForge verifies device
  apiKey: process.env.TOKENFORGE_API_KEY!,
}));

<!-- Works automatically with Microsoft SSO -->
<!-- The script tag detects MSAL session cookies -->
<script
  src="https://tokenforge-api.opensyber.cloud/sdk.js"
  data-api-key="tf_your_api_key"
></script>

<!-- Server: Express + MSAL + TokenForge -->
import { tokenForgeMiddleware } from '@opensyber/tokenforge/express';

// MSAL handles authentication, TokenForge handles session security
app.use(msalMiddleware);            // Microsoft handles auth
app.use(tokenForgeMiddleware({      // TokenForge verifies device
  apiKey: process.env.TOKENFORGE_API_KEY!,
}));

<!-- Works automatically with Auth0 -->
<script
  src="https://tokenforge-api.opensyber.cloud/sdk.js"
  data-api-key="tf_your_api_key"
></script>

<!-- Server: any framework -->
import { tokenForgeMiddleware } from '@opensyber/tokenforge/express';

app.use(auth0Middleware);           // Auth0 handles auth
app.use(tokenForgeMiddleware({      // TokenForge verifies device
  apiKey: process.env.TOKENFORGE_API_KEY!,
}));

<!-- Works automatically with Firebase Auth -->
<script
  src="https://tokenforge-api.opensyber.cloud/sdk.js"
  data-api-key="tf_your_api_key"
></script>

<!-- The script tag detects Firebase session cookies.
     All fetch() calls to your API are auto-signed. -->