StackAuth React Native Expo Template

A complete React Native Expo template with StackAuth authentication integration for building mobile apps with secure user authentication on Android and iOS platforms.

🚀 Features

• Complete Authentication System: Login, signup, and user management
• OAuth Integration: Automatic OAuth provider detection and Sign in with Google support
• Team Management: Create teams, invite members, manage team profiles
• User Profiles: Comprehensive user profile management with image upload
• Cross-Platform: Works on both Android and iOS
• Modern UI: Clean and responsive user interface with Google Sign-In button
• Environment Configuration: Secure environment variable management

📱 Screenshots

🛠️ Tech Stack

• React Native - Cross-platform mobile development
• Expo - Development platform and tools
• StackAuth - Authentication and user management
• Google Sign-In - Official Google Sign-In integration
• TypeScript - Type-safe JavaScript
• React Navigation - Navigation library
• Expo Router - File-based routing

🏁 Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• Expo CLI
• EAS CLI (for building the app)
• StackAuth account

⚠️ Important: EAS Build Required

This app will NOT work with Expo Go due to native dependencies (Google Sign-In library). You must create an EAS development build to test the app on a physical device or simulator.

Quick EAS Setup:

# Install EAS CLI globally
npm install -g @expo/eas-cli

# Login to your Expo account
eas login

# Create a development build for iOS simulator
eas build --profile development --platform ios

# Or create a development build for Android
eas build --profile development --platform android

For more details, see the EAS Build documentation.

Installation

1. Clone the repository

   git clone https://github.com/bootssecurity/StackAuth-React-Native-Expo-Template.git
   cd StackAuth-React-Native-Expo-Template

2. Install dependencies

   npm install

3. Set up environment variables

   Create a .env file in the root directory and add your StackAuth configuration:

   # StackAuth Configuration
   EXPO_PUBLIC_STACK_PROJECT_ID=your_project_id_here
   EXPO_PUBLIC_STACK_PUBLISHABLE_CLIENT_KEY=your_publishable_key_here
   STACK_SERVER_SECRET_KEY=your_server_secret_key_here
   EXPO_PUBLIC_STACK_BASE_URL=your_stack_base_url
   
   # Team Invitation Configuration
   EXPO_PUBLIC_TEAM_INVITATION_BASE_URL=https://yourinvitatitonbaseurl/handler/team-invitation/
   
   # OAuth Configuration
   #OAuth redirect URI is needed for authentication (StackAuth currently doesnt accept deeplink uri so you need to create a redirect to your deeplink uri you need to redirect it to your deeplink:///oauth-callback/)
   EXPO_PUBLIC_OAUTH_REDIRECT_URI=https://yourbaseurl/api/oauthforapp 

   How to get StackAuth credentials:

   • Sign up at StackAuth
   • Create a new project
   • Copy your project ID, publishable client key, and server secret key from the dashboard

4. Start the development server

   npm start

   This will start the Expo development server. You can then:

   • Press i to open iOS simulator (requires EAS development build)
   • Press a to open Android emulator (requires EAS development build)
   • Install your EAS development build on a physical device and scan the QR code

   Note: Due to native dependencies, you cannot use Expo Go. You must use an EAS development build.

📁 Project Structure

├── app/                    # App screens and navigation
│   ├── (tabs)/            # Tab-based screens
│   └── _layout.tsx        # Root layout
├── components/            # Reusable components
│   ├── LoginScreen.tsx    # Authentication screen
│   ├── UserProfile.tsx    # User profile management
│   ├── TeamProfile.tsx    # Team management
│   └── ui/               # UI components
├── lib/                   # Utilities and configurations
│   └── stack-auth.ts     # StackAuth configuration
├── contexts/             # React contexts
│   └── AuthContext.tsx   # Authentication context
├── constants/            # App constants
├── hooks/               # Custom hooks
└── assets/              # Images, fonts, etc.

🔧 Configuration

StackAuth Setup

1. Create a StackAuth project at stack-auth.com
2. Configure your project settings:
   • Set up allowed domains
   • Configure OAuth providers (optional)
   • Set up team features if needed
3. Update the .env file with your credentials

Customization

• Colors: Modify constants/Colors.ts for theme colors
• Components: Customize UI components in the components/ directory
• Navigation: Update navigation structure in app/_layout.tsx

📚 Key Features

Authentication

• Email/password authentication
• OAuth integration with automatic provider detection
• Official Google Sign-In with native button styling
• Secure token management
• Protected routes
• Environment-based OAuth configuration

User Management

• User profile creation and editing
• Profile image upload with compression
• Account settings

Team Management

• Create and manage teams
• Invite team members via email
• Team member roles and permissions
• Team profile customization

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Contributors

• bootssecurity - Project maintainer

🙏 Acknowledgments

This template is built on top of amazing open-source projects:

• Stack Auth - The open-source Auth0/Clerk alternative that powers our authentication system
• Expo - The open-source framework for making universal native apps with React

Special thanks to these projects and their maintainers for making modern mobile development accessible and powerful.

📄 License

This project is licensed under the MIT License.

🔗 Links

• Repository
• StackAuth Documentation
• Expo Documentation
• React Native Documentation

🆘 Support

If you encounter any issues or have questions, please:

1. Check the StackAuth documentation
2. Open an issue on GitHub
3. Contact the maintainer at bootssecurity

---

Happy coding! 🎉