NativEat

An Expo-based cooking recipes mobile app built with React Native, Expo Router, and NativeWind.

Tech Stack

• Framework: React Native + Expo SDK 54
• Routing: Expo Router
• Styling: NativeWind
• UI Library: React Native Paper
• Auth: Local (email/username & password) + Social (Google, GitHub)
• Backend: Hexum

Getting Started

Prerequisites

• Node.js 18+
• npm
• Expo CLI: npx expo --version
• Android Studio (for Android emulator) or Xcode (for iOS simulator)
• An Expo account (for EAS builds)

Installation

# Clone the repo
git clone https://github.com/kaucrow/nativeat
cd nativeat

# Install dependencies
npm install

# Copy the environment file and fill in the values
cp .env.example .env

Building

# Development build
npx expo run:android    # or run:ios

# EAS build (production)
eas build --platform android
eas build --platform ios

Environment Variables

Create a .env file in the project root with the following variables:

Variable	Description
EXPO_PUBLIC_BACKEND_URL	Backend API base URL
EXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID	Google OAuth Web client ID
EXPO_PUBLIC_GITHUB_CLIENT_ID	GitHub OAuth App client ID

Google OAuth Setup

Google authentication uses @react-native-google-signin/google-signin with the server auth code flow. The native SDK returns a serverAuthCode which the backend exchanges for access/refresh tokens.

1. Create a Google Cloud Project

Go to the Google Cloud Console.

1. Create a new project or select an existing one
2. Navigate to APIs & Services > OAuth consent screen
3. Configure the consent screen (External or Internal)
4. Add the .../auth/userinfo.email and .../auth/userinfo.profile scopes

2. Create OAuth 2.0 Client IDs

Navigate to APIs & Services > Credentials and create the following:

Android OAuth Client

Field	Value
Application type	Android
Package name	com.kaucrow.nativeat
SHA-1 certificate fingerprint	See "Getting the SHA-1 Fingerprint" below

The redirect URI is auto-generated by Google.

iOS OAuth Client

Field	Value
Application type	iOS
Bundle ID	com.kaucrow.nativeat

The redirect URI is auto-generated by Google.

Web OAuth Client

Field	Value
Application type	Web application
Name	NativEat (or any descriptive name)

The generated Client ID is the EXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID.

Authorized redirect URIs. Add these:

• com.kaucrow.nativeat:/oauth2redirect: required for the native serverAuthCode flow.
• https://hexum.com/api/auth/oauth/callback-ui: Example backend's callback endpoint.

3. Getting the SHA-1 Fingerprint

The debug keystore is located at android/app/debug.keystore (auto-generated by Expo).

Run either command from the project root:

Option A — keytool

keytool -list -v -keystore android/app/debug.keystore -alias androiddebugkey -storepass android -keypass android

Option B — Gradle signing report

cd android && ./gradlew signingReport

Look for this in the output:

> Task :app:signingReport
Variant: debug
Config: debug
Store: /home/kaucrow/Code/nativeat/android/app/debug.keystore
SHA1: 5E:8F:16:06:2E:A3:CD:2C:4A:0D:54:78:76:BA:A6:F3:8C:AB:F6:25

Copy the SHA1 value (colons included) into the Google Cloud Console Android OAuth client.

Note: The android/ folder is gitignored, so each developer who clones the repo will have a different debug keystore with a unique SHA-1. Add each developer's SHA-1 to the same Android OAuth client in Google Cloud Console.

4. How Auth Flows Work

Native (Android / iOS)

1. User taps "Sign in with Google"
2. Native Google Sign-In SDK opens
3. User selects account
4. SDK returns serverAuthCode
5. App sends code → POST /auth/oauth/google/login
6. Backend exchanges code for tokens with Google
7. Backend creates session
8. Response returned to app

GitHub OAuth Setup

1. Go to GitHub Settings > Developer settings > OAuth Apps > New OAuth App
2. Set the Authorization callback URL to your Expo redirect URI (generated at runtime by AuthSession.makeRedirectUri)
3. Copy the Client ID into EXPO_PUBLIC_GITHUB_CLIENT_ID in your .env file
4. Generate a Client Secret and configure it on your backend