Updating for new Kima keys

.env.example

@@ -10,7 +10,12 @@ DATABASE_URL=file:./db.sqlite
 
 # CLERK is used for authentication and authorization in the app
 # @see https://dashboard.clerk.dev for your Clerk API keys
+# 
+### LEGACY KEYS FOR APPS BEFORE 1/18/2023
+#NEXT_PUBLIC_CLERK_FRONTEND_API=clerk_api_key
+#CLERK_API_KEY=test_XXXXXXXXXXXXXXXXXXXXXXXX
+#CLERK_JWT_KEY=clerk_key_key
 
-NEXT_PUBLIC_CLERK_FRONTEND_API=clerk_api_key
-CLERK_API_KEY=test_XXXXXXXXXXXXXXXXXXXXXXXX
-CLERK_JWT_KEY=clerk_key_key
+### NEW KEYS FOR APPS AFTER 1/18/2023
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_XXXXXXXXXXXXXXXXXXXX
+CLERK_SECRET_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXX

README.md

@@ -65,7 +65,15 @@ pnpm db-push
 
 ### Configure Expo app
 
-In the `_app.tsx` replace `const clerk_frontend_api = "YOUR_CLERK_FRONTEND_API";` with your api key.
+In the /apps/expo/src/constants.ts you will find two different keys, only one is required, the FRONTEND_API is a legacy key for apps created prior to 1/18/2023:
+
+```
+// CLERK_FRONTEND_API is only for legacy apps
+export const CLERK_FRONTEND_API = "";
+
+// FOR CLERK APPS AFTER 1/18/2023 pk_test_XXXXXXXXXXXXXXXXXXXXXXXX
+export const CLERK_PUBLISHABLE_KEY = undefined;
+```
 
 ### Configure Expo `dev`-script
 

apps/expo/package.json

@@ -14,7 +14,7 @@
   "dependencies": {
     "@acme/api": "*",
     "@acme/tailwind-config": "*",
-    "@clerk/clerk-expo": "0.10.16",
+    "@clerk/clerk-expo": "0.11.3",
     "@shopify/flash-list": "^1.4.0",
     "@tanstack/react-query": "^4.16.1",
     "@trpc/client": "^10.1.0",

apps/expo/src/_app.tsx

@@ -7,11 +7,15 @@ import { HomeScreen } from "./screens/home";
 import { SignInSignUpScreen } from "./screens/signin";
 import { ClerkProvider, SignedIn, SignedOut } from "@clerk/clerk-expo";
 import { tokenCache } from "./utils/cache";
-import { CLERK_FRONTEND_API } from "./constants";
+import { CLERK_FRONTEND_API, CLERK_PUBLISHABLE_KEY } from "./constants";
 
 export const App = () => {
   return (
-    <ClerkProvider frontendApi={CLERK_FRONTEND_API} tokenCache={tokenCache}>
+    <ClerkProvider
+      frontendApi={CLERK_FRONTEND_API}
+      publishableKey={CLERK_PUBLISHABLE_KEY}
+      tokenCache={tokenCache}
+    >
       <SignedIn>
         <TRPCProvider>
           <SafeAreaProvider>

apps/expo/src/constants.ts

@@ -2,16 +2,21 @@
  * URL key for the Clerk auth API. You can find this in your Clerk dashboard:
  * https://dashboard.clerk.dev
  *
- * NOTE: we recommend putting the frontend api key here instead of in your .env
+ * NOTE: we recommend putting the frontend api key / publishable key here instead of in your .env
  * files for two reasons:
  * 1. It's okay for this to be "public" (CLERK_API_KEY and CLERK_JWT_KEY should
  *    NEVER be public)
  * 2. Parsing the .env file in Metro/Expo runs the risk of including the
  *    variables above that we don't want (and it's obnoxious to do right as a
  *    result)
  */
+
+// CLERK_FRONTEND_API is only for legacy apps
 export const CLERK_FRONTEND_API = "";
 
-if (CLERK_FRONTEND_API === "") {
-  throw new Error("CLERK_FRONTEND_API is not defined");
+// FOR CLERK APPS AFTER 1/18/2023 pk_test_XXXXXXXXXXXXXXXXXXXXXXXX
+export const CLERK_PUBLISHABLE_KEY = undefined;
+
+if (CLERK_FRONTEND_API === "" && CLERK_PUBLISHABLE_KEY === undefined) {
+  throw new Error("CLERK_FRONTEND_API or CLERK_PUBLISHABLE_KEY is not defined");
 }

apps/nextjs/package.json

@@ -15,7 +15,7 @@
     "@acme/api": "*",
     "@acme/db": "*",
     "@acme/tailwind-config": "*",
-    "@clerk/nextjs": "^4.6.14",
+    "@clerk/nextjs": "^4.7.4",
     "@tanstack/react-query": "^4.16.1",
     "@trpc/client": "^10.1.0",
     "@trpc/next": "^10.1.0",

apps/nextjs/src/env/schema.mjs

@@ -7,8 +7,9 @@ import { z } from "zod";
  */
 export const serverSchema = z.object({
   NODE_ENV: z.enum(["development", "test", "production"]),
-  CLERK_API_KEY: z.string(),
-  CLERK_JWT_KEY: z.string(),
+  CLERK_API_KEY: z.string().optional(),
+  CLERK_JWT_KEY: z.string().optional(),
+  CLERK_SECRET_KEY: z.string().optional(),
 });
 
 /**
@@ -17,7 +18,8 @@ export const serverSchema = z.object({
  * To expose them to the client, prefix them with `NEXT_PUBLIC_`.
  */
 export const clientSchema = z.object({
-  NEXT_PUBLIC_CLERK_FRONTEND_API: z.string(),
+  NEXT_PUBLIC_CLERK_FRONTEND_API: z.string().optional(),
+  NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string().optional(),
 });
 
 /**
@@ -28,4 +30,6 @@ export const clientSchema = z.object({
  */
 export const clientEnv = {
   NEXT_PUBLIC_CLERK_FRONTEND_API: process.env.NEXT_PUBLIC_CLERK_FRONTEND_API,
+  NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY:
+    process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
 };

package.json

@@ -16,13 +16,13 @@
   },
   "dependencies": {
     "@manypkg/cli": "^0.19.2",
-    "@typescript-eslint/eslint-plugin": "^5.43.0",
-    "@typescript-eslint/parser": "^5.43.0",
-    "eslint": "^8.28.0",
-    "prettier": "^2.7.1",
+    "@typescript-eslint/eslint-plugin": "^5.48.2",
+    "@typescript-eslint/parser": "^5.48.2",
+    "eslint": "^8.32.0",
+    "prettier": "^2.8.3",
     "prettier-plugin-tailwindcss": "^0.1.13",
-    "turbo": "^1.5.5",
-    "typescript": "^4.9.3"
+    "turbo": "^1.7.0",
+    "typescript": "^4.9.4"
   },
   "pnpm": {
     "patchedDependencies": {