Set Up Supabase Backend and Email Authentication for Medica Project

app.json

@@ -33,6 +33,7 @@
       "favicon": "./assets/images/favicon.png"
     },
     "plugins": [
+      "@react-native-google-signin/google-signin",
       "expo-router",
       [
         "expo-local-authentication",

app/(auth)/SignIn&SignOut/LetsYouIn.tsx

@@ -118,7 +118,7 @@ const LetsYouIn = () => {
       <SvgXml xml={theme === "dark" ? OrLine : greyOrLine} />
 
       <TouchableOpacity
-        onPress={() => router.push("/(auth)/SignIn&SignOut/YourProfile")}
+        onPress={() => router.push("/(auth)/SignIn&SignOut/SignInBlankForm")}
         style={styles.signinBtn}
       >
         <Text style={[Typography.bold.large, { color: Colors.others.white }]}>

app/(auth)/SignIn&SignOut/SignInBlankForm.tsx

@@ -8,6 +8,8 @@ import {
   TextInput,
   TouchableWithoutFeedback,
   Pressable,
+  AppState,
+  Alert
 } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import CheckBox from "expo-checkbox";
@@ -26,10 +28,20 @@ import {
   blackArrow,
 } from "@/components/Icons/Icons";
 import { StatusBar } from "expo-status-bar";
+import { supabase } from "@/lib/supabase";
+
+AppState.addEventListener('change', (state) => {
+  if(state === 'active'){
+    supabase.auth.startAutoRefresh()
+  }else{
+    supabase.auth.stopAutoRefresh()
+  }
+})
 
 const Login = () => {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false)
   const [secureTextEntry, setSecureTextEntry] = useState(true);
   const [isChecked, setIsChecked] = useState(false);
   const [emailFocused, setEmailFocused] = useState(false);
@@ -66,6 +78,21 @@ const Login = () => {
     setPasswordFocused(false);
   };
 
+async function signInWithEmail(){
+  setLoading(true)
+  const{error} = await supabase.auth.signInWithPassword({
+    email: email,
+    password: password,
+  }) 
+  if(error){
+    Alert.alert(error.message)
+    setLoading(false)
+  }else{
+    await router.push('/(app)/ActionMenu');
+    setLoading(false);
+  }
+}
+
   return (
     <View
       style={[
@@ -88,7 +115,6 @@ const Login = () => {
         >
           Login to Your Account
         </Text>
-        {/* </View> */}
       </View>
 
       <View style={styles.Buttons}>
@@ -112,7 +138,7 @@ const Login = () => {
             keyboardType="email-address"
             placeholderTextColor="#9E9E9E"
             value={email}
-            onChangeText={handleEmailChange}
+            onChangeText={(text) => setEmail(text)}
             onFocus={handleEmailFocus}
             onBlur={handleEmailBlur}
           />
@@ -139,7 +165,7 @@ const Login = () => {
             placeholderTextColor="#9E9E9E"
             secureTextEntry={secureTextEntry}
             value={password}
-            onChangeText={handlePasswordChange}
+            onChangeText={(text) => setPassword(text)}
             onFocus={handlePasswordFocus}
             onBlur={handlePasswordBlur}
           />
@@ -179,8 +205,8 @@ const Login = () => {
       </View>
 
       <View>
-        <TouchableOpacity
-          onPress={() => router.push("/(app)/ActionMenu")}
+        <TouchableOpacity disabled={loading}
+          onPress={() => signInWithEmail()}
           style={styles.signinBtn}
         >
           <Text style={styles.signText}>Sign in</Text>
@@ -249,7 +275,7 @@ const Login = () => {
             { color: theme === "dark" ? "#FFFFFF" : Colors.grayScale._500 },
           ]}
         >
-          Don’t have an account?{" "}
+          Don’t have an account?
         </Text>
         <Text
           style={[

app/(auth)/SignIn&SignOut/SignUpBlankForm.tsx

@@ -1,5 +1,6 @@
 import React, { useContext, useState } from "react";
 import {
+  Alert,
   StyleSheet,
   Text,
   View,
@@ -9,6 +10,7 @@ import {
   TouchableWithoutFeedback,
   KeyboardAvoidingView,
   Platform,
+  AppState,
 } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import CheckBox from "expo-checkbox";
@@ -25,10 +27,21 @@ import {
 } from "@/components/Icons/Icons";
 import { SvgXml } from "react-native-svg";
 import { appleBlackIcon, appleWhiteIcon } from "@/constants/icon";
+import { supabase } from "@/lib/supabase";
+
+AppState.addEventListener('change', (state) => {
+  if(state === 'active'){
+    supabase.auth.startAutoRefresh()
+  }else{
+    supabase.auth.stopAutoRefresh()
+  }
+})
 
 const Signup = () => {
+
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
   const [secureTextEntry, setSecureTextEntry] = useState(true);
   const [isChecked, setIsChecked] = useState(false);
   const [isFocused, setIsFocused] = useState(false);
@@ -61,6 +74,25 @@ const Signup = () => {
     setPasswordFocused(false);
   };
 
+  async function signUpWithEmail(){
+    setLoading(true)
+    const{
+      data:{ session },
+      error,
+    } = await supabase.auth.signUp({
+      email: email,
+      password: password,
+    })
+
+    if(error){
+      Alert.alert(error.message)
+      if(!session) Alert.alert('Please check your inbox for email verification!')
+        setLoading(false)
+    }else{
+      await router.push('/(auth)/SignIn&SignOut/YourProfile')
+    }
+  }
+
   return (
     <View
       style={[
@@ -108,9 +140,10 @@ const Signup = () => {
                 keyboardType="email-address"
                 placeholderTextColor="#9E9E9E"
                 value={email}
-                onChangeText={handleEmailChange}
+                onChangeText={(text) => setEmail(text)}
                 onFocus={handleEmailFocused}
                 onBlur={handleEmailBlur}
+                autoCapitalize={'none'}
               />
             </View>
 
@@ -131,9 +164,12 @@ const Signup = () => {
                 placeholderTextColor="#9E9E9E"
                 secureTextEntry={secureTextEntry}
                 value={password}
-                onChangeText={handlePasswordChange}
+                onChangeText={(text) => setPassword(text)}
                 onFocus={handlePasswordFocused}
                 onBlur={handlePasswordBlur}
+                autoCapitalize={'none'}
+
+
               />
               <View
                 style={[
@@ -173,7 +209,7 @@ const Signup = () => {
       </View>
 
       <TouchableOpacity
-        onPress={() => router.push("/(auth)/SignIn&SignOut/SignInBlankForm")}
+        onPress={() => signUpWithEmail()}
         style={styles.signinBtn}
       >
         <Text style={[Typography.bold.large, { color: Colors.others.white }]}>
@@ -335,6 +371,8 @@ const styles = StyleSheet.create({
   email: {
     fontSize: 16,
     flex: 1,
+
+
   },
   signupText: {
     color: "#246BFD",

lib/supabase.ts

@@ -0,0 +1,14 @@
+import AsyncStorage from '@react-native-async-storage/async-storage'
+import { createClient } from '@supabase/supabase-js'
+
+const supabaseUrl = "https://smyciiybvwvwisdmnrtk.supabase.co";
+const supabaseAnonKey = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InNteWNpaXlidnd2d2lzZG1ucnRrIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MTc1NjMyMjAsImV4cCI6MjAzMzEzOTIyMH0.Ca0dmDaXJDXXKdwnbW8I_Itpy10Q_oh1ailg5KArpGc";
+
+export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
+  auth: {
+    storage: AsyncStorage,
+    autoRefreshToken: true,
+    persistSession: true,
+    detectSessionInUrl: false,
+  },
+})