diff --git a/.changeset/lovely-kiwis-juggle.md b/.changeset/lovely-kiwis-juggle.md new file mode 100644 index 00000000000..c0739a2e484 --- /dev/null +++ b/.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` \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 73eb8b207ab..9c5fbc92d69 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29259,10 +29259,10 @@ }, "packages/backend": { "name": "@clerk/backend", - "version": "0.30.2", + "version": "0.30.3", "license": "MIT", "dependencies": { - "@clerk/shared": "0.24.2", + "@clerk/shared": "0.24.3", "@clerk/types": "3.54.0", "@peculiar/webcrypto": "1.4.1", "@types/node": "16.18.6", @@ -29304,11 +29304,11 @@ }, "packages/chrome-extension": { "name": "@clerk/chrome-extension", - "version": "0.4.5", + "version": "0.4.6", "license": "MIT", "dependencies": { - "@clerk/clerk-js": "4.60.0", - "@clerk/clerk-react": "4.26.2" + "@clerk/clerk-js": "4.60.1", + "@clerk/clerk-react": "4.26.3" }, "devDependencies": { "@types/chrome": "*", @@ -29324,11 +29324,11 @@ }, "packages/clerk-js": { "name": "@clerk/clerk-js", - "version": "4.60.0", + "version": "4.60.1", "license": "MIT", "dependencies": { "@clerk/localizations": "1.26.3", - "@clerk/shared": "0.24.2", + "@clerk/shared": "0.24.3", "@clerk/types": "3.54.0", "@emotion/cache": "11.10.5", "@emotion/react": "11.10.5", @@ -29667,11 +29667,12 @@ }, "packages/expo": { "name": "@clerk/clerk-expo", - "version": "0.19.7", + "version": "0.19.8", "license": "MIT", "dependencies": { - "@clerk/clerk-js": "4.60.0", - "@clerk/clerk-react": "4.26.2", + "@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" }, @@ -29697,11 +29698,11 @@ }, "packages/fastify": { "name": "@clerk/fastify", - "version": "0.6.12", + "version": "0.6.13", "license": "MIT", "dependencies": { - "@clerk/backend": "0.30.2", - "@clerk/shared": "0.24.2", + "@clerk/backend": "0.30.3", + "@clerk/shared": "0.24.3", "@clerk/types": "3.54.0", "cookies": "0.8.0" }, @@ -29718,12 +29719,12 @@ } }, "packages/gatsby-plugin-clerk": { - "version": "4.4.13", + "version": "4.4.14", "license": "MIT", "dependencies": { - "@clerk/backend": "0.30.2", - "@clerk/clerk-react": "4.26.2", - "@clerk/clerk-sdk-node": "4.12.11", + "@clerk/backend": "0.30.3", + "@clerk/clerk-react": "4.26.3", + "@clerk/clerk-sdk-node": "4.12.12", "@clerk/types": "3.54.0", "cookie": "0.5.0", "tslib": "2.4.1" @@ -29765,13 +29766,13 @@ }, "packages/nextjs": { "name": "@clerk/nextjs", - "version": "4.25.2", + "version": "4.25.3", "license": "MIT", "dependencies": { - "@clerk/backend": "0.30.2", - "@clerk/clerk-react": "4.26.2", - "@clerk/clerk-sdk-node": "4.12.11", - "@clerk/shared": "0.24.2", + "@clerk/backend": "0.30.3", + "@clerk/clerk-react": "4.26.3", + "@clerk/clerk-sdk-node": "4.12.12", + "@clerk/shared": "0.24.3", "@clerk/types": "3.54.0", "path-to-regexp": "6.2.1", "tslib": "2.4.1" @@ -29804,10 +29805,10 @@ }, "packages/react": { "name": "@clerk/clerk-react", - "version": "4.26.2", + "version": "4.26.3", "license": "MIT", "dependencies": { - "@clerk/shared": "0.24.2", + "@clerk/shared": "0.24.3", "@clerk/types": "3.54.0", "tslib": "2.4.1" }, @@ -29830,12 +29831,12 @@ }, "packages/remix": { "name": "@clerk/remix", - "version": "3.0.4", + "version": "3.0.5", "license": "MIT", "dependencies": { - "@clerk/backend": "0.30.2", - "@clerk/clerk-react": "4.26.2", - "@clerk/shared": "0.24.2", + "@clerk/backend": "0.30.3", + "@clerk/clerk-react": "4.26.3", + "@clerk/shared": "0.24.3", "@clerk/types": "3.54.0", "cookie": "0.5.0", "tslib": "2.4.1" @@ -29865,10 +29866,11 @@ }, "packages/sdk-node": { "name": "@clerk/clerk-sdk-node", - "version": "4.12.11", + "version": "4.12.12", "license": "MIT", "dependencies": { - "@clerk/backend": "0.30.2", + "@clerk/backend": "0.30.3", + "@clerk/shared": "0.24.3", "@clerk/types": "3.54.0", "@types/cookies": "0.7.7", "@types/express": "4.17.14", @@ -29905,7 +29907,7 @@ }, "packages/shared": { "name": "@clerk/shared", - "version": "0.24.2", + "version": "0.24.3", "license": "ISC", "dependencies": { "glob-to-regexp": "0.4.1", diff --git a/packages/expo/package.json b/packages/expo/package.json index 4ce40e841bd..ad3899e3f97 100644 --- a/packages/expo/package.json +++ b/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" }, diff --git a/packages/expo/src/ClerkProvider.tsx b/packages/expo/src/ClerkProvider.tsx index 1bc1248bb91..f2563956aed 100644 --- a/packages/expo/src/ClerkProvider.tsx +++ b/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 { @@ -14,10 +15,10 @@ export const wrapPageElement: GatsbyBrowser['wrapPageElement'] = ({ element, pro return ( // @ts-expect-error diff --git a/packages/gatsby-plugin-clerk/src/gatsby-ssr.tsx b/packages/gatsby-plugin-clerk/src/gatsby-ssr.tsx index 18f2a2430f8..8f55706b0b6 100644 --- a/packages/gatsby-plugin-clerk/src/gatsby-ssr.tsx +++ b/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 diff --git a/packages/gatsby-plugin-clerk/src/ssr/authenticateRequest.ts b/packages/gatsby-plugin-clerk/src/ssr/authenticateRequest.ts index f80bfc159ae..dbc6ea783dc 100644 --- a/packages/gatsby-plugin-clerk/src/ssr/authenticateRequest.ts +++ b/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) { diff --git a/packages/gatsby-plugin-clerk/src/ssr/clerkClient.ts b/packages/gatsby-plugin-clerk/src/ssr/clerkClient.ts index be7d24cd2fb..a6ed05bc75b 100644 --- a/packages/gatsby-plugin-clerk/src/ssr/clerkClient.ts +++ b/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, diff --git a/packages/gatsby-plugin-clerk/src/ssr/index.ts b/packages/gatsby-plugin-clerk/src/ssr/index.ts index 991a60c363e..c08165f7e12 100644 --- a/packages/gatsby-plugin-clerk/src/ssr/index.ts +++ b/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'; diff --git a/packages/gatsby-plugin-clerk/src/ssr/withServerAuth.ts b/packages/gatsby-plugin-clerk/src/ssr/withServerAuth.ts index fe2da7cc57e..9e50ee83b0e 100644 --- a/packages/gatsby-plugin-clerk/src/ssr/withServerAuth.ts +++ b/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'; diff --git a/packages/nextjs/README.md b/packages/nextjs/README.md index d25d6d20ba8..22f9db0c70c 100644 --- a/packages/nextjs/README.md +++ b/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 `` with our flexible Control Components to build an authentication flow diff --git a/packages/nextjs/src/global.d.ts b/packages/nextjs/src/global.d.ts index b4321ec3756..1754209d30f 100644 --- a/packages/nextjs/src/global.d.ts +++ b/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; diff --git a/packages/remix/README.md b/packages/remix/README.md index a248ad465b8..280e4d96a0b 100644 --- a/packages/remix/README.md +++ b/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. diff --git a/packages/remix/src/ssr/authenticateRequest.ts b/packages/remix/src/ssr/authenticateRequest.ts index a27bc51d50e..2167c01aa8d 100644 --- a/packages/remix/src/ssr/authenticateRequest.ts +++ b/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) || ''; diff --git a/packages/sdk-node/README.md b/packages/sdk-node/README.md index f30c9ae7029..53467eb60ca 100644 --- a/packages/sdk-node/README.md +++ b/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(); diff --git a/packages/sdk-node/examples/express/.env.sample b/packages/sdk-node/examples/express/.env.sample index cb3231a2b61..66ff269f8f9 100644 --- a/packages/sdk-node/examples/express/.env.sample +++ b/packages/sdk-node/examples/express/.env.sample @@ -1,4 +1,4 @@ -CLERK_API_KEY=test_foo +CLERK_SECRET_KEY=test_foo CLERK_API_URL=https://api.clerk.dev CLERK_LOGGING=false PORT=5000 diff --git a/packages/sdk-node/examples/express/src/runtime-keys-middleware.ts b/packages/sdk-node/examples/express/src/runtime-keys-middleware.ts index 2252b760180..6f10d179648 100644 --- a/packages/sdk-node/examples/express/src/runtime-keys-middleware.ts +++ b/packages/sdk-node/examples/express/src/runtime-keys-middleware.ts @@ -8,9 +8,9 @@ declare global { } } -// const clerk = new Clerk({ apiKey: secrets.CLERK_API_KEY }); +// const clerk = new Clerk({ secretKey: secrets.CLERK_SECRET_KEY }); // For better type support, prefer the newest createClerkClient: -const clerk = createClerkClient({ apiKey: secrets.CLERK_API_KEY }); +const clerk = createClerkClient({ secretKey: secrets.CLERK_SECRET_KEY }); const port = process.env.PORT || 3000; diff --git a/packages/sdk-node/examples/express/src/secrets.ts b/packages/sdk-node/examples/express/src/secrets.ts index 000932abd0e..dc192029d7d 100644 --- a/packages/sdk-node/examples/express/src/secrets.ts +++ b/packages/sdk-node/examples/express/src/secrets.ts @@ -1,3 +1,3 @@ export const secrets = { - CLERK_API_KEY: '[your-api-key]', + CLERK_SECRET_KEY: '[your-secret-key]', }; diff --git a/packages/sdk-node/examples/node/.env.sample b/packages/sdk-node/examples/node/.env.sample index ef98febcc9e..ee36d39f5d4 100644 --- a/packages/sdk-node/examples/node/.env.sample +++ b/packages/sdk-node/examples/node/.env.sample @@ -1,4 +1,4 @@ -CLERK_API_KEY=test_foo +CLERK_SECRET_KEY=test_foo CLIENT_ID=client_foo CLERK_LOGGING=false EMAIL_ADDRESS_ID=idn_yolo diff --git a/packages/sdk-node/package.json b/packages/sdk-node/package.json index 29f2cb0530e..4433e2a814a 100644 --- a/packages/sdk-node/package.json +++ b/packages/sdk-node/package.json @@ -59,6 +59,7 @@ }, "dependencies": { "@clerk/backend": "0.30.3", + "@clerk/shared": "0.24.3", "@clerk/types": "3.54.0", "@types/cookies": "0.7.7", "@types/express": "4.17.14", diff --git a/packages/sdk-node/src/utils.ts b/packages/sdk-node/src/utils.ts index 3500666ffef..537f5279da6 100644 --- a/packages/sdk-node/src/utils.ts +++ b/packages/sdk-node/src/utils.ts @@ -1,4 +1,5 @@ /* eslint-disable turbo/no-undeclared-env-vars */ +import { deprecated } from '@clerk/shared'; import type { IncomingMessage, ServerResponse } from 'http'; // https://nextjs.org/docs/api-routes/api-middlewares#connectexpress-middleware-support @@ -15,6 +16,10 @@ export function runMiddleware(req: IncomingMessage, res: ServerResponse, fn: (.. } export const loadClientEnv = () => { + if (process.env.CLERK_FRONTEND_API) { + deprecated('CLERK_FRONTEND_API', 'Use `CLERK_PUBLISHABLE_KEY` instead.'); + } + return { publishableKey: process.env.CLERK_PUBLISHABLE_KEY || '', frontendApi: process.env.CLERK_FRONTEND_API || '', @@ -24,6 +29,10 @@ export const loadClientEnv = () => { }; export const loadApiEnv = () => { + if (process.env.CLERK_API_KEY) { + deprecated('CLERK_API_KEY', 'Use `CLERK_SECRET_KEY` instead.'); + } + return { secretKey: process.env.CLERK_SECRET_KEY || process.env.CLERK_API_KEY || '', apiKey: process.env.CLERK_API_KEY || '', diff --git a/turbo.json b/turbo.json index 96cdc5188ac..ffa5342dc54 100644 --- a/turbo.json +++ b/turbo.json @@ -21,6 +21,10 @@ "CLERK_API_VERSION", "CLERK_API_KEY", "CLERK_SECRET_KEY", + "GATSBY_CLERK_JS", + "GATSBY_CLERK_FRONTEND_API", + "GATSBY_CLERK_PROXY_URL", + "GATSBY_CLERK_PUBLISHABLE_KEY", "NEXT_PUBLIC_CLERK_JS_VERSION", "NEXT_PUBLIC_CLERK_JS", "NEXT_PUBLIC_CLERK_FRONTEND_API",