Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/lukesthl/expo-supertokens

📱 A template for your next React Native project: Expo, Supertokens Auth, Tamagui, EAS and expo router.
https://github.com/lukesthl/expo-supertokens

authentication eas expo react supertokens tamagui template

Last synced: 6 days ago
JSON representation

📱 A template for your next React Native project: Expo, Supertokens Auth, Tamagui, EAS and expo router.

Awesome Lists containing this project

README 

        


      




# 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**](https://supertokens.com/docs/thirdpartyemailpassword/introduction): The authentication flow supports multiple sign-in options using Supertokens.

- [**Role Management**](https://supertokens.com/docs/userroles/introduction): 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**](https://docs.expo.dev/guides/deep-linking/): Connect your app to a website by adding support for deep linking.

- [**Expo Router v2**](https://docs.expo.dev/routing/introduction/): It utilizes Expo Router, a versatile routing solution for navigating between screens in your application.

- [**Tamagui**](https://tamagui.dev/): You can leverage the Tamagui library within this template to enhance the UI and user experience of your React Native app.

- [**mobx**](https://mobx.js.org/README.html): 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/expo-supertokens`

2. Install dependencies  

   `npm install`

3. Configure the Supertokens Backend with your authentication providers (Apple, GitHub, Google, etc.)

   
 [**Backend Setup Guide**](https://github.com/lukesthl/nestjs-supertokens)

4. Setup environment variables:



- `cp .env.example .env`

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



  ```

  EXPO_PUBLIC_API_URL=

  EXPO_PUBLIC_GITHUB_CLIENT_ID=

  ASSOCIATED_DOMAIN= // for deep linking (without https://)

  GOOGLE_SERVICES_FILE=

  GOOGLE_SIGNIN_IOS_CLIENT_ID=

  ```



5. EAS Configure  

   `eas build:configure`

6. Setup the secrets needed in app.config.ts in Expo's Website  

   https://expo.dev/accounts/%5Baccount%5D/projects/%5Bproject%5D/secrets

7. EAS Build Setup (Simulator)  

   `eas build -p ios --profile simulator`

8. Select the simulator build and install it on the simulator  

   `eas build:run`

9. Start Expo Dev Client  

   `npx expo start --dev-client`



### 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 `app/(app)/auth` directory.



### Known Issues



- expo router deep link broken when app is running in foreground: https://github.com/expo/router/issues/818



## Roadmap



- [ ] Add support for Android devices (Deep Linking, Sign in with Apple, etc.)

- [ ] Add support for Expo Web



## Learn more



- [Supertokens Documentation](https://supertokens.io/docs/)

- [Expo Documentation](https://docs.expo.dev/)

- [Tamagui Library](https://tamagui.org/)