[auth] Add auth context and useSession hook (#17)

* Add AuthContext * Add useSession hook in authentication components * Run formatter * Fix tsc errors --------- Co-authored-by: Aditya Pawar <[email protected]>
calblueprint · Oct 8, 2023 · e24a4f3 · e24a4f3
1 parent e30c936
commit e24a4f3
Show file tree

Hide file tree

Showing 6 changed files with 117 additions and 57 deletions.
diff --git a/src/app/_layout.tsx b/src/app/_layout.tsx
@@ -1,12 +1,15 @@
 import { Stack } from 'expo-router';
+import { AuthContextProvider } from '../utils/AuthContext';
 
 function StackLayout() {
   return (
-    <Stack>
-      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-      <Stack.Screen name="settings" options={{ headerShown: false }} />
-      <Stack.Screen name="auth" options={{ headerShown: false }} />
-    </Stack>
+    <AuthContextProvider>
+      <Stack>
+        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+        <Stack.Screen name="settings" options={{ headerShown: false }} />
+        <Stack.Screen name="auth" options={{ headerShown: false }} />
+      </Stack>
+    </AuthContextProvider>
   );
 }
 

diff --git a/src/app/auth/onboarding.tsx b/src/app/auth/onboarding.tsx
@@ -1,30 +1,14 @@
-import { useState, useEffect } from 'react';
 import { View } from 'react-native';
-import { Session } from '@supabase/supabase-js';
-import supabase from '../../utils/supabase';
 import Login from '../../components/Login';
 import Account from '../../components/Account';
+import { useSession } from '../../utils/AuthContext';
 
 function OnboardingScreen() {
-  const [session, setSession] = useState<Session | null>(null);
-
-  useEffect(() => {
-    supabase.auth.getSession().then(({ data: { session: newSession } }) => {
-      setSession(newSession);
-    });
-
-    supabase.auth.onAuthStateChange((_event, newSession) => {
-      setSession(newSession);
-    });
-  }, []);
+  const { session } = useSession();
 
   return (
     <View>
-      {session && session.user ? (
-        <Account key={session.user.id} session={session} />
-      ) : (
-        <Login />
-      )}
+      {session && session.user ? <Account key={session.user.id} /> : <Login />}
     </View>
   );
 }

diff --git a/src/app/auth/signup.tsx b/src/app/auth/signup.tsx
@@ -1,30 +1,14 @@
-import { Session } from '@supabase/supabase-js';
-import { useEffect, useState } from 'react';
 import { View } from 'react-native';
 import Account from '../../components/Account';
 import Login from '../../components/Login';
-import supabase from '../../utils/supabase';
+import { useSession } from '../../utils/AuthContext';
 
 function SignUpScreen() {
-  const [session, setSession] = useState<Session | null>(null);
-
-  useEffect(() => {
-    supabase.auth.getSession().then(({ data: { session: newSession } }) => {
-      setSession(newSession);
-    });
-
-    supabase.auth.onAuthStateChange((_event, newSession) => {
-      setSession(newSession);
-    });
-  }, []);
+  const { session } = useSession();
 
   return (
     <View>
-      {session && session.user ? (
-        <Account key={session.user.id} session={session} />
-      ) : (
-        <Login />
-      )}
+      {session && session.user ? <Account key={session.user.id} /> : <Login />}
     </View>
   );
 }

diff --git a/src/components/Account.tsx b/src/components/Account.tsx
@@ -1,10 +1,10 @@
 import { useState, useEffect } from 'react';
 import { StyleSheet, View, Alert, ScrollView, Platform } from 'react-native';
 import { Button, Input } from 'react-native-elements';
-import { Session } from '@supabase/supabase-js';
 import DateTimePicker from '@react-native-community/datetimepicker';
 import supabase from '../utils/supabase';
 import UserStringInput from './UserStringInput';
+import { useSession } from '../utils/AuthContext';
 
 const styles = StyleSheet.create({
   container: {
@@ -21,7 +21,9 @@ const styles = StyleSheet.create({
   },
 });
 
-export default function Account({ session }: { session: Session }) {
+export default function Account() {
+  const { session, signOut } = useSession();
+
   const [loading, setLoading] = useState(true);
   const [firstName, setFirstName] = useState('');
   const [lastName, setLastName] = useState('');
@@ -160,7 +162,7 @@ export default function Account({ session }: { session: Session }) {
         />
       </View>
       <View style={styles.verticallySpaced}>
-        <Button title="Sign Out" onPress={() => supabase.auth.signOut()} />
+        <Button title="Sign Out" onPress={signOut} />
       </View>
     </ScrollView>
   );

diff --git a/src/components/Login.tsx b/src/components/Login.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Alert, StyleSheet, View } from 'react-native';
 import { Button, Input } from 'react-native-elements';
-import supabase from '../utils/supabase';
+import { useSession } from '../utils/AuthContext';
 
 const styles = StyleSheet.create({
   container: {
@@ -19,30 +19,31 @@ const styles = StyleSheet.create({
 });
 
 export default function Login() {
+  const sessionHandler = useSession();
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [loading, setLoading] = useState(false);
 
   const signInWithEmail = async () => {
     setLoading(true);
-    const { error } = await supabase.auth.signInWithPassword({
-      email,
-      password,
-    });
+    const { error } = await sessionHandler.signInWithEmail(email, password);
 
     if (error) Alert.alert(error.message);
     setLoading(false);
   };
 
   const signUpWithEmail = async () => {
     setLoading(true);
-    const { error } = await supabase.auth.signUp({
-      email,
-      password,
-    });
+    const { error } = await sessionHandler.signUp(email, password);
 
-    if (error) Alert.alert(error.message);
-    console.error(error);
+    if (error) {
+      Alert.alert(error.message);
+      console.error(error);
+    } else {
+      Alert.alert(
+        'Please follow the directions in the confirmation email to activate your account.',
+      );
+    }
     setLoading(false);
   };
 

diff --git a/src/utils/AuthContext.tsx b/src/utils/AuthContext.tsx
@@ -0,0 +1,86 @@
+import { AuthResponse, Session } from '@supabase/supabase-js';
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import supabase from './supabase';
+
+export interface AuthState {
+  session: Session | null;
+  signIn: (newSession: Session | null) => void;
+  signUp: (email: string, password: string) => Promise<AuthResponse>;
+  signInWithEmail: (email: string, password: string) => Promise<AuthResponse>;
+  signOut: () => void;
+}
+
+const AuthContext = createContext({} as AuthState);
+
+export function useSession() {
+  const value = useContext(AuthContext);
+  if (process.env.NODE_ENV !== 'production') {
+    if (!value) {
+      throw new Error(
+        'useSession must be wrapped in a <AuthContextProvider />',
+      );
+    }
+  }
+
+  return value;
+}
+
+export function AuthContextProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [session, setSession] = useState<Session | null>(null);
+
+  useEffect(() => {
+    supabase.auth.getSession().then(({ data: { session: newSession } }) => {
+      setSession(newSession);
+    });
+
+    supabase.auth.onAuthStateChange((_event, newSession) => {
+      setSession(newSession);
+    });
+  }, []);
+
+  const signIn = (newSession: Session | null) => {
+    setSession(newSession);
+  };
+
+  const signInWithEmail = async (email: string, password: string) =>
+    supabase.auth.signInWithPassword({
+      email,
+      password,
+    }); // will trigger the use effect to update the session
+  const signUp = async (email: string, password: string) =>
+    supabase.auth.signUp({
+      email,
+      password,
+    }); // will trigger the use effect to update the session
+  const signOut = () => {
+    supabase.auth.signOut();
+    setSession(null);
+  };
+
+  const authContextValue = useMemo(
+    () => ({
+      session,
+      signUp,
+      signIn,
+      signInWithEmail,
+      signOut,
+    }),
+    [session],
+  );
+
+  return (
+    <AuthContext.Provider value={authContextValue}>
+      {children}
+    </AuthContext.Provider>
+  );
+}