This is the launching point for many of my latest projects. Rather than rebuilding each new project from scratch, just clone this repo and adjust to fit your needs.
Built to be the ideal setup for new apps.
Includes a Login-state & Home pages with Settings
- Works with iOS & Android (uses React Native + Expo)
- Google + Firebase Authentication (Google + Apple sign in)
- Correctly saves & handles refresh tokens with Firebase
- Firestore Database connection
- React Navigation (best in class)
- Redux Store + Thunk + Persistent storage (local & online data layer)
- Light & Dark themes
- Google Analytics w/ Page & Event tracking
- Updating User Preferences locally and in Database
- Share w/ a friend feature
- Rate on App/Google Store feature
- Loading states w/ Activity Indication
- Componentized views (change once, update everywhere)
- SVG Rendering
- Spline 3d rendering (just for fun!)
This is a work in progress and is maintained for my own needs first.
Starter App is built with Firebase using Google and Apple Authentication. This can easily be modified, but to run the initial project you will first need to configure Firebase and Google Cloud Platform to handle Authentication.
First, clone the project and give it a name
git clone https://github.com/tjcages/starter-app {your-project-name}
Install dependencies
yarn
Then run with
npx expo start
And open the iOS or Android simulator with i
or a
, respectively.
Initially the app should run fine using my existing Firebase & Google Cloud Platform API Keys (these are for development purposes anyway – not used in production). Please replace these credentials with your own to be sure you have full control over your own data and authenticated users.
-
Give this project a name, make sure Google Analytics is checked, and create the project.
-
Once the project is initialized, click
Web
to add Firebase to the app. Give a nickname to the web app like{your-project-name}-web
. -
Copy the
firebaseConfig
object and paste this object in theconfig.js
file in your code.
It should look like this once you're done (with your own values):
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
export const firebaseConfig = {
apiKey: "AIzaSyDPLhqimd-1wINpjOa9c9VQrbUIJHundRQ",
authDomain: "splice-282b0.firebaseapp.com",
projectId: "splice-282b0",
storageBucket: "splice-282b0.appspot.com",
messagingSenderId: "594942079912",
appId: "1:594942079912:web:85b5a1a9561a4b919de39d",
measurementId: "G-YFG3EJZG8P"
};
- Navigate to the
app.json
file in your code and replace the current values forconfig.firebase
with your new values.
If you skip this step, Google Analytics will not initiate properly.
-
Click
Continue to console
. -
Navigate to your Project's Settings by clicking the gear icon in the Navigation Menu. Scroll down to
Your apps
and clickAdd app
. Select iOS, enter the Bundle ID as it is in theapp.json
, give it a nickname (like "{your-project-name}-iOS"), and clickRegister App
. Download the config file titleGoogleService-Info.plist
and replace the existing file in your code with this file. Click Next until you return back to the console.
Repeat steps, this time for Android (downloading the
google-services.json
file) and replacing in your code for Android apps.
- Head to the Authentication page by clicking it in the Navigation menu.
- First, click "Get started" to initialize Authentication. You will now see the list of selected Authentication providers. For this project, we will use Google and Apple sign in.
- Click
Google
andEnable
thenSave
. ClickAdd a new provider
thenApple
andEnable
thenSave
.
- Sign into Google Cloud Platform. In the top left, click on your current project then
New Project
and give it a name. The project will initialize. - Select the Navigation menu,
APIs & Services
, thenOAuth consent screen
. SelectExternal
andCreate
. Enter your app's name, your email, a logo if applicable, a link to the application home page (or any link), link for privacy policy, and a link for terms of service. - Click
Add Domain
under Authorized domains. Add the same application home page you added earlier as well as "expo.io". Finally, add your Developer contact information and clickSave and Continue
. ClickSave and Continue
again for each of the next steps until complete. - Now we will go to the Credentials tab in the Navigation menu. Click
Create Credentials
andOAuth Client ID
. SelectWeb Application
forApplication type
and give it a name like "Web Client". ForAuthorized JavaScript origins
clickAdd URI
and add "https://auth.expo.io". ForAuthorized redirect URIs
clickAdd URI
and add "https://auth.expo.io/@{your-expo-username}/{your-project-name}" like "https://auth.expo.io/@tylerjcagle/starter". - Finally click
Create
to create the OAuth Client. - You should be presented with a popup that contains your newly created Client ID. Copy this key and navigate to
screens/Login.js
. Replace the value ofclientId
in theGoogle.useIdTokenAuthRequest
request with your copied key. - Navigate back to the Authentication page in Firebase and click on the Edit icon for Google. Expand the
Web SDK configuration
section and replace the existingWeb client ID
key with your new key. Navigate back to the popup and also copy theClient Secret
key. Paste this value forWeb client secret
for your Google Provider in Firebase Authentication. ClickSave
.
Note: Firebase sometimes shows an 'Error updating Google' message – the key should still be saved properly.
- Now we will repeat the process to create an OAuth Client ID for iOS this time – keep in mind, you will also need to repeat the process for Android for Google Auth to correctly work with that platform as well. Follow the same initial steps as before, entering the Bundle ID and ensuring it matches that in your
app.json
. 9. ClickCreate
.
You do not need to replace any Firebase keys for iOS or Android – only Web
- Copy the newly created Client ID key and navigate back to
screens/Login.js
. Replace the value ofiosClientId
in theGoogle.useIdTokenAuthRequest
request with your copied iOS key.
Perform the same steps (except adding
androidClientId
) for Android.
Rerun your app again using
npx expo start
If steps were followed exactly, you should notice an error 'Could not reach Cloud Firestore backend', but the app should still run.
Head back to Firebase and open the Firestore Database page from the Navigation menu. Click Create database
and select Start in test mode
. Select a Cloud Firestore location and click Enable
.
You will want to modify these rules before releasing to production, but for now they are fine.
Refresh the app with r
and the error should go away.
Your app is now ready to Login & begin building!! 🚀
Currently, starter data is stored in api/settings.js
for basic Settings functionality. It is recommended to move these values into Firestore so they may be modified on the fly. An example setup is below:
You should configure your Firestore based on the provided objects in
settings.js
for Settings, Policies, Appearance, and Notifications.
If you've made it this far, then thanks for sticking around! If you found this project useful or you have any feedback you can reach me on Twitter. Hope you enjoy!! 🎉🎉
Built by Tyler J. ✌️