Authentication Flow

frontend/app.json

@@ -9,7 +9,8 @@
     "userInterfaceStyle": "automatic",
     "newArchEnabled": true,
     "ios": {
-      "supportsTablet": true
+      "supportsTablet": true,
+      "bundleIdentifier": "com.anonymous.frontend"
     },
     "android": {
       "adaptiveIcon": {
@@ -32,7 +33,8 @@
           "resizeMode": "contain",
           "backgroundColor": "#ffffff"
         }
-      ]
+      ],
+      "expo-secure-store"
     ],
     "experiments": {
       "typedRoutes": true

frontend/app/main/index.tsx

@@ -0,0 +1,24 @@
+import { getCurrentSession } from '@/services/auth/me';
+import { User } from '@/types';
+import { useEffect, useState } from 'react';
+import { SafeAreaView, Text } from 'react-native';
+
+const Index = () => {
+  const [user, setUser] = useState<User>();
+
+  useEffect(() => {
+    const call = async () => {
+      const [currentUser, error] = await getCurrentSession();
+      setUser(currentUser!);
+    };
+    call();
+  }, []);
+
+  return (
+    <SafeAreaView>
+      <Text>{user?.username}</Text>
+    </SafeAreaView>
+  );
+};
+
+export default Index;

frontend/app/register/index.tsx

@@ -6,23 +6,28 @@
 import { register } from '@/services/auth/register';
 import { Button } from '@/components/Button';
 import { Spinner } from '@/components/Spinner';
+import { useRouter } from 'expo-router';
 
 const Index = () => {
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
   const [error, setError] = useState<string>();
   const [isLoading, setIsLoading] = useState(false);
 
+
+  const router = useRouter();
   const registerUser = async () => {
     setError(undefined);
     setIsLoading(true);
     const [_, error] = await register(username, password);
 
+    setIsLoading(false);
     if (error) {
       setError(error.error);
+      return;
     }
 
-    setIsLoading(false);
+    router.navigate('/main');
   };
 
   return (

frontend/package.json

@@ -5,8 +5,8 @@
   "scripts": {
     "start": "expo start",
     "reset-project": "node ./scripts/reset-project.js",
-    "android": "expo start --android",
-    "ios": "expo start --ios",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
     "web": "expo start --web",
     "test": "jest --watchAll",
     "lint": "expo lint"
@@ -39,7 +39,8 @@
     "react-native-safe-area-context": "4.12.0",
     "react-native-screens": "~4.4.0",
     "react-native-web": "~0.19.13",
-    "react-native-webview": "13.12.5"
+    "react-native-webview": "13.12.5",
+    "expo-secure-store": "~14.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

frontend/services/auth/login.ts

@@ -0,0 +1,29 @@
+import { LOCAL_API_ENDPOINT } from '@/constants';
+import { ErrorResponse, User } from '@/types';
+import { saveCookie } from '@/utils/cookies';
+
+export const login = async (
+  username: string,
+  password: string
+): Promise<[User | null, ErrorResponse | null]> => {
+  const response = await fetch(`${LOCAL_API_ENDPOINT}/user/login`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      credentials: 'include',
+    },
+    body: JSON.stringify({ username, password }),
+  });
+
+  saveCookie(response.headers.get('set-cookie')!);
+
+  const data = await response.json();
+
+  console.log(data);
+
+  if (data.error) {
+    return [null, { error: data.error }];
+  }
+
+  return [data.user as User, null];
+};

frontend/services/auth/me.ts

@@ -0,0 +1,22 @@
+import { LOCAL_API_ENDPOINT } from '@/constants';
+import { ErrorResponse, User } from '@/types';
+import { getCookie } from '@/utils/cookies';
+
+export const getCurrentSession = async (): Promise<
+  [User | null, ErrorResponse | null]
+> => {
+  const response = await fetch(`${LOCAL_API_ENDPOINT}/user`, {
+    headers: {
+      Cookie: (await getCookie())!,
+    },
+  });
+  const data = await response.json();
+
+  console.log(data);
+
+  if (data.error) {
+    return [null, { error: data.error }];
+  }
+
+  return [data.user as User, null];
+};

frontend/services/auth/register.ts

@@ -1,5 +1,6 @@
 import { LOCAL_API_ENDPOINT } from '@/constants';
 import { ErrorResponse, User } from '@/types';
+import { saveCookie } from '@/utils/cookies';
 
 export const register = async (
   username: string,
@@ -13,6 +14,8 @@ export const register = async (
     body: JSON.stringify({ username, password }),
   });
 
+  saveCookie(response.headers.get('set-cookie')!);
+
   const data = await response.json();
 
   if (data.error) {

frontend/utils/cookies.ts

@@ -0,0 +1,11 @@
+import * as SecureStore from 'expo-secure-store';
+
+const COOKIE_KEY = 'auth-cookie';
+
+export const saveCookie = async (cookieValue: string) => {
+  await SecureStore.setItemAsync(COOKIE_KEY, cookieValue);
+};
+
+export const getCookie = async () => {
+  return await SecureStore.getItemAsync(COOKIE_KEY);
+};