{"id":21243939,"url":"https://github.com/aaronksaunders/firebase-exporouter-app","last_synced_at":"2025-04-14T02:43:48.417Z","repository":{"id":262370730,"uuid":"887022877","full_name":"aaronksaunders/firebase-exporouter-app","owner":"aaronksaunders","description":"Expo Router Firebase Authentication, Drawer Navigation with Nested Tabs","archived":false,"fork":false,"pushed_at":"2025-01-26T06:43:19.000Z","size":568,"stargazers_count":23,"open_issues_count":1,"forks_count":7,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-27T16:49:26.599Z","etag":null,"topics":["expo-firebase","expo-router-auth","expo-router-drawer","expo-router-tabs","firebase","firebase-auth","firebase-expo","firebase-react-native","react-native-firebase-auth"],"latest_commit_sha":null,"homepage":"https://youtu.be/Yva2Ep717v0?si=R_FhSdTMjMsJUViW","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aaronksaunders.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-12T03:07:51.000Z","updated_at":"2025-03-25T07:09:37.000Z","dependencies_parsed_at":"2024-11-12T04:25:04.790Z","dependency_job_id":"6e30987b-9ebf-44c4-a958-ce36fd79245c","html_url":"https://github.com/aaronksaunders/firebase-exporouter-app","commit_stats":null,"previous_names":["aaronksaunders/firebase-exporouter-app"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Ffirebase-exporouter-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Ffirebase-exporouter-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Ffirebase-exporouter-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Ffirebase-exporouter-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aaronksaunders","download_url":"https://codeload.github.com/aaronksaunders/firebase-exporouter-app/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248812636,"owners_count":21165458,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["expo-firebase","expo-router-auth","expo-router-drawer","expo-router-tabs","firebase","firebase-auth","firebase-expo","firebase-react-native","react-native-firebase-auth"],"created_at":"2024-11-21T01:14:50.574Z","updated_at":"2025-04-14T02:43:48.391Z","avatar_url":"https://github.com/aaronksaunders.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Expo Firebase Authentication With Drawer and Nested Tab App 🔐\n\nA modern authentication application built with [Expo](https://expo.dev), featuring a complete authentication flow using [Firebase](https://firebase.google.com/docs) as the backend service.\n\n## Video Walkthrough\n- 🎥 https://youtu.be/Yva2Ep717v0?si=R_FhSdTMjMsJUViW\n\n## Features\n\n- 🔒 Complete authentication flow\n  - User sign-in\n  - User registration\n  - Secure session management\n  - Logout functionality\n- 📱 Modern UI with Tailwind CSS\n- 🎯 TypeScript for type safety\n- 📁 Organized file structure with Expo Router\n- 🔄 Context-based state management\n\n## Project Structure\n\n```\napp/\n├── (app)/                   # Protected app routes\n│   ├── (drawer)/           # Drawer navigation\n│   │   └── (tabs)/         # Tab navigation\n│   │       └── index.tsx   # Home screen\n│   └── _layout.tsx         # App layout with auth protection\n├── sign-in.tsx             # Sign in screen\n├── sign-up.tsx             # Sign up screen\n└── _layout.tsx             # Root layout\n```\n\n## Getting Started\n\n1. Clone the repository\n\n   ```bash\n   git clone [repository-url]\n   ```\n\n2. Install dependencies\n\n   ```bash\n   yarn\n   ```\n\n3. Set up environment variables\n   Create a `.env` file with your Firebase credentials:\n\n   ```env\n   EXPO_PUBLIC_FIREBASE_API_KEY=\n   EXPO_PUBLIC_FIREBASE_PROJECT_ID=\n   ```\n\n4. Start the development server\n   ```bash\n   npx expo start\n   ```\n\n## Project Setup\n\n### Metro Configuration\n\nThe project uses a custom Metro configuration to support both Firebase Auth and NativeWind (Tailwind CSS). Here's the setup in `metro.config.js`:\n\n```javascript\nconst { getDefaultConfig } = require(\"@expo/metro-config\");\nconst { withNativeWind } = require(\"nativewind/metro\");\n\nconst config = getDefaultConfig(__dirname);\nconfig.resolver.sourceExts = [...config.resolver.sourceExts, \"mjs\", \"cjs\"];\n\nmodule.exports = withNativeWind(config, { input: \"./global.css\" });\n```\n\nThis configuration:\n\n- Adds support for Firebase's CommonJS modules\n- Integrates NativeWind for Tailwind CSS support\n- Extends source extensions to include \"mjs\" and \"cjs\" files\n\n### Firebase Auth Setup\n\nFirebase Auth is configured with React Native persistence for maintaining authentication state:\n\n```typescript\nimport { initializeApp } from \"firebase/app\";\nimport { initializeAuth, getAuth } from \"firebase/auth\";\nimport AsyncStorage from \"@react-native-async-storage/async-storage\";\n\n// IGNORE IMPORT ERROR, this is a valid import, still investigating\nimport { getReactNativePersistence } from \"firebase/auth/dist/rn/persistence\";\n\n// Initialize Firebase with persistence\nlet auth;\ntry {\n  auth = getAuth();\n} catch {\n  auth = initializeAuth(app, {\n    persistence: getReactNativePersistence(AsyncStorage),\n  });\n}\n```\n\n## Technology Stack\n\n- **Frontend Framework**: Expo/React Native\n- **Styling**: Tailwind CSS (via NativeWind)\n- **Navigation**: Expo Router\n- **Backend**: Firebase\n- **Language**: TypeScript\n- **State Management**: React Context\n\n## Key Components\n\n- **Authentication Context**: Manages user session state and auth operations\n- **Protected Routes**: Automatic redirection for unauthenticated users\n- **Drawer Navigation**: Side menu for app navigation\n- **Tab Navigation**: Bottom tabs for main app sections\n\n## Development\n\nTo start developing:\n\n1. Run the development server:\n\n   ```bash\n   npx expo start\n   ```\n\n2. Choose your preferred development environment:\n   - Press `i` for iOS simulator\n   - Press `a` for Android emulator\n   - Scan QR code with Expo Go app for physical device\n\n## Contributing\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## Learn More\n\n- [Expo Documentation](https://docs.expo.dev/)\n- [Firebase Documentation](https://firebase.google.com/docs)\n- [NativeWind Documentation](https://www.nativewind.dev/getting-started/expo-router)\n- [Expo Router Documentation](https://docs.expo.dev/router/introduction/)\n\n## GitHub Issues Referenced\n\n- https://github.com/react-navigation/react-navigation/issues/12237\n\n## License\n\nThis project is licensed under the MIT License - see the LICENSE file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaronksaunders%2Ffirebase-exporouter-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faaronksaunders%2Ffirebase-exporouter-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaronksaunders%2Ffirebase-exporouter-app/lists"}