typescriptreact-nativeexposupabaseexpo-router

Supabse check if user is connected expo-router


How to use the supabase and expo-router authentication system to check that the user is logged in on the Index.tsx page before performing other functions, otherwise redirecting him to the Login.tsx page.

I use expo-router v2 and Supabase and here is my _layout.tsx

import { Tabs } from "expo-router";

export default function TabRoutes() {
  return (
    <Tabs>
      <Tabs.Screen name="index" options={{ title: 'Index', headerShown: false }} />
      <Tabs.Screen name="login" options={{ title: 'Login', headerShown: false }} />
    </Tabs>
  )
}

Solution

  • In the root _layout.tsx, you can detect changes to the path and redirect accordingly. Alternatively, you can use React Context to pass down the current authentication state.

    Expo has documentation for authentication here: https://docs.expo.dev/router/reference/authentication/#modals-and-per-route-authentication