This is a small starter app which uses Firebase for authentication. Instructions are provided for integrating your own firebase instance to manage your own authentication flow.
This project was bootstrapped with Create React App.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
I've used 3 snapshot tests for each page which have their own routes as a starting point.
Runs eslint with airbnb rules with some exceptions specified in package.json.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
This project has firebase integrated with it, all the keys have been kept in an .env file which has not been commited to the project to keep them private.
To create your own variables open the Firebase console and sign in or sign up if you don't already have an account.
- Add a name to your project
- Choose if you want to enable analytics (not necessary)
- Once your project has been created click Continue
Get stated by click the web icon, add an App nickname and click register app.
Step 2 shows you the config variables. If you create a .env.local you add these to the keys below.
REACT_APP_FIREBASE_API_KEY=YOUR_API_KEY_HERE
REACT_APP_FIREBASE_AUTHDOMAIN=YOUR_AUTH_DOMAIN_HERE
REACT_APP_FIREBASE_PROJECT_ID=YOUR_PROJECT_HERE
REACT_APP_FIREBASE_STORAGE_BUCKET=YOUR_STORAGE_BUCKET_HERE
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=YOUR_MESSAGING_SENDER_ID_HERE
REACT_APP_FIREBASE_APP_ID=YOUR_FIREBASE_APP_ID
In order to sign up to your app you will need to enable Firebase Auth first.
Go to Firebase console under the Build tab, click on Authentication and click Get Started.
Select Email/Password as your sign-in provider as this is what this starter kit is configured to work with. Toggle the tab to Enable it.
You should now be able to Sign up and login using your app. You can check if your user has been created properly after sign up by checking in Authentication -> Users
These are some methods of deploying your React App: https://facebook.github.io/create-react-app/docs/deployment
Don't forget to add your Firebase variables as environment variables.
Here is my example deploymeny with Vercel: https://react-firebase-starter-oy0icb8ii-lizhard.vercel.app/