converting clerk to supabase auth

Author: trevorpfiz

.env.example

@@ -4,19 +4,8 @@
 # This file will be committed to version control, so make sure not to have any secrets in it.
 # If you are cloning this repo, create a copy of this file named `.env` and populate it with your secrets.
 
-# AWS
-AWS_PROFILE="default"
-AWS_REGION="us-east-1"
-
-# Clerk
-NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
-CLERK_SECRET_KEY=
-CLERK_JWT_KEY="-----BEGIN PUBLIC KEY-----
-...
------END PUBLIC KEY-----
-"
-NEXT_PUBLIC_CLERK_SIGN_IN_URL=/signin
-NEXT_PUBLIC_CLERK_SIGN_UP_URL=/signup
+# The database URL is used to connect to your Supabase database.
+POSTGRES_URL="postgres://postgres.[USERNAME]:[PASSWORD]@aws-0-eu-central-1.pooler.supabase.com:6543/postgres?workaround=supabase-pooler.vercel"
 
 # FastAPI
 NEXT_PUBLIC_FASTAPI_URL="http://127.0.0.1:8000"

.vscode/hyper.code-workspace

@@ -28,6 +28,7 @@
     "search.useIgnoreFiles": true,
     // use root .gitignore to ignore files from search
     "search.useParentIgnoreFiles": true,
+    "typescript.tsdk": "Root/node_modules/typescript/lib",
   },
   "launch": {
     "version": "0.2.0",

apps/expo/.env.example

@@ -1,2 +1,3 @@
-EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY="pk_test_"
+EXPO_PUBLIC_SUPABASE_URL="https://YOUR_PROJECT_REF.supabase.co"
+EXPO_PUBLIC_SUPABASE_ANON_KEY="YOUR_ANON_KEY"
 EXPO_PUBLIC_FASTAPI_URL="http://localhost:8000"

apps/expo/eas.json

@@ -4,7 +4,8 @@
   },
   "build": {
     "base": {
-      "node": "18.16.1",
+      "node": "20.16.0",
+      "pnpm": "9.6.0",
       "ios": {
         "resourceClass": "m-medium"
       }
@@ -14,7 +15,9 @@
       "developmentClient": true,
       "distribution": "internal",
       "env": {
-        "EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY": "pk_test_Y2hlZXJmdWwtc3RhcmZpc2gtMjYuY2xlcmsuYWNjb3VudHMuZGV2JA"
+        "EXPO_PUBLIC_SUPABASE_URL": "https://dnnqvouwzxzejzkvmqfk.supabase.co",
+        "EXPO_PUBLIC_SUPABASE_ANON_KEY": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImRubnF2b3V3enh6ZWp6a3ZtcWZrIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjI0NTY0NjQsImV4cCI6MjAzODAzMjQ2NH0.I12jE7YC7h7B1qu1zYsBgzu3LQFj8CXNolevtxYpxU0",
+        "EXPO_PUBLIC_FASTAPI_URL": "http://localhost:8000"
       }
     },
     "preview": {

apps/expo/package.json

@@ -21,104 +21,105 @@
   },
   "dependencies": {
     "@bacons/text-decoder": "^0.0.0",
-    "@clerk/clerk-expo": "^1.2.3",
-    "@expo/metro-config": "^0.18.3",
-    "@expo/vector-icons": "^14.0.0",
-    "@gorhom/bottom-sheet": "^4.6.3",
-    "@hookform/resolvers": "^3.3.4",
-    "@radix-ui/react-label": "^2.0.2",
-    "@radix-ui/react-progress": "^1.0.3",
-    "@radix-ui/react-tooltip": "^1.0.7",
-    "@react-native-async-storage/async-storage": "1.23.1",
-    "@react-navigation/drawer": "^6.6.15",
-    "@react-navigation/native": "^6.1.17",
+    "@expo/metro-config": "^0.18.10",
+    "@expo/vector-icons": "^14.0.2",
+    "@gorhom/bottom-sheet": "^4.6.4",
+    "@hookform/resolvers": "^3.9.0",
     "@hyper/validators": "workspace:*",
-    "@shopify/flash-list": "1.6.4",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-progress": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.2",
+    "@react-native-async-storage/async-storage": "1.24.0",
+    "@react-navigation/drawer": "^6.7.2",
+    "@react-navigation/native": "^6.1.18",
+    "@shopify/flash-list": "1.7.0",
+    "@supabase/auth-helpers-react": "catalog:supabase",
+    "@supabase/supabase-js": "catalog:supabase",
     "@tanstack/react-query": "catalog:",
     "@trpc/client": "catalog:",
     "@trpc/react-query": "catalog:",
     "@trpc/server": "catalog:",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "expo": "^51.0.16",
-    "expo-apple-authentication": "~6.4.1",
-    "expo-av": "~14.0.5",
-    "expo-build-properties": "~0.12.3",
+    "expo": "^51.0.24",
+    "expo-apple-authentication": "~6.4.2",
+    "expo-av": "~14.0.6",
+    "expo-build-properties": "~0.12.4",
     "expo-clipboard": "~6.0.3",
     "expo-constants": "~16.0.2",
     "expo-crypto": "~13.0.2",
-    "expo-dev-client": "~4.0.18",
+    "expo-dev-client": "~4.0.21",
     "expo-file-system": "~17.0.1",
-    "expo-font": "~12.0.7",
+    "expo-font": "~12.0.9",
     "expo-haptics": "~13.0.1",
-    "expo-image": "~1.12.12",
+    "expo-image": "~1.12.13",
     "expo-keep-awake": "~13.0.2",
     "expo-linear-gradient": "~13.0.2",
     "expo-linking": "~6.3.1",
-    "expo-navigation-bar": "~3.0.6",
-    "expo-notifications": "~0.28.9",
-    "expo-router": "~3.5.16",
-    "expo-secure-store": "~13.0.1",
+    "expo-navigation-bar": "~3.0.7",
+    "expo-notifications": "~0.28.14",
+    "expo-router": "~3.5.20",
+    "expo-secure-store": "~13.0.2",
     "expo-sharing": "~12.0.1",
     "expo-splash-screen": "~0.27.5",
     "expo-status-bar": "~1.12.1",
-    "expo-system-ui": "~3.0.6",
-    "expo-updates": "~0.25.17",
+    "expo-system-ui": "~3.0.7",
+    "expo-updates": "~0.25.21",
     "expo-web-browser": "~13.0.3",
-    "lucide-react-native": "^0.379.0",
+    "lucide-react-native": "^0.418.0",
     "nativewind": "^4.0.36",
-    "openai": "^4.47.1",
+    "openai": "^4.53.2",
     "react": "catalog:react18",
     "react-dom": "catalog:react18",
-    "react-hook-form": "^7.51.4",
-    "react-native": "~0.74.2",
+    "react-hook-form": "^7.52.1",
+    "react-native": "~0.74.4",
     "react-native-avoid-softinput": "^5.0.0",
-    "react-native-gesture-handler": "~2.16.2",
+    "react-native-gesture-handler": "~2.18.0",
     "react-native-ios-context-menu": "^2.5.1",
     "react-native-ios-utilities": "^4.4.5",
-    "react-native-keyboard-controller": "^1.12.1",
+    "react-native-keyboard-controller": "^1.12.7",
     "react-native-mmkv": "^2.12.2",
     "react-native-openai": "^0.6.1",
-    "react-native-reanimated": "~3.10.1",
+    "react-native-reanimated": "~3.14.0",
     "react-native-redash": "^18.1.3",
     "react-native-root-siblings": "^5.0.1",
     "react-native-root-toast": "^3.6.0",
-    "react-native-safe-area-context": "~4.10.1",
-    "react-native-screens": "~3.31.1",
-    "react-native-svg": "15.2.0",
-    "react-native-url-polyfill": "^1.3.0",
-    "react-native-web": "~0.19.10",
-    "superjson": "2.2.1",
-    "tailwind-merge": "^2.2.1",
-    "tailwindcss": "3.4.1",
-    "tailwindcss-animate": "^1.0.7",
+    "react-native-safe-area-context": "~4.10.8",
+    "react-native-screens": "~3.33.0",
+    "react-native-svg": "15.4.0",
+    "react-native-url-polyfill": "^2.0.0",
+    "react-native-web": "~0.19.12",
+    "superjson": "catalog:",
+    "tailwind-merge": "^2.4.0",
+    "tailwindcss": "catalog:tailwind",
+    "tailwindcss-animate": "catalog:tailwind",
     "zeego": "^1.10.0",
-    "zustand": "^4.5.2"
+    "zustand": "^4.5.4"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.7",
-    "@babel/preset-env": "^7.24.7",
-    "@babel/runtime": "^7.24.7",
-    "@expo/config-plugins": "^8.0.4",
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.3",
+    "@babel/runtime": "^7.25.0",
+    "@expo/config-plugins": "^8.0.8",
     "@hyper/api": "workspace:*",
     "@hyper/eslint-config": "workspace:*",
     "@hyper/prettier-config": "workspace:*",
     "@hyper/tailwind-config": "workspace:*",
     "@hyper/tsconfig": "workspace:*",
-    "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react-native": "^12.5.1",
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react-native": "^12.5.2",
     "@types/babel__core": "^7.20.5",
     "@types/jest": "^29.5.12",
-    "@types/node": "^20.12.10",
+    "@types/node": "^20.14.10",
     "@types/react": "catalog:react18",
     "eslint": "catalog:",
-    "jest": "^29.4.0",
+    "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "jest-expo": "~51.0.1",
+    "jest-expo": "~51.0.3",
     "jest-junit": "^16.0.0",
     "prettier": "catalog:",
-    "react-test-renderer": "^18.2.0",
-    "ts-jest": "^29.1.5",
+    "react-test-renderer": "^18.3.1",
+    "ts-jest": "^29.2.3",
     "typescript": "catalog:"
   },
   "prettier": "@hyper/prettier-config"

apps/expo/src/app/(app)/_layout.tsx

@@ -1,6 +1,9 @@
 import { TouchableOpacity } from "react-native";
 import { Stack } from "expo-router";
-import { useAuth } from "@clerk/clerk-expo";
+import {
+  useSessionContext,
+  useSupabaseClient,
+} from "@supabase/auth-helpers-react";
 
 import { ThemeToggle } from "~/components/theme-toggle";
 import { LogOut } from "~/lib/icons/log-out";
@@ -34,15 +37,16 @@ const Layout = () => {
 };
 
 const SignOut = () => {
-  const { isLoaded, signOut } = useAuth();
+  const { isLoading } = useSessionContext();
+  const supabase = useSupabaseClient();
 
-  if (!isLoaded) {
+  if (isLoading) {
     return null;
   }
   return (
     <TouchableOpacity
-      onPress={() => {
-        signOut();
+      onPress={async () => {
+        await supabase.auth.signOut();
       }}
     >
       <LogOut size={23} strokeWidth={1.5} className="text-foreground" />

apps/expo/src/app/(app)/sandbox.tsx

@@ -5,7 +5,11 @@ import Animated, {
   FadeOutDown,
   LayoutAnimationConfig,
 } from "react-native-reanimated";
-import { SignedIn, useAuth } from "@clerk/clerk-expo";
+import {
+  useSessionContext,
+  useSupabaseClient,
+  useUser,
+} from "@supabase/auth-helpers-react";
 
 import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
 import { Button } from "~/components/ui/button";
@@ -31,21 +35,24 @@ const GITHUB_AVATAR_URI =
 
 export default function Screen() {
   const [progress, setProgress] = React.useState(78);
+  const user = useUser();
 
   function updateProgressValue() {
     setProgress(Math.floor(Math.random() * 100));
   }
 
   const SignOut = () => {
-    const { isLoaded, signOut } = useAuth();
-    if (!isLoaded) {
+    const { isLoading } = useSessionContext();
+    const supabase = useSupabaseClient();
+
+    if (isLoading) {
       return null;
     }
     return (
       <View>
         <Button
-          onPress={() => {
-            signOut();
+          onPress={async () => {
+            await supabase.auth.signOut();
           }}
         >
           <Text>Sign Out</Text>
@@ -56,9 +63,7 @@ export default function Screen() {
 
   return (
     <View className="flex-1 items-center justify-center gap-5 bg-secondary/30 p-6">
-      <SignedIn>
-        <SignOut />
-      </SignedIn>
+      {user?.id && <SignOut />}
       <Card className="w-full max-w-sm rounded-2xl p-6">
         <CardHeader className="items-center">
           <Avatar alt="Rick Sanchez's Avatar" className="h-24 w-24">

apps/expo/src/app/reset-password.tsx apps/expo/src/app/(auth)/reset-password.tsx

@@ -1,30 +1,40 @@
 import { useState } from "react";
-import { Keyboard, ScrollView, TouchableWithoutFeedback } from "react-native";
+import {
+  Alert,
+  Keyboard,
+  ScrollView,
+  TouchableWithoutFeedback,
+} from "react-native";
 import { AvoidSoftInputView } from "react-native-avoid-softinput";
 import { SafeAreaView } from "react-native-safe-area-context";
-import { useSignIn } from "@clerk/clerk-expo";
+import {
+  useSessionContext,
+  useSupabaseClient,
+} from "@supabase/auth-helpers-react";
 
 import type { SignInFormProps } from "~/components/auth/signin-form";
 import { SignInForm } from "~/components/auth/signin-form";
 
 export default function SignInScreen() {
-  const { signIn, setActive, isLoaded } = useSignIn();
+  const { isLoading: isLoadingSession } = useSessionContext();
+  const supabase = useSupabaseClient();
   const [isLoading, setIsLoading] = useState(false);
 
   const onSubmit: SignInFormProps["onSubmit"] = async (data) => {
-    if (!isLoaded) {
+    if (isLoadingSession) {
       return;
     }
 
     setIsLoading(true);
     try {
-      const completeSignIn = await signIn.create({
-        identifier: data.email,
+      const { error } = await supabase.auth.signInWithPassword({
+        email: data.email,
         password: data.password,
       });
-      // This is an important step,
-      // This indicates the user is signed in
-      await setActive({ session: completeSignIn.createdSessionId });
+
+      if (error) {
+        Alert.alert("Error", error.message);
+      }
     } catch (err: unknown) {
       console.error(JSON.stringify(err, null, 2));
     } finally {