chore(shared,clerk-expo): Apply deprecation warnings env variables

.changeset/lovely-kiwis-juggle.md

@@ -0,0 +1,13 @@
+---
+'gatsby-plugin-clerk': patch
+'@clerk/clerk-sdk-node': patch
+'@clerk/nextjs': patch
+'@clerk/remix': patch
+'@clerk/clerk-expo': patch
+---
+
+Warn about environment variables deprecations:
+
+- `CLERK_API_KEY`
+- `CLERK_FRONTEND_API`
+- `NEXT_PUBLIC_CLERK_FRONTEND_API`

packages/expo/package.json

@@ -29,6 +29,7 @@
   "dependencies": {
     "@clerk/clerk-js": "4.60.1",
     "@clerk/clerk-react": "4.26.3",
+    "@clerk/shared": "0.24.3",
     "base-64": "1.0.0",
     "react-native-url-polyfill": "2.0.0"
   },

packages/expo/src/ClerkProvider.tsx

@@ -3,6 +3,7 @@ import './polyfills';
 
 import type { ClerkProviderProps as ClerkReactProviderProps } from '@clerk/clerk-react';
 import { __internal__setErrorThrowerOptions, ClerkProvider as ClerkReactProvider } from '@clerk/clerk-react';
+import { deprecated } from '@clerk/shared';
 import React from 'react';
 
 import type { TokenCache } from './cache';
@@ -23,6 +24,10 @@ export function ClerkProvider(props: ClerkProviderProps): JSX.Element {
   const key =
     publishableKey || process.env.CLERK_PUBLISHABLE_KEY || frontendApi || process.env.CLERK_FRONTEND_API || '';
 
+  if (process.env.CLERK_FRONTEND_API) {
+    deprecated('CLERK_FRONTEND_API', 'Use `CLERK_PUBLISHABLE_KEY` instead.');
+  }
+
   return (
     //@ts-expect-error
     <ClerkReactProvider

packages/gatsby-plugin-clerk/src/constants.ts

@@ -0,0 +1,23 @@
+import { deprecated } from '@clerk/shared';
+
+export const API_URL = process.env.CLERK_API_URL || 'https://api.clerk.dev';
+export const API_VERSION = process.env.CLERK_API_VERSION || 'v1';
+/**
+ * @deprecated Use `CLERK_SECRET_KEY` instead.
+ */
+export const API_KEY = process.env.CLERK_API_KEY || '';
+if (API_KEY) {
+  deprecated('CLERK_API_KEY', 'Use `CLERK_SECRET_KEY` environment variable instead.');
+}
+export const SECRET_KEY = process.env.CLERK_SECRET_KEY || '';
+/**
+ * @deprecated Use `PUBLISHABLE_KEY` instead.
+ */
+export const FRONTEND_API = process.env.GATSBY_CLERK_FRONTEND_API || '';
+if (FRONTEND_API) {
+  deprecated('FRONTEND_API', 'Use `PUBLISHABLE_KEY` environment variable instead.');
+}
+export const PUBLISHABLE_KEY = process.env.GATSBY_CLERK_PUBLISHABLE_KEY || '';
+
+export const CLERK_JS = process.env.GATSBY_CLERK_JS;
+export const PROXY_URL = process.env.GATSBY_CLERK_PROXY_URL;

packages/gatsby-plugin-clerk/src/gatsby-browser.tsx

@@ -2,6 +2,7 @@
 import type { GatsbyBrowser } from 'gatsby';
 import React from 'react';
 
+import { CLERK_JS, FRONTEND_API, PROXY_URL, PUBLISHABLE_KEY } from './constants';
 import { ClerkProvider } from './GatsbyClerkProvider';
 
 export const wrapPageElement: GatsbyBrowser['wrapPageElement'] = ({ element, props }, pluginOptions) => {
@@ -14,10 +15,10 @@ export const wrapPageElement: GatsbyBrowser['wrapPageElement'] = ({ element, pro
   return (
     // @ts-expect-error
     <ClerkProvider
-      frontendApi={process.env.GATSBY_CLERK_FRONTEND_API || ''}
-      publishableKey={process.env.GATSBY_CLERK_PUBLISHABLE_KEY || ''}
-      clerkJSUrl={process.env.GATSBY_CLERK_JS}
-      proxyUrl={process.env.GATSBY_CLERK_PROXY_URL}
+      frontendApi={FRONTEND_API || ''}
+      publishableKey={PUBLISHABLE_KEY || ''}
+      clerkJSUrl={CLERK_JS}
+      proxyUrl={PROXY_URL}
       clerkState={clerkSsrState || {}}
       {...pluginOptions}
     >

packages/gatsby-plugin-clerk/src/gatsby-ssr.tsx

@@ -2,6 +2,7 @@
 import type { GatsbySSR } from 'gatsby';
 import React from 'react';
 
+import { CLERK_JS, FRONTEND_API, PROXY_URL, PUBLISHABLE_KEY } from './constants';
 import { ClerkProvider } from './GatsbyClerkProvider';
 
 export const wrapPageElement: GatsbySSR['wrapPageElement'] = ({ element, props }, pluginOptions) => {
@@ -14,10 +15,10 @@ export const wrapPageElement: GatsbySSR['wrapPageElement'] = ({ element, props }
   return (
     // @ts-expect-error
     <ClerkProvider
-      frontendApi={process.env.GATSBY_CLERK_FRONTEND_API || ''}
-      publishableKey={process.env.GATSBY_CLERK_PUBLISHABLE_KEY || ''}
-      clerkJSUrl={process.env.GATSBY_CLERK_JS}
-      proxyUrl={process.env.GATSBY_CLERK_PROXY_URL}
+      frontendApi={FRONTEND_API}
+      publishableKey={PUBLISHABLE_KEY}
+      clerkJSUrl={CLERK_JS}
+      proxyUrl={PROXY_URL}
       clerkState={clerkSsrState || {}}
       {...pluginOptions}
     >

packages/gatsby-plugin-clerk/src/ssr/authenticateRequest.ts

@@ -1,14 +1,7 @@
 import type { GetServerDataProps } from 'gatsby';
 
-import {
-  API_KEY,
-  clerkClient,
-  constants,
-  createIsomorphicRequest,
-  FRONTEND_API,
-  PUBLISHABLE_KEY,
-  SECRET_KEY,
-} from './clerkClient';
+import { API_KEY, FRONTEND_API, PUBLISHABLE_KEY, SECRET_KEY } from '../constants';
+import { clerkClient, constants, createIsomorphicRequest } from './clerkClient';
 import type { WithServerAuthOptions } from './types';
 
 export function authenticateRequest(context: GetServerDataProps, options: WithServerAuthOptions) {

packages/gatsby-plugin-clerk/src/ssr/clerkClient.ts

@@ -1,12 +1,7 @@
 /* eslint-disable turbo/no-undeclared-env-vars */
 import { Clerk } from '@clerk/backend';
 
-export const API_URL = process.env.CLERK_API_URL || 'https://api.clerk.dev';
-export const API_VERSION = process.env.CLERK_API_VERSION || 'v1';
-export const API_KEY = process.env.CLERK_API_KEY || '';
-export const SECRET_KEY = process.env.CLERK_SECRET_KEY || '';
-export const FRONTEND_API = process.env.GATSBY_CLERK_FRONTEND_API || '';
-export const PUBLISHABLE_KEY = process.env.GATSBY_CLERK_PUBLISHABLE_KEY || '';
+import { API_KEY, API_URL, API_VERSION, SECRET_KEY } from '../constants';
 
 const clerkClient = Clerk({
   apiKey: API_KEY,

packages/gatsby-plugin-clerk/src/ssr/index.ts

@@ -1,2 +1,5 @@
 export * from './withServerAuth';
 export * from './clerkClient';
+// TODO(@dimkl): Exposing env variables should be dropped in favor of a
+// universal config loaded. Export `constants` will be dropped in later version.
+export * from '../constants';

packages/gatsby-plugin-clerk/src/ssr/withServerAuth.ts

@@ -1,7 +1,8 @@
 import type { GetServerDataProps, GetServerDataReturn } from 'gatsby';
 
+import { FRONTEND_API, PUBLISHABLE_KEY } from '../constants';
 import { authenticateRequest } from './authenticateRequest';
-import { clerkClient, constants, FRONTEND_API, PUBLISHABLE_KEY } from './clerkClient';
+import { clerkClient, constants } from './clerkClient';
 import type { WithServerAuthCallback, WithServerAuthOptions, WithServerAuthResult } from './types';
 import { injectAuthIntoContext, injectSSRStateIntoProps, sanitizeAuthObject } from './utils';
 

packages/nextjs/README.md

@@ -71,7 +71,7 @@ If you are using the previous version of Clerk keys, set `NEXT_PUBLIC_CLERK_FRON
 your `.env.local` file.
 
 ```sh
-NEXT_PUBLIC_CLERK_FRONTEND_API=clerk.[your-domain].[tld]
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_(test|live)_xxxxxxx
 ```
 
 An implementation of `<ClerkProvider />` with our flexible Control Components to build an authentication flow

packages/nextjs/src/global.d.ts

@@ -8,9 +8,9 @@ declare global {
 declare global {
   namespace NodeJS {
     interface ProcessEnv {
+      CLERK_SECRET_KEY: string | undefined;
       NEXT_PUBLIC_CLERK_FRONTEND_API: string | undefined;
       NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: string | undefined;
-      NEXT_PUBLIC_CLERK_SECRET_KEY: string | undefined;
       NEXT_PUBLIC_CLERK_PROXY_URL: string | undefined;
       NEXT_PUBLIC_CLERK_SIGN_IN_URL: string | undefined;
       NEXT_PUBLIC_CLERK_SIGN_UP_URL: string | undefined;

packages/remix/README.md

@@ -64,9 +64,8 @@ npm run dev
 Make sure the following environment variables are set in a `.env` file:
 
 ```sh
-CLERK_FRONTEND_API=[frontend-api-key]
-CLERK_API_KEY=[backend-api-key]
-CLERK_JWT_KEY=[jwt-verification-key]
+CLERK_PUBLISHABLE_KEY=[publishable-key]
+CLERK_SECRET_KEY=[backend-secret-key]
 ```
 
 You can get these from the [API Keys](https://dashboard.clerk.com/last-active?path=api-keys) screen in your Clerk dashboard.

packages/remix/src/ssr/authenticateRequest.ts

@@ -1,6 +1,6 @@
 import type { RequestState } from '@clerk/backend';
 import { buildRequestUrl, Clerk } from '@clerk/backend';
-import { handleValueOrFn, isHttpOrHttps, isProxyUrlRelative } from '@clerk/shared';
+import { deprecated, handleValueOrFn, isHttpOrHttps, isProxyUrlRelative } from '@clerk/shared';
 
 import {
   noSecretKeyOrApiKeyError,
@@ -29,12 +29,27 @@ export function authenticateRequest(args: LoaderFunctionArgs, opts: RootAuthLoad
   // 4. Then from loader context (Cloudflare Pages).
   const secretKey = opts.secretKey || getEnvVariable('CLERK_SECRET_KEY') || (context?.CLERK_SECRET_KEY as string) || '';
   const apiKey = opts.apiKey || getEnvVariable('CLERK_API_KEY') || (context?.CLERK_API_KEY as string) || '';
+  if (apiKey) {
+    if (getEnvVariable('CLERK_API_KEY')) {
+      deprecated('CLERK_API_KEY', 'Use `CLERK_SECRET_KEY` instead.');
+    } else {
+      deprecated('apiKey', 'Use `secretKey` instead.');
+    }
+  }
+
   if (!secretKey && !apiKey) {
     throw new Error(noSecretKeyOrApiKeyError);
   }
 
   const frontendApi =
     opts.frontendApi || getEnvVariable('CLERK_FRONTEND_API') || (context?.CLERK_FRONTEND_API as string) || '';
+  if (frontendApi) {
+    if (getEnvVariable('CLERK_FRONTEND_API')) {
+      deprecated('CLERK_FRONTEND_API', 'Use `CLERK_PUBLISHABLE_KEY` instead.');
+    } else {
+      deprecated('frontendApi', 'Use `publishableKey` instead.');
+    }
+  }
 
   const publishableKey =
     opts.publishableKey || getEnvVariable('CLERK_PUBLISHABLE_KEY') || (context?.CLERK_PUBLISHABLE_KEY as string) || '';

packages/sdk-node/README.md

@@ -63,7 +63,7 @@ CLERK_SECRET_KEY=sk_******
 You will then be able to access all the available methods.
 
 ```js
-import 'dotenv/config'; // To read CLERK_API_KEY
+import 'dotenv/config'; // To read CLERK_SECRET_KEY
 import clerk from '@clerk/clerk-sdk-node';
 
 const userList = await clerk.users.getUserList();