User authentication

App.tsx

export function App() {
  const isLoadingComplete = useCachedResources();
  const colorScheme = useColorScheme();

  if (!isLoadingComplete) {
    return null;
  } 

  else {
    return (
      <UserContextProvider>
        <ActionSheetProvider>
          <SafeAreaProvider>
            <Navigation colorScheme={colorScheme} />
            <StatusBar />
          </SafeAreaProvider> 
        </ActionSheetProvider>
      </UserContextProvider>
    );
  }
}

navigation.tsx

export default function Navigation({ colorScheme }: { colorScheme: ColorSchemeName }) {
  return (
    <NavigationContainer
      linking={LinkingConfiguration}
      theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
      <RootNavigator />
    </NavigationContainer>
  );
}

const Stack = createStackNavigator<RootStackParamList>();

function RootNavigator() {
  const {user} = useUser()

  return (
    <Stack.Navigator mode="modal" screenOptions={{ headerShown: false }}>
      {!user ? (
      // No token found, user isn't signed in
        <Stack.Screen
          name="Auth"
          component={AuthNavigator}
          options={{
            // When logging out, a pop animation feels intuitive
            // You can remove this if you want the default 'push' animation
            //animationTypeForReplace: state.isSignout ? 'pop' : 'push',
          }}
        />
      ) : (
        // User is signed in
        <>
          <Stack.Screen name="Main" component={BottomTabNavigator} />
      ...
          <Stack.Screen name="NotFound" component={NotFoundScreen} options={{ title: 'Oops!' }} />  
        </>
      )}

    </Stack.Navigator>
  );
}

Supabase.ts

import { createClient } from '@supabase/supabase-js'
import AsyncStorage from '@react-native-community/async-storage'
import * as Env from '../../environment'

export const supabase = createClient(
    Env.default.supabaseUrl,
    Env.default.supabaseAnonKey, 
    {
        localStorage: AsyncStorage as any,
        autoRefreshToken: true,
        persistSession: true,
    }
)

UserContext.tsx

import React, { useEffect, useState, createContext, useContext } from 'react'
import { Session, User } from '@supabase/supabase-js'
import { supabase } from '../config/Supabase'

export const UserContext = createContext<{ user: User | null; session: Session | null }>({
  user: null,
  session: null,
})

export const UserContextProvider = (props: any) => {
  const [session, setSession] = useState<Session | null>(null)
  const [user, setUser] = useState<User | null>(null)

  useEffect(() => {
    const session = supabase.auth.session()
    setSession(session)
    console.log(session)
    setUser(session?.user ?? null)
    const { data: authListener } = supabase.auth.onAuthStateChange(async (event, session) => {
      console.log(`Supabase auth event: ${event}`)
      setSession(session)
      setUser((session?.user) ?? null)
    })

    return () => {
      authListener!.unsubscribe()
    }
  }, [])

  const value = {
    session,
    user,
  }
  return <UserContext.Provider value={value} {...props} />
}

export const useUser = () => {
  const context = useContext(UserContext)
  if (context === undefined) {
    throw new Error(`useUser must be used within a UserContextProvider.`)
  }
  return context
}

export default UserContextProvider;