feat: sign in

Author: Guillermo Machado

src/api/auth/use-login.ts

@@ -3,8 +3,7 @@ import { createMutation } from 'react-query-kit';
 import { client } from '../common';
 
 type Variables = {
-  email?: string; // optional because API doesn't require email
-  username: string;
+  email: string;
   password: string;
   expiresInMins?: number;
 };
@@ -19,11 +18,13 @@ type Response = {
 
 const login = async (variables: Variables) => {
   const { data } = await client({
-    url: 'auth/login',
+    url: '/v1/users/sign_in',
     method: 'POST',
     data: {
-      username: variables.username,
-      password: variables.password,
+      user: {
+        email: variables.email,
+        password: variables.password,
+      },
     },
     headers: {
       'Content-Type': 'application/json',

src/app/(app)/_layout.tsx

@@ -30,7 +30,7 @@ export default function TabLayout() {
     return <Redirect href="/onboarding" />;
   }
   if (status === 'signOut') {
-    return <Redirect href="/login" />;
+    return <Redirect href="/sign-in" />;
   }
   return (
     <Tabs>

src/app/_layout.tsx

@@ -33,7 +33,7 @@ export default function RootLayout() {
       <Stack>
         <Stack.Screen name="(app)" options={{ headerShown: false }} />
         <Stack.Screen name="onboarding" options={{ headerShown: false }} />
-        <Stack.Screen name="login" options={{ headerShown: false }} />
+        <Stack.Screen name="sign-in" options={{ headerShown: false }} />
       </Stack>
     </Providers>
   );

src/app/onboarding.tsx

@@ -38,7 +38,7 @@ export default function Onboarding() {
           label="Let's Get Started "
           onPress={() => {
             setIsFirstTime(false);
-            router.replace('/login');
+            router.replace('/sign-in');
           }}
         />
       </SafeAreaView>

src/app/sign-in.tsx

@@ -0,0 +1,30 @@
+import { useRouter } from 'expo-router';
+import { showMessage } from 'react-native-flash-message';
+
+import { useLogin } from '@/api/auth/use-login';
+import type { LoginFormProps } from '@/components/login-form';
+import { LoginForm } from '@/components/login-form';
+import { useAuth } from '@/core';
+import { FocusAwareStatusBar } from '@/ui';
+
+export default function Login() {
+  const router = useRouter();
+  const signIn = useAuth.use.signIn();
+  const { mutate: login } = useLogin({
+    onSuccess: (data) => {
+      signIn({ access: data.accessToken, refresh: data.refreshToken });
+      router.push('/');
+    },
+    onError: (error) => showMessage({ message: error.message, type: 'danger' }),
+  });
+
+  const onSubmit: LoginFormProps['onSubmit'] = (data) => {
+    login(data);
+  };
+  return (
+    <>
+      <FocusAwareStatusBar />
+      <LoginForm onSubmit={onSubmit} />
+    </>
+  );
+}

src/components/login-form.tsx

@@ -8,10 +8,7 @@ import { Button, ControlledInput, Text, View } from '@/ui';
 
 const MIN_CHARS = 6;
 const schema = z.object({
-  username: z.string({
-    required_error: 'Username is required',
-  }),
-  email: z.string().email('Invalid email format').optional(),
+  email: z.string().email('Invalid email format'),
   password: z
     .string({
       required_error: 'Password is required',
@@ -44,13 +41,7 @@ export const LoginForm = ({ onSubmit = () => {} }: LoginFormProps) => {
           testID="email-input"
           control={control}
           name="email"
-          label="Email (optional)"
-        />
-        <ControlledInput
-          testID="username-input"
-          control={control}
-          name="username"
-          label="Username"
+          label="Email"
         />
         <ControlledInput
           testID="password-input"