Feat/clerk web + shared + mobile

backend/internal/service/server.go

@@ -161,8 +161,10 @@ func setupApp() *fiber.App {
 	}))
 
 	app.Use(cors.New(cors.Config{
-		AllowOrigins: "*",
+		AllowOrigins: "http://localhost:3000, http://localhost:8081",
 		AllowMethods: "GET,POST,PUT,DELETE",
+		AllowHeaders: "Origin, Content-Type, Authorization",
+		AllowCredentials: true,
 	}))
 
 	return app

clients/mobile/app.json

@@ -9,7 +9,8 @@
     "userInterfaceStyle": "automatic",
     "newArchEnabled": true,
     "ios": {
-      "supportsTablet": true
+      "supportsTablet": true,
+      "bundleIdentifier": "com.anonymous.mobile"
     },
     "android": {
       "adaptiveIcon": {
@@ -38,7 +39,8 @@
             "backgroundColor": "#000000"
           }
         }
-      ]
+      ],
+      "expo-secure-store"
     ],
     "experiments": {
       "typedRoutes": true,

clients/mobile/app/(tabs)/__tests__/index.test.tsx

@@ -1,14 +1,33 @@
 import { render } from "@testing-library/react-native";
 import HomeScreen from "../index";
 
-// Mock the shared hook
-jest.mock("@shared/hooks/use-hello", () => ({
-  useGetHelloName: jest.fn(() => ({
-    data: null,
+jest.mock("@clerk/clerk-expo", () => {
+  const actual = jest.requireActual("@clerk/clerk-expo");
+  return {
+    ...actual,
+    useAuth: () => ({
+      getToken: async () => null,
+      isLoaded: true,
+      isSignedIn: false,
+      userId: null,
+      sessionId: null,
+    }),
+  };
+});
+
+jest.mock("../../../hooks/use-hello", () => ({
+  useGetHello: () => ({
+    data: "hello",
+    isLoading: false,
+    error: null,
+    refetch: jest.fn(),
+  }),
+  useGetHelloName: () => ({
+    data: "hello-name",
     isLoading: false,
     error: null,
     refetch: jest.fn(),
-  })),
+  }),
 }));
 
 // Mock expo-image

clients/mobile/app/(tabs)/_layout.tsx

@@ -1,33 +1,38 @@
-import { Tabs } from 'expo-router';
-import React from 'react';
+import { Tabs } from "expo-router";
+import React from "react";
 
-import { HapticTab } from '@/components/haptic-tab';
-import { IconSymbol } from '@/components/ui/icon-symbol';
-import { Colors } from '@/constants/theme';
-import { useColorScheme } from '@/hooks/use-color-scheme';
+import { HapticTab } from "@/components/haptic-tab";
+import { IconSymbol } from "@/components/ui/icon-symbol";
+import { Colors } from "@/constants/theme";
+import { useColorScheme } from "@/hooks/use-color-scheme";
 
 export default function TabLayout() {
   const colorScheme = useColorScheme();
 
   return (
     <Tabs
       screenOptions={{
-        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
+        tabBarActiveTintColor: Colors[colorScheme ?? "light"].tint,
         headerShown: false,
         tabBarButton: HapticTab,
-      }}>
+      }}
+    >
       <Tabs.Screen
         name="index"
         options={{
-          title: 'Home',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
+          title: "Home",
+          tabBarIcon: ({ color }) => (
+            <IconSymbol size={28} name="house.fill" color={color} />
+          ),
         }}
       />
       <Tabs.Screen
         name="explore"
         options={{
-          title: 'Explore',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
+          title: "Explore",
+          tabBarIcon: ({ color }) => (
+            <IconSymbol size={28} name="paperplane.fill" color={color} />
+          ),
         }}
       />
     </Tabs>

clients/mobile/app/(tabs)/index.tsx

@@ -6,7 +6,7 @@ import { HelloWave } from "@/components/hello-wave";
 import ParallaxScrollView from "@/components/parallax-scroll-view";
 import { ThemedText } from "@/components/themed-text";
 import { ThemedView } from "@/components/themed-view";
-import { useGetHelloName } from "@shared/hooks/use-hello";
+import { useGetHelloName } from "@/hooks/use-hello";
 
 export default function HomeScreen() {
   const [name, setName] = useState("");

clients/mobile/app/_layout.tsx

@@ -1,16 +1,20 @@
-import {
-  DarkTheme,
-  DefaultTheme,
-  ThemeProvider,
-} from "@react-navigation/native";
 import { Stack } from "expo-router";
 import { StatusBar } from "expo-status-bar";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import "react-native-reanimated";
 import "../global.css";
+import {
+  DarkTheme,
+  DefaultTheme,
+  ThemeProvider,
+} from "@react-navigation/native";
 
+import { tokenCache } from "@clerk/clerk-expo/token-cache";
+import { ClerkProvider, ClerkLoaded, useAuth } from "@clerk/clerk-expo";
 import { useColorScheme } from "@/hooks/use-color-scheme";
+import { setConfig } from "@shared";
+import { useEffect } from "react";
 
 // Client explicity created outside component to avoid recreation
 const queryClient = new QueryClient({
@@ -27,25 +31,43 @@ export const unstable_settings = {
   anchor: "(tabs)",
 };
 
+// Component to configure auth provider and the api base url
+function AppConfigurator() {
+  const { getToken } = useAuth()
+  useEffect(() => {
+    setConfig({ API_BASE_URL: process.env.EXPO_PUBLIC_API_BASE_URL ?? '', getToken })
+  }, [getToken])
+
+  return null
+}
+
 export default function RootLayout() {
   const colorScheme = useColorScheme();
 
   return (
-    <QueryClientProvider client={queryClient}>
-      <SafeAreaProvider>
-        <ThemeProvider
-          value={colorScheme === "dark" ? DarkTheme : DefaultTheme}
-        >
-          <Stack>
-            <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-            <Stack.Screen
-              name="modal"
-              options={{ presentation: "modal", title: "Modal" }}
-            />
-          </Stack>
-          <StatusBar style="auto" />
-        </ThemeProvider>
-      </SafeAreaProvider>
-    </QueryClientProvider>
+    <ClerkProvider
+      publishableKey={process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY!}
+      tokenCache={tokenCache}
+    >
+      <ClerkLoaded>
+        <AppConfigurator />
+        <QueryClientProvider client={queryClient}>
+          <SafeAreaProvider>
+            <ThemeProvider
+              value={colorScheme === "dark" ? DarkTheme : DefaultTheme}
+            >
+              <Stack>
+                <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+                <Stack.Screen
+                  name="modal"
+                  options={{ presentation: "modal", title: "Modal" }}
+                />
+              </Stack>
+              <StatusBar style="auto" />
+            </ThemeProvider>
+          </SafeAreaProvider>
+        </QueryClientProvider>
+      </ClerkLoaded>
+    </ClerkProvider>
   );
 }

clients/mobile/app/index.tsx

@@ -0,0 +1,12 @@
+import { StyleSheet, Text, View } from "react-native";
+
+export default function Page() {
+  return (
+    <View className="flex-1 items-center p-6">
+      <View className="flex-1 justify-center max-w-4xl mx-auto">
+        <Text className="text-6xl font-bold">Hello</Text>
+        <Text className="text-4xl text-gray-700">World</Text>
+      </View>
+    </View>
+  );
+}

clients/mobile/app/modal.tsx

@@ -1,8 +1,8 @@
-import { Link } from 'expo-router';
-import { StyleSheet } from 'react-native';
+import { Link } from "expo-router";
+import { StyleSheet } from "react-native";
 
-import { ThemedText } from '@/components/themed-text';
-import { ThemedView } from '@/components/themed-view';
+import { ThemedText } from "@/components/themed-text";
+import { ThemedView } from "@/components/themed-view";
 
 export default function ModalScreen() {
   return (
@@ -18,8 +18,8 @@ export default function ModalScreen() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
+    alignItems: "center",
+    justifyContent: "center",
     padding: 20,
   },
   link: {

clients/mobile/babel.config.js

@@ -6,15 +6,6 @@ module.exports = function (api) {
       "nativewind/babel",
     ],
     plugins: [
-      [
-        "module:react-native-dotenv",
-        {
-          moduleName: "react-native-dotenv",
-          path: ".env",
-          safe: false,
-          allowUndefined: true,
-        },
-      ],
     ],
   };
 };

clients/mobile/components/__tests__/themed-text.test.tsx

@@ -1,32 +1,34 @@
-import { render } from '@testing-library/react-native';
-import { ThemedText } from '../themed-text';
+import { render } from "@testing-library/react-native";
+import { ThemedText } from "../themed-text";
 
-describe('ThemedText', () => {
-  it('renders text content', () => {
+describe("ThemedText", () => {
+  it("renders text content", () => {
     const { getByText } = render(<ThemedText>Hello World</ThemedText>);
-    expect(getByText('Hello World')).toBeTruthy();
+    expect(getByText("Hello World")).toBeTruthy();
   });
 
-  it('applies title className', () => {
+  it("applies title className", () => {
     const { getByText } = render(<ThemedText type="title">Title</ThemedText>);
-    const element = getByText('Title');
-    expect(element.props.className).toContain('text-[32px]');
-    expect(element.props.className).toContain('font-bold');
+    const element = getByText("Title");
+    expect(element.props.className).toContain("text-[32px]");
+    expect(element.props.className).toContain("font-bold");
   });
 
-  it('applies custom className', () => {
+  it("applies custom className", () => {
     const { getByText } = render(
-      <ThemedText className="text-red-500">Custom</ThemedText>
+      <ThemedText className="text-red-500">Custom</ThemedText>,
     );
-    const element = getByText('Custom');
-    expect(element.props.className).toContain('text-red-500');
+    const element = getByText("Custom");
+    expect(element.props.className).toContain("text-red-500");
   });
 
-  it('passes through props', () => {
+  it("passes through props", () => {
     const { getByTestId } = render(
-      <ThemedText testID="test-text" numberOfLines={2}>Test</ThemedText>
+      <ThemedText testID="test-text" numberOfLines={2}>
+        Test
+      </ThemedText>,
     );
-    const element = getByTestId('test-text');
+    const element = getByTestId("test-text");
     expect(element.props.numberOfLines).toBe(2);
   });
 });

clients/mobile/components/external-link.tsx

@@ -1,8 +1,13 @@
-import { Href, Link } from 'expo-router';
-import { openBrowserAsync, WebBrowserPresentationStyle } from 'expo-web-browser';
-import { type ComponentProps } from 'react';
+import { Href, Link } from "expo-router";
+import {
+  openBrowserAsync,
+  WebBrowserPresentationStyle,
+} from "expo-web-browser";
+import { type ComponentProps } from "react";
 
-type Props = Omit<ComponentProps<typeof Link>, 'href'> & { href: Href & string };
+type Props = Omit<ComponentProps<typeof Link>, "href"> & {
+  href: Href & string;
+};
 
 export function ExternalLink({ href, ...rest }: Props) {
   return (
@@ -11,7 +16,7 @@ export function ExternalLink({ href, ...rest }: Props) {
       {...rest}
       href={href}
       onPress={async (event) => {
-        if (process.env.EXPO_OS !== 'web') {
+        if (process.env.EXPO_OS !== "web") {
           // Prevent the default behavior of linking to the default browser on native.
           event.preventDefault();
           // Open the link in an in-app browser.

clients/mobile/components/haptic-tab.tsx

@@ -1,13 +1,13 @@
-import { BottomTabBarButtonProps } from '@react-navigation/bottom-tabs';
-import { PlatformPressable } from '@react-navigation/elements';
-import * as Haptics from 'expo-haptics';
+import { BottomTabBarButtonProps } from "@react-navigation/bottom-tabs";
+import { PlatformPressable } from "@react-navigation/elements";
+import * as Haptics from "expo-haptics";
 
 export function HapticTab(props: BottomTabBarButtonProps) {
   return (
     <PlatformPressable
       {...props}
       onPressIn={(ev) => {
-        if (process.env.EXPO_OS === 'ios') {
+        if (process.env.EXPO_OS === "ios") {
           // Add a soft haptic feedback when pressing down on the tabs.
           Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
         }

clients/mobile/components/hello-wave.tsx

@@ -1,16 +1,17 @@
-import Animated from 'react-native-reanimated';
+import Animated from "react-native-reanimated";
 
 export function HelloWave() {
   return (
     <Animated.Text
       className="text-[28px] leading-8 -mt-1.5"
       style={{
         animationName: {
-          '50%': { transform: [{ rotate: '25deg' }] },
+          "50%": { transform: [{ rotate: "25deg" }] },
         },
         animationIterationCount: 4,
-        animationDuration: '300ms',
-      }}>
+        animationDuration: "300ms",
+      }}
+    >
       👋
     </Animated.Text>
   );