more mobile auth logic

mobile/src/contexts/AuthProvider.tsx

@@ -16,12 +16,18 @@ import { Linking } from 'react-native';
 const AuthContext = createContext<{
   currentUser: User | undefined;
   isSignedIn: boolean;
-  signIn: () => Promise<void>;
+  requestSignIn: () => Promise<void>;
+  signOut: () => Promise<void>;
   token: string | undefined;
 }>({
   currentUser: undefined,
   isSignedIn: false,
-  signIn: async () => {
+  requestSignIn: async () => {
+    throw new Error(
+      'You need to add an AuthProvider to the top of your React tree.',
+    );
+  },
+  signOut: async () => {
     throw new Error(
       'You need to add an AuthProvider to the top of your React tree.',
     );
@@ -43,7 +49,7 @@ type State = {
 type Action =
   | { type: 'initWitUser'; session: Session; user: User }
   | { type: 'initWithoutUser' }
-  | { type: 'signIn' }
+  | { type: 'signIn'; session: Session; user: User }
   | { type: 'signOut' };
 
 const initialState: State = {
@@ -55,13 +61,21 @@ const initialState: State = {
 function reducer(state: State, action: Action): State {
   switch (action.type) {
     case 'initWitUser':
-      return { isInitialized: true, session: action.session };
+      return {
+        currentUser: action.user,
+        isInitialized: true,
+        session: action.session,
+      };
     case 'initWithoutUser':
-      return { isInitialized: true, session: undefined };
+      return {
+        currentUser: undefined,
+        isInitialized: true,
+        session: undefined,
+      };
     case 'signIn':
-      return { ...state };
+      return { ...state, currentUser: action.user, session: action.session };
     case 'signOut':
-      return { ...state };
+      return { ...state, session: undefined, currentUser: undefined };
   }
   return state;
 }
@@ -79,12 +93,32 @@ function AuthProviderContent({ children }: AuthProviderProps) {
     url,
     signIn: authKitSignIn,
   } = useSignIn({
-    onSuccess: (res) => {
-      // setToken(res);
+    onSuccess: async (res) => {
+      const signInResponse = await fetch(
+        'http://localhost:3000/api/auth/sign-in',
+        {
+          method: 'POST',
+          body: JSON.stringify({
+            message: res.message,
+            nonce: res.nonce,
+            signature: res.signature,
+          }),
+        },
+      );
+
+      if (signInResponse.ok) {
+        const { token, fid }: { token: string; fid: string } =
+          await signInResponse.json();
+
+        const { profile: user } = await fetchProfile({ fid });
+        dispatch({ type: 'signIn', session: { token, fid }, user });
+      } else {
+        alert('Sign in failed');
+      }
     },
   });
 
-  const signIn = useCallback(async () => {
+  const requestSignIn = useCallback(async () => {
     if (!url) {
       throw new Error('Expected authkit to provide url');
     }
@@ -96,6 +130,10 @@ function AuthProviderContent({ children }: AuthProviderProps) {
     }
   }, [authKitSignIn, connect, url]);
 
+  const signOut = useCallback(async () => {
+    await fetch('http://localhost:3000/api/auth/sign-out', { method: 'POST' });
+  }, []);
+
   const init = useCallback(async () => {
     const persistedSessionJson = await SecureStore.getItemAsync('session');
 
@@ -132,7 +170,8 @@ function AuthProviderContent({ children }: AuthProviderProps) {
       value={{
         currentUser: state.currentUser,
         isSignedIn: !!state.session,
-        signIn,
+        requestSignIn,
+        signOut,
         token: state.session?.token,
       }}
     >

mobile/src/screens/FeedScreen.tsx

@@ -1,4 +1,5 @@
 import { Cast } from '@mobile/components/feed/Cast';
+import { useAuth } from '@mobile/contexts/AuthProvider';
 import { useFeed, useFetchFeed } from '@mobile/hooks/data/feed';
 import { buildScreen } from '@mobile/utils/buildScreen';
 import { Cast as CastType } from '@shared/types/models';
@@ -10,18 +11,19 @@ function renderItem({ item }: { item: CastType }) {
 }
 
 export const FeedScreen = buildScreen(() => {
-  const { feed } = useFeed({ fid });
+  const { currentUser } = useAuth();
+  const { feed } = useFeed({ fid: currentUser!.fid });
   const fetchFeed = useFetchFeed();
   const [isRefreshing, setIsRefreshing] = useState(false);
 
   const onRefresh = useCallback(async () => {
     try {
       setIsRefreshing(true);
-      await fetchFeed({ fid });
+      await fetchFeed({ fid: currentUser!.fid });
     } finally {
       setIsRefreshing(false);
     }
-  }, [fetchFeed]);
+  }, [currentUser, fetchFeed]);
 
   return (
     <FlashList

mobile/src/screens/LandingScreen.tsx

@@ -5,7 +5,7 @@ import { useState } from 'react';
 import { Pressable, Text, View } from 'react-native';
 
 export const LandingScreen = buildScreen(() => {
-  const { signIn } = useAuth();
+  const { requestSignIn } = useAuth();
   const [isSigningIn, setIsSigningIn] = useState(false);
 
   return (
@@ -15,7 +15,7 @@ export const LandingScreen = buildScreen(() => {
           setIsSigningIn(true);
 
           try {
-            await signIn();
+            await requestSignIn();
           } catch (error) {
             console.error(error);
           } finally {

web/src/components/login/Login.tsx

@@ -9,7 +9,7 @@ import {
 import { useState } from 'react';
 
 async function handleSuccess(res: StatusAPIResponse) {
-  const signInresponse = await fetch('/api/auth/sign-in', {
+  const signInResponse = await fetch('/api/auth/sign-in', {
     method: 'POST',
     body: JSON.stringify({
       message: res.message,
@@ -18,7 +18,7 @@ async function handleSuccess(res: StatusAPIResponse) {
     }),
   });
 
-  if (signInresponse.ok) {
+  if (signInResponse.ok) {
     window.location.reload();
   } else {
     alert('Sign in failed');