Supabase Next.js Template

The project follows the Expo Router file-based routing convention:

• app/: Contains all screens.
  • (auth)/: Authentication stack (login, register, password reset, 2FA).
  • (app)/: Authenticated application screens (home, settings, storage, tasks).
  • _layout.tsx: Root layout and routing configuration.
• components/: Reusable UI components (e.g., MFASetup.tsx, ui/button.tsx).
• lib/: Core logic and utilities (Supabase client, i18n config, storage wrappers).
• locales/: JSON files for internationalization.
• constants/: Theme and configuration constants.

The password reset process relies on deep link interception:

1. The user requests a reset via the app.
2. An email is sent containing a link: yourappscheme://reset-password#access_token=...&refresh_token=....
3. When the user clicks the link, the app intercepts it in app/_layout.tsx.
4. The app extracts the tokens from the hash fragment.
5. The session is established using supabase.auth.setSession().
6. The user is redirected to the reset-password screen to set a new password.

The template handles password resets via deep links. When a user clicks a reset link in their email, the app intercepts the URL in app/_layout.tsx.

1. The link format is: yourappscheme://reset-password#access_token=...&refresh_token=....
2. The app extracts the tokens from the hash fragment.
3. It establishes a session using supabase.auth.setSession().
4. The user is then redirected to the password reset form screen to set a new password.

The template supports TOTP-based MFA. The registration flow is:

1. User navigates to Settings → MFA.
2. User provides a device name.
3. The app displays a QR code.
4. User scans the QR code using an authenticator app (e.g., Google Authenticator, Authy).
5. User enters the 6-digit code from the app.
6. The app verifies and registers the factor. Multiple devices can be registered.

The template supports TOTP-based MFA:

1. User navigates to Settings → MFA.
2. User provides a device name.
3. The app displays a QR code (using react-native-qrcode-svg).
4. User scans the code with an authenticator app (e.g., Google Authenticator).
5. User enters the 6-digit code from the app.
6. The factor is verified and enrolled in Supabase.

To start the local development environment, use one of the following package manager commands. Once running, the application will be available at http://localhost:3000. You can modify app/page.tsx to see real-time updates in the browser.

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

To change the visual branding, edit constants/theme.ts. The template uses a light/dark mode object structure:

export const Colors = {
  light: {
    text: '#11181C',
    background: '#fff',
    tint: '#0a7ea4', // Primary color
    icon: '#687076',
  },
  dark: {
    text: '#ECEDEE',
    background: '#151718',
    tint: '#fff',
    icon: '#9BA1A6',
  },
};

The template is configured for Expo Application Services (EAS) builds.

iOS Production Build:

eas build:configure
eas build --platform ios --profile production
eas submit --platform ios

Android Production Build:

eas build --platform android --profile production
eas submit --platform android

Build profiles are managed in eas.json. You can define development, preview, and production profiles to control distribution and development client settings.

Modify the application's color palette by editing constants/theme.ts:

export const Colors = {
  light: {
    text: '#11181C',
    background: '#fff',
    tint: '#0a7ea4', // Primary color
    icon: '#687076',
  },
  dark: {
    text: '#ECEDEE',
    background: '#151718',
    tint: '#fff',
    icon: '#9BA1A6',
  },
};