feat: auth and some improvements (#37)

* chore: update to expo 52 from expo 51

* feat: make about page dynamic

* feat: update tab layout to use BottomTabBarProps and adjust navigation dependencies

* fix: add DimensionValue type for style width in EventMap component

* fix: add type for notification trigger in schedulePushNotification function

* chore: format

* chore: remove test check from all checks in package.json

* feat: implement sign-in functionality and redirect logic

* feat: integrate toast notifications for sign-in error handling and add loading state

* feat: store token in secure store

* chore: remove unused imports

* feat: enhance authentication logic with isAuthenticated check and token expiration handling

* fix: import buffer

* feat: refactor authentication state management by replacing GlobalStateProvider with AuthStateProvider and display username in profile tab

* feat: add internationalization support for sign-in and profile views

* ci: remove automatic test step

* fix: disable auth for now

---------

Co-authored-by: Samu Kupiainen <kupiainen@testausserveri.fi>

Author: antoKeinanen

.github/workflows/check-code.yml

@@ -32,6 +32,3 @@ jobs:
 
             - name: Format
               run: npm run check:format
-
-            - name: Test
-              run: npm run check:test

.gitignore

@@ -28,3 +28,4 @@ expo-env.d.ts
 
 yarn.lock
 .vscode
+pnpm-lock.yaml

api/eventService.ts

@@ -16,9 +16,7 @@ type ApiEventLocation = {
     priority: string; // A number encoded as a string or empty
 };
 
-type ApiCalendarEventLocation = {
-    calendar_event_location: number[];
-};
+type ApiCalendarEventLocation = { calendar_event_location: number[] };
 
 type ApiAssemblyEvent = {
     ID: number;
@@ -84,7 +82,7 @@ const determineEvent = (): string => {
         process.env.EXPO_PUBLIC_ENVIRONMENT === 'development' ||
         process.env.EXPO_PUBLIC_ENVIRONMENT === 'preview'
     ) {
-        return 'summer23';
+        return 'winter25';
     }
     const now = new Date();
     const julyFirst = new Date(now.getFullYear(), 6, 1);
@@ -156,4 +154,4 @@ const getEvents = async (): Promise<AssemblyEvent[]> => {
     }
 };
 
-export { AssemblyEvent, getEvents };
+export { AssemblyEvent, getEvents, determineEvent };

api/userService.ts

@@ -32,20 +32,28 @@ interface ProfilePreferences {
     openedLootboxesCount: boolean;
 }
 
-const opts = (token?: string, body?: unknown) => ({
-    method: 'POST',
-    headers: token
-        ? { Authorization: 'Bearer ' + token, 'content-type': 'application/json' }
-        : ({ 'content-type': 'application/json' } as any),
-    body: body ? JSON.stringify(body) : undefined,
-});
+const opts = (token?: string, body?: unknown) => {
+    const headers: Record<string, string> = {};
+    headers['Content-Type'] = 'application/json';
+
+    if (token) {
+        headers['Authorization'] = 'Bearer ' + token;
+    }
+
+    if (body) {
+        const bodyString = JSON.stringify(body);
+        headers['Content-Length'] = bodyString.length.toString();
+        return { method: 'POST', headers, body: bodyString };
+    }
+
+    return { method: 'POST', headers };
+};
 
 export async function fetchProfile(token: string) {
     const url = `${process.env.EXPO_PUBLIC_API_URL}/auth/jwt`;
 
     const response = await fetch(url, opts(token));
     const data = await response.json();
-    console.log(data);
     return data as ProfileData;
 }
 
@@ -57,23 +65,16 @@ export async function signupRequest(email: string, password: string) {
         throw new StatusError('signup-failed', response.status);
     }
     const data = await response.json();
-    return {
-        profile: data as ProfileData,
-        token: response.headers.get('x-auth-token')!,
-    };
+    return { profile: data as ProfileData, token: response.headers.get('x-auth-token')! };
 }
 
 export async function loginRequest(login: string, password: string) {
     const url = `${process.env.EXPO_PUBLIC_API_URL}/auth/local?region=asm`;
-
     const response = await fetch(url, opts(undefined, { login, password }));
+
     if (!response.ok) {
         throw new StatusError('login-failed', response.status);
     }
     const data = await response.json();
-    console.log(data);
-    return {
-        profile: data as ProfileData,
-        token: response.headers.get('x-auth-token')!,
-    };
+    return { profile: data as ProfileData, token: response.headers.get('x-auth-token')! };
 }

app.config.js

@@ -8,6 +8,7 @@ export default () => {
             icon: './assets/images/icon.png',
             scheme: 'myapp',
             userInterfaceStyle: 'automatic',
+            newArchEnabled: true,
             splash: {
                 image: './assets/images/splash.png',
                 resizeMode: 'contain',
@@ -31,21 +32,22 @@ export default () => {
                         : 'fi.testausserveri.assemblyapp_dev',
                 useNextNotificationApi: true,
             },
-            web: {
-                bundler: 'metro',
-                output: 'static',
-                favicon: './assets/images/favicon.png',
-            },
+            web: { bundler: 'metro', output: 'static', favicon: './assets/images/favicon.png' },
             plugins: [
+                [
+                    'expo-secure-store',
+                    {
+                        configureAndroidBackup: true,
+                        faceIDPermission:
+                            'Allow $(PRODUCT_NAME) to access your Face ID biometric data.',
+                    },
+                ],
+                'expo-font',
                 'expo-router',
                 'expo-build-properties',
                 [
                     'expo-notifications',
-                    {
-                        icon: './assets/images/icon.png',
-                        color: '#191919',
-                        sounds: [],
-                    },
+                    { icon: './assets/images/icon.png', color: '#191919', sounds: [] },
                 ],
                 [
                     'expo-tracking-transparency',
@@ -55,24 +57,14 @@ export default () => {
                     },
                 ],
             ],
-            experiments: {
-                typedRoutes: true,
-            },
+            experiments: { typedRoutes: true },
             extra: {
-                router: {
-                    origin: false,
-                },
-                eas: {
-                    projectId: '469c71b6-54c5-4111-bc4a-03e2cf92a23d',
-                },
+                router: { origin: false },
+                eas: { projectId: '469c71b6-54c5-4111-bc4a-03e2cf92a23d' },
             },
             owner: 'testausserveri',
-            updates: {
-                url: 'https://u.expo.dev/469c71b6-54c5-4111-bc4a-03e2cf92a23d',
-            },
-            runtimeVersion: {
-                policy: 'appVersion',
-            },
+            updates: { url: 'https://u.expo.dev/469c71b6-54c5-4111-bc4a-03e2cf92a23d' },
+            runtimeVersion: { policy: 'appVersion' },
         },
     };
 };

app/(tabs)/_layout.tsx

@@ -1,15 +1,30 @@
 import { TabBar, TabBarIcon } from '@/components';
 import LootboxNavigationButton from '@/elements/lootbox/LootboxNavigationButton';
-import { Tabs } from 'expo-router';
-import React from 'react';
+import { useAuth } from '@/hooks/useAuth';
+import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
+import { Redirect, SplashScreen, Tabs } from 'expo-router';
+import React, { useEffect } from 'react';
 
 export default function TabLayout() {
+    const { status } = useAuth();
+
+    useEffect(() => {
+        if (status !== 'loading') {
+            SplashScreen.hide();
+        }
+    }, [status]);
+
+    /*
+     * TODO
+    if (status === 'logged-out') {
+        return <Redirect href={'/signin'} />;
+    }
+    */
+
     return (
         <Tabs
-            tabBar={(props) => <TabBar {...props} />}
-            screenOptions={{
-                headerShown: false,
-            }}
+            tabBar={(props: BottomTabBarProps) => <TabBar {...props} />}
+            screenOptions={{ headerShown: false }}
         >
             <Tabs.Screen
                 name='index'
@@ -45,7 +60,7 @@ export default function TabLayout() {
                             color={color}
                         />
                     ),
-                    unmountOnBlur: true,
+                    // unmountOnBlur: true,
                 }}
             />
             <Tabs.Screen

app/(tabs)/profile.tsx

@@ -1,15 +1,14 @@
 import AppBar from '@/elements/AppBar';
-import LanguageSelector from '@/elements/LanguageSelector';
-import { Link } from 'expo-router';
+import { ProfileView } from '@/elements/user/ProfileView';
+import { DarkTheme } from '@/styles';
 import { useTranslation } from 'react-i18next';
 import { View } from 'react-native';
-import { Surface, Text, useTheme } from 'react-native-paper';
+import { useTheme } from 'react-native-paper';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 export default function HomeScreen() {
     const { t } = useTranslation();
-    const theme = useTheme();
-
+    const theme = useTheme<DarkTheme>();
     const insets = useSafeAreaInsets();
 
     return (
@@ -23,31 +22,7 @@ export default function HomeScreen() {
             }}
         >
             <AppBar title={t('profile')} />
-            <View
-                style={{ flex: 1, width: '100%', justifyContent: 'center', alignItems: 'center' }}
-            >
-                <LanguageSelector />
-                <Surface
-                    elevation={0}
-                    style={{ padding: 16, width: '100%', justifyContent: 'center', gap: 16 }}
-                >
-                    <Text style={{ textAlign: 'center' }} variant='bodyLarge'>
-                        {t('working-on-this')}
-                    </Text>
-                    <Link
-                        style={{
-                            color: theme.colors.primary,
-                            textDecorationLine: 'underline',
-                            textAlign: 'center',
-                        }}
-                        href='/credits'
-                    >
-                        {t('meanwhile')}
-                    </Link>
-                </Surface>
-            </View>
-
-            {/** <ProfileView /> */}
+            <ProfileView />
         </View>
     );
 }

app/_layout.tsx

@@ -1,18 +1,18 @@
 import { TabBarIcon } from '@/components';
-import { GlobalStateProvider } from '@/hooks/providers/GlobalStateProvider';
+import { AuthStateProvider } from '@/hooks/useAuth';
 import Locales from '@/locales';
-import { Themes } from '@/styles';
+import { Colors, Themes } from '@/styles';
 import { useFonts } from 'expo-font';
 import * as Notifications from 'expo-notifications';
 import { Stack, router } from 'expo-router';
 import * as SplashScreen from 'expo-splash-screen';
 import i18n from 'i18next';
-import { useEffect } from 'react';
 import { initReactI18next, useTranslation } from 'react-i18next';
 import { Platform } from 'react-native';
 import { PaperProvider } from 'react-native-paper';
 import 'react-native-reanimated';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
+import Toast, { ErrorToast } from 'react-native-toast-message';
 
 // Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
@@ -21,9 +21,7 @@ i18n.use(initReactI18next).init({
     fallbackLng: 'en',
     compatibilityJSON: 'v3',
     debug: true,
-    resources: {
-        ...Locales,
-    },
+    resources: { ...Locales },
     interpolation: {
         escapeValue: false, // not needed for react as it escapes by default
     },
@@ -37,32 +35,37 @@ Notifications.setNotificationHandler({
     }),
 });
 
+const toastConfig = {
+    error: ({ ...props }) => (
+        <ErrorToast
+            {...props}
+            style={{ backgroundColor: Colors.dark.default.error, borderLeftWidth: 0 }}
+            text1Style={{ color: Colors.dark.default.onError }}
+        />
+    ),
+};
+
 export default function RootLayout() {
     const [loaded] = useFonts({
         Gaba: require('../assets/fonts/Gaba-Super.otf'),
         Roboto: require('../assets/fonts/Roboto-Regular.ttf'),
     });
-
     const { t } = useTranslation();
 
-    useEffect(() => {
-        if (loaded) {
-            SplashScreen.hideAsync();
-        }
-    }, [loaded]);
-
     if (!loaded) {
         return null;
     }
 
     return (
-        <GlobalStateProvider>
+        <AuthStateProvider>
             <SafeAreaProvider>
                 <PaperProvider theme={Themes['dark']['default']}>
                     <Stack>
                         <Stack.Screen name='(tabs)' options={{ headerShown: false }} />
                         <Stack.Screen name='+not-found' />
 
+                        <Stack.Screen name='signin' options={{ headerShown: false }} />
+
                         <Stack.Screen
                             name='credits'
                             options={{
@@ -84,8 +87,9 @@ export default function RootLayout() {
                             }}
                         />
                     </Stack>
+                    <Toast config={toastConfig} />
                 </PaperProvider>
             </SafeAreaProvider>
-        </GlobalStateProvider>
+        </AuthStateProvider>
     );
 }