Environment Variables

Introduction

Environment variables in the Greenline client application are crucial for managing external API keys and other configuration settings. These variables allow the application to securely connect to third-party services for financial data and AI-powered features without hardcoding sensitive information directly into the source code.

The project primarily uses Next.js's convention for client-side environment variables, which requires them to be prefixed with NEXT_PUBLIC_. This prefix makes the variables accessible in the browser, which is necessary for the client-side components that directly fetch data from external APIs. The main services accessed via these variables are Polygon.io for market data and OpenAI for generative AI features.

Defined Variables

The application utilizes the following environment variables, which are accessed via process.env.

• NEXT_PUBLIC_OPENAI_API_KEY | API key for OpenAI, used for AI-powered summaries and chat features. | StockSummary, TickerChat - |

Usage and Data Flow

Polygon.io API Integration

The NEXT_PUBLIC_POLYGON_API_KEY is used extensively throughout the application to fetch data from various Polygon.io API endpoints. Components make direct, client-side requests to the API.

This diagram illustrates the data flow when the Hero component fetches live market data.

The API key is appended as a query parameter in the fetch request.

// client/src/components/Hero/index.tsx:23-26
const apiKey = process.env.NEXT_PUBLIC_POLYGON_API_KEY;

const promises = tickers.map(async (ticker) => {
  const response = await fetch(
    `https://api.polygon.io/v2/aggs/ticker/${ticker}/prev?adjusted=true&apiKey=${apiKey}`
  );

Sources: client/src/components/Hero/index.tsx:23-26, client/src/app/quote/[ticker]/page.tsx:78-79, client/src/components/NewsSection/index.tsx:40-41

OpenAI API Integration

The NEXT_PUBLIC_OPENAI_API_KEY is used to power generative AI features, such as the stock summary timeline and the interactive ticker chat. The OpenAI client is instantiated directly in the components that require it.

The following diagram shows the sequence for sending a message in the TickerChat component.

The OpenAI client is configured with dangerouslyAllowBrowser: true, which is required when using the API key directly on the client-side.

// client/src/components/TickerChat/index.tsx:61-64
const openai = new OpenAI({
  apiKey: process.env.NEXT_PUBLIC_OPENAI_API_KEY,
  dangerouslyAllowBrowser: true
});

Sources: client/src/components/TickerChat/index.tsx:61-64, client/src/components/StockSummary/index.tsx:81-84

Security Considerations

All identified environment variables use the NEXT_PUBLIC_ prefix, which means Next.js automatically embeds them into the JavaScript bundle sent to the client. This makes them publicly accessible in the browser.

This diagram shows how NEXT_PUBLIC_ variables are exposed to the client.

This client-side exposure is a significant security consideration. The use of dangerouslyAllowBrowser: true when initializing the OpenAI client explicitly acknowledges this risk. While necessary for the current architecture, it means the API keys can be extracted by any user inspecting the site's network traffic or source code. For a production application, it is recommended to move these API calls to a server-side API route to protect the keys.

Sources: client/src/components/TickerChat/index.tsx:63, client/src/components/StockSummary/index.tsx:83

Other API Keys

Hardcoded API Key

The StockRating component uses a hardcoded API key to fetch data from financialmodelingprep.com. This is a poor security practice as the key is committed directly into the version control history.

// client/src/components/StockRating/index.tsx:47-49
const response = await fetch(
  `https://financialmodelingprep.com/api/v3/rating/${ticker}?apikey=z00pmv1R647g3wa404anMdADxAoIxzmP`
);

This key should be migrated to an environment variable, such as NEXT_PUBLIC_FMP_API_KEY, to align with the practices used elsewhere in the application.

Sources: client/src/components/StockRating/index.tsx:47-49

Conclusion

The Greenline client application depends on NEXT_PUBLIC_POLYGON_API_KEY and NEXT_PUBLIC_OPENAI_API_KEY to function. These variables are configured for client-side access, enabling components to directly query external services. While this simplifies the architecture, it exposes the API keys to the public. Future development should consider proxying these requests through server-side API routes to enhance security. Additionally, any hardcoded keys, like the one in StockRating, should be refactored to use environment variables.