Add resend verification email

src/app/auth/login.tsx

@@ -1,9 +1,10 @@
-import React, { useState } from 'react';
 import { Redirect, Link } from 'expo-router';
+import React, { useState } from 'react';
 import { Alert, View } from 'react-native';
 import { Button, Input } from 'react-native-elements';
-import { useSession } from '../../utils/AuthContext';
+
 import globalStyles from '../../styles/globalStyles';
+import { useSession } from '../../utils/AuthContext';
 
 function LoginScreen() {
   const sessionHandler = useSession();

src/app/auth/onboarding.tsx

@@ -1,12 +1,13 @@
+import DateTimePicker from '@react-native-community/datetimepicker';
+import { Redirect, router } from 'expo-router';
 import { useState, useEffect } from 'react';
 import { View, Alert, ScrollView, Platform } from 'react-native';
 import { Button, Input } from 'react-native-elements';
-import DateTimePicker from '@react-native-community/datetimepicker';
-import { Redirect, router } from 'expo-router';
-import supabase from '../../utils/supabase';
+
 import UserStringInput from '../../components/UserStringInput';
-import { useSession } from '../../utils/AuthContext';
 import globalStyles from '../../styles/globalStyles';
+import { useSession } from '../../utils/AuthContext';
+import supabase from '../../utils/supabase';
 
 function OnboardingScreen() {
   const { session, signOut } = useSession();

src/app/auth/signup.tsx

@@ -1,9 +1,10 @@
-import React, { useEffect, useState } from 'react';
 import { Redirect, Link, router } from 'expo-router';
+import React, { useEffect, useState } from 'react';
 import { Alert, View, Text } from 'react-native';
 import { Button, Input } from 'react-native-elements';
-import { useSession } from '../../utils/AuthContext';
+
 import globalStyles from '../../styles/globalStyles';
+import { useSession } from '../../utils/AuthContext';
 
 function SignUpScreen() {
   const { session, signUp } = useSession();

src/app/auth/verify.tsx

@@ -1,20 +1,23 @@
+import { router } from 'expo-router';
 import React, { useState } from 'react';
 import { Alert, TextInput, View, StyleSheet } from 'react-native';
 import { Button } from 'react-native-elements';
-import { useSession } from '../../utils/AuthContext';
+
 import globalStyles from '../../styles/globalStyles';
-import { router } from 'expo-router';
+import { useSession } from '../../utils/AuthContext';
 
 const styles = StyleSheet.create({
   input: {
     height: 40,
     borderColor: 'gray',
     borderWidth: 1,
+    marginTop: 10,
+    padding: 5,
   },
 });
 
 function VerificationScreen() {
-  const { user, verifyEmail } = useSession();
+  const { user, verifyEmail, resendVerification } = useSession();
   const [loading, setLoading] = useState(false);
   const [verificationCode, setCode] = useState<string>('');
 
@@ -28,14 +31,28 @@ function VerificationScreen() {
       console.log(data);
       if (error) Alert.alert(error.message);
       else router.replace('/home');
+    } else if (!user?.email) {
+      Alert.alert(`Please sign up again.`);
+    } else {
+      Alert.alert(`Please enter a verification code`);
     }
 
     setLoading(false);
   };
 
   const resendCode = async () => {
     setLoading(true);
-    // Alert.alert(error.message);
+
+    if (user?.email) {
+      const { error, data } = await resendVerification(user.email);
+
+      console.log(data);
+      if (error) Alert.alert(error.message);
+      else Alert.alert(`Verification email sent to ${user.email}.`);
+    } else {
+      Alert.alert(`Please sign up again.`);
+    }
+
     setLoading(false);
   };
 
@@ -45,11 +62,12 @@ function VerificationScreen() {
         style={styles.input}
         keyboardType="numeric"
         onChangeText={setCode}
+        placeholder="Verification Code"
         value={verificationCode}
         maxLength={6}
       />
 
-      <View style={[globalStyles.verticallySpaced, globalStyles.mt20]}></View>
+      <View style={[globalStyles.verticallySpaced, globalStyles.mt20]} />
       <View style={[globalStyles.verticallySpaced, globalStyles.mt20]}>
         <Button title="Resend code" disabled={loading} onPress={resendCode} />
       </View>

src/app/index.tsx

@@ -1,4 +1,5 @@
 import { Redirect } from 'expo-router';
+
 import { useSession } from '../utils/AuthContext';
 
 function StartPage() {

src/app/settings.tsx

@@ -2,8 +2,9 @@ import { Redirect, router } from 'expo-router';
 import { Text, View } from 'react-native';
 import { Button } from 'react-native-elements';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { useSession } from '../utils/AuthContext';
+
 import globalStyles from '../styles/globalStyles';
+import { useSession } from '../utils/AuthContext';
 
 function SettingsScreen() {
   const { session, signOut } = useSession();

src/utils/AuthContext.tsx

@@ -16,6 +16,7 @@ export interface AuthState {
   signUp: (email: string, password: string) => Promise<AuthResponse>;
   signInWithEmail: (email: string, password: string) => Promise<AuthResponse>;
   verifyEmail: (email: string, token: string) => Promise<AuthResponse>;
+  resendVerification: (email: string) => Promise<AuthResponse>;
   signOut: () => Promise<void>;
 }
 
@@ -94,10 +95,16 @@ export function AuthContextProvider({
       type: 'email',
     });
 
-    setUser(value.data.user);
+    if (value.data.user) setUser(value.data.user);
     return value;
   };
 
+  const resendVerification = async (email: string) =>
+    await supabase.auth.resend({
+      type: 'signup',
+      email,
+    });
+
   const authContextValue = useMemo(
     () => ({
       user,
@@ -107,6 +114,7 @@ export function AuthContextProvider({
       signInWithEmail,
       signOut,
       verifyEmail,
+      resendVerification,
     }),
     [session, user],
   );