Quick Start

npx create-next-app@latest my-vim-app --typescript --app
cd my-vim-app
npm install @vimconnect/app-sdk zod

# Your OAuth credentials (from Vim Connect platform)
NEXT_PUBLIC_CLIENT_ID=your_client_id
CLIENT_SECRET=your_client_secret

# Environment. Leave this as production unless Vim has given you staging access —
# the credentials you create in the Console are production credentials.
NEXT_PUBLIC_ENV=production

'use client';

import { useEffect, useRef } from 'react';
import { useSearchParams } from 'next/navigation';
import { Suspense } from 'react';

function LaunchContent() {
  const searchParams = useSearchParams();
  const redirectingRef = useRef(false);

  useEffect(() => {
    if (redirectingRef.current) return;

    const launchId = searchParams.get('launch_id');
    if (!launchId) return;

    redirectingRef.current = true;

    // Generate CSRF token for security
    const csrfToken = crypto.randomUUID();
    sessionStorage.setItem(`oauth_state_${launchId}`, csrfToken);

    // Determine backend URL based on environment
    const backendUrl = process.env.NEXT_PUBLIC_ENV === 'staging'
      ? 'https://api.stage.getvim.ai'
      : 'https://api.getvim.ai';

    // Redirect to Vim OAuth authorization
    const authorizeUrl = new URL('/app-auth/authorize', backendUrl);
    authorizeUrl.searchParams.set('response_type', 'code');
    authorizeUrl.searchParams.set('client_id', process.env.NEXT_PUBLIC_CLIENT_ID!);
    authorizeUrl.searchParams.set('launch', launchId);
    authorizeUrl.searchParams.set('scope', 'launch openid');
    authorizeUrl.searchParams.set('redirect_uri', `${window.location.origin}/app`);
    authorizeUrl.searchParams.set('state', `${launchId}:${csrfToken}`);

    window.location.href = authorizeUrl.toString();
  }, [searchParams]);

  return <div>Redirecting to authorization...</div>;
}

export default function LaunchPage() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LaunchContent />
    </Suspense>
  );
}

import { NextRequest, NextResponse } from 'next/server';

export async function POST(request: NextRequest) {
  const { code } = await request.json();

  const backendUrl = process.env.NEXT_PUBLIC_ENV === 'staging'
    ? 'https://api.stage.getvim.ai'
    : 'https://api.getvim.ai';

  const response = await fetch(`${backendUrl}/app-auth/token`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      grant_type: 'authorization_code',
      code,
      client_id: process.env.NEXT_PUBLIC_CLIENT_ID,
      client_secret: process.env.CLIENT_SECRET,
    }),
  });

  if (!response.ok) {
    const error = await response.json().catch(() => ({}));
    return NextResponse.json(error, { status: response.status });
  }

  const tokenData = await response.json();
  return NextResponse.json({
    access_token: tokenData.access_token,
    token_type: tokenData.token_type,
    expires_in: tokenData.expires_in,
  });
}

'use client';

import { Suspense, useEffect, useRef, useState } from 'react';
import { useSearchParams } from 'next/navigation';
import { initVimSDK, type VimSDK } from '@vimconnect/app-sdk';

function AppContent() {
  const searchParams = useSearchParams();
  const [sdk, setSdk] = useState<VimSDK | null>(null);
  const [patient, setPatient] = useState<any>(null);
  const [error, setError] = useState<string | null>(null);
  const initRef = useRef(false);

  useEffect(() => {
    if (initRef.current) return;
    initRef.current = true;

    async function initialize() {
      try {
        // 1. Validate OAuth callback parameters
        const code = searchParams.get('code');
        const state = searchParams.get('state');
        if (!code || !state) throw new Error('Missing OAuth parameters');

        // 2. Verify CSRF token
        const [launchId, csrfToken] = state.split(':');
        const stored = sessionStorage.getItem(`oauth_state_${launchId}`);
        if (csrfToken !== stored) throw new Error('CSRF validation failed');
        sessionStorage.removeItem(`oauth_state_${launchId}`);

        // 3. Exchange code for access token
        const tokenRes = await fetch('/api/auth/token', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ code }),
        });
        if (!tokenRes.ok) throw new Error('Token exchange failed');
        const { access_token } = await tokenRes.json();

        // 4. Initialize the SDK
        const vimSdk = await initVimSDK({
          accessToken: access_token,
          debug: true,
        });
        setSdk(vimSdk);

        // 5. Tell the hub we're ready
        vimSdk.hub.setActivationStatus('ENABLED');

        // 6. Subscribe to patient context
        vimSdk.ehr.context.onChange('chart_open:patient', (prev, curr) => {
          if (curr) {
            setPatient(curr);
          } else {
            setPatient(null);
          }
        });
      } catch (err: any) {
        setError(err.message);
      }
    }

    initialize();
  }, [searchParams]);

  if (error) return <div style={{ color: 'red', padding: 16 }}>Error: {error}</div>;
  if (!sdk) return <div style={{ padding: 16 }}>Connecting to Vim...</div>;
  if (!patient) return <div style={{ padding: 16 }}>Waiting for patient chart...</div>;

  return (
    <div style={{ padding: 16 }}>
      <h2>Patient Chart</h2>
      <pre>{JSON.stringify(patient.fields, null, 2)}</pre>
    </div>
  );
}

export default function AppPage() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <AppContent />
    </Suspense>
  );
}

npm run dev -- -p 8080