A simple login/sign up platform using React + Auth0 with Heroku deployment (Part 1 of 3 — Setup)
I’ve recently been fascinated with React and built a referral platform for a friend’s startup. So I thought I should share my way of quickly setting up a simple login/signup platform with Auth0 and deploying it to Heroku.
The intention of this guide is for newcomers or startups who wants to quickly bring up a platform to get users. It does not follow any general best practices but serves as a guide to get something up and running up quickly.
Lastly, this article has been written in a way without detailed explanation why it is done in a certain way. This is not the only way to do things but one of the ways to get some traction on your current project. If you run into any issues, I’d be happy to assist but Google is always your best companion in the digital world.
I’ve written it in a way for mainly beginners to follow the steps and also it serves as a guide for more advanced users to how to set it up from scratch. The setup process will take approximately 30–45 minutes.
At the time of writing the following tools/frameworks were used and working.
- react-vanilla-boilerplate-router v1.0 (boilerplate with create-react-app and react-router 4.0beta0.3)
- Auth0.js v8.1.2
- Your favourite code editor (I’m using VS Code)
- Heroku
Disclaimer : there will be a routing issue at deployment and if you find it, it is intentionally not covered in this guide.
If you are reading this 1 or 2 years from the time of this article was published, it is highly likely that the following steps could be outdated. I will try to update it as often as I could so tread with caution !
SETTING IT ALL UP
Heroku setup
- Log into your heroku account
- Create a new app
3. Go to Settings and add the following code under Buildpacks to allow us to deploy this react app later.
https://github.com/mars/create-react-app-buildpack.git
4. Go to Overview, under the Installed add-ons section, click on Configure Add-ons.
5. Search for mlab, and hit Enter to add mlab MongoDB. (Note: you may need to supply your credit card details to enable this feature. Don’t worry there is a free plan for mLab MongoDB)
6. Ensure the plan Sandbox-Free is selected and click on Provision (You could select a paid plan if you want to but for this example we will stick to the free plan)
7. Almost there ! Go to Settings, under Config Variables, click on Reveal Config Vars.
8. Copy the MONGODB_URI value. It will be used later.
9. The next few steps, step 10 onwards, are only applicable after you have completed all Auth0 setup steps. So come back to it when you have completed them.
10. With the domain ID and client ID, go to Settings and click on Reveal Config Vars.
11. Add your auth0 domain ID and client ID, as a key-value pair.
12. We are nearing the finishing line ! Take note of the Heroku’s git repository URL. This will be used later on down the track.
Now your deployment setup should be ready for a launch to Mars !
Auth0 setup
- Go to auth0.com and sign up for an account.
- Once logged in, go to Clients and Create Client
3. Give your app a name, select Single Page Web Applications, and click on Create.
4. Next, from the side menu panel, select Connections > Database and click on Create DB Connection.
5. Give your database a name and click on Create. In this case I’ve named it react-auth0
6. Click on Custom Database, and toggle Use my own database to enable you to use your own custom database.
7. Under the Database Action Scripts section, with the Create tab, select MongoDB under the Templates drop list.
8. Remember step 8 of the Heroku setup where you copied the value of MONGODB_URI ? Replace the mongoDB URI in the template. Then click on Save.
9. Test the script by clicking on Try
10. Enter a email and password to create an account. If successful, you should see a confirmation.
10. Lastly, repeat steps 7 to 9 with the remaining tabs : Login, Verify, Change Password and Delete. (You can ignore the tab Get User for now)
11. We are almost there. Now to hook up your Auth0 client with the custom database ! In your side menu panel, click on Clients and select the client created in Step 2 called react-auth0
12. Select the Settings tab (it is right under the name of the name of the app name). Take note of the client ID and Domain as this will serve as your environment variables in Heroku.
13. In the callback URLs enter http://localhost:9000/ (to allow testing on your local machine) and your actual app link once it is deployed. In our case it would be https://react-auth0-example.herokuapp.com/. Save your settings.
14. Go to the Connections tab, and enable the connection react-auth0
14. Go to step 10 of the Heroku setup to complete the final few steps.
Take a deep breathe, rest and when you are ready we are midway through our journey.
Next we do some React code ! Click here for the next part of this publication.
