From b4d13e6a9f849d4a472f80bd566ca6a8be1f1043 Mon Sep 17 00:00:00 2001 From: Max Koon <22125083+k2on@users.noreply.github.com> Date: Sun, 12 Oct 2025 16:03:28 -0400 Subject: [PATCH] feat: add auth --- .gitignore | 3 + app.json | 2 +- app/(tabs)/_layout.tsx | 35 --- app/(tabs)/explore.tsx | 112 -------- app/(tabs)/index.tsx | 98 ------- app/_layout.tsx | 10 +- app/api/auth/[...auth]+api.ts | 4 + app/auth.tsx | 16 ++ app/index.tsx | 18 ++ app/modal.tsx | 29 -- flake.nix | 9 + lib/auth-client.ts | 16 ++ lib/auth.ts | 24 ++ metro.config.js | 7 + package.json | 12 +- pnpm-lock.yaml | 502 ++++++++++++++++++++++++++++++++++ process-compose.yaml | 41 +++ 17 files changed, 657 insertions(+), 281 deletions(-) delete mode 100644 app/(tabs)/_layout.tsx delete mode 100644 app/(tabs)/explore.tsx delete mode 100644 app/(tabs)/index.tsx create mode 100644 app/api/auth/[...auth]+api.ts create mode 100644 app/auth.tsx create mode 100644 app/index.tsx delete mode 100644 app/modal.tsx create mode 100644 lib/auth-client.ts create mode 100644 lib/auth.ts create mode 100644 metro.config.js create mode 100644 process-compose.yaml diff --git a/.gitignore b/.gitignore index 87f9b7f..ca8b0ae 100644 --- a/.gitignore +++ b/.gitignore @@ -43,3 +43,6 @@ app-example /android .direnv/ +.db/ +.logs +.env diff --git a/app.json b/app.json index 0321baf..38398b6 100644 --- a/app.json +++ b/app.json @@ -22,7 +22,7 @@ "predictiveBackGestureEnabled": false }, "web": { - "output": "static", + "output": "server", "favicon": "./assets/images/favicon.png" }, "plugins": [ diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx deleted file mode 100644 index 54e11d0..0000000 --- a/app/(tabs)/_layout.tsx +++ /dev/null @@ -1,35 +0,0 @@ -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'; - -export default function TabLayout() { - const colorScheme = useColorScheme(); - - return ( - - , - }} - /> - , - }} - /> - - ); -} diff --git a/app/(tabs)/explore.tsx b/app/(tabs)/explore.tsx deleted file mode 100644 index 71518f9..0000000 --- a/app/(tabs)/explore.tsx +++ /dev/null @@ -1,112 +0,0 @@ -import { Image } from 'expo-image'; -import { Platform, StyleSheet } from 'react-native'; - -import { Collapsible } from '@/components/ui/collapsible'; -import { ExternalLink } from '@/components/external-link'; -import ParallaxScrollView from '@/components/parallax-scroll-view'; -import { ThemedText } from '@/components/themed-text'; -import { ThemedView } from '@/components/themed-view'; -import { IconSymbol } from '@/components/ui/icon-symbol'; -import { Fonts } from '@/constants/theme'; - -export default function TabTwoScreen() { - return ( - - }> - - - Explore - - - This app includes example code to help you get started. - - - This app has two screens:{' '} - app/(tabs)/index.tsx and{' '} - app/(tabs)/explore.tsx - - - The layout file in app/(tabs)/_layout.tsx{' '} - sets up the tab navigator. - - - Learn more - - - - - You can open this project on Android, iOS, and the web. To open the web version, press{' '} - w in the terminal running this project. - - - - - For static images, you can use the @2x and{' '} - @3x suffixes to provide files for - different screen densities - - - - Learn more - - - - - This template has light and dark mode support. The{' '} - useColorScheme() hook lets you inspect - what the user's current color scheme is, and so you can adjust UI colors accordingly. - - - Learn more - - - - - This template includes an example of an animated component. The{' '} - components/HelloWave.tsx component uses - the powerful{' '} - - react-native-reanimated - {' '} - library to create a waving hand animation. - - {Platform.select({ - ios: ( - - The components/ParallaxScrollView.tsx{' '} - component provides a parallax effect for the header image. - - ), - })} - - - ); -} - -const styles = StyleSheet.create({ - headerImage: { - color: '#808080', - bottom: -90, - left: -35, - position: 'absolute', - }, - titleContainer: { - flexDirection: 'row', - gap: 8, - }, -}); diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx deleted file mode 100644 index 786b736..0000000 --- a/app/(tabs)/index.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import { Image } from 'expo-image'; -import { Platform, StyleSheet } from 'react-native'; - -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 { Link } from 'expo-router'; - -export default function HomeScreen() { - return ( - - }> - - Welcome! - - - - Step 1: Try it - - Edit app/(tabs)/index.tsx to see changes. - Press{' '} - - {Platform.select({ - ios: 'cmd + d', - android: 'cmd + m', - web: 'F12', - })} - {' '} - to open developer tools. - - - - - - Step 2: Explore - - - - alert('Action pressed')} /> - alert('Share pressed')} - /> - - alert('Delete pressed')} - /> - - - - - - {`Tap the Explore tab to learn more about what's included in this starter app.`} - - - - Step 3: Get a fresh start - - {`When you're ready, run `} - npm run reset-project to get a fresh{' '} - app directory. This will move the current{' '} - app to{' '} - app-example. - - - - ); -} - -const styles = StyleSheet.create({ - titleContainer: { - flexDirection: 'row', - alignItems: 'center', - gap: 8, - }, - stepContainer: { - gap: 8, - marginBottom: 8, - }, - reactLogo: { - height: 178, - width: 290, - bottom: 0, - left: 0, - position: 'absolute', - }, -}); diff --git a/app/_layout.tsx b/app/_layout.tsx index f518c9b..29f8c70 100644 --- a/app/_layout.tsx +++ b/app/_layout.tsx @@ -4,6 +4,7 @@ import { StatusBar } from 'expo-status-bar'; import 'react-native-reanimated'; import { useColorScheme } from '@/hooks/use-color-scheme'; +import { authClient } from '@/lib/auth-client'; export const unstable_settings = { anchor: '(tabs)', @@ -11,12 +12,17 @@ export const unstable_settings = { export default function RootLayout() { const colorScheme = useColorScheme(); + const { data, isPending } = authClient.useSession(); return ( - - + + + + + + diff --git a/app/api/auth/[...auth]+api.ts b/app/api/auth/[...auth]+api.ts new file mode 100644 index 0000000..45b0481 --- /dev/null +++ b/app/api/auth/[...auth]+api.ts @@ -0,0 +1,4 @@ +import { auth } from "@/lib/auth"; + +const handler = auth.handler; +export { handler as GET, handler as POST }; diff --git a/app/auth.tsx b/app/auth.tsx new file mode 100644 index 0000000..fd24e9f --- /dev/null +++ b/app/auth.tsx @@ -0,0 +1,16 @@ +import { Button, View } from "react-native"; +import { authClient } from "@/lib/auth-client"; + +export default function Auth() { + const onLogin = () => { + authClient.signIn.oauth2({ + providerId: "koon-family", + }); + }; + + return ( + +