feat(clerk-expo)!: React Native >= 0.73 and Expo Web support (#3456)

Co-authored-by: Lennart <[email protected]>

.changeset/two-wombats-confess.md

@@ -0,0 +1,17 @@
+---
+'@clerk/clerk-expo': major
+---
+
+Support for [Expo Web](https://docs.expo.dev/workflow/web/) has been added! You can now build fullstack websites with Expo, React, and Clerk. Utilize [Clerk's components](https://clerk.com/docs/components/overview) to build out your app.
+
+You can access the components from the `/web` subpath import like so:
+
+```tsx
+import { SignUp } from "@clerk/clerk-expo/web";
+
+export default function Page() {
+  return <SignUp />;
+}
+```
+
+**Breaking change:** You need to use Expo 50 or later. The minimum required React Native version was bumped to `0.73`.

.github/workflows/ci.yml

@@ -136,7 +136,7 @@ jobs:
 
     strategy:
       matrix:
-        test-name: ['generic', 'express', 'quickstart', 'ap-flows', 'elements', 'sessions', 'astro']
+        test-name: ['generic', 'express', 'quickstart', 'ap-flows', 'elements', 'sessions', 'astro', 'expo-web']
         test-project: ['chrome']
         include:
           - test-name: 'nextjs'

integration/models/application.ts

@@ -99,7 +99,10 @@ export const application = (
       const serverUrl = `http://localhost:${port}`;
       // If this is ever used as a background process, we need to make sure
       // it's not using the log function. See the dev() method above
-      const proc = run(scripts.serve, { cwd: appDirPath, env: { PORT: port.toString() } });
+      const proc = run(scripts.serve, {
+        cwd: appDirPath,
+        env: { PORT: port.toString() },
+      });
       cleanupFns.push(() => awaitableTreekill(proc.pid, 'SIGKILL'));
       await waitForIdleProcess(proc);
       state.serverUrl = serverUrl;

integration/presets/expo.ts

@@ -0,0 +1,18 @@
+import { applicationConfig } from '../models/applicationConfig';
+import { templates } from '../templates';
+
+const clerkExpoLocal = `file:${process.cwd()}/packages/expo`;
+
+const expoWeb = applicationConfig()
+  .setName('expo-web')
+  .useTemplate(templates['expo-web'])
+  .setEnvFormatter('public', key => `EXPO_PUBLIC_${key}`)
+  .addScript('setup', 'npm i')
+  .addScript('dev', 'npm run dev')
+  .addScript('build', 'npm run build')
+  .addScript('serve', 'npm run start')
+  .addDependency('@clerk/clerk-expo', clerkExpoLocal);
+
+export const expo = {
+  expoWeb,
+} as const;

integration/presets/index.ts

@@ -1,5 +1,6 @@
 import { astro } from './astro';
 import { elements } from './elements';
+import { expo } from './expo';
 import { envs, instanceKeys } from './envs';
 import { express } from './express';
 import { createLongRunningApps } from './longRunningApps';
@@ -15,6 +16,7 @@ export const appConfigs = {
   react,
   remix,
   elements,
+  expo,
   astro,
   secrets: {
     instanceKeys,

integration/presets/longRunningApps.ts

@@ -3,6 +3,7 @@ import { longRunningApplication } from '../models/longRunningApplication';
 import { astro } from './astro';
 import { elements } from './elements';
 import { envs } from './envs';
+import { expo } from './expo';
 import { express } from './express';
 import { next } from './next';
 import { react } from './react';
@@ -24,6 +25,7 @@ export const createLongRunningApps = () => {
     { id: 'quickstart.next.appRouter', config: next.appRouterQuickstart, env: envs.withEmailCodesQuickstart },
     { id: 'elements.next.appRouter', config: elements.nextAppRouter, env: envs.withEmailCodes },
     { id: 'astro.node.withCustomRoles', config: astro.node, env: envs.withCustomRoles },
+    { id: 'expo.expo-web', config: expo.expoWeb, env: envs.withEmailCodes },
   ] as const;
 
   const apps = configs.map(longRunningApplication);

integration/templates/expo-web/.gitignore

@@ -0,0 +1,14 @@
+node_modules/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store

integration/templates/expo-web/README.md

@@ -0,0 +1,50 @@
+# Welcome to your Expo app 👋
+
+This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
+
+## Get started
+
+1. Install dependencies
+
+   ```bash
+   npm install
+   ```
+
+2. Start the app
+
+   ```bash
+    npx expo start
+   ```
+
+In the output, you'll find options to open the app in a
+
+- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
+- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
+- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
+- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
+
+You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
+
+## Get a fresh project
+
+When you're ready, run:
+
+```bash
+npm run reset-project
+```
+
+This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
+
+## Learn more
+
+To learn more about developing your project with Expo, look at the following resources:
+
+- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
+- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
+
+## Join the community
+
+Join our community of developers creating universal apps.
+
+- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
+- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.

integration/templates/expo-web/app.json

@@ -0,0 +1,34 @@
+{
+  "expo": {
+    "name": "expo-web",
+    "slug": "expo-web",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/images/icon.png",
+    "scheme": "myapp",
+    "userInterfaceStyle": "automatic",
+    "splash": {
+      "image": "./assets/images/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/images/icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "bundler": "metro",
+      "output": "static",
+      "favicon": "./assets/images/icon.png"
+    },
+    "plugins": ["expo-router"],
+    "experiments": {
+      "typedRoutes": true
+    }
+  }
+}

integration/templates/expo-web/app/+html.tsx

@@ -0,0 +1,45 @@
+import { ScrollViewStyleReset } from 'expo-router/html';
+import type { PropsWithChildren } from 'react';
+
+/**
+ * This file is web-only and used to configure the root HTML for every web page during static rendering.
+ * The contents of this function only run in Node.js environments and do not have access to the DOM or browser APIs.
+ */
+export default function Root({ children }: PropsWithChildren) {
+  return (
+    <html lang='en'>
+      <head>
+        <meta charSet='utf-8' />
+        <meta
+          httpEquiv='X-UA-Compatible'
+          content='IE=edge'
+        />
+        <meta
+          name='viewport'
+          content='width=device-width, initial-scale=1, shrink-to-fit=no'
+        />
+
+        {/*
+          Disable body scrolling on web. This makes ScrollView components work closer to how they do on native.
+          However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line.
+        */}
+        <ScrollViewStyleReset />
+
+        {/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */}
+        <style dangerouslySetInnerHTML={{ __html: responsiveBackground }} />
+        {/* Add any additional <head> elements that you want globally available on web... */}
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}
+
+const responsiveBackground = `
+body {
+  background-color: #fff;
+}
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #000;
+  }
+}`;

integration/templates/expo-web/app/+not-found.tsx

@@ -0,0 +1,14 @@
+import { Link, Stack } from 'expo-router';
+import { StyleSheet, Text } from 'react-native';
+
+export default function NotFoundScreen() {
+  return (
+    <>
+      <Stack.Screen options={{ title: 'Oops!', headerShown: true }} />
+      <Text>This screen doesn't exist.</Text>
+      <Link href='/'>
+        <Text>Go to home screen!</Text>
+      </Link>
+    </>
+  );
+}

integration/templates/expo-web/app/_layout.tsx

@@ -0,0 +1,19 @@
+import { Stack, useRouter } from 'expo-router';
+import { ClerkLoaded, ClerkProvider } from '@clerk/clerk-expo';
+
+export default function RootLayout() {
+  const router = useRouter();
+
+  return (
+    <ClerkProvider
+      routerPush={(to: string) => router.push(to)}
+      routerReplace={to => router.replace(to)}
+    >
+      <ClerkLoaded>
+        <Stack>
+          <Stack.Screen name='index' />
+        </Stack>
+      </ClerkLoaded>
+    </ClerkProvider>
+  );
+}

integration/templates/expo-web/app/custom-sign-in.tsx

@@ -0,0 +1,67 @@
+import { useSignIn } from '@clerk/clerk-expo';
+import { Link, useRouter } from 'expo-router';
+import { Text, TextInput, Button, View } from 'react-native';
+import React from 'react';
+
+export default function Page() {
+  const { signIn, setActive, isLoaded } = useSignIn();
+  const router = useRouter();
+
+  const [emailAddress, setEmailAddress] = React.useState('');
+  const [password, setPassword] = React.useState('');
+
+  const onSignInPress = React.useCallback(async () => {
+    if (!isLoaded) {
+      return;
+    }
+
+    try {
+      const signInAttempt = await signIn.create({
+        identifier: emailAddress,
+        password,
+      });
+
+      if (signInAttempt.status === 'complete') {
+        await setActive({ session: signInAttempt.createdSessionId });
+        router.replace('/');
+      } else {
+        // See https://clerk.com/docs/custom-flows/error-handling
+        // for more info on error handling
+        console.error(JSON.stringify(signInAttempt, null, 2));
+      }
+    } catch (err: any) {
+      console.error(JSON.stringify(err, null, 2));
+    }
+  }, [isLoaded, emailAddress, password]);
+
+  return (
+    <View>
+      <TextInput
+        autoCapitalize='none'
+        value={emailAddress}
+        placeholder='Email...'
+        id='emailAddress'
+        testID='emailAddress-input'
+        onChangeText={emailAddress => setEmailAddress(emailAddress)}
+      />
+      <TextInput
+        value={password}
+        placeholder='Password...'
+        secureTextEntry={true}
+        id='password'
+        testID='password-input'
+        onChangeText={password => setPassword(password)}
+      />
+      <Button
+        title='Sign In'
+        onPress={onSignInPress}
+      />
+      <View>
+        <Text>Don't have an account?</Text>
+        <Link href='/sign-up'>
+          <Text>Sign up</Text>
+        </Link>
+      </View>
+    </View>
+  );
+}