diff --git a/README.md b/README.md index 39302ba38..f3916508e 100644 --- a/README.md +++ b/README.md @@ -49,7 +49,7 @@ packages ├─ api | └─ tRPC v11 router definition ├─ auth - | └─ Authentication using next-auth. **NOTE: Only for Next.js app, not Expo** + | └─ Authentication using next-auth. ├─ db | └─ Typesafe db calls using Drizzle & Supabase └─ ui @@ -130,6 +130,12 @@ To add a new package, simply run `pnpm turbo gen init` in the monorepo root. Thi The generator sets up the `package.json`, `tsconfig.json` and a `index.ts`, as well as configures all the necessary configurations for tooling around your package such as formatting, linting and typechecking. When the package is created, you're ready to go build out the package. +### 4. Configuring Next-Auth to work with Expo + +In order to get Next-Auth to work with Expo, you must either: +- Add your local IP (e.g. 192.168.x.y) to your OAuth provider (by default Discord), and you may have to update this if it gets reassigned +- Deploy the Auth Proxy and point your OAuth provider to the proxy + ## FAQ ### Does the starter include Solito? @@ -138,14 +144,6 @@ No. Solito will not be included in this repo. It is a great tool if you want to Integrating Solito into this repo isn't hard, and there are a few [official templates](https://github.com/nandorojo/solito/tree/master/example-monorepos) by the creators of Solito that you can use as a reference. -### What auth solution should I use instead of Next-Auth.js for Expo? - -I've left this kind of open for you to decide. Some options are [Clerk](https://clerk.dev), [Supabase Auth](https://supabase.com/docs/guides/auth), [Firebase Auth](https://firebase.google.com/docs/auth/) or [Auth0](https://auth0.com/docs). Note that if you're dropping the Expo app for something more "browser-like", you can still use Next-Auth.js for those. [See an example in a Plasmo Chrome Extension here](https://github.com/t3-oss/create-t3-turbo/tree/chrome/apps/chrome). - -The Clerk.dev team even made an [official template repository](https://github.com/clerkinc/t3-turbo-and-clerk) integrating Clerk.dev with this repo. - -During Launch Week 7, Supabase [announced their fork](https://supabase.com/blog/launch-week-7-community-highlights#t3-turbo-x-supabase) of this repo integrating it with their newly announced auth improvements. You can check it out [here](https://github.com/supabase-community/create-t3-turbo). - ### Does this pattern leak backend code to my client applications? No, it does not. The `api` package should only be a production dependency in the Next.js application where it's served. The Expo app, and all other apps you may add in the future, should only add the `api` package as a dev dependency. This lets you have full typesafety in your client applications, while keeping your backend code safe. diff --git a/apps/expo/package.json b/apps/expo/package.json index e657e919c..534b6abfd 100644 --- a/apps/expo/package.json +++ b/apps/expo/package.json @@ -27,8 +27,10 @@ "expo-dev-client": "~4.0.13", "expo-linking": "~6.3.1", "expo-router": "~3.5.11", + "expo-secure-store": "^13.0.1", "expo-splash-screen": "~0.27.4", "expo-status-bar": "~1.12.1", + "expo-web-browser": "^13.0.3", "nativewind": "~4.0.36", "react": "18.3.1", "react-dom": "18.3.1", diff --git a/apps/expo/src/app/index.tsx b/apps/expo/src/app/index.tsx index 35795de59..e9f1e2471 100644 --- a/apps/expo/src/app/index.tsx +++ b/apps/expo/src/app/index.tsx @@ -1,11 +1,12 @@ import { useState } from "react"; -import { Pressable, Text, TextInput, View } from "react-native"; +import { Button, Pressable, Text, TextInput, View } from "react-native"; import { SafeAreaView } from "react-native-safe-area-context"; import { Link, Stack } from "expo-router"; import { FlashList } from "@shopify/flash-list"; import type { RouterOutputs } from "~/utils/api"; import { api } from "~/utils/api"; +import { useSignIn, useSignOut, useUser } from "~/utils/auth"; function PostCard(props: { post: RouterOutputs["post"]["all"][number]; @@ -94,17 +95,36 @@ function CreatePost() { ); } +function MobileAuth() { + const user = useUser(); + const signIn = useSignIn(); + const signOut = useSignOut(); + + return ( + <> + + {user?.name ?? "Not logged in"} + +