React Native Expo Template with Supertokens Authentication

This project template provides a starting point for developing a React Native application with Expo and Supertokens to authenticate. It includes prebuilt screens for various authentication functionalities such as sign in, sign up, change password, change email, delete account, and forgot password.

Demo

Sign in with Email and Password:

Sign in with Github:

Key Features:

• Sign in with Apple, GitHub, Google, or Email and Password: The authentication flow supports multiple sign-in options using Supertokens.
• Role Management: You can manage user roles and permissions within your application using Supertokens.
• Internationalization: It includes built-in support for internationalization with typesafe i18next.
• Deep Linking: Connect your app to a website by adding support for deep linking.
• Expo Router v2: It utilizes Expo Router, a versatile routing solution for navigating between screens in your application.
• Tamagui: You can leverage the Tamagui library within this template to enhance the UI and user experience of your React Native app.
• mobx: It uses mobx for state management.
• iOS Support: The template ensures compatibility and support for iOS devices.

Getting Started

To use this template, follow the steps below:

1. Clone the repository
   git clone https://github.com/lukesthl/supertokens-expo-template
2. Install dependencies
   pnpm install
3. Configure the Supertokens Backend with your authentication providers (Apple, GitHub, Google, etc.)
   Backend Setup Guide
4. Setup environment variables:

• cp ./apps/expo/.env.example ./apps/expo/.env

• Update the necessary environment variables for Supertokens configuration. For example:

  EXPO_PUBLIC_API_URL=<your-api-url>
  EXPO_PUBLIC_GITHUB_CLIENT_ID=<your-github-client-id>
  ASSOCIATED_DOMAIN=<applinks:your-api-url> // for deep linking (without https://)
  GOOGLE_SERVICES_FILE=<path-to-google-services.json>
  GOOGLE_SIGNIN_IOS_CLIENT_ID=<your-google-signin-ios-client-id>
  

5. cd apps/expo
6. EAS Configure
   eas build:configure
7. Setup the secrets needed in app.config.ts in Expo's Website
   https://expo.dev/accounts/%5Baccount%5D/projects/%5Bproject%5D/secrets
8. EAS Build Setup (Simulator)
   eas build -p ios --profile simulator
9. Select the simulator build and install it on the simulator
   eas build:run
10. Start Expo Dev Client
    cd ../../ && pnpm native

Customizing the Prebuilt Screens

The template comes with prebuilt screens for various authentication functionalities. You can customize these screens based on your application's branding and design requirements. The relevant files can be found in the /apps/expo/app/(app)/auth directory.

Known Issues

• expo router deep link broken when app is running in foreground: expo/router#818

Folder Structure

The main apps are:

apps (root)

• expo (native)
• api (backend)

packages shared packages across apps (when ui is shared in the future, it will be here)

Roadmap

• Add support for Android devices (Deep Linking, Sign in with Apple, etc.)
• Add support for Expo Web
• Support account linking

Learn more

• Supertokens Documentation
• Expo Documentation
• Tamagui Library