[cli] Add Clerk auth support

.changeset/nine-jobs-occur.md

@@ -0,0 +1,5 @@
+---
+'create-expo-stack': minor
+---
+
+Add clerk authentication support

cli/__tests__/__snapshots__/cli-integration.test.ts.snap

@@ -1388,3 +1388,137 @@ exports[`generates a project with --expo-router --drawer+tabs --nativewindui --b
 ./myTestProject/tsconfig.json
 "
 `;
+
+exports[`generates a project with --expo-router --tabs --clerk --nativewind --bun --overwrite: --expo-router, --tabs, --clerk, --nativewind, --bun, --overwrite-package-json 1`] = `
+{
+  "dependencies": {
+    "@expo/vector-icons": "",
+    "@react-navigation/native": "",
+    "expo": "",
+    "expo-constants": "",
+    "expo-linking": "",
+    "expo-router": "",
+    "expo-status-bar": "",
+    "expo-system-ui": "",
+    "expo-web-browser": "",
+    "nativewind": "",
+    "react": "",
+    "react-dom": "",
+    "react-native": "",
+    "react-native-gesture-handler": "",
+    "react-native-reanimated": "",
+    "react-native-safe-area-context": "",
+    "react-native-screens": "",
+    "react-native-web": "",
+  },
+  "devDependencies": {
+    "@babel/core": "",
+    "@types/react": "",
+    "@typescript-eslint/eslint-plugin": "",
+    "@typescript-eslint/parser": "",
+    "ajv": "",
+    "eslint": "",
+    "eslint-config-universe": "",
+    "prettier": "",
+    "prettier-plugin-tailwindcss": "",
+    "tailwindcss": "",
+    "typescript": "",
+  },
+  "eslintConfig": {
+    "extends": "universe/native",
+    "root": true,
+  },
+  "expo": {
+    "install": {
+      "exclude": [
+        "react-native-safe-area-context",
+      ],
+    },
+  },
+  "main": "expo-router/entry",
+  "name": "myTestProject",
+  "private": true,
+  "scripts": {
+    "android": "expo start --android",
+    "format": "eslint "**/*.{js,jsx,ts,tsx}" --fix && prettier "**/*.{js,jsx,ts,tsx,json}" --write",
+    "ios": "expo start --ios",
+    "lint": "eslint "**/*.{js,jsx,ts,tsx}" && prettier -c "**/*.{js,jsx,ts,tsx,json}"",
+    "prebuild": "expo prebuild",
+    "start": "expo start",
+    "web": "expo start --web",
+  },
+  "version": "1.0.0",
+}
+`;
+
+exports[`generates a project with --expo-router --tabs --clerk --nativewind --bun --overwrite: --expo-router, --tabs, --clerk, --nativewind, --bun, --overwrite-ces-config-json 1`] = `
+{
+  "cesVersion": undefined,
+  "flags": {
+    "eas": false,
+    "importAlias": true,
+    "noGit": false,
+    "noInstall": false,
+    "overwrite": true,
+    "packageManager": "bun",
+  },
+  "os": {},
+  "packageManager": {
+    "type": "bun",
+    "version": undefined,
+  },
+  "packages": [
+    {
+      "name": "expo-router",
+      "options": {
+        "type": "stack",
+      },
+      "type": "navigation",
+    },
+    {
+      "name": "nativewind",
+      "type": "styling",
+    },
+  ],
+  "projectName": "myTestProject",
+}
+`;
+
+exports[`generates a project with --expo-router --tabs --clerk --nativewind --bun --overwrite: --expo-router, --tabs, --clerk, --nativewind, --bun, --overwrite-file-list 1`] = `
+"./myTestProject
+./myTestProject/.env
+./myTestProject/app
+./myTestProject/app-env.d.ts
+./myTestProject/app.json
+./myTestProject/app/(tabs)
+./myTestProject/app/(tabs)/_layout.tsx
+./myTestProject/app/(tabs)/index.tsx
+./myTestProject/app/(tabs)/two.tsx
+./myTestProject/app/+html.tsx
+./myTestProject/app/+not-found.tsx
+./myTestProject/app/_layout.tsx
+./myTestProject/app/modal.tsx
+./myTestProject/assets
+./myTestProject/assets/adaptive-icon.png
+./myTestProject/assets/favicon.png
+./myTestProject/assets/icon.png
+./myTestProject/assets/splash.png
+./myTestProject/babel.config.js
+./myTestProject/bun.lockb
+./myTestProject/cesconfig.json
+./myTestProject/components
+./myTestProject/components/Button.tsx
+./myTestProject/components/Container.tsx
+./myTestProject/components/EditScreenInfo.tsx
+./myTestProject/components/HeaderButton.tsx
+./myTestProject/components/ScreenContent.tsx
+./myTestProject/components/TabBarIcon.tsx
+./myTestProject/expo-env.d.ts
+./myTestProject/global.css
+./myTestProject/metro.config.js
+./myTestProject/package.json
+./myTestProject/prettier.config.js
+./myTestProject/tailwind.config.js
+./myTestProject/tsconfig.json
+"
+`;

cli/__tests__/cli-integration.test.ts

@@ -82,7 +82,9 @@ const popularCombinations = [
   // no install is important for the website cli that generates a project zip file
   ['--nativewindui', '--no-install'],
   // nativewindui blank
-  ['--expo-router', '--drawer+tabs', '--nativewindui', '--blank', '--expo-router']
+  ['--expo-router', '--drawer+tabs', '--nativewindui', '--blank', '--expo-router'],
+  // clerk expo-router tabs nativewind
+  ['--expo-router', '--tabs', '--clerk', '--nativewind']
 ] as const;
 
 const projectName = `myTestProject`;

cli/src/commands/create-expo-stack.ts

@@ -296,6 +296,14 @@ const command: GluegunCommand = {
           });
         }
 
+        if (options.clerk) {
+          // Add clerk package
+          cliResults.packages.push({
+            name: 'clerk',
+            type: 'authentication'
+          });
+        }
+
         // State Management packages
         if (options.zustand) {
           // Add zustand package

cli/src/templates/base/.gitignore.ejs

@@ -13,7 +13,7 @@ web-build/
 expo-env.d.ts<% } %>
 <% if (props.stylingPackage?.name === "tamagui") { %># tamagui
 .tamagui/<% } %>
-<% if ((props.authenticationPackage?.name === "supabase") || (props.authenticationPackage?.name === "firebase" || (props.analyticsPackage?.name === 'vexo-analytics'))) { %># firebase/supabase/vexo
+<% if ((props.authenticationPackage?.name === "clerk") || (props.authenticationPackage?.name === "supabase") || (props.authenticationPackage?.name === "firebase" || (props.analyticsPackage?.name === 'vexo-analytics'))) { %># clerk/firebase/supabase/vexo
 .env<% } %>
 
 ios

cli/src/templates/base/App.tsx.ejs

@@ -1,6 +1,11 @@
 import { ScreenContent } from 'components/ScreenContent';
 import { StatusBar } from 'expo-status-bar';
 
+<% if (props.authenticationPackage?.name === "clerk") { %>
+  import * as SecureStore from 'expo-secure-store'
+  import { ClerkLoaded, ClerkProvider } from '@clerk/clerk-expo';
+<% } %>
+
 <% if (props.internalizationPackage?.name === "i18next") { %>
   import './translation';
   import { InternalizationExample } from 'components/InternalizationExample';
@@ -28,46 +33,79 @@ import { StatusBar } from 'expo-status-bar';
   vexo(process.env.EXPO_PUBLIC_VEXO_API_KEY);
 <% } %>
 
-<% if (props.stylingPackage?.name === "restyle") {%>
-  export default function App() {   
-    return (
-      <ThemeProvider theme={theme}>
-        <ScreenContent title="Home" path="App.tsx">
-        <% if (props.internalizationPackage?.name === "i18next") { %>
-          <InternalizationExample />
-        <% } %>
-        </ScreenContent>
-        <StatusBar style="auto" />
-      </ThemeProvider>
-    );
+export default function App() {   
+<% if (props.authenticationPackage?.name === "clerk") { %>
+  const tokenCache = {
+    async getToken(key: string) {
+      try {
+        const item = await SecureStore.getItemAsync(key)
+        if (item) {
+          console.log(`${key} was used 🔐 \n`)
+        } else {
+          console.log('No values stored under key: ' + key)
+        }
+        return item
+      } catch (error) {
+        console.error('SecureStore get item error: ', error)
+        await SecureStore.deleteItemAsync(key)
+        return null
+      }
+    },
+    async saveToken(key: string, value: string) {
+      try {
+        return SecureStore.setItemAsync(key, value)
+      } catch (err) {
+        return
+      }
+    },
   }
-<% } else if (props.stylingPackage?.name === "tamagui") {%>
-  export default function App() {
-    return (
-      <TamaguiProvider config={config}>
-        <ScreenContent title="Home" path="App.tsx">
-        <% if (props.internalizationPackage?.name === "i18next") { %>
-          <InternalizationExample />
-        <% } else { %>
-          <Text>Open up App.tsx to start working on your app!</Text>
-        <% } %>
-        </ScreenContent>
-        <StatusBar style="auto" />
-      </TamaguiProvider>
-    );
+
+  const clerkPublishableKey = process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY;
+  if (!clerkPublishableKey) {
+    throw new Error('Missing EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY, add one in your .env file');
   }
+<% } %>
+
+  return (
+<% if (props.authenticationPackage?.name === "clerk") { %>
+    <ClerkProvider tokenCache={tokenCache} publishableKey={clerkPublishableKey}>
+      <ClerkLoaded>
+<% } else { %>
+    <>
+<% } %>
+<% if (props.stylingPackage?.name === "restyle") {%>
+        <ThemeProvider theme={theme}>
+          <ScreenContent title="Home" path="App.tsx">
+          <% if (props.internalizationPackage?.name === "i18next") { %>
+            <InternalizationExample />
+          <% } %>
+          </ScreenContent>
+          <StatusBar style="auto" />
+        </ThemeProvider>
+<% } else if (props.stylingPackage?.name === "tamagui") {%>
+        <TamaguiProvider config={config}>
+          <ScreenContent title="Home" path="App.tsx">
+          <% if (props.internalizationPackage?.name === "i18next") { %>
+            <InternalizationExample />
+          <% } else { %>
+            <Text>Open up App.tsx to start working on your app!</Text>
+          <% } %>
+          </ScreenContent>
+          <StatusBar style="auto" />
+        </TamaguiProvider>
 <% } else { %>
-  export default function App() {
-    return (
-      <>
         <ScreenContent title="Home" path="App.tsx">
         <% if (props.internalizationPackage?.name === "i18next") { %>
           <InternalizationExample />
         <% } %>
         </ScreenContent>
         <StatusBar style="auto" />
-      </>
-    );
-  }
 <% } %>
-
+<% if (props.authenticationPackage?.name === "clerk") { %>
+      </ClerkLoaded>
+    </ClerkProvider>
+<% } else { %>
+    </>
+<% } %>
+  );
+}

cli/src/templates/base/package.json.ejs

@@ -142,7 +142,16 @@
 	<% if (props.authenticationPackage?.name === "firebase") { %>
 	  "firebase": "^10.5.2",
 	<% } %>
-
+
+  <% if (props.authenticationPackage?.name === "clerk") { %>
+    "@clerk/clerk-expo": "2.2.5",
+    "expo-auth-session": "5.5.2",
+    "expo-secure-store": "13.0.2",
+    <% if (props.navigationPackage?.name !== "expo-router") { %>
+      "react-dom": "18.2.0",
+    <% } %>
+  <% } %>
+
   <% if (props.internalizationPackage?.name === "i18next") { %>
     "i18next": "^23.7.20",
     "react-i18next": "^14.0.1",

cli/src/templates/packages/clerk/.env.ejs

@@ -0,0 +1 @@
+EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=